import type { Metadata } from "next";
import Link from "next/link";
import { PageHeader, Tag } from "@/components/status";
import { DateTime } from "@/components/time";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { api, unwrap } from "@/lib/api";
import { ConsoleNav, requireModerator } from "../console-nav";

export const metadata: Metadata = { title: "People" };

export default async function People({ searchParams }: { searchParams: Promise<{ q?: string | string[] }> }) {
  const raw = (await searchParams).q;
  const q = typeof raw === "string" ? raw.slice(0, 64) : "";
  await requireModerator(q ? `/console/people?q=${encodeURIComponent(q)}` : "/console/people");
  const { people } = unwrap(await api.console.people.get({ query: q ? { q } : {} }));

  return (
    <>
      <PageHeader title="People" />
      <ConsoleNav />
      <Card>
        <CardContent className="space-y-6">
          <form action="/console/people" className="flex max-w-md gap-2">
            <Input type="search" name="q" defaultValue={q} placeholder="T5DE or IMVU username" aria-label="Search" />
            <Button type="submit" variant="outline">
              Search
            </Button>
          </form>
          {people.length === 0 ? (
            <p className="text-sm text-muted-foreground">Nobody found.</p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Username</TableHead>
                  <TableHead>Role</TableHead>
                  <TableHead>Link cap</TableHead>
                  <TableHead>Joined</TableHead>
                  <TableHead />
                </TableRow>
              </TableHeader>
              <TableBody>
                {people.map((p) => (
                  <TableRow key={p.id}>
                    <TableCell>
                      <Link href={`/console/people/${p.id}`} className="font-medium underline-offset-4 hover:underline">
                        {p.username}
                      </Link>
                    </TableCell>
                    <TableCell className="capitalize">{p.role}</TableCell>
                    <TableCell className="tabular-nums">{p.linkCap}</TableCell>
                    <TableCell className="text-muted-foreground">
                      <DateTime iso={p.createdAt} dateOnly />
                    </TableCell>
                    <TableCell className="text-right">{p.banned && <Tag tone="danger">banned</Tag>}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </>
  );
}