"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import {
  Ban,
  ChevronLeft,
  ChevronRight,
  Clock,
  ExternalLink,
  History,
  Loader2,
  Monitor,
  RotateCcw,
  Search,
  ShieldCheck,
  Users as UsersIcon,
  UserPlus,
  X,
} from "lucide-react";
import {
  apiAdminListUsers,
  apiAdminSetUserBan,
  apiAdminSetUserRole,
  apiAdminUserLoginLogs,
  apiListBoards,
  type AdminUser,
  type AdminUserSummary,
  type AdminUsersResponse,
  type Board,
  type LoginLog,
} from "@/lib/api";
import { ROLES } from "@/lib/roles";
import { formatDate, formatRelative } from "@/lib/format";
import { toast } from "@/lib/toast";
import Avatar from "@/components/Avatar";
import RoleBadge from "@/components/RoleBadge";

export type UserFilter = "all" | "staff" | "banned";

const PAGE_SIZE = 20;

const FILTER_TABS: { key: UserFilter; label: string }[] = [
  { key: "all", label: "全部" },
  { key: "staff", label: "管理团队" },
  { key: "banned", label: "已封禁" },
];

function filterToParams(filter: UserFilter): { role?: string; status?: string } {
  if (filter === "staff") return { role: "staff" };
  if (filter === "banned") return { status: "banned" };
  return {};
}

// 可授予的角色选项（超级管理员仅站长可见可授；owner 不出现也不可授予）
interface RoleOption {
  value: string;
  title: string;
  desc: string;
  icon: React.ReactNode;
  token: string;
}

// 汇总小卡
function MiniStat({
  label,
  value,
  sub,
  icon,
  color,
  soft,
}: {
  label: string;
  value: string;
  sub?: string;
  icon: React.ReactNode;
  color: string;
  soft: string;
}) {
  return (
    <div className="panel p-4 flex items-center gap-3">
      <span
        className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
        style={{ background: soft, color }}
        aria-hidden="true"
      >
        {icon}
      </span>
      <div className="min-w-0 leading-tight">
        <p className="text-[11.5px] font-semibold truncate" style={{ color: "var(--ink-3)" }}>
          {label}
        </p>
        <p className="text-[19px] font-extrabold tabular-nums" style={{ color: "var(--ink)" }}>
          {value}
          {sub && (
            <span className="ml-1.5 text-[11px] font-semibold" style={{ color: "var(--ink-3)" }}>
              {sub}
            </span>
          )}
        </p>
      </div>
    </div>
  );
}

export default function UsersAdmin({
  initial,
  initError,
  initialQuery,
  currentUserId,
  currentUserRole,
}: {
  initial: AdminUsersResponse | null;
  initError: string;
  initialQuery: { q: string; filter: UserFilter; page: number };
  currentUserId: number;
  currentUserRole: string;
}) {
  const [users, setUsers] = useState<AdminUser[]>(initial?.users ?? []);
  const [summary, setSummary] = useState<AdminUserSummary>(
    initial?.summary ?? { total: 0, admins: 0, banned: 0, today_new: 0 }
  );
  const [total, setTotal] = useState(initial?.total ?? 0);
  const [page, setPage] = useState(initialQuery.page);
  const [filter, setFilter] = useState<UserFilter>(initialQuery.filter);
  const [keyword, setKeyword] = useState(initialQuery.q);
  const [appliedQ, setAppliedQ] = useState(initialQuery.q);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(initError);
  const [actingId, setActingId] = useState<number | null>(null);
  // 封禁二次确认弹窗；null 关闭
  const [banTarget, setBanTarget] = useState<AdminUser | null>(null);
  // 角色授权弹窗 / 登录历史弹窗
  const [roleTarget, setRoleTarget] = useState<AdminUser | null>(null);
  const [logsTarget, setLogsTarget] = useState<AdminUser | null>(null);

  // 板块字典（角色弹窗勾选 + 徽章板块名）
  const [boards, setBoards] = useState<Board[]>([]);

  // 防止快速翻页/输入时旧响应覆盖新结果
  const seqRef = useRef(0);
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const urlFirstRun = useRef(true);
  const router = useRouter();

  const boardNameMap = useMemo(() => {
    const m = new Map<number, string>();
    boards.forEach((b) => m.set(b.id, b.name));
    return m;
  }, [boards]);

  useEffect(() => {
    apiListBoards()
      .then((r) => setBoards(r.boards ?? []))
      .catch(() => {});
  }, []);

  const load = useCallback(async (opts: { page: number; filter: UserFilter; q: string }) => {
    const seq = ++seqRef.current;
    setLoading(true);
    try {
      const res = await apiAdminListUsers({
        page: opts.page,
        size: PAGE_SIZE,
        q: opts.q || undefined,
        ...filterToParams(opts.filter),
      });
      if (seq !== seqRef.current) return;
      setUsers(res.users);
      setSummary(res.summary);
      setTotal(res.total);
      setError("");
    } catch (e) {
      if (seq !== seqRef.current) return;
      setError(e instanceof Error ? e.message : "获取用户列表失败");
    } finally {
      if (seq === seqRef.current) setLoading(false);
    }
  }, []);

  // 搜索框防抖（首次渲染因 keyword===appliedQ 不会触发请求）
  useEffect(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => {
      const q = keyword.trim();
      if (q !== appliedQ) {
        setAppliedQ(q);
        setPage(1);
        load({ page: 1, filter, q });
      }
    }, 400);
    return () => {
      if (debounceRef.current) clearTimeout(debounceRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [keyword]);

  // 查询状态同步到 URL（首屏由 SSR 给出，跳过首次），刷新/分享可复现当前视图
  useEffect(() => {
    if (urlFirstRun.current) {
      urlFirstRun.current = false;
      return;
    }
    const p = new URLSearchParams();
    if (appliedQ) p.set("q", appliedQ);
    if (filter !== "all") p.set("filter", filter);
    if (page > 1) p.set("page", String(page));
    const qs = p.toString();
    router.replace(`/admin/users${qs ? `?${qs}` : ""}`, { scroll: false });
  }, [appliedQ, filter, page, router]);

  const submitSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const q = keyword.trim();
    if (q === appliedQ) return;
    setAppliedQ(q);
    setPage(1);
    load({ page: 1, filter, q });
  };

  // 清除按钮：立即复位查询并重拉，不等待防抖，保证标题与列表同步
  const clearSearch = () => {
    setKeyword("");
    if (appliedQ !== "" || page !== 1) {
      setAppliedQ("");
      setPage(1);
      load({ page: 1, filter, q: "" });
    }
  };

  const changeFilter = (f: UserFilter) => {
    if (f === filter) return;
    setFilter(f);
    setPage(1);
    load({ page: 1, filter: f, q: appliedQ });
  };

  const goPage = (p: number) => {
    const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
    const next = Math.min(Math.max(1, p), totalPages);
    if (next === page) return;
    setPage(next);
    load({ page: next, filter, q: appliedQ });
  };

  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
  const tabCount = (f: UserFilter) =>
    f === "all" ? summary.total : f === "staff" ? summary.admins : summary.banned;
  // 有关键词或非默认筛选时，空态文案与"无成员"区分
  const hasFilter = appliedQ !== "" || filter !== "all";

  // 行内操作按钮（圆形幽灵按钮，32px）
  const ghostBtn =
    "w-8 h-8 shrink-0 inline-flex items-center justify-center rounded-full transition-colors disabled:opacity-40 disabled:cursor-not-allowed";

  // 角色授权成功 / 封禁成功后的统一回刷
  const reload = () => load({ page, filter, q: appliedQ });

  const renderStatus = (u: AdminUser) => {
    if (u.banned) {
      return (
        <span
          className="inline-flex items-center gap-1.5 text-[12.5px] font-bold"
          style={{ color: "var(--danger)" }}
          title="账号已封禁"
        >
          <span className="w-2 h-2 rounded-full shrink-0" style={{ background: "var(--danger)" }} aria-hidden />
          封禁
        </span>
      );
    }
    if (u.online) {
      return (
        <span
          className="inline-flex items-center gap-1.5 text-[12.5px] font-bold"
          style={{ color: "var(--ok)" }}
          title={u.last_seen_at ? `最近活跃 ${formatRelative(u.last_seen_at)}` : "在线"}
        >
          <span className="w-2 h-2 rounded-full shrink-0" style={{ background: "var(--ok)" }} aria-hidden />
          在线
        </span>
      );
    }
    return (
      <span
        className="inline-flex items-center gap-1.5 text-[12.5px] font-semibold"
        style={{ color: "var(--ink-3)" }}
        title={u.last_seen_at ? `最近活跃 ${formatRelative(u.last_seen_at)}` : "从未活跃"}
      >
        <span
          className="w-2 h-2 rounded-full shrink-0"
          style={{ background: "var(--ink-3)", opacity: 0.45 }}
          aria-hidden
        />
        离线
      </span>
    );
  };

  const renderLastLogin = (u: AdminUser) => (
    <button
      type="button"
      onClick={() => setLogsTarget(u)}
      className="min-w-0 text-left group rounded-lg -mx-1.5 px-1.5 py-1 transition-colors hover:bg-[var(--panel-2)]"
      title="查看登录历史"
      aria-label={`查看 ${u.username} 的登录历史`}
    >
      <span
        className="block text-[12px] font-semibold tabular-nums truncate group-hover:text-[var(--accent)]"
        style={{ color: u.last_login_ip ? "var(--ink-2)" : "var(--ink-3)" }}
      >
        {u.last_login_ip || "暂无记录"}
      </span>
      <span className="block text-[11px] tabular-nums truncate" style={{ color: "var(--ink-3)" }}>
        {u.last_login_at ? formatRelative(u.last_login_at) : "—"}
      </span>
    </button>
  );

  const renderActions = (u: AdminUser, isSelf: boolean) => {
    // 站长账号：任何人不可操作（后端 403 兜底），仅保留主页入口与站长标识
    if (u.role === ROLES.OWNER) {
      return (
        <div className="flex items-center gap-1 justify-end">
          <Link
            href={`/u/${u.id}`}
            title="查看个人主页"
            className={ghostBtn}
            style={{ color: "var(--ink-3)" }}
          >
            <ExternalLink size={15} />
          </Link>
        </div>
      );
    }
    if (isSelf) {
      return (
        <span
          className="inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-bold whitespace-nowrap"
          style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
        >
          当前账号
        </span>
      );
    }
    const busy = actingId === u.id;
    return (
      <div className="flex items-center gap-1 justify-end">
        <button
          type="button"
          title="登录历史"
          aria-label={`查看 ${u.username} 的登录历史`}
          onClick={() => setLogsTarget(u)}
          className={ghostBtn}
          style={{ color: "var(--ink-3)" }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = "var(--panel-2)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = "";
          }}
        >
          <History size={15} />
        </button>
        <Link
          href={`/u/${u.id}`}
          title="查看个人主页"
          aria-label={`查看 ${u.nickname} 的个人主页`}
          className={ghostBtn}
          style={{ color: "var(--ink-3)" }}
        >
          <ExternalLink size={15} />
        </Link>
        <button
          type="button"
          title="设置管理角色"
          aria-label={`设置 ${u.username} 的管理角色`}
          disabled={busy}
          onClick={() => setRoleTarget(u)}
          className={ghostBtn}
          style={u.role === ROLES.USER ? { color: "var(--ink-3)" } : { color: "var(--accent)" }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = "var(--accent-soft)";
            e.currentTarget.style.color = "var(--accent)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = "";
            e.currentTarget.style.color = u.role === ROLES.USER ? "var(--ink-3)" : "var(--accent)";
          }}
        >
          <ShieldCheck size={15} />
        </button>
        <button
          type="button"
          title={u.banned ? "解封" : "封禁"}
          aria-label={u.banned ? `解封 ${u.username}` : `封禁 ${u.username}`}
          disabled={busy}
          onClick={() => setBanTarget(u)}
          className={ghostBtn}
          style={u.banned ? { color: "var(--danger)" } : { color: "var(--ink-3)" }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = "var(--danger-soft)";
            e.currentTarget.style.color = "var(--danger)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = "";
            e.currentTarget.style.color = u.banned ? "var(--danger)" : "var(--ink-3)";
          }}
        >
          {u.banned ? <RotateCcw size={15} /> : <Ban size={15} />}
        </button>
      </div>
    );
  };

  // 桌面端列模板（成员列收窄，新增在线状态与上次登录 IP；xl 起展示内容/注册列）
  const rowGrid =
    "hidden md:grid gap-3 items-center px-4 sm:px-5 py-3.5 " +
    "md:grid-cols-[minmax(0,1fr)_78px_minmax(108px,0.95fr)_146px_136px] " +
    "xl:grid-cols-[minmax(0,1.25fr)_78px_minmax(108px,0.95fr)_146px_116px_136px]";

  return (
    <div>
      {/* 页头 */}
      <div className="mb-5">
        <h1
          className="text-[22px] sm:text-[26px] font-extrabold tracking-tight flex items-center gap-2.5"
          style={{ color: "var(--ink)" }}
        >
          <span
            className="w-9 h-9 rounded-xl flex items-center justify-center"
            style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
          >
            <UsersIcon size={18} />
          </span>
          用户管理
        </h1>
        <p className="meta mt-1.5 text-[12.5px]">
          检索全部成员，配置管理角色与板块授权；站长账号受保护，操作即时生效
        </p>
      </div>

      {/* 汇总 */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
        <MiniStat
          label="注册用户"
          value={String(summary.total)}
          sub={summary.today_new > 0 ? `今日 +${summary.today_new}` : undefined}
          icon={<UsersIcon size={16} />}
          color="var(--accent)"
          soft="var(--accent-soft)"
        />
        <MiniStat
          label="管理团队"
          value={String(summary.admins)}
          icon={<ShieldCheck size={16} />}
          color="var(--gold)"
          soft="var(--gold-soft)"
        />
        <MiniStat
          label="已封禁"
          value={String(summary.banned)}
          icon={<Ban size={16} />}
          color="var(--danger)"
          soft="var(--danger-soft)"
        />
        <MiniStat
          label="当前筛选"
          value={String(total)}
          sub="人"
          icon={<UserPlus size={16} />}
          color="var(--ok)"
          soft="var(--ok-soft)"
        />
      </div>

      {/* 搜索 + 筛选 */}
      <div className="panel p-3 sm:p-4 mb-4">
        <div className="flex flex-col md:flex-row md:items-center gap-3">
          <form onSubmit={submitSearch} className="relative flex-1" role="search">
            <Search
              size={15}
              className="absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none"
              style={{ color: "var(--ink-3)" }}
            />
            <input
              type="text"
              value={keyword}
              onChange={(e) => setKeyword(e.target.value)}
              placeholder="搜索用户名、昵称或邮箱…"
              aria-label="搜索用户"
              className="field pl-10 pr-9 py-2.5"
            />
            {keyword && (
              <button
                type="button"
                onClick={clearSearch}
                aria-label="清除搜索"
                className="absolute right-3 top-1/2 -translate-y-1/2 w-6 h-6 inline-flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
                style={{ color: "var(--ink-3)" }}
              >
                <X size={14} />
              </button>
            )}
          </form>
          <div className="flex items-center gap-1.5 flex-wrap" role="group" aria-label="用户筛选">
            {FILTER_TABS.map((t) => {
              const active = filter === t.key;
              return (
                <button
                  key={t.key}
                  type="button"
                  aria-pressed={active}
                  onClick={() => changeFilter(t.key)}
                  className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-[13px] font-semibold transition-colors"
                  style={
                    active
                      ? { background: "var(--nav-active-bg)", color: "var(--nav-active-ink)" }
                      : { color: "var(--ink-2)", background: "var(--panel-2)" }
                  }
                >
                  {t.label}
                  <span
                    className="text-[11px] tabular-nums rounded-full px-1.5 leading-[1.7]"
                    style={{
                      background: "var(--panel)",
                      color: active ? "var(--nav-active-ink)" : "var(--ink-3)",
                    }}
                  >
                    {tabCount(t.key)}
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      </div>

      {/* 用户列表 */}
      <div className="panel overflow-hidden">
        <div
          className="px-4 sm:px-5 py-3.5 flex items-center justify-between gap-2 flex-wrap"
          style={{ borderBottom: "1px solid var(--line)" }}
        >
          <span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>
            {appliedQ ? (
              <>
                搜索“<span style={{ color: "var(--accent)" }}>{appliedQ}</span>”
              </>
            ) : filter === "staff" ? (
              "管理团队"
            ) : filter === "banned" ? (
              "已封禁成员"
            ) : (
              "全部成员"
            )}
          </span>
          <span className="meta text-[12px] tabular-nums" style={{ color: "var(--ink-3)" }}>
            共 {total} 人
          </span>
        </div>

        {/* 桌面表头 */}
        {users.length > 0 && (
          <div
            className={`${rowGrid} text-[11.5px] font-semibold uppercase tracking-wide`}
            style={{ color: "var(--ink-3)", borderBottom: "1px solid var(--line)", background: "var(--panel-2)" }}
          >
            <span>成员</span>
            <span>状态</span>
            <span>角色</span>
            <span>上次登录 IP</span>
            <span className="xl:block hidden">内容 / 注册</span>
            <span className="text-right">操作</span>
          </div>
        )}

        <div aria-busy={loading} style={{ opacity: loading ? 0.55 : 1, transition: "opacity .15s" }}>
          {error ? (
            <p className="alert-error m-4">{error}</p>
          ) : loading && users.length === 0 ? (
            <div className="flex items-center justify-center gap-2 py-16 meta text-[13px]">
              <Loader2 size={16} className="animate-spin" /> 加载中…
            </div>
          ) : users.length === 0 ? (
            <div className="text-center py-16 px-6">
              <span
                className="inline-flex w-12 h-12 rounded-full items-center justify-center mb-3"
                style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
              >
                <UsersIcon size={22} />
              </span>
              <p className="font-bold text-[14.5px]" style={{ color: "var(--ink)" }}>
                {hasFilter ? "没有匹配的成员" : "暂无成员"}
              </p>
              <p className="meta mt-1.5 text-[12.5px]">
                {hasFilter ? "换个关键词或筛选条件试试" : "新注册的用户会出现在这里"}
              </p>
            </div>
          ) : (
            users.map((u) => {
              const isSelf = u.id === currentUserId;
              return (
                <div key={u.id} style={{ borderTop: "1px solid var(--line)" }}>
                  {/* 桌面行 */}
                  <div className={rowGrid}>
                    <div className="flex items-center gap-2.5 min-w-0">
                      <Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={34} />
                      <div className="min-w-0 leading-tight">
                        <p className="text-[13.5px] font-bold truncate" style={{ color: "var(--ink)" }}>
                          {u.nickname}
                        </p>
                        <p className="text-[11.5px] truncate" style={{ color: "var(--ink-3)" }}>
                          @{u.username}
                          {u.email ? ` · ${u.email}` : ""}
                        </p>
                      </div>
                    </div>
                    <div>{renderStatus(u)}</div>
                    <div className="min-w-0">
                      <RoleBadge role={u.role} boardIds={u.board_ids} boardNames={boardNameMap} truncate />
                    </div>
                    <div className="min-w-0">{renderLastLogin(u)}</div>
                    <div className="hidden xl:block">
                      <p className="text-[12.5px] font-semibold tabular-nums" style={{ color: "var(--ink-2)" }}>
                        帖 {u.post_count} · 评 {u.comment_count}
                      </p>
                      <p className="text-[11px] tabular-nums" style={{ color: "var(--ink-3)" }}>
                        {formatDate(u.created_at)}
                      </p>
                    </div>
                    <div className="flex justify-end">{renderActions(u, isSelf)}</div>
                  </div>

                  {/* 移动卡片 */}
                  <div className="md:hidden px-4 py-3.5">
                    <div className="flex items-center gap-3">
                      <Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={38} />
                      <div className="min-w-0 flex-1 leading-tight">
                        <div className="flex items-center gap-2 flex-wrap">
                          <span className="text-[14px] font-bold truncate" style={{ color: "var(--ink)" }}>
                            {u.nickname}
                          </span>
                          {u.role !== ROLES.USER && (
                            <RoleBadge role={u.role} boardIds={u.board_ids} boardNames={boardNameMap} />
                          )}
                          {isSelf && (
                            <span
                              className="inline-flex items-center rounded-full px-2 py-px text-[10.5px] font-bold leading-[1.55]"
                              style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
                            >
                              当前账号
                            </span>
                          )}
                        </div>
                        <p className="text-[11.5px] truncate mt-0.5" style={{ color: "var(--ink-3)" }}>
                          @{u.username}
                          {u.email ? ` · ${u.email}` : ""}
                        </p>
                      </div>
                      {renderStatus(u)}
                    </div>
                    <p className="mt-2.5 text-[11.5px] tabular-nums" style={{ color: "var(--ink-3)" }}>
                      帖 {u.post_count} · 评 {u.comment_count} · 注册 {formatDate(u.created_at)}
                    </p>
                    <p className="mt-1 text-[11.5px] tabular-nums flex items-center gap-1.5" style={{ color: "var(--ink-3)" }}>
                      <Clock size={12} className="shrink-0" />
                      <button type="button" className="truncate" onClick={() => setLogsTarget(u)}>
                        上次登录 {u.last_login_ip || "—"}
                        {u.last_login_at ? ` · ${formatRelative(u.last_login_at)}` : ""}
                      </button>
                    </p>
                    {!isSelf && u.role !== ROLES.OWNER && (
                      <div className="flex items-center gap-2 mt-3 flex-wrap">
                        <Link href={`/u/${u.id}`} className="btn btn-line btn-sm">
                          <ExternalLink size={13} /> 主页
                        </Link>
                        <button
                          type="button"
                          disabled={actingId === u.id}
                          onClick={() => setRoleTarget(u)}
                          className="btn btn-line btn-sm"
                          style={u.role !== ROLES.USER ? { color: "var(--accent)", borderColor: "var(--accent)" } : undefined}
                        >
                          <ShieldCheck size={13} />
                          角色权限
                        </button>
                        <button
                          type="button"
                          disabled={actingId === u.id}
                          onClick={() => setBanTarget(u)}
                          className="btn btn-sm"
                          style={
                            u.banned
                              ? { background: "var(--ok-soft)", color: "var(--ok)" }
                              : { background: "var(--danger-soft)", color: "var(--danger)" }
                          }
                        >
                          {u.banned ? <RotateCcw size={13} /> : <Ban size={13} />}
                          {u.banned ? "解封" : "封禁"}
                        </button>
                      </div>
                    )}
                  </div>
                </div>
              );
            })
          )}
        </div>

        {/* 分页 */}
        {total > 0 && (
          <div
            className="px-4 sm:px-5 py-3 flex items-center justify-between gap-2"
            style={{ borderTop: "1px solid var(--line)" }}
          >
            <span className="meta text-[12px] tabular-nums" style={{ color: "var(--ink-3)" }}>
              第 {page} / {totalPages} 页 · 共 {total} 人
            </span>
            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={() => goPage(page - 1)}
                disabled={page <= 1 || loading}
                className="btn btn-line btn-sm"
              >
                <ChevronLeft size={14} /> 上一页
              </button>
              <button
                type="button"
                onClick={() => goPage(page + 1)}
                disabled={page >= totalPages || loading}
                className="btn btn-line btn-sm"
              >
                下一页 <ChevronRight size={14} />
              </button>
            </div>
          </div>
        )}
      </div>

      <RoleAssignDialog
        target={roleTarget}
        boards={boards}
        canGrantSuper={currentUserRole === ROLES.OWNER}
        acting={actingId === roleTarget?.id}
        onClose={() => setRoleTarget(null)}
        onSaved={() => {
          setRoleTarget(null);
          reload();
        }}
        setActing={(v) => setActingId(v ? roleTarget?.id ?? null : null)}
      />

      <BanConfirmDialog
        target={banTarget}
        busy={actingId === banTarget?.id}
        onCancel={() => setBanTarget(null)}
        onConfirm={async () => {
          const u = banTarget;
          if (!u) return;
          setActingId(u.id);
          try {
            await apiAdminSetUserBan(u.id, !u.banned);
            toast(u.banned ? "已解封" : "已封禁", "ok");
            setBanTarget(null);
            await reload();
          } catch (e) {
            toast(e instanceof Error ? e.message : "操作失败");
          } finally {
            setActingId(null);
          }
        }}
      />

      <LoginLogsDialog target={logsTarget} onClose={() => setLogsTarget(null)} />
    </div>
  );
}

// ===== 角色授权弹窗 =====

function RoleAssignDialog({
  target,
  boards,
  canGrantSuper,
  acting,
  onClose,
  onSaved,
  setActing,
}: {
  target: AdminUser | null;
  boards: Board[];
  canGrantSuper: boolean;
  acting: boolean;
  onClose: () => void;
  onSaved: () => void;
  setActing: (v: boolean) => void;
}) {
  // 可授予角色（按等级从高到低）；超管选项仅站长可见
  const options: RoleOption[] = [
    {
      value: ROLES.SUPER_ADMIN,
      title: "超级管理员",
      desc: "可操作全站后台：用户权限、公告、外观设置、内容审核；站长账号除外",
      icon: <ShieldCheck size={18} />,
      token: "--accent",
    },
    {
      value: ROLES.ADMIN,
      title: "管理员",
      desc: "可管理公告，审核全站帖子与评论，可置顶/加精",
      icon: <ShieldCheck size={18} />,
      token: "--accent",
    },
    {
      value: ROLES.BOARD_ADMIN,
      title: "板块管理员",
      desc: "仅可审核被授权板块的帖子与评论",
      icon: <ShieldCheck size={18} />,
      token: "--accent",
    },
    {
      value: ROLES.USER,
      title: "普通用户",
      desc: "无后台权限；发帖与评论需通过审核",
      icon: <UsersIcon size={18} />,
      token: "--ink-3",
    },
  ].filter((o) => canGrantSuper || o.value !== ROLES.SUPER_ADMIN);

  const [role, setRole] = useState<string>(ROLES.USER);
  const [boardIds, setBoardIds] = useState<number[]>([]);
  const [err, setErr] = useState("");

  // 每次打开按目标当前角色/授权初始化
  useEffect(() => {
    if (target) {
      setRole(target.role === ROLES.OWNER ? ROLES.USER : target.role);
      setBoardIds(target.board_ids ?? []);
      setErr("");
    }
  }, [target]);

  useEffect(() => {
    if (!target) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape" && !acting) onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [target, acting, onClose]);

  if (!target) return null;

  const toggleBoard = (id: number) => {
    setBoardIds((prev) => (prev.includes(id) ? prev.filter((b) => b !== id) : [...prev, id]));
  };

  const submit = async () => {
    if (role === ROLES.BOARD_ADMIN && boardIds.length === 0) {
      setErr("请至少选择一个授权板块");
      return;
    }
    setActing(true);
    try {
      await apiAdminSetUserRole(target.id, role, role === ROLES.BOARD_ADMIN ? boardIds : []);
      toast("角色权限已更新", "ok");
      onSaved();
    } catch (e) {
      toast(e instanceof Error ? e.message : "操作失败");
    } finally {
      setActing(false);
    }
  };

  return (
    <div
      className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
      style={{ background: "color-mix(in srgb, var(--ink) 55%, transparent)" }}
      onClick={() => !acting && onClose()}
    >
      <div
        className="j13-toast-in panel w-full max-w-[460px] rounded-2xl p-6 max-h-[88vh] overflow-y-auto"
        style={{ boxShadow: "var(--shadow-lg)" }}
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-label="设置管理角色"
      >
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <h3 className="text-[16px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
              设置管理角色
            </h3>
            <p className="meta mt-1 text-[12.5px] truncate">
              @{target.username}（{target.nickname}）
            </p>
          </div>
          <button
            type="button"
            onClick={onClose}
            disabled={acting}
            aria-label="关闭"
            className="w-8 h-8 shrink-0 inline-flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
            style={{ color: "var(--ink-3)" }}
          >
            <X size={16} />
          </button>
        </div>

        <div className="mt-4 flex flex-col gap-2" role="radiogroup" aria-label="管理角色">
          {options.map((o) => {
            const active = role === o.value;
            return (
              <button
                key={o.value}
                type="button"
                role="radio"
                aria-checked={active}
                onClick={() => {
                  setRole(o.value);
                  setErr("");
                }}
                className="text-left rounded-xl p-3 flex items-start gap-3 transition-colors"
                style={{
                  border: `1.5px solid ${active ? "var(--accent)" : "var(--line)"}`,
                  background: active ? "var(--accent-soft)" : "var(--panel-2)",
                }}
              >
                <span
                  className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 mt-0.5"
                  style={{
                    background: active ? "var(--accent)" : "var(--panel)",
                    color: active ? "var(--accent-on)" : `var(${o.token})`,
                  }}
                  aria-hidden="true"
                >
                  {o.icon}
                </span>
                <span className="min-w-0 flex-1">
                  <span className="block text-[13.5px] font-bold" style={{ color: "var(--ink)" }}>
                    {o.title}
                  </span>
                  <span className="block mt-0.5 text-[12px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
                    {o.desc}
                  </span>
                </span>
                <span
                  className="mt-1 w-4 h-4 rounded-full shrink-0 flex items-center justify-center"
                  style={{ border: `2px solid ${active ? "var(--accent)" : "var(--line-2)"}` }}
                  aria-hidden="true"
                >
                  {active && <span className="w-2 h-2 rounded-full" style={{ background: "var(--accent)" }} />}
                </span>
              </button>
            );
          })}
        </div>

        {/* 板块授权（仅板块管理员） */}
        {role === ROLES.BOARD_ADMIN && (
          <div className="mt-4">
            <p className="text-[12.5px] font-bold mb-2" style={{ color: "var(--ink)" }}>
              授权板块 <span style={{ color: "var(--danger)" }}>*</span>
            </p>
            {boards.length === 0 ? (
              <p className="meta text-[12px]">板块加载中…</p>
            ) : (
              <div className="grid grid-cols-2 gap-2">
                {boards.map((b) => {
                  const checked = boardIds.includes(b.id);
                  return (
                    <button
                      key={b.id}
                      type="button"
                      role="checkbox"
                      aria-checked={checked}
                      onClick={() => toggleBoard(b.id)}
                      className="flex items-center gap-2 rounded-lg px-3 py-2 text-[12.5px] font-semibold transition-colors"
                      style={{
                        border: `1.5px solid ${checked ? "var(--accent)" : "var(--line)"}`,
                        background: checked ? "var(--accent-soft)" : "var(--panel-2)",
                        color: checked ? "var(--accent)" : "var(--ink-2)",
                      }}
                    >
                      <span
                        className="w-4 h-4 rounded shrink-0 flex items-center justify-center"
                        style={{ border: `2px solid ${checked ? "var(--accent)" : "var(--line-2)"}` }}
                        aria-hidden="true"
                      >
                        {checked && (
                          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
                            <path d="M20 6 9 17l-5-5" />
                          </svg>
                        )}
                      </span>
                      <span className="truncate">{b.name}</span>
                    </button>
                  );
                })}
              </div>
            )}
            {err && <p className="mt-2 text-[12px] font-semibold" style={{ color: "var(--danger)" }}>{err}</p>}
          </div>
        )}

        <div className="flex items-center justify-end gap-2 mt-5">
          <button type="button" className="btn btn-line" onClick={onClose} disabled={acting}>
            取消
          </button>
          <button type="button" className="btn" onClick={submit} disabled={acting}>
            {acting && <Loader2 size={15} className="animate-spin" />}
            保存角色
          </button>
        </div>
      </div>
    </div>
  );
}

// ===== 封禁确认弹窗 =====

function BanConfirmDialog({
  target,
  busy,
  onCancel,
  onConfirm,
}: {
  target: AdminUser | null;
  busy: boolean;
  onCancel: () => void;
  onConfirm: () => void;
}) {
  useEffect(() => {
    if (!target) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape" && !busy) onCancel();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [target, busy, onCancel]);

  if (!target) return null;
  const banning = !target.banned;

  return (
    <div
      className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
      style={{ background: "color-mix(in srgb, var(--ink) 55%, transparent)" }}
      onClick={() => !busy && onCancel()}
    >
      <div
        className="j13-toast-in panel w-full max-w-[400px] rounded-2xl p-6"
        style={{ boxShadow: "var(--shadow-lg)" }}
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
      >
        <div className="flex items-start gap-4">
          <span
            className="w-12 h-12 rounded-full flex items-center justify-center shrink-0"
            style={{
              background: banning ? "var(--danger-soft)" : "var(--ok-soft)",
              color: banning ? "var(--danger)" : "var(--ok)",
            }}
            aria-hidden="true"
          >
            {banning ? <Ban size={23} /> : <RotateCcw size={21} />}
          </span>
          <div className="min-w-0 flex-1">
            <h3 className="text-[16px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
              {banning ? "封禁账号" : "解除封禁"}
            </h3>
            <p className="meta mt-1.5 text-[13px] leading-relaxed">
              {banning
                ? `封禁后 @${target.username} 将被立即强制下线，无法登录、发帖与回复；其已发布内容保留。`
                : `解除后 @${target.username} 可以重新登录，并恢复发帖、回复等全部功能。`}
            </p>
          </div>
        </div>
        <div className="flex items-center justify-end gap-2 mt-5">
          <button type="button" className="btn btn-line" onClick={onCancel} disabled={busy} autoFocus>
            取消
          </button>
          {banning ? (
            <button type="button" className="btn btn-danger" onClick={onConfirm} disabled={busy}>
              {busy && <Loader2 size={15} className="animate-spin" />}
              确认封禁
            </button>
          ) : (
            <button
              type="button"
              className="btn"
              style={{ background: "var(--ok-soft)", color: "var(--ok)" }}
              onClick={onConfirm}
              disabled={busy}
            >
              {busy && <Loader2 size={15} className="animate-spin" />}
              解除封禁
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

// ===== 登录历史弹窗 =====

function LoginLogsDialog({ target, onClose }: { target: AdminUser | null; onClose: () => void }) {
  const [logs, setLogs] = useState<LoginLog[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState("");

  useEffect(() => {
    if (!target) return;
    let cancelled = false;
    setLoading(true);
    setErr("");
    apiAdminUserLoginLogs(target.id, page)
      .then((res) => {
        if (cancelled) return;
        setLogs(res.logs);
        setTotal(res.total);
      })
      .catch((e) => {
        if (!cancelled) setErr(e instanceof Error ? e.message : "获取登录历史失败");
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [target, page]);

  useEffect(() => {
    if (target) setPage(1);
  }, [target]);

  useEffect(() => {
    if (!target) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [target, onClose]);

  if (!target) return null;
  const pageSize = 15;
  const totalPages = Math.max(1, Math.ceil(total / pageSize));

  return (
    <div
      className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
      style={{ background: "color-mix(in srgb, var(--ink) 55%, transparent)" }}
      onClick={onClose}
    >
      <div
        className="j13-toast-in panel w-full max-w-[520px] rounded-2xl p-6 max-h-[88vh] flex flex-col"
        style={{ boxShadow: "var(--shadow-lg)" }}
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-label="登录历史"
      >
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <h3 className="text-[16px] font-extrabold tracking-tight flex items-center gap-2" style={{ color: "var(--ink)" }}>
              <History size={17} style={{ color: "var(--accent)" }} />
              登录历史
            </h3>
            <p className="meta mt-1 text-[12.5px] truncate">
              @{target.username} · 共 {total} 条记录（含失败尝试）
            </p>
          </div>
          <button
            type="button"
            onClick={onClose}
            aria-label="关闭"
            className="w-8 h-8 shrink-0 inline-flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
            style={{ color: "var(--ink-3)" }}
          >
            <X size={16} />
          </button>
        </div>

        <div className="mt-4 -mx-1.5 px-1.5 overflow-y-auto flex-1">
          {loading ? (
            <div className="flex items-center justify-center gap-2 py-12 meta text-[13px]">
              <Loader2 size={16} className="animate-spin" /> 加载中…
            </div>
          ) : err ? (
            <p className="alert-error my-4">{err}</p>
          ) : logs.length === 0 ? (
            <div className="text-center py-12">
              <Monitor size={22} className="mx-auto mb-2" style={{ color: "var(--ink-3)" }} />
              <p className="meta text-[12.5px]">暂无登录记录</p>
            </div>
          ) : (
            <ul className="flex flex-col">
              {logs.map((log) => (
                <li
                  key={log.id}
                  className="flex items-start gap-3 py-2.5"
                  style={{ borderTop: "1px solid var(--line)" }}
                >
                  <span
                    className="mt-1 w-2 h-2 rounded-full shrink-0"
                    style={{ background: log.success ? "var(--ok)" : "var(--danger)" }}
                    title={log.success ? "成功" : "失败"}
                    aria-hidden
                  />
                  <div className="min-w-0 flex-1">
                    <p className="text-[12.5px] font-semibold tabular-nums truncate" style={{ color: "var(--ink)" }}>
                      {log.ip || "未知 IP"}
                      <span
                        className="ml-2 inline-flex items-center rounded-full px-1.5 py-px text-[10.5px] font-bold"
                        style={
                          log.success
                            ? { background: "var(--ok-soft)", color: "var(--ok)" }
                            : { background: "var(--danger-soft)", color: "var(--danger)" }
                        }
                      >
                        {log.success ? "成功" : "失败"}
                      </span>
                    </p>
                    <p className="text-[11px] mt-0.5 truncate" style={{ color: "var(--ink-3)" }} title={log.user_agent}>
                      {log.user_agent || "未知设备"}
                    </p>
                  </div>
                  <span className="text-[11px] tabular-nums shrink-0 pt-0.5" style={{ color: "var(--ink-3)" }}>
                    {formatDate(log.created_at)} {new Date(log.created_at).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" })}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </div>

        {total > pageSize && (
          <div className="flex items-center justify-between pt-3 mt-2" style={{ borderTop: "1px solid var(--line)" }}>
            <span className="meta text-[11.5px] tabular-nums" style={{ color: "var(--ink-3)" }}>
              第 {page} / {totalPages} 页
            </span>
            <div className="flex items-center gap-2">
              <button
                type="button"
                className="btn btn-line btn-sm"
                disabled={page <= 1 || loading}
                onClick={() => setPage((p) => Math.max(1, p - 1))}
              >
                <ChevronLeft size={14} /> 上一页
              </button>
              <button
                type="button"
                className="btn btn-line btn-sm"
                disabled={page >= totalPages || loading}
                onClick={() => setPage((p) => p + 1)}
              >
                下一页 <ChevronRight size={14} />
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}