import Link from "next/link";
import type { Metadata } from "next";
import { Chip, Empty, ExtLink, PageHeader, Panel, Table, Td } from "@/components/ui";
import { api } from "@/lib/api";
import { fmtBytes, shortHash, utcDateTime } from "@/lib/format";
import { CompareForm } from "./compare-form";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "URL history", robots: { index: false } };

export default async function UrlPage({ searchParams }: { searchParams: Promise<{ u?: string }> }) {
  const { u } = await searchParams;
  if (!u) {
    return (
      <>
        <PageHeader title="URL history" description="Paste a monitored URL to see its snapshots and changes." />
        <form action="/url" className="flex gap-2">
          <input name="u" placeholder="https://…" className="h-8 w-full max-w-xl rounded-md border border-line bg-panel px-2.5 font-mono text-[12.5px]" />
          <button type="submit" className="h-8 rounded-md border border-line bg-panel-2 px-3 text-[12.5px]">Look up</button>
        </form>
      </>
    );
  }
  const d = await api.urlHistory(u);
  const info = d?.url;
  return (
    <>
      <PageHeader kicker={<Link href={`/domain/${info?.domain ?? ""}`} className="font-mono hover:underline">{info?.domain}</Link>} title={<span className="break-all font-mono text-lg">{u}</span>} actions={<><ExtLink href={u} className="text-[12px]">Open ↗</ExtLink>{info?.status && <Chip tone={info.status === "active" ? "ok" : info.status === "removed" ? "danger" : "warn"}>{info.status}</Chip>}</>} />
      <div className="grid gap-4 lg:grid-cols-[1fr_1fr]">
        <Panel title={`History · ${d?.history.length ?? 0}`} dense>
          {d?.history.length ? (
            <Table head={["When", "Kind", "Detail"]}>
              {d.history.map((h) => (
                <tr key={h.id}>
                  <Td mono className="text-fg-subtle">{utcDateTime(h.at)}</Td>
                  <Td><Chip tone={h.kind === "event" ? "signal" : h.kind === "removed" ? "danger" : h.kind === "change" ? "info" : "default"}>{h.kind}</Chip></Td>
                  <Td>
                    {h.event_slug ? <Link href={`/event/${h.event_slug}`} className="hover:underline">{h.event_title}</Link> : h.change_id ? <span className="text-fg-muted">{h.change_kind} change · signal {h.signal?.toFixed(2)}</span> : h.note ?? <span className="text-fg-subtle">snapshot {h.snapshot_id}</span>}
                  </Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty>No history for this URL.</Empty>
          )}
        </Panel>
        <div className="flex flex-col gap-4">
          <Panel title="Compare any two versions">
            <CompareForm snapshots={(d?.snapshots ?? []).map((s) => ({ id: s.id, label: `${utcDateTime(s.captured_at)} · ${shortHash(s.canonical_hash, 8)}` }))} />
          </Panel>
          <Panel title={`Snapshots · ${d?.snapshots.length ?? 0}`} dense>
            {d?.snapshots.length ? (
              <Table head={["Captured", "HTTP", "Size", "Hash", ""]}>
                {d.snapshots.map((s) => (
                  <tr key={s.id}>
                    <Td mono className="text-fg-subtle">{utcDateTime(s.captured_at)}</Td>
                    <Td mono>{s.http_status ?? "—"}</Td>
                    <Td mono>{fmtBytes(s.content_length)}</Td>
                    <Td mono className="text-fg-subtle">{shortHash(s.canonical_hash)}</Td>
                    <Td><a href={`/api/v1/snapshots/${s.id}?raw=1`} target="_blank" rel="noopener noreferrer" className="text-info hover:underline">raw</a></Td>
                  </tr>
                ))}
              </Table>
            ) : (
              <Empty>No snapshots.</Empty>
            )}
          </Panel>
        </div>
      </div>
    </>
  );
}