import type { Metadata } from "next";
import Link from "next/link";
import { CatalogStatus, membership } from "@/components/catalogs";
import { ActionForm, SubmitButton } from "@/components/forms";
import { PageHeader, Tag } 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, requireConsole } from "../console-nav";

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

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

  return (
    <>
      <PageHeader title="Catalogs">{moderator ? "Every registered catalog." : "Catalogs you're on the team of."}</PageHeader>
      <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>Access</TableHead>
                  <TableHead>Registered</TableHead>
                  <TableHead>Status</TableHead>
                  {moderator && <TableHead />}
                </TableRow>
              </TableHeader>
              <TableBody>
                {catalogs.map((c) => (
                  <TableRow key={c.id}>
                    <TableCell className="font-medium">
                      <Link href={`/console/catalogs/${c.id}`} className="underline-offset-4 hover:underline">
                        {c.name}
                      </Link>{" "}
                      {c.mine ? <Tag>owner</Tag> : c.team ? <Tag>team</Tag> : null}
                    </TableCell>
                    <TableCell className="font-mono text-xs">{c.url}</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>
                    {moderator && (
                      <TableCell className="text-right">
                        {(c.status === "pending" || c.status === "rejected") && (
                          <ActionForm action={decideCatalog} fields={{ id: c.id }} className="space-y-1">
                            <div className="flex justify-end gap-2">
                              <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>
    </>
  );
}