import type { Metadata } from "next";
import Link from "next/link";
import { ActionForm, SubmitButton } from "@/components/forms";
import { OnlineList } from "@/components/online-list";
import { PageHeader } from "@/components/status";
import { DateTime } from "@/components/time";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { api, unwrap, type AuditEntry } from "@/lib/api";
import { setRegistration } from "./actions";
import { ConsoleNav, requireModerator } from "./console-nav";

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

export default async function Console() {
  const me = await requireModerator("/console");
  const [data, settings] = await Promise.all([api.console.get().then(unwrap), api.console.settings.get().then(unwrap)]);
  const stats = [
    { label: "People", value: data.counts.people, note: "accounts" },
    { label: "Waiting", value: data.counts.waiting, note: "for approval", href: "/console/people?waiting=true" },
    { label: "IMVU accounts", value: data.counts.links, note: "linked" },
    { label: "Computers", value: data.counts.computers, note: "signed in" },
  ];

  return (
    <>
      <PageHeader title="Console">Moderation.</PageHeader>
      <ConsoleNav />
      <div className="space-y-6">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {stats.map((s) => (
            <Card key={s.label}>
              <CardHeader>
                <CardDescription>{s.label}</CardDescription>
                <CardTitle className="text-3xl font-semibold tabular-nums">{s.value}</CardTitle>
              </CardHeader>
              <CardContent className="text-sm text-muted-foreground">
                {s.href ? (
                  <Link href={s.href} className="underline-offset-4 hover:underline">
                    {s.note}
                  </Link>
                ) : (
                  s.note
                )}
              </CardContent>
            </Card>
          ))}
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Registration</CardTitle>
            <CardDescription>
              {settings.registration === "closed"
                ? "Closed: new accounts can sign in, but wait for a moderator's approval."
                : "Open: new accounts can use the hub at once."}
            </CardDescription>
          </CardHeader>
          {me.role === "admin" && (
            <CardContent>
              <ActionForm action={setRegistration}>
                <div className="flex gap-2">
                  <NativeSelect name="registration" defaultValue={settings.registration} aria-label="Registration">
                    <NativeSelectOption value="open">Open</NativeSelectOption>
                    <NativeSelectOption value="closed">Closed</NativeSelectOption>
                  </NativeSelect>
                  <SubmitButton pendingLabel="Setting…">Set</SubmitButton>
                </div>
              </ActionForm>
            </CardContent>
          )}
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Online now</CardTitle>
            <CardDescription>
              {data.connections} {data.connections === 1 ? "connection" : "connections"} when the page loaded
            </CardDescription>
          </CardHeader>
          <CardContent>
            <OnlineList initial={data.online} moderator />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Audit log</CardTitle>
            <CardDescription>The latest 50 changes.</CardDescription>
          </CardHeader>
          <CardContent>
            <AuditLog entries={data.audit} />
          </CardContent>
        </Card>
      </div>
    </>
  );
}

function AuditLog({ entries }: { entries: AuditEntry[] }) {
  if (entries.length === 0) return <p className="text-sm text-muted-foreground">Nothing yet.</p>;
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>When</TableHead>
          <TableHead>Who</TableHead>
          <TableHead>What</TableHead>
          <TableHead>Target</TableHead>
          <TableHead>Detail</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {entries.map((e, i) => (
          <TableRow key={i}>
            <TableCell className="text-muted-foreground">
              <DateTime iso={e.at} />
            </TableCell>
            <TableCell>{e.actor || <span className="text-muted-foreground">hub</span>}</TableCell>
            <TableCell className="font-mono text-xs">{e.action}</TableCell>
            <TableCell>{e.target}</TableCell>
            <TableCell className="text-xs whitespace-normal text-muted-foreground">
              {Object.entries((e.detail ?? {}) as Record<string, unknown>)
                .map(([k, v]) => `${k}: ${typeof v === "string" ? v : JSON.stringify(v)}`)
                .join(", ")}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}