import { clsx } from "@/lib/cx";

import { SourceLink } from "@/components/source-link";

export function ArchiveLink({

  url,

  label = "Archived copy - Docket",

  className,

}: {

  url: string;

  label?: string;

  className?: string;

}) {

  const safeHref = /^https?:\/\

  return (

    <a

      href={safeHref}

      target="_blank"

      rel="noopener noreferrer nofollow"

      className={clsx(

        "focus-ring label inline-flex min-h-[40px] max-w-full flex-wrap items-center gap-x-1 gap-y-0.5 rounded-[3px] border border-line px-2 py-1 underline underline-offset-4 transition-colors text-ash hover:text-paper hover:border-paper",

        className

      )}

      title="Docket's preserved copy on archive.usdocket.org"

    >

      <span aria-hidden="true">⎘</span>

      <span>{label}</span>

    </a>

  );

}

export function PreservationNote({ className }: { className?: string }) {

  return (

    <p

      className={clsx("font-prose", className)}

      style={{ fontSize: "0.8125rem", lineHeight: 1.5, color: "var(--dk-ash-2)" }}

    >

      Docket preserves a copy so the record survives if the government page

      changes or is taken down. The official source is always linked first.

    </p>

  );

}

export function BillPdfViewer({

  pdfUrl,

  archivePdfUrl,

  sourceUrl,

  billNumber,

}: {

  pdfUrl: string;

  archivePdfUrl: string;

  sourceUrl: string;

  billNumber: string;

}) {

  const hasArchive = !!archivePdfUrl;

  const hasPdf = !!pdfUrl;

  const embedSrc = archivePdfUrl || pdfUrl;

  const officialUrl = pdfUrl || sourceUrl;

  return (

    <section className="mt-12" aria-label="Bill text">

      <div style={{ marginBottom: "20px" }}>

        <p

          className="label"

          style={{ color: "var(--dk-signal)", marginBottom: "10px", fontSize: "12px", letterSpacing: "0.14em" }}

        >

          Bill text

        </p>

        <h2

          className="font-display text-paper"

          style={{ fontSize: "clamp(1.2rem, 3.5vw, 1.5rem)", fontWeight: 800, letterSpacing: "-0.02em", textTransform: "uppercase", lineHeight: 1.05 }}

        >

          Read the official text

        </h2>

      </div>

      {embedSrc ? (

        <div className="rounded-[6px] border border-line bg-surface" style={{ overflow: "hidden" }}>

          <div

            className="flex flex-wrap items-center justify-between gap-2 border-b border-line"

            style={{ padding: "12px 16px" }}

          >

            <p className="label" style={{ color: "var(--dk-ash)" }}>

              <span className="font-mono">{billNumber}</span> - official PDF

            </p>

            <p className="label" style={{ color: "var(--dk-ash-2)" }}>

              {hasArchive ? "Showing Docket's preserved copy" : "Showing govinfo.gov copy"}

            </p>

          </div>

          <iframe

            src={embedSrc}

            title={`${billNumber} bill text (PDF)`}

            style={{ width: "100%", height: "70vh", border: "0", display: "block", background: "var(--dk-ink)" }}

          />

        </div>

      ) : null}

      {}

      <div className="mt-4 flex flex-wrap items-center gap-3">

        <SourceLink url={officialUrl} label="Official source" />

        {hasArchive ? <ArchiveLink url={archivePdfUrl} /> : null}

      </div>

      {hasArchive ? <PreservationNote className="mt-3" /> : null}

      {!embedSrc ? (

        <p

          className="mt-3 font-prose italic"

          style={{ fontSize: "0.9375rem", color: "var(--dk-ash-2)" }}

        >

          No PDF of the bill text is on file yet. The official record is linked

          above.

        </p>

      ) : null}

    </section>

  );

}