import type { Metadata } from "next";
import { CatalogStatus, membership } from "@/components/catalogs";
import { ActionForm, SubmitButton } from "@/components/forms";
import { PageHeader } from "@/components/status";
import { DateTime } from "@/components/time";
import { Card, CardContent } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { api, unwrap } from "@/lib/api";
import { decideCatalog } from "../actions";
import { ConsoleNav, requireModerator } from "../console-nav";

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

export default async function ConsoleCatalogs() {
  await requireModerator("/console/catalogs");
  const { catalogs } = unwrap(await api.console.catalogs.get());

  return (
    <>
      <PageHeader title="Catalogs" />
      <ConsoleNav />
      <Card>
        <CardContent>
          {catalogs.length === 0 ? (
            <p className="text-sm text-muted-foreground">None registered.</p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Name</TableHead>
                  <TableHead>Address</TableHead>
                  <TableHead>Takedown contact</TableHead>
                  <TableHead>Access</TableHead>
                  <TableHead>Registered</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead />
                </TableRow>
              </TableHeader>
              <TableBody>
                {catalogs.map((c) => (
                  <TableRow key={c.id}>
                    <TableCell className="font-medium">{c.name}</TableCell>
                    <TableCell className="font-mono text-xs">{c.url}</TableCell>
                    <TableCell className="text-muted-foreground">{c.contact}</TableCell>
                    <TableCell className="text-muted-foreground">
                      <span className="capitalize">{c.visibility}</span>, {membership[c.membership]?.toLowerCase() ?? c.membership}
                    </TableCell>
                    <TableCell className="text-muted-foreground">
                      <DateTime iso={c.createdAt} dateOnly />
                    </TableCell>
                    <TableCell>
                      <CatalogStatus status={c.status} />
                    </TableCell>
                    <TableCell className="text-right">
                      <ActionForm action={decideCatalog} fields={{ id: c.id }} className="space-y-1">
                        <div className="flex justify-end gap-2">
                          {c.status !== "approved" && (
                            <SubmitButton size="sm" name="decision" value="approve" pendingLabel="Approving…">
                              Approve
                            </SubmitButton>
                          )}
                          {c.status !== "rejected" && (
                            <SubmitButton
                              size="sm"
                              variant="outline"
                              name="decision"
                              value="reject"
                              pendingLabel="Rejecting…"
                              confirm={`Reject ${c.name}?`}
                            >
                              Reject
                            </SubmitButton>
                          )}
                        </div>
                      </ActionForm>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </>
  );
}