www_site/components/admin/users.tsx

"use client";

import { FormEvent, useEffect, useState } from "react";
import {
  adjustQuota,
  changeUserStatus,
  createUser,
  deleteUser,
  fetchCsrf,
  grantMembership,
  getUserDetail,
  getUserQuota,
  listUsers,
  revokeMembership,
  updateUserProfile,
  type AdminUser,
  type AdminUserDetail,
} from "@/lib/admin";
import { BrandIcon } from "@/components/brand-icon";
import { StatusCard } from "@/components/ui";

type UserRow = AdminUser;

export function UsersPanel() {
  const [rows, setRows] = useState<UserRow[]>([]);
  const [total, setTotal] = useState(0);
  const [pages, setPages] = useState(1);
  const [page, setPage] = useState(1);
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [status, setStatus] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [selected, setSelected] = useState<AdminUserDetail | null>(null);
  const [notice, setNotice] = useState("");
  const [showCreate, setShowCreate] = useState(false);

  async function load(pageNum = page) {
    setLoading(true);
    setError("");
    try {
      const res = await listUsers({ email, phone, status, page: pageNum, limit: 20 });
      setRows(res.items);
      setTotal(res.total);
      setPages(res.pages);
      setPage(res.page);
    } catch (e) {
      setError(e instanceof Error ? e.message : "加载失败");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    void load(1);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function openDetail(id: string) {
    setError("");
    try {
      const detail = await getUserDetail(id);
      setSelected(detail);
    } catch (e) {
      setError(e instanceof Error ? e.message : "加载详情失败");
    }
  }

  return (
    <div className="space-y-6">
      <div className="grid gap-5 md:grid-cols-3">
        <StatusCard title="用户总数" description={`${total.toLocaleString()} 个`} />
        <StatusCard title="当前页" description={`${rows.length} 条`} tone="info" />
        <StatusCard title="总页数" description={`${pages} 页`} />
      </div>

      <button className="button-secondary" onClick={() => setShowCreate((value) => !value)} type="button"><BrandIcon />{showCreate ? "取消添加" : "手动添加用户"}</button>
      {showCreate ? <CreateUserPanel onCreated={() => { setShowCreate(false); setNotice("用户已创建"); void load(1); }} /> : null}

      <div className="rounded-2xl border border-line bg-panel/50">
        <div className="grid gap-3 border-b border-line p-5 sm:grid-cols-[1fr_1fr_1fr_auto_auto]">
          <input aria-label="按邮箱筛选" className="field-input" onChange={(e) => setEmail(e.target.value)} placeholder="按邮箱筛选" value={email} />
          <input aria-label="按手机号筛选" className="field-input" onChange={(e) => setPhone(e.target.value)} placeholder="按手机号筛选" value={phone} />
          <select aria-label="按状态筛选" className="field-input" onChange={(e) => setStatus(e.target.value)} value={status}>
            <option value="">全部状态</option>
            <option value="active">正常</option>
            <option value="disabled">已禁用</option>
          </select>
          <button className="button-secondary" onClick={() => void load(1)} type="button">
            <BrandIcon />查询
          </button>
          <button className="button-ghost" onClick={() => { setEmail(""); setPhone(""); setStatus(""); void load(1); }} type="button">
            <BrandIcon />重置
          </button>
        </div>

        {error ? <div className="m-5 rounded-lg border border-danger/30 bg-danger/10 p-3 text-sm text-danger">{error}</div> : null}

        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm">
            <thead className="border-b border-line text-xs uppercase tracking-[0.14em] text-subtle">
              <tr>
                <th className="px-5 py-3">用户</th>
                <th className="px-5 py-3">有效 Plan</th>
                <th className="px-5 py-3">角色</th>
                <th className="px-5 py-3">状态</th>
                <th className="px-5 py-3">注册时间</th>
                <th className="px-5 py-3"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-line">
              {loading ? (
                <tr><td className="px-5 py-8 text-center text-muted" colSpan={6}>加载中…</td></tr>
              ) : rows.length === 0 ? (
                <tr><td className="px-5 py-8 text-center text-muted" colSpan={6}>无匹配用户</td></tr>
              ) : (
                rows.map((row) => (
                  <tr className="hover:bg-panel/40" key={row.id}>
                    <td className="px-5 py-3">
                      <p className="font-semibold text-copy">{row.username}</p>
                      <p className="text-xs text-subtle">{row.email ?? "无邮箱"} · {row.phone ?? "无手机号"}</p>
                    </td>
                    <td className="px-5 py-3 text-cyan">{row.effective_plan.toUpperCase()}</td>
                    <td className="px-5 py-3">{row.role}</td>
                    <td className="px-5 py-3">
                      <span className={row.status === "active" ? "text-success" : "text-danger"}>{row.status === "active" ? "正常" : "已禁用"}</span>
                    </td>
                    <td className="px-5 py-3 text-subtle">{new Date(row.created_at).toLocaleDateString()}</td>
                    <td className="px-5 py-3">
                      <button className="text-sm font-semibold text-cyan hover:text-copy" onClick={() => void openDetail(row.id)} type="button">
                        详情
                      </button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        <div className="flex items-center justify-between gap-3 border-t border-line p-4 text-sm">
          <span className="text-subtle">第 {page} / {pages} 页</span>
          <div className="flex gap-2">
            <button className="button-ghost disabled:opacity-50" disabled={page <= 1} onClick={() => void load(Math.max(1, page - 1))} type="button">
              <BrandIcon />上一页
            </button>
            <button className="button-ghost disabled:opacity-50" disabled={page >= pages} onClick={() => void load(page + 1)} type="button">
              <BrandIcon />下一页
            </button>
          </div>
        </div>
      </div>

      {selected ? <UserDetailPanel detail={selected} onRefresh={() => void openDetail(selected.user.id)} setNotice={setNotice} onClose={() => setSelected(null)} /> : null}
      {notice ? <div className="rounded-xl border border-success/30 bg-success/10 p-4 text-sm text-success" role="status">{notice}</div> : null}
    </div>
  );
}

function UserDetailPanel({ detail, onRefresh, setNotice, onClose }: { detail: AdminUserDetail; onRefresh: () => void; setNotice: (msg: string) => void; onClose: () => void }) {
  const [csrf, setCsrf] = useState("");
  const [reason, setReason] = useState("");
  const [vipDays, setVipDays] = useState("30");
  const [amount, setAmount] = useState("100");
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState("");
  const [username, setUsername] = useState(detail.user.username);
  const [email, setEmail] = useState(detail.user.email ?? "");
  const [phone, setPhone] = useState(detail.user.phone ?? "");
  const [emailVerified, setEmailVerified] = useState(detail.user.email_verified);
  const [phoneVerified, setPhoneVerified] = useState(detail.user.phone_verified);

  useEffect(() => {
    void fetchCsrf().then(setCsrf);
  }, []);

  async function run(fn: () => Promise<unknown>, okMsg: string) {
    if (!reason.trim()) { setMessage("请填写原因"); return; }
    setBusy(true);
    setMessage("");
    try {
      await fn();
      setNotice(okMsg);
      onRefresh();
    } catch (e) {
      setMessage(e instanceof Error ? e.message : "操作失败");
    } finally {
      setBusy(false);
    }
  }

  function toggleStatus() {
    const target: "active" | "disabled" = detail.user.status === "active" ? "disabled" : "active";
    return run(() => changeUserStatus(detail.user.id, target, reason, csrf), target === "disabled" ? "已禁用并撤销会话" : "已恢复");
  }

  function doGrant() {
    const days = Number(vipDays);
    const expiresAt = days > 0 ? new Date(Date.now() + days * 86400000).toISOString() : null;
    return run(() => grantMembership(detail.user.id, "vip", expiresAt, reason, csrf), "已授予 VIP");
  }

  function doRevoke() {
    return run(() => revokeMembership(detail.user.id, reason, csrf), "已撤销 VIP");
  }

  function doAdjust() {
    const amt = Number(amount);
    if (!Number.isFinite(amt)) { setMessage("额度需为数字"); return; }
    return run(() => adjustQuota(detail.user.id, amt, reason, `admin-${Date.now()}-${Math.random()}`, csrf), "额度已调整");
  }

  function saveProfile() {
    if (!username.trim()) { setMessage("用户名不能为空"); return; }
    if (!email.trim() && !phone.trim()) { setMessage("邮箱或手机号至少填写一项"); return; }
    return run(() => updateUserProfile(detail.user.id, { username: username.trim(), email: email.trim() || null, phone: phone.trim() || null, email_verified: emailVerified, phone_verified: phoneVerified, reason: reason.trim() }, csrf), "用户信息已保存");
  }

  async function removeUser() {
    if (!reason.trim()) { setMessage("请填写原因"); return; }
    if (!window.confirm("确定删除该用户？删除后不可恢复。")) return;
    setBusy(true);
    try { await deleteUser(detail.user.id, reason, csrf); setNotice("用户已删除"); onClose(); } catch (e) { setMessage(e instanceof Error ? e.message : "删除失败"); } finally { setBusy(false); }
  }

  return (
    <div className="rounded-2xl border border-line bg-panel/60 p-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h3 className="text-xl font-semibold">{detail.user.username}</h3>
          <p className="mt-1 text-sm text-subtle">有效 Plan：{detail.effective_plan.toUpperCase()} · 状态：{detail.user.status === "active" ? "正常" : "已禁用"}</p>
        </div>
        <button className="button-ghost" onClick={onClose} type="button"><BrandIcon />关闭</button>
      </div>

      <div className="mt-6 grid gap-5 md:grid-cols-3">
        <div className="rounded-xl border border-line bg-panel/40 p-4">
          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-subtle">额度周期</p>
          <p className="mt-2 text-sm text-muted">{new Date(detail.quota.period_start).toLocaleDateString()} → {new Date(detail.quota.period_end).toLocaleDateString()}</p>
          <dl className="mt-3 space-y-2 text-sm">
            <div className="flex justify-between"><dt className="text-subtle">上限</dt><dd>{detail.quota.limit.toLocaleString()}</dd></div>
            <div className="flex justify-between"><dt className="text-subtle">已用</dt><dd>{detail.quota.used.toLocaleString()}</dd></div>
            <div className="flex justify-between"><dt className="text-subtle">冻结</dt><dd>{detail.quota.reserved.toLocaleString()}</dd></div>
            <div className="flex justify-between"><dt className="text-subtle">调整</dt><dd>{detail.quota.adjustment.toLocaleString()}</dd></div>
            <div className="flex justify-between border-t border-line pt-2"><dt className="text-subtle">可用</dt><dd className="text-cyan">{detail.quota.available.toLocaleString()}</dd></div>
          </dl>
        </div>
        <div className="rounded-xl border border-line bg-panel/40 p-4">
          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-subtle">当前会员</p>
          {detail.effective_grant ? (
            <div className="mt-2 text-sm text-muted">
              <p className="text-cyan">{detail.effective_grant.plan.toUpperCase()}</p>
              <p className="mt-1 text-subtle">至 {detail.effective_grant.expires_at ? new Date(detail.effective_grant.expires_at).toLocaleDateString() : "长期"}</p>
            </div>
          ) : (
            <p className="mt-2 text-sm text-muted">无有效会员</p>
          )}
          {detail.membership_history.length ? (
            <ul className="mt-4 space-y-2 text-xs text-subtle">
              {detail.membership_history.slice(0, 4).map((g) => (
                <li key={g.id}>{g.plan.toUpperCase()} · {new Date(g.starts_at).toLocaleDateString()} → {g.expires_at ? new Date(g.expires_at).toLocaleDateString() : "长期"}{g.revoked_at ? " · 已撤销" : ""}</li>
              ))}
            </ul>
          ) : null}
        </div>
        <div className="rounded-xl border border-line bg-panel/40 p-4">
          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-subtle">额度调整记录</p>
          {detail.adjustment_records.length ? (
            <ul className="mt-2 space-y-2 text-xs text-subtle">
              {detail.adjustment_records.map((r) => (
                <li key={r.id}>{r.amount > 0 ? "+" : ""}{r.amount.toLocaleString()} · {r.reason ?? "—"}</li>
              ))}
            </ul>
          ) : (
            <p className="mt-2 text-sm text-muted">暂无调整记录</p>
          )}
        </div>
      </div>

      <div className="mt-6 rounded-xl border border-line bg-panel/40 p-4">
        <p className="text-xs font-semibold uppercase tracking-[0.16em] text-subtle">用户信息</p>
        <div className="mt-4 grid gap-4 md:grid-cols-3">
          <div><label className="field-label" htmlFor="admin-username">用户名</label><input className="field-input" id="admin-username" onChange={(e) => setUsername(e.target.value)} value={username} /></div>
          <div><label className="field-label" htmlFor="admin-email">邮箱</label><input className="field-input" id="admin-email" onChange={(e) => setEmail(e.target.value)} type="email" value={email} /></div>
          <div><label className="field-label" htmlFor="admin-phone">手机号</label><input className="field-input" id="admin-phone" onChange={(e) => setPhone(e.target.value)} value={phone} /></div>
        </div>
        <div className="mt-4 flex flex-wrap gap-5 text-sm">
          <label className="flex items-center gap-2"><input checked={emailVerified} onChange={(e) => setEmailVerified(e.target.checked)} type="checkbox" />邮箱已验证</label>
          <label className="flex items-center gap-2"><input checked={phoneVerified} onChange={(e) => setPhoneVerified(e.target.checked)} type="checkbox" />手机已验证</label>
        </div>
        <button className="button-secondary mt-4 disabled:opacity-50" disabled={busy || !csrf} onClick={() => void saveProfile()} type="button"><BrandIcon />保存用户信息</button>
      </div>

      <div className="mt-6 space-y-4">
        <div><label className="field-label" htmlFor="admin-reason">操作原因（必填）</label><textarea className="field-input" id="admin-reason" onChange={(e) => setReason(e.target.value)} placeholder="例如：运营调整 / 违规禁用" rows={2} value={reason} /></div>
        {message ? <p className="rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-sm text-warning" role="status">{message}</p> : null}
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <button className="button-secondary disabled:opacity-50" disabled={busy || !csrf} onClick={() => void toggleStatus()} type="button">
            <BrandIcon />{detail.user.status === "active" ? "禁用用户" : "恢复用户"}
          </button>
          <div className="flex gap-2">
            <input aria-label="VIP 天数" className="field-input w-20" onChange={(e) => setVipDays(e.target.value)} value={vipDays} />
            <button className="button-secondary disabled:opacity-50" disabled={busy || !csrf} onClick={() => void doGrant()} type="button"><BrandIcon />授予 VIP</button>
          </div>
          <button className="button-ghost disabled:opacity-50" disabled={busy || !csrf} onClick={() => void doRevoke()} type="button"><BrandIcon />撤销 VIP</button>
          <div className="flex gap-2">
            <input aria-label="额度调整量" className="field-input w-24" onChange={(e) => setAmount(e.target.value)} value={amount} />
          <button className="button-secondary disabled:opacity-50" disabled={busy || !csrf} onClick={() => void doAdjust()} type="button"><BrandIcon />调整额度</button>
          <button className="button-ghost text-danger disabled:opacity-50" disabled={busy || !csrf} onClick={() => void removeUser()} type="button"><BrandIcon />删除用户</button>
        </div>
        </div>
        <p className="text-xs text-subtle">调整额度不能使可用额度低于已用；同一操作不可重复提交。</p>
      </div>
    </div>
  );
}

function CreateUserPanel({ onCreated }: { onCreated: () => void }) {
  const [csrf, setCsrf] = useState("");
  const [message, setMessage] = useState("");
  const [busy, setBusy] = useState(false);
  useEffect(() => { void fetchCsrf().then(setCsrf); }, []);

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setBusy(true); setMessage("");
    try {
      await createUser({ username: String(data.get("username") ?? ""), email: String(data.get("email") ?? "").trim() || null, phone: String(data.get("phone") ?? "").trim() || null, password: String(data.get("password") ?? ""), email_verified: data.get("email_verified") === "on", phone_verified: data.get("phone_verified") === "on", reason: String(data.get("reason") ?? "") }, csrf);
      onCreated();
    } catch (e) { setMessage(e instanceof Error ? e.message : "创建失败"); } finally { setBusy(false); }
  }

  return <form className="rounded-2xl border border-line bg-panel/50 p-5" onSubmit={submit}><p className="font-semibold">手动添加用户</p><div className="mt-4 grid gap-4 md:grid-cols-3"><input className="field-input" name="username" placeholder="用户名" required /><input className="field-input" name="email" placeholder="邮箱（可选）" type="email" /><input className="field-input" name="phone" placeholder="手机号（可选）" /><input className="field-input" minLength={8} name="password" placeholder="初始密码" required type="password" /><input className="field-input" name="reason" placeholder="创建原因（必填）" required /></div><div className="mt-4 flex flex-wrap gap-5 text-sm"><label className="flex items-center gap-2"><input name="email_verified" type="checkbox" />邮箱已验证</label><label className="flex items-center gap-2"><input name="phone_verified" type="checkbox" />手机已验证</label></div>{message ? <p className="mt-3 text-sm text-danger" role="status">{message}</p> : null}<button className="button-secondary mt-4 disabled:opacity-50" disabled={busy || !csrf} type="submit"><BrandIcon />创建用户</button></form>;
}