import { useEffect, useMemo, useState } from "react";
import { listTenants, createTenant, listMembers, addMember, setMemberRole, removeMember, setSharedBilling, type TenantRow, type Member } from "../api";

// 管理端「租户 & 用户」= 多成员租户管理（平台运维口径）：租户目录 + 每租户成员增改删。
// 全真数据：GET/POST /admin/tenants、/admin/tenants/:id/members。

const ROLES = ["owner", "admin", "member", "viewer", "billing_admin"];
const ROLE_CN: Record<string, string> = { owner: "所有者", admin: "管理员", member: "成员", viewer: "只读", billing_admin: "计费管理" };
const credits = (m: number) => (m / 1_000_000).toLocaleString("zh-CN", { maximumFractionDigits: 2 });

export function TenantsPage() {
  const [tenants, setTenants] = useState<TenantRow[]>([]);
  const [selId, setSelId] = useState<string>("");
  const [members, setMembers] = useState<Member[]>([]);
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState("");

  // 建租户表单
  const [tName, setTName] = useState("");
  const [tSlug, setTSlug] = useState("");
  const [tOwner, setTOwner] = useState("");
  const [creating, setCreating] = useState(false);

  // 加成员表单
  const [mEmail, setMEmail] = useState("");
  const [mRole, setMRole] = useState("member");
  const [adding, setAdding] = useState(false);
  const [mErr, setMErr] = useState("");

  const selected = useMemo(() => tenants.find((t) => t.id === selId) ?? null, [tenants, selId]);

  const loadTenants = async (keepSel = true) => {
    try {
      const rows = await listTenants();
      setTenants(rows);
      if (!keepSel || !rows.find((t) => t.id === selId)) setSelId(rows[0]?.id ?? "");
      setErr("");
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setLoading(false);
    }
  };
  const loadMembers = async (id: string) => {
    if (!id) {
      setMembers([]);
      return;
    }
    try {
      setMembers(await listMembers(id));
    } catch (e) {
      setMErr((e as Error).message);
    }
  };

  useEffect(() => {
    void loadTenants();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useEffect(() => {
    void loadMembers(selId);
    setMErr("");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selId]);

  const onCreate = async () => {
    if (!tName.trim() || !tSlug.trim()) return;
    setCreating(true);
    try {
      await createTenant(tName.trim(), tSlug.trim(), tOwner.trim() || undefined);
      setTName("");
      setTSlug("");
      setTOwner("");
      await loadTenants();
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setCreating(false);
    }
  };

  const onAdd = async () => {
    if (!mEmail.trim() || !selId) return;
    setAdding(true);
    setMErr("");
    try {
      await addMember(selId, mEmail.trim(), mRole);
      setMEmail("");
      await Promise.all([loadMembers(selId), loadTenants()]);
    } catch (e) {
      setMErr((e as Error).message);
    } finally {
      setAdding(false);
    }
  };
  const onRole = async (uid: string, role: string) => {
    try {
      await setMemberRole(selId, uid, role);
      await loadMembers(selId);
    } catch (e) {
      setMErr((e as Error).message);
    }
  };
  const onRemove = async (uid: string, email: string) => {
    if (!window.confirm(`确定从「${selected?.name}」移除 ${email}？`)) return;
    try {
      await removeMember(selId, uid);
      await Promise.all([loadMembers(selId), loadTenants()]);
    } catch (e) {
      setMErr((e as Error).message);
    }
  };
  const onToggleShared = async (on: boolean) => {
    try {
      await setSharedBilling(selId, on);
      await loadTenants();
    } catch (e) {
      setMErr((e as Error).message);
    }
  };

  if (loading) return <div className="text-sm text-gray-400">加载租户中…</div>;

  return (
    <div className="space-y-4">
      {err && <div className="rounded-lg border border-rose-100 bg-rose-50 px-3 py-2 text-xs text-rose-600">{err}</div>}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {/* 左：租户目录 + 建租户 */}
        <div className="space-y-6">
          <section className="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
            <div className="mb-3 flex items-center justify-between">
              <h3 className="text-sm font-semibold text-gray-700">租户</h3>
              <span className="text-[10px] text-gray-400">{tenants.length} 个 · tenant_id 全链路隔离</span>
            </div>
            <div className="max-h-[420px] space-y-2 overflow-y-auto pr-1">
              {tenants.map((t) => (
                <button
                  key={t.id}
                  onClick={() => setSelId(t.id)}
                  className={`w-full rounded-lg border p-3 text-left transition-all ${selId === t.id ? "border-violet-500 bg-violet-50/40 shadow-sm" : "border-gray-100 hover:bg-gray-50/60"}`}
                >
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-bold text-gray-800">{t.name}</span>
                    <span className={`rounded px-1.5 py-0.5 text-[9px] font-medium ${t.plan === "free" ? "bg-gray-100 text-gray-500" : "bg-violet-100 text-violet-700"}`}>{t.plan}</span>
                  </div>
                  <div className="mt-2 flex items-center justify-between text-[10px] text-gray-400">
                    <span>{t.members} 成员 · <span className="font-mono">{t.slug}</span></span>
                    <span className="tabular-nums text-gray-500">{credits(t.credit_balance_micro)} 积分</span>
                  </div>
                </button>
              ))}
            </div>
          </section>

          <section className="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
            <h3 className="mb-3 text-sm font-semibold text-gray-700">新建租户</h3>
            <div className="space-y-3">
              <input className="w-full rounded border px-2 py-1.5 text-xs focus:border-violet-500 focus:outline-none" placeholder="租户名称（如：华泰投行部）" value={tName} onChange={(e) => setTName(e.target.value)} />
              <input className="w-full rounded border px-2 py-1.5 text-xs font-mono focus:border-violet-500 focus:outline-none" placeholder="唯一标识 slug（如 ht-ib）" value={tSlug} onChange={(e) => setTSlug(e.target.value)} />
              <input className="w-full rounded border px-2 py-1.5 text-xs focus:border-violet-500 focus:outline-none" placeholder="owner 邮箱（可选，须已注册）" value={tOwner} onChange={(e) => setTOwner(e.target.value)} />
              <button onClick={() => void onCreate()} disabled={creating || !tName.trim() || !tSlug.trim()} className="w-full rounded bg-violet-600 py-1.5 text-xs font-semibold text-white hover:bg-violet-700 disabled:opacity-40">
                {creating ? "创建中…" : "创建租户"}
              </button>
            </div>
          </section>
        </div>

        {/* 右：选定租户的成员 */}
        <div className="lg:col-span-2">
          <section className="min-h-[400px] rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
            {!selected ? (
              <div className="flex h-64 items-center justify-center text-xs text-gray-400">左侧选择一个租户查看成员</div>
            ) : (
              <>
                <div className="mb-4 flex items-center justify-between border-b pb-3">
                  <div>
                    <h4 className="text-sm font-semibold text-gray-700">{selected.name} · 成员</h4>
                    <p className="text-[11px] text-gray-400">成员共享该租户的积分池与用量口径 · slug {selected.slug}</p>
                  </div>
                  <span className="tabular-nums text-xs text-gray-500">{credits(selected.credit_balance_micro)} 积分</span>
                </div>

                {/* 共享计费开关 */}
                <label className="mb-3 flex cursor-pointer items-center gap-2 rounded-lg border border-gray-100 bg-gray-50/50 px-3 py-2 text-xs text-gray-600">
                  <input type="checkbox" checked={selected.shared_billing} onChange={(e) => void onToggleShared(e.target.checked)} className="h-4 w-4 accent-violet-600" />
                  <span className="font-medium text-gray-700">共享计费</span>
                  <span className="text-gray-400">开：成员消耗计本租户积分池；关：成员各计个人池（owner 恒计本租户）</span>
                </label>

                {/* 加成员 */}
                <div className="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-violet-100 bg-violet-50/30 p-3">
                  <input className="flex-1 rounded border bg-white px-2 py-1.5 text-xs focus:border-violet-500 focus:outline-none" placeholder="按邮箱加入已注册用户" value={mEmail} onChange={(e) => setMEmail(e.target.value)} />
                  <select className="rounded border bg-white px-2 py-1.5 text-xs text-gray-700 focus:border-violet-500 focus:outline-none" value={mRole} onChange={(e) => setMRole(e.target.value)}>
                    {ROLES.filter((r) => r !== "owner").map((r) => (
                      <option key={r} value={r}>{ROLE_CN[r]}</option>
                    ))}
                  </select>
                  <button onClick={() => void onAdd()} disabled={adding || !mEmail.trim()} className="rounded bg-violet-600 px-3 py-1.5 text-xs text-white hover:bg-violet-700 disabled:opacity-40">
                    {adding ? "添加中…" : "加入"}
                  </button>
                </div>
                {mErr && <div className="mb-3 text-[11px] text-rose-600">{mErr}</div>}

                {members.length === 0 ? (
                  <div className="flex h-40 items-center justify-center text-xs text-gray-400">暂无成员</div>
                ) : (
                  <div className="overflow-x-auto">
                    <table className="w-full text-sm">
                      <thead>
                        <tr className="border-b text-left text-[11px] uppercase tracking-wide text-gray-400">
                          <th className="py-2 pr-3 font-medium">成员</th>
                          <th className="pr-3 font-medium">角色</th>
                          <th className="pr-3 font-medium">状态</th>
                          <th className="text-right font-medium">操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        {members.map((m) => {
                          const isOwner = m.role === "owner";
                          return (
                            <tr key={m.user_id} className="border-b border-gray-50 last:border-0">
                              <td className="py-2 pr-3">
                                <div className="font-medium text-gray-800">{m.name || m.email}</div>
                                <div className="font-mono text-[10px] text-gray-400">{m.email}</div>
                              </td>
                              <td className="pr-3">
                                {isOwner ? (
                                  <span className="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-700">所有者</span>
                                ) : (
                                  <select value={m.role} onChange={(e) => void onRole(m.user_id, e.target.value)} className="rounded border bg-white px-1.5 py-0.5 text-xs text-gray-700 focus:border-violet-500 focus:outline-none">
                                    {ROLES.filter((r) => r !== "owner").map((r) => (
                                      <option key={r} value={r}>{ROLE_CN[r]}</option>
                                    ))}
                                  </select>
                                )}
                              </td>
                              <td className="pr-3">
                                <span className="rounded-full bg-emerald-100 px-1.5 py-0.5 text-[9px] font-bold uppercase text-emerald-700">{m.status}</span>
                              </td>
                              <td className="text-right">
                                {isOwner ? (
                                  <span className="text-[10px] text-gray-300">—</span>
                                ) : (
                                  <button onClick={() => void onRemove(m.user_id, m.email)} className="rounded border border-rose-100 px-2 py-1 text-[10px] text-rose-600 hover:bg-rose-50">移除</button>
                                )}
                              </td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                )}
              </>
            )}
          </section>
        </div>
      </div>
    </div>
  );
}
