import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ActionForm, SubmitButton } from "@/components/forms";
import { 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 { api, unwrap } from "@/lib/api";
import { ConsoleNav, requireConsole } from "../../console-nav";
import { blockFile, unblockFile } from "../actions";

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

/** A file: whether it's blocked, the products using it, and blocking or unblocking it. */
export default async function BlockPage({ params }: { params: Promise<{ sha256: string }> }) {
  const { sha256 } = await params;
  if (!/^[0-9a-f]{64}$/.test(sha256)) notFound();
  const { console: c } = await requireConsole(`/console/blocks/${sha256}`);
  if (!c.sections.includes("blocks")) notFound();
  const { block, products } = unwrap(await api.blocks({ sha256 }).get());
  const live = products.filter((p) => !p.removed);
  const removeCount = live.length === 1 ? "1 product" : `${live.length} products`;

  return (
    <>
      <PageHeader title="File">
        <span className="font-mono text-xs break-all">{sha256}</span>
      </PageHeader>
      <ConsoleNav />
      <div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>{block ? "Blocked" : "Not Blocked"}</CardTitle>
            <CardDescription>
              {block ? (
                <>
                  By {block.by ?? "a former moderator"}, <DateTime iso={block.at} />: {block.reason}
                </>
              ) : (
                "Blocking it removes the products below, tells their catalogs to delete it, and refuses uploads with it."
              )}
            </CardDescription>
          </CardHeader>
          <CardContent>
            {block ? (
              <ActionForm action={unblockFile} fields={{ sha256 }}>
                <div className="flex flex-wrap gap-2">
                  <Input name="reason" maxLength={500} placeholder="Reason" aria-label="Reason" className="max-w-sm" />
                  <SubmitButton
                    variant="outline"
                    pendingLabel="Unblocking…"
                    confirm="Unblock this file? The products it removed stay removed until restored."
                  >
                    Unblock
                  </SubmitButton>
                </div>
              </ActionForm>
            ) : (
              <ActionForm action={blockFile} fields={{ sha256 }}>
                <div className="flex flex-wrap gap-2">
                  <Input name="reason" required maxLength={500} placeholder="Reason (creators see it)" aria-label="Reason" className="max-w-sm" />
                  <SubmitButton
                    variant="destructive"
                    pendingLabel="Blocking…"
                    confirm={live.length ? `Block this file and remove ${removeCount}?` : "Block this file?"}
                  >
                    {live.length ? `Block and remove ${removeCount}` : "Block"}
                  </SubmitButton>
                </div>
              </ActionForm>
            )}
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Used By</CardTitle>
            <CardDescription>Products with a revision that has this file.</CardDescription>
          </CardHeader>
          <CardContent>
            {products.length === 0 ? (
              <p className="text-sm text-muted-foreground">No product uses it.</p>
            ) : (
              <ul className="divide-y">
                {products.map((p) => (
                  <li key={p.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 py-3 first:pt-0 last:pb-0">
                    <Link
                      href={p.removed ? `/console/products?q=${encodeURIComponent(p.name)}&status=removed&all=1` : `/products/${p.id}`}
                      className="font-medium underline-offset-4 hover:underline"
                    >
                      {p.name}
                    </Link>
                    <span className="text-sm text-muted-foreground">
                      by {p.creatorUsername ?? "someone"} · {p.revisions.length === 1 ? "revision" : "revisions"} {p.revisions.join(", ")}
                    </span>
                    {p.removed && <Tag tone="danger">removed</Tag>}
                  </li>
                ))}
              </ul>
            )}
          </CardContent>
        </Card>
      </div>
    </>
  );
}