import Link from "next/link";
import { Users } from "lucide-react";
import { requireAdmin } from "@/lib/session";
import { listUsers, pageNum, str } from "@/lib/queries/admin";
import { formatNumber } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Badge } from "@/components/ui/badge";
import { EmptyState } from "@/components/ui/empty-state";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { DateCell, Pagination, Panel, SearchForm, numCell } from "@/components/admin/primitives";

export const dynamic = "force-dynamic";

export default async function AdminUsersPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const q = str(sp.q);
  const page = pageNum(sp.page);
  const data = await listUsers({ q: q || undefined, page });

  return (
    <>
      <PageHeader eyebrow="Accounts" title="Users" description={`${formatNumber(data.total)} accounts. Search by email, name or id.`} actions={<SearchForm action="/admin/users" q={q} placeholder="email, name or user id" />} />
      <Panel flush>
        {data.total === 0 ? (
          <div className="p-4">
            <EmptyState icon={Users} title={q ? "No users match" : "No users yet"} description={q ? "Try a partial email or a different spelling." : "Users appear here as soon as they sign up."} compact />
          </div>
        ) : (
          <>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Email</TableHead>
                  <TableHead>Name</TableHead>
                  <TableHead>Verified</TableHead>
                  <TableHead>Role</TableHead>
                  <TableHead>Banned</TableHead>
                  <TableHead className="text-right">Orgs</TableHead>
                  <TableHead className="text-right">Created</TableHead>
                  <TableHead className="text-right">Last login</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.rows.map((u) => (
                  <TableRow key={u.id}>
                    <TableCell>
                      <Link href={`/admin/users/${u.id}`} className="font-medium hover:underline">
                        {u.email}
                      </Link>
                    </TableCell>
                    <TableCell className="max-w-[200px] truncate text-fg-muted">{u.name || "—"}</TableCell>
                    <TableCell>{u.emailVerified ? <Badge variant="success" dot>verified</Badge> : <Badge variant="outline">unverified</Badge>}</TableCell>
                    <TableCell>{u.role === "admin" ? <Badge variant="danger">admin</Badge> : <span className="text-fg-muted">user</span>}</TableCell>
                    <TableCell>{u.banned ? <Badge variant="danger" dot>banned</Badge> : <span className="text-fg-subtle">—</span>}</TableCell>
                    <TableCell className={numCell}>{u.orgs}</TableCell>
                    <TableCell className="text-right">
                      <DateCell value={u.createdAt} />
                    </TableCell>
                    <TableCell className="text-right">
                      <DateCell value={u.lastLogin} />
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <Pagination page={data.page} pages={data.pages} total={data.total} pageSize={data.pageSize} basePath="/admin/users" params={{ q }} />
          </>
        )}
      </Panel>
    </>
  );
}