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[]; waiting?: string | string[] }>;
}) {
  const params = await searchParams;
  const q = typeof params.q === "string" ? params.q.slice(0, 64) : "";
  const waiting = params.waiting === "true";
  const query = new URLSearchParams({ ...(q ? { q } : {}), ...(waiting ? { waiting: "true" } : {}) }).toString();
  await requireModerator(`/console/people${query ? `?${query}` : ""}`);
  const { people } = unwrap(await api.console.people.get({ query: { ...(q ? { q } : {}), ...(waiting ? { waiting: true } : {}) } }));

  return (
    <>
      <PageHeader title="People" />
      <ConsoleNav />
      <Card>
        <CardContent className="space-y-6">
          <div className="flex flex-wrap items-center gap-4">
            <form action="/console/people" className="flex max-w-md flex-1 gap-2">
              <Input type="search" name="q" defaultValue={q} placeholder="T5DE or IMVU username" aria-label="Search" />
              {waiting && <input type="hidden" name="waiting" value="true" />}
              <Button type="submit" variant="outline">
                Search
              </Button>
            </form>
            <Link
              href={waiting ? "/console/people" : "/console/people?waiting=true"}
              className="text-sm text-muted-foreground underline-offset-4 hover:underline"
            >
              {waiting ? "Show everyone" : "Waiting for approval"}
            </Link>
          </div>
          {people.length === 0 ? (
            <p className="text-sm text-muted-foreground">{waiting ? "Nobody is waiting." : "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> : !p.approved && <Tag tone="strong">waiting</Tag>}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </>
  );
}