import type { Metadata } from "next";

import Link from "next/link";

import { Suspense } from "react";

import { getPolicyAreaLabels, getBillCongresses } from "@/lib/feed";

import { CiteThis } from "@/components/cite-this";

import { BillsBrowser } from "@/components/bills-browser";

export const revalidate = 300;

export const metadata: Metadata = {

  title: "Bills",

  description:

    "Browse bills by policy area. Each bill links to its sponsor, status timeline, and the official record.",

};

export default function BillsPage() {

  const policyAreas = getPolicyAreaLabels();

  const congresses = getBillCongresses();

  return (

    <div

      className="mx-auto w-full max-w-[860px] px-6 sm:px-8"

      style={{

        paddingTop: "clamp(32px, 6vw, 56px)",

        paddingBottom: "clamp(48px, 8vw, 80px)",

      }}

    >

      {}

      <nav aria-label="Breadcrumb" className="mb-10">

        <ol className="flex flex-wrap items-center gap-2" style={{ marginBottom: "12px" }}>

          <li>

            <Link

              href="/"

              className="focus-ring label no-underline hover:underline"

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

            >

              Home

            </Link>

          </li>

          <li aria-hidden="true" className="label" style={{ color: "var(--dk-ash-2)", fontSize: "12px" }}>

            /

          </li>

          <li

            className="label"

            style={{ color: "var(--dk-ash)", fontSize: "12px", letterSpacing: "0.12em" }}

            aria-current="page"

          >

            Bills

          </li>

        </ol>

        <Link

          href="/"

          className="focus-ring tap no-underline hover:underline"

          style={{

            display: "inline-flex",

            alignItems: "center",

            gap: "8px",

            fontFamily: "var(--font-mono), ui-monospace, monospace",

            fontSize: "13px",

            letterSpacing: "0.08em",

            color: "var(--dk-signal)",

          }}

        >

          ← Back to home

        </Link>

      </nav>

      {}

      <header

        style={{

          borderBottom: "1px solid var(--dk-line)",

          paddingBottom: "clamp(28px, 5vw, 48px)",

          marginBottom: "clamp(28px, 5vw, 48px)",

        }}

      >

        {}

        <p

          className="label"

          style={{

            color: "var(--dk-signal)",

            marginBottom: "20px",

            display: "flex",

            alignItems: "center",

            gap: "8px",

            fontSize: "12px",

            letterSpacing: "0.14em",

          }}

        >

          <span

            aria-hidden="true"

            style={{

              width: "5px",

              height: "5px",

              borderRadius: "50%",

              background: "var(--dk-signal)",

              display: "inline-block",

              flexShrink: 0,

            }}

          />

          Legislation

        </p>

        {}

        <h1

          className="font-display text-paper"

          style={{

            fontSize: "clamp(2.2rem, 7vw, 3.75rem)",

            fontWeight: 900,

            lineHeight: 1.0,

            letterSpacing: "-0.01em",

            wordSpacing: "0.06em",

            textTransform: "uppercase",

            maxWidth: "18ch",

            marginBottom: "24px",

          }}

        >

          All Bills

        </h1>

        {}

        <p

          className="font-prose"

          style={{

            fontStyle: "italic",

            fontSize: "clamp(1rem, 1.8vw, 1.125rem)",

            lineHeight: 1.55,

            color: "var(--dk-ash)",

            maxWidth: "52ch",

          }}

        >

          Bills on record, newest action first. Filter by policy area, congress,

          or search by title or number. Each bill links to its sponsor, status

          timeline, and the official record.

        </p>

        <p style={{ marginTop: "20px" }}>

          <Link

            href="/laws"

            className="focus-ring no-underline"

            style={{

              display: "inline-flex",

              alignItems: "center",

              gap: "8px",

              minHeight: "44px",

              padding: "0 16px",

              border: "1px solid var(--dk-line)",

              borderRadius: "8px",

              background: "var(--dk-surface)",

              fontFamily: "var(--font-mono), ui-monospace, monospace",

              fontSize: "12px",

              letterSpacing: "0.08em",

              textTransform: "uppercase",

              color: "var(--dk-signal)",

            }}

          >

            Became law → View Public Laws

          </Link>

        </p>

      </header>

      {}

      <Suspense fallback={<BillsSkeleton />}>

        <BillsBrowser policyAreas={policyAreas} congresses={congresses} />

      </Suspense>

      {}

      <div

        style={{

          marginTop: "clamp(40px, 7vw, 72px)",

          borderTop: "1px solid var(--dk-line)",

          paddingTop: "clamp(24px, 4vw, 40px)",

        }}

      >

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

          Bills sourced from congress.gov. Order is by last action date -no

          editorial weighting. No comment surface appears here, by policy.

        </p>

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

          Cite this page

        </p>

        <CiteThis

          kind="page"

          title="Bills -Browse all bills"

          permalink="https://usdocket.org/bills"

          sourceUrl="https://www.congress.gov/browse/bills"

        />

      </div>

    </div>

  );

}

function BillsSkeleton() {

  return (

    <div className="mt-8">

      <div className="h-14 w-full animate-pulse rounded-sm bg-graphite" />

      <div className="mt-8 mb-4 h-4 w-40 animate-pulse rounded-sm bg-graphite" />

      <div className="space-y-3">

        {Array.from({ length: 16 }).map((_, i) => (

          <div key={i} className="h-24 w-full animate-pulse rounded-sm bg-graphite" />

        ))}

      </div>

    </div>

  );

}