import { prisma } from "@/lib/db";
import { requireAdmin } from "@/lib/admin-guard";
import { UsersTable, type UserRow } from "./_form";

export const dynamic = "force-dynamic";

export default async function UsersAdminPage() {
  const me = await requireAdmin();

  const users = await prisma.user.findMany({
    orderBy: [{ role: "asc" }, { createdAt: "desc" }],
    select: {
      id: true,
      email: true,
      name: true,
      role: true,
      emailVerified: true,
      createdAt: true,
      _count: {
        select: { articles: true, apiTokens: true },
      },
    },
  });
  const rows: UserRow[] = users.map((u) => ({
    id: u.id,
    email: u.email,
    name: u.name,
    role: u.role,
    emailVerified: u.emailVerified,
    articleCount: u._count.articles,
    apiTokenCount: u._count.apiTokens,
    createdAt: u.createdAt,
  }));

  const adminCount = users.filter((u) => u.role === "admin").length;
  const editorCount = users.filter((u) => u.role === "editor").length;

  return (
    <div>
      <div className="mb-6">
        <h1 className="font-display text-2xl lg:text-3xl font-bold mb-1">Users</h1>
        <p className="text-sm text-ink-muted">
          Quản lý user + role. <strong>Admin</strong> toàn quyền · <strong>Editor</strong> sửa/xuất bản bài · <strong>User</strong> chỉ đọc.
        </p>
      </div>

      <div className="grid grid-cols-3 gap-3 mb-6">
        <div className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-4">
          <div className="text-xs text-ink-muted">Tổng user</div>
          <div className="text-2xl font-display font-bold mt-1">{users.length}</div>
        </div>
        <div className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-4">
          <div className="text-xs text-ink-muted">Admin</div>
          <div className="text-2xl font-display font-bold mt-1 text-rose-300">{adminCount}</div>
        </div>
        <div className="rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-4">
          <div className="text-xs text-ink-muted">Editor</div>
          <div className="text-2xl font-display font-bold mt-1 text-sky-300">{editorCount}</div>
        </div>
      </div>

      <UsersTable users={rows} meId={me.id} />
    </div>
  );
}