jiang13-bbs/frontend/app/admin/users/[id]/UserAuditClient.tsx

"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import {
  ArrowLeft,
  ChevronLeft,
  ChevronRight,
  ExternalLink,
  FileText,
  Loader2,
  MessageCircle,
  MessagesSquare,
} from "lucide-react";
import {
  apiAdminUserAuditComments,
  apiAdminUserAuditMessages,
  apiAdminUserAuditPosts,
  type AdminAuditCommentItem,
  type AdminAuditMessageItem,
  type AdminAuditPostItem,
  type AdminUserAuditProfile,
} from "@/lib/api";
import { formatDate, formatRelative } from "@/lib/format";
import Avatar from "@/components/Avatar";
import RoleBadge from "@/components/RoleBadge";

type TabKey = "posts" | "comments" | "messages";

const TABS: { key: TabKey; label: string; icon: React.ReactNode }[] = [
  { key: "posts", label: "帖子", icon: <FileText size={14} /> },
  { key: "comments", label: "评论", icon: <MessageCircle size={14} /> },
  { key: "messages", label: "私信与群消息", icon: <MessagesSquare size={14} /> },
];

const PAGE_SIZE = 20;

function StatusChip({
  status,
  deleted,
  recalled,
}: {
  status?: string;
  deleted?: boolean;
  recalled?: boolean;
}) {
  const chips: { label: string; color: string; soft: string }[] = [];
  if (deleted) chips.push({ label: "已删除", color: "var(--danger)", soft: "var(--danger-soft)" });
  if (recalled) chips.push({ label: "已撤回", color: "var(--ink-3)", soft: "var(--tint)" });
  if (status === "pending") chips.push({ label: "待审", color: "var(--gold)", soft: "var(--gold-soft)" });
  if (status === "rejected") chips.push({ label: "已驳回", color: "var(--danger)", soft: "var(--danger-soft)" });
  if (status === "published" && !deleted) {
    chips.push({ label: "已发布", color: "var(--ok)", soft: "var(--ok-soft)" });
  }
  if (chips.length === 0 && !recalled) {
    chips.push({ label: "正常", color: "var(--ink-3)", soft: "var(--tint)" });
  }
  return (
    <span className="inline-flex flex-wrap gap-1">
      {chips.map((c) => (
        <span
          key={c.label}
          className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-bold"
          style={{ background: c.soft, color: c.color }}
        >
          {c.label}
        </span>
      ))}
    </span>
  );
}

function Pager({
  page,
  total,
  onChange,
  loading,
}: {
  page: number;
  total: number;
  onChange: (p: number) => void;
  loading?: boolean;
}) {
  const pages = Math.max(1, Math.ceil(total / PAGE_SIZE));
  if (pages <= 1) return null;
  return (
    <div className="flex items-center justify-center gap-2 py-3">
      <button
        type="button"
        disabled={page <= 1 || loading}
        onClick={() => onChange(page - 1)}
        className="btn btn-line btn-sm"
        aria-label="上一页"
      >
        <ChevronLeft size={14} />
      </button>
      <span className="text-[12.5px] tabular-nums meta">
        {page} / {pages}
      </span>
      <button
        type="button"
        disabled={page >= pages || loading}
        onClick={() => onChange(page + 1)}
        className="btn btn-line btn-sm"
        aria-label="下一页"
      >
        <ChevronRight size={14} />
      </button>
    </div>
  );
}

export default function UserAuditClient({
  userId,
  initial,
}: {
  userId: number;
  initial: AdminUserAuditProfile;
}) {
  const [profile] = useState(initial);
  const [tab, setTab] = useState<TabKey>("posts");
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [posts, setPosts] = useState<AdminAuditPostItem[]>([]);
  const [comments, setComments] = useState<AdminAuditCommentItem[]>([]);
  const [messages, setMessages] = useState<AdminAuditMessageItem[]>([]);
  const [total, setTotal] = useState(0);

  const u = profile.user;

  const load = useCallback(
    async (t: TabKey, p: number) => {
      setLoading(true);
      setError("");
      try {
        if (t === "posts") {
          const res = await apiAdminUserAuditPosts(userId, p);
          setPosts(res.items || []);
          setTotal(res.total);
        } else if (t === "comments") {
          const res = await apiAdminUserAuditComments(userId, p);
          setComments(res.items || []);
          setTotal(res.total);
        } else {
          const res = await apiAdminUserAuditMessages(userId, p);
          setMessages(res.items || []);
          setTotal(res.total);
        }
      } catch (e) {
        setError(e instanceof Error ? e.message : "加载失败");
      } finally {
        setLoading(false);
      }
    },
    [userId]
  );

  useEffect(() => {
    load(tab, page);
  }, [tab, page, load]);

  const switchTab = (t: TabKey) => {
    setTab(t);
    setPage(1);
  };

  const tabCount = (t: TabKey) => {
    if (t === "posts") return profile.posts_total;
    if (t === "comments") return profile.comments_total;
    return profile.messages_total;
  };

  return (
    <div>
      <Link
        href="/admin/users"
        className="inline-flex items-center gap-1.5 text-[13px] font-semibold mb-4 hover:opacity-80"
        style={{ color: "var(--accent)" }}
      >
        <ArrowLeft size={14} />
        返回用户列表
      </Link>

      <div className="panel p-4 sm:p-5 mb-4">
        <div className="flex items-start gap-3.5">
          <Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={48} />
          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-2 flex-wrap">
              <h1
                className="text-[18px] sm:text-[20px] font-extrabold truncate"
                style={{ color: "var(--ink)" }}
              >
                {u.nickname}
              </h1>
              <RoleBadge role={u.role} />
              {u.banned && (
                <span
                  className="text-[11px] font-bold px-2 py-0.5 rounded-full"
                  style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
                >
                  已封禁
                </span>
              )}
            </div>
            <p className="meta text-[12.5px] mt-0.5 truncate">@{u.username}</p>
            <p className="meta text-[12px] mt-2">
              注册于 {formatDate(u.created_at)} · 已发布帖 {profile.published_posts} / 评{" "}
              {profile.published_comments}
            </p>
          </div>
          <Link
            href={`/u/${u.id}`}
            className="btn btn-line btn-sm gap-1.5 shrink-0"
            target="_blank"
          >
            <ExternalLink size={13} />
            主页
          </Link>
        </div>
        <div
          className="mt-4 grid grid-cols-3 gap-2 sm:gap-3 pt-4"
          style={{ borderTop: "1px solid var(--line)" }}
        >
          {[
            { label: "全部帖子", value: profile.posts_total },
            { label: "全部评论", value: profile.comments_total },
            { label: "全部消息", value: profile.messages_total },
          ].map((c) => (
            <div key={c.label} className="text-center">
              <p
                className="text-[20px] font-extrabold tabular-nums leading-none"
                style={{ color: "var(--ink)" }}
              >
                {c.value.toLocaleString("zh-CN")}
              </p>
              <p className="meta text-[11.5px] mt-1.5">{c.label}</p>
            </div>
          ))}
        </div>
      </div>

      <div
        className="flex gap-1 mb-3 overflow-x-auto"
        style={{ borderBottom: "1px solid var(--line)" }}
      >
        {TABS.map((t) => {
          const active = tab === t.key;
          return (
            <button
              key={t.key}
              type="button"
              onClick={() => switchTab(t.key)}
              className="inline-flex items-center gap-1.5 px-3 py-2.5 text-[13px] font-bold whitespace-nowrap -mb-px"
              style={{
                color: active ? "var(--accent)" : "var(--ink-3)",
                borderBottom: active ? "2px solid var(--accent)" : "2px solid transparent",
              }}
            >
              {t.icon}
              {t.label}
              <span className="tabular-nums font-semibold opacity-70">
                {tabCount(t.key).toLocaleString("zh-CN")}
              </span>
            </button>
          );
        })}
      </div>

      <div className="panel overflow-hidden">
        {error && (
          <p className="text-center py-10 text-[13px]" style={{ color: "var(--danger)" }}>
            {error}
          </p>
        )}
        {!error && loading && posts.length + comments.length + messages.length === 0 && (
          <div className="flex justify-center py-14" style={{ color: "var(--ink-3)" }}>
            <Loader2 size={22} className="animate-spin" />
          </div>
        )}
        {!error && !loading && total === 0 && (
          <p className="meta text-center py-14 text-[13px]">该分类暂无内容</p>
        )}

        {tab === "posts" &&
          posts.map((p) => (
            <div
              key={p.id}
              className="px-4 sm:px-5 py-3.5"
              style={{ borderTop: "1px solid var(--line)" }}
            >
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2 flex-wrap mb-1">
                    <StatusChip status={p.status} deleted={p.deleted} />
                    {p.board_name && (
                      <span className="text-[11.5px] meta truncate">{p.board_name}</span>
                    )}
                  </div>
                  {p.deleted ? (
                    <p className="text-[14px] font-bold" style={{ color: "var(--ink-3)" }}>
                      {p.title || "（无标题）"}
                    </p>
                  ) : (
                    <Link
                      href={`/post/${p.id}`}
                      className="text-[14px] font-bold hover:underline"
                      style={{ color: "var(--ink)" }}
                    >
                      {p.title || "（无标题）"}
                    </Link>
                  )}
                  {p.content && (
                    <p className="meta text-[12.5px] mt-1 line-clamp-2 leading-relaxed">
                      {p.content}
                    </p>
                  )}
                </div>
                <span className="shrink-0 text-[11.5px] meta tabular-nums">
                  {formatRelative(p.created_at)}
                </span>
              </div>
            </div>
          ))}

        {tab === "comments" &&
          comments.map((c) => (
            <div
              key={c.id}
              className="px-4 sm:px-5 py-3.5"
              style={{ borderTop: "1px solid var(--line)" }}
            >
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2 flex-wrap mb-1">
                    <StatusChip status={c.status} deleted={c.deleted} />
                    {c.deleted ? (
                      <span className="text-[11.5px] meta">帖子 #{c.post_id}</span>
                    ) : (
                      <Link
                        href={`/post/${c.post_id}`}
                        className="text-[11.5px] font-semibold hover:underline"
                        style={{ color: "var(--accent)" }}
                      >
                        帖子 #{c.post_id}
                      </Link>
                    )}
                  </div>
                  <p
                    className="text-[13.5px] leading-relaxed whitespace-pre-wrap break-words"
                    style={{ color: c.deleted ? "var(--ink-3)" : "var(--ink)" }}
                  >
                    {c.content || "（空）"}
                  </p>
                </div>
                <span className="shrink-0 text-[11.5px] meta tabular-nums">
                  {formatRelative(c.created_at)}
                </span>
              </div>
            </div>
          ))}

        {tab === "messages" &&
          messages.map((m) => (
            <div
              key={m.id}
              className="px-4 sm:px-5 py-3.5"
              style={{ borderTop: "1px solid var(--line)" }}
            >
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2 flex-wrap mb-1">
                    <StatusChip deleted={m.deleted} recalled={m.recalled} />
                    <span className="text-[11.5px] meta truncate">
                      {m.room_name}
                      {m.room_type === "direct" ? " · 私聊" : m.room_type === "group" ? " · 群聊" : ""}
                    </span>
                  </div>
                  <p
                    className="text-[13.5px] leading-relaxed whitespace-pre-wrap break-words"
                    style={{
                      color: m.recalled || m.deleted ? "var(--ink-3)" : "var(--ink)",
                      fontStyle: m.recalled ? "italic" : undefined,
                    }}
                  >
                    {m.content || "（空）"}
                  </p>
                </div>
                <span className="shrink-0 text-[11.5px] meta tabular-nums">
                  {formatRelative(m.created_at)}
                </span>
              </div>
            </div>
          ))}

        <Pager page={page} total={total} onChange={setPage} loading={loading} />
      </div>
    </div>
  );
}