import type { Metadata } from "next";

import Link from "next/link";

import { Card, PageHeader, SectionHeader } from "@/components/ui";

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

import { ExecutiveBrowser } from "@/components/executive-browser";

import { getExecutive } from "@/lib/feed";

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

export const metadata: Metadata = {

  title: "Federal Register",

  description:

    "Executive Orders, proposed and final rules, and notices from the Federal Register. Filterable by type.",

};

export const revalidate = 300;

const TYPE_LABEL: Record<string, string> = {

  eo: "Executive Order",

  nprm: "Proposed Rule",

  final_rule: "Final Rule",

  notice: "Notice",

};

export default function ExecutivePage() {

  const all = getExecutive();

  const byType = all.reduce<Record<string, number>>((m, e) => {

    const k = (e.type || "").toLowerCase();

    m[k] = (m[k] ?? 0) + 1;

    return m;

  }, {});

  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"

          >

            Federal Register

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

      <PageHeader

        eyebrow="Federal Register"

        title="Executive actions"

        lead="Executive Orders, proposed and final rules, and notices published in the Federal Register. Each entry links to the official document on federalregister.gov."

      />

      <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">

        <TypeCard label="Executive Orders" count={byType.eo ?? 0} />

        <TypeCard label="Proposed Rules" count={byType.nprm ?? 0} />

        <TypeCard label="Final Rules" count={byType.final_rule ?? 0} />

        <TypeCard label="Notices" count={byType.notice ?? 0} />

      </div>

      <div className="mt-10">

        <SectionHeader

          eyebrow={`${all.length} actions`}

          title="On the record"

          description="Newest first. Filter by type. Every row links to the Federal Register document."

        />

        <ExecutiveBrowser seed={all} typeLabels={TYPE_LABEL} />

      </div>

      <p className="label mt-8 text-ash-2">

        Source: federalregister.gov API. Types and document numbers are recorded as published; no characterization.

      </p>

      {}

      <div

        style={{

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

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

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

        }}

      >

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

        <CiteThis

          kind="page"

          title="Federal Register - Executive actions"

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

          sourceUrl="https://www.federalregister.gov/"

        />

      </div>

    </div>

  );

}

function TypeCard({ label, count }: { label: string; count: number }) {

  return (

    <Card className="p-5">

      <p className="label mb-2">{label}</p>

      <div className="flex items-baseline gap-2">

        <span className="display text-3xl text-paper">{count}</span>

        <span className="label text-ash-2">on record</span>

      </div>

    </Card>

  );

}