import { Link } from "react-router-dom";
import { Users, Building2, Coins, ArrowUpRight, Download } from "lucide-react";
import { useTenant } from "../shell/AppShell";
import { fmtCredits, ROLE_LABEL } from "../api";
import { Badge } from "../ui";

// 概览：当前组织 + 我的角色 + 余额，和去往各功能的入口。桌面端下载指引放这
// （薄 Web 面的定位就是「装桌面端之前能用的那些事」）。
export function Overview() {
  const { ctx, tenants } = useTenant();

  const cards = [
    { to: "/team", icon: Users, title: "团队", desc: "邀请成员、分配角色" },
    { to: "/orgs", icon: Building2, title: "组织", desc: `我所属的 ${tenants.length} 个组织` },
    { to: "/usage", icon: Coins, title: "用量与账单", desc: "余额、消耗趋势与明细" },
  ];

  return (
    <div className="mx-auto max-w-3xl p-8">
      <h1 className="text-xl font-semibold tracking-tight text-slate-100">
        {ctx?.tenant?.name ?? "…"}
      </h1>
      <div className="mt-2 flex items-center gap-2 text-xs text-slate-500">
        {ctx?.role && <Badge tone="accent">{ROLE_LABEL[ctx.role] ?? ctx.role}</Badge>}
        <span>套餐 {ctx?.tenant?.plan ?? "-"}</span>
        <span>·</span>
        <span>
          余额 <span className="tabular-nums text-slate-300">{fmtCredits(ctx?.credit_balance_micro ?? 0)}</span> 积分
        </span>
      </div>

      <div className="mt-8 grid grid-cols-1 gap-3 md:grid-cols-3">
        {cards.map((c) => {
          const Icon = c.icon;
          return (
            <Link key={c.to} to={c.to}
              className="group flex flex-col rounded-xl border border-line bg-ink-900 p-4 shadow-card transition-colors hover:border-brand/40">
              <div className="flex items-center justify-between">
                <Icon className="h-5 w-5 text-slate-300 transition-colors group-hover:text-brand-400" strokeWidth={1.8} />
                <ArrowUpRight className="h-4 w-4 text-slate-700 transition-colors group-hover:text-slate-400" />
              </div>
              <div className="mt-3 text-sm font-medium text-slate-100">{c.title}</div>
              <div className="mt-1 text-xs text-slate-500">{c.desc}</div>
            </Link>
          );
        })}
      </div>

      <div className="mt-8 flex items-start gap-3 rounded-xl border border-line bg-ink-900 p-4">
        <Download className="mt-0.5 h-4 w-4 shrink-0 text-slate-500" />
        <div className="text-xs leading-relaxed text-slate-500">
          <span className="text-slate-300">日常工作在桌面端进行。</span>
          编排智能体、知识库问答、报告生成都在 sundynix 桌面应用里——
          <a className="text-brand-400 hover:underline" href="https://github.com/blizzardzhang/sundynix-agentix/releases/latest" target="_blank" rel="noreferrer">
            下载最新版
          </a>
          ，用当前账号登录即可。
        </div>
      </div>
    </div>
  );
}