import Link from "next/link";
import type { Metadata } from "next";
import { DiffViewer } from "@/components/diff-viewer";
import { Empty, PageHeader, Panel } from "@/components/ui";
import { api } from "@/lib/api";
import { utcDateTime } from "@/lib/format";

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

export default async function ComparePage({ searchParams }: { searchParams: Promise<{ a?: string; b?: string }> }) {
  const { a, b } = await searchParams;
  const d = a && b ? await api.compare(a, b) : null;
  return (
    <>
      <PageHeader kicker="Snapshot comparison" title={d ? <span className="font-mono text-base">{utcDateTime(d.a.captured_at)} → {utcDateTime(d.b.captured_at)}</span> : "Compare"} description={d?.a.url ? <Link href={`/url?u=${encodeURIComponent(d.a.url)}`} className="font-mono text-[12px] hover:underline">{d.a.url}</Link> : "Provide two snapshot ids (?a=&b=)."} />
      {d ? (
        <DiffViewer unified={d.diff.unified} summary={{ kind: "text", added: d.diff.added, removed: d.diff.removed, modified: d.diff.modified, stats: d.diff.stats }} defaultTab="split" />
      ) : (
        <Panel dense><Empty>Snapshots not found.</Empty></Panel>
      )}
    </>
  );
}