import type { Metadata } from "next";

import Link from "next/link";

import { Suspense } from "react";

import { getPublicLawsCount, getPrivateLawsCount } from "@/lib/feed";

import { ordinal } from "@/lib/format";

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

import { LawsBrowser } from "@/components/laws-browser";

export const revalidate = 300;

export const metadata: Metadata = {

  title: "Laws",

  description:

    "Enacted Public Laws of the United States. Each law links to the bill it came from and the official record.",

};

export default function LawsPage() {

  const publicCount = getPublicLawsCount();

  const privateCount = getPrivateLawsCount();

  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"

          >

            Laws

          </li>

        </ol>

        <Link

          href="/bills"

          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)",

          }}

        >

          ← All bills

        </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,

            }}

          />

          Enacted

        </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",

          }}

        >

          Public Laws

        </h1>

        <p

          className="font-prose"

          style={{

            fontStyle: "italic",

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

            lineHeight: 1.55,

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

            maxWidth: "56ch",

          }}

        >

          A Public Law is a bill that has been enacted. Once enacted, it becomes a

          fixed part of the record. This list grows as more bills become law -

          currently {publicCount.toLocaleString()} from the {ordinal(119)} Congress

          {privateCount > 0

            ? `, alongside ${privateCount.toLocaleString()} Private Law${privateCount === 1 ? "" : "s"} (which apply to specific individuals or entities).`

            : "."}

        </p>

      </header>

      <Suspense fallback={<LawsSkeleton />}>

        <LawsBrowser />

      </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)" }}>

          Public Laws are identified by their status on congress.gov. Order is by

          law number -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="Laws -Enacted Public Laws"

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

          sourceUrl="https://www.congress.gov/public-laws/119th-congress"

        />

      </div>

    </div>

  );

}

function LawsSkeleton() {

  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: 12 }).map((_, i) => (

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

        ))}

      </div>

    </div>

  );

}