import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { ActionForm, SubmitButton } from "@/components/forms";
import { AgeTag, PageHeader, Tag } from "@/components/status";
import { DateTime } from "@/components/time";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { api, ApiError, unwrap } from "@/lib/api";
import { ban, setLinkCap, setRole, unban } from "../../actions";
import { ConsoleNav, requireModerator } from "../../console-nav";

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

export default async function PersonPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const me = await requireModerator(`/console/people/${id}`);
  let data;
  try {
    data = unwrap(await api.console.people({ id }).get());
  } catch (e) {
    if (e instanceof ApiError && e.status === 404) notFound();
    throw e;
  }
  const { person, links, computers } = data;

  return (
    <>
      <PageHeader title={person.username}>
        <span className="flex flex-wrap items-center gap-2">
          <span className="capitalize">{person.role}</span>
          <span aria-hidden>·</span>
          <span>
            joined <DateTime iso={person.createdAt} dateOnly />
          </span>
          {person.banned && <Tag tone="danger">banned: {person.banReason}</Tag>}
        </span>
      </PageHeader>
      <ConsoleNav />

      <div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>IMVU accounts</CardTitle>
            <CardDescription>
              {links.length} of {person.linkCap}. Only moderators see which IMVU accounts belong to one person.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {links.length === 0 ? (
              <p className="text-sm text-muted-foreground">None.</p>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>IMVU account</TableHead>
                    <TableHead>ID</TableHead>
                    <TableHead>Linked</TableHead>
                    <TableHead>Age</TableHead>
                    <TableHead>Shows</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {links.map((l) => (
                    <TableRow key={l.imvuId}>
                      <TableCell className="font-medium">
                        <span className="flex items-center gap-2">
                          {l.username}
                          {l.online && (
                            <Tag tone="online" dot>
                              online
                            </Tag>
                          )}
                        </span>
                      </TableCell>
                      <TableCell className="text-muted-foreground tabular-nums">{l.imvuId}</TableCell>
                      <TableCell className="text-muted-foreground">
                        <DateTime iso={l.linkedAt} dateOnly />
                      </TableCell>
                      <TableCell>
                        <AgeTag link={l} />
                      </TableCell>
                      <TableCell className="text-muted-foreground">
                        {[l.showBadge && "badge", l.showPresence && "presence"].filter(Boolean).join(", ") || "nothing"}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
            <p className="text-sm text-muted-foreground">
              Signed in on {computers} computer{computers === 1 ? "" : "s"}.
            </p>
          </CardContent>
        </Card>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          <Card>
            <CardHeader>
              <CardTitle>Link cap</CardTitle>
              <CardDescription>How many IMVU accounts they can link (normally 10).</CardDescription>
            </CardHeader>
            <CardContent>
              <ActionForm action={setLinkCap} fields={{ id: person.id }}>
                <div className="flex gap-2">
                  <Input
                    type="number"
                    name="linkCap"
                    defaultValue={person.linkCap}
                    min={0}
                    max={1000}
                    required
                    aria-label="Link cap"
                    className="w-28"
                  />
                  <SubmitButton pendingLabel="Setting…">Set</SubmitButton>
                </div>
              </ActionForm>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Ban</CardTitle>
              <CardDescription>
                {person.banned
                  ? `Banned: ${person.banReason}`
                  : "Covers all their IMVU accounts, and signs them out everywhere."}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {person.banned ? (
                <ActionForm action={unban} fields={{ id: person.id }}>
                  <SubmitButton variant="outline" pendingLabel="Unbanning…">
                    Unban
                  </SubmitButton>
                </ActionForm>
              ) : (
                <ActionForm action={ban} fields={{ id: person.id }}>
                  <Input
                    name="reason"
                    placeholder="Reason (they see it)"
                    required
                    maxLength={500}
                    aria-label="Reason"
                  />
                  <SubmitButton
                    className="bg-red-600 text-white hover:bg-red-600/90 dark:bg-red-600 dark:hover:bg-red-600/90"
                    pendingLabel="Banning…"
                    confirm={`Ban ${person.username}?`}
                  >
                    Ban
                  </SubmitButton>
                </ActionForm>
              )}
            </CardContent>
          </Card>

          {me.role === "admin" && (
            <Card>
              <CardHeader>
                <CardTitle>Role</CardTitle>
                <CardDescription>Moderators use the console; admins also set roles.</CardDescription>
              </CardHeader>
              <CardContent>
                <ActionForm action={setRole} fields={{ id: person.id }}>
                  <div className="flex gap-2">
                    <NativeSelect name="role" defaultValue={person.role} aria-label="Role">
                      <NativeSelectOption value="user">User</NativeSelectOption>
                      <NativeSelectOption value="moderator">Moderator</NativeSelectOption>
                      <NativeSelectOption value="admin">Admin</NativeSelectOption>
                    </NativeSelect>
                    <SubmitButton pendingLabel="Setting…">Set</SubmitButton>
                  </div>
                </ActionForm>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </>
  );
}