import type { Metadata } from "next";

import Link from "next/link";

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

import { DataTable, type Column, type Row } from "@/components/data-table";

import { getStates, type StateCoverage } from "@/lib/feed";

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

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

export const metadata: Metadata = {

  title: "States",

  description:

    "Coverage for the 50 states, DC, and U.S. territories. State-legislative coverage is rolling out; gaps are recorded, not hidden. Open a state for its delegation and sponsored bills.",

};

export const revalidate = 300;

function coverageMeta(c: StateCoverage["confidence"]): {

  label: string;

  color: string;

} {

  if (c === "ok") return { label: "Current", color: "var(--dk-yea)" };

  if (c === "stale") return { label: "Stale", color: "var(--dk-hold)" };

  return { label: "Coverage rolling out", color: "var(--dk-ash)" };

}

const NON_STATE_CODES = new Set(["DC", "PR", "AS", "GU", "MP", "VI"]);

function buildColumns(): Column[] {

  return [

    { key: "state", header: "Name", cardTitle: true },

    { key: "confidence", header: "Coverage" },

    { key: "seen", header: "Last seen", hideOnCard: true },

    { key: "missing", header: "Not yet in record" },

  ];

}

function buildRows(entries: StateCoverage[]): Row[] {

  return entries.map((s) => {

    const m = coverageMeta(s.confidence);

    return {

      key: s.code,

      cells: {

        state: (

          <Link

            href={`/states/${s.code}`}

            className="focus-ring rounded-sm text-paper underline underline-offset-4 hover:text-paper"

          >

            <span className="mr-2 text-ash-2">{s.code}</span>

            {s.name}

          </Link>

        ),

        confidence: (

          <span className="inline-flex items-center gap-1.5" style={{ color: m.color }}>

            <span

              aria-hidden="true"

              className="inline-block h-1.5 w-1.5 rounded-full"

              style={{ backgroundColor: m.color }}

            />

            {m.label}

          </span>

        ),

        seen: (

          <span className="tabular-nums text-ash-2">

            {s.lastScrape ? formatDate(s.lastScrape) : "-"}

          </span>

        ),

        missing: (

          <span className="uppercase text-ash-2">

            {s.missingTypes.length ? s.missingTypes.join(", ") : "-"}

          </span>

        ),

      },

    };

  });

}

export default function StatesPage() {

  const allJurisdictions = getStates();

  const states50 = allJurisdictions.filter((s) => !NON_STATE_CODES.has(s.code));

  const dcAndTerritories = allJurisdictions.filter((s) => NON_STATE_CODES.has(s.code));

  const ok      = states50.filter((s) => s.confidence === "ok").length;

  const stale   = states50.filter((s) => s.confidence === "stale").length;

  const rolling = states50.filter((s) => s.confidence === "missing").length;

  const columns = buildColumns();

  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"

          >

            States

          </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="State register"

        title="50 states + DC"

        lead="Federal delegation and sponsored bills are on record for every state, DC, and U.S. territory. State-level legislative coverage is rolling out; gaps are recorded here, not hidden."

      />

      {}

      <div className="grid gap-4 sm:grid-cols-3">

        <CoverageCard label="Current" count={ok} level="ok" />

        <CoverageCard label="Stale" count={stale} level="stale" />

        <CoverageCard label="Coverage rolling out" count={rolling} level="missing" />

      </div>

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

        Coverage counts above apply to the 50 states. DC and U.S. territories are listed

        in their own section below.

      </p>

      {}

      <div className="mt-12">

        <div className="mb-6">

          <p className="label mb-2">50 states · federal delegation on record</p>

          <h2

            className="display text-paper"

            style={{ fontSize: "clamp(1.25rem, 4vw, 1.875rem)" }}

          >

            Coverage by state

          </h2>

          <p className="prose-lead mt-3 max-w-2xl text-ash">

            How much of each state's legislature is on record here - across bills,

            votes, and sponsors. Federal delegation and bill sponsorships (from

            congress.gov) are on record regardless. Open a state for its congressional

            delegation.

          </p>

        </div>

        <DataTable

          caption="Per-state coverage: name, coverage level, last scrape, data not yet in record."

          cardLabel="Per-state coverage"

          columns={columns}

          rows={buildRows(states50)}

        />

      </div>

      {}

      <div className="mt-14">

        <div className="mb-6">

          <p className="label mb-2">DC &amp; U.S. territories · not states</p>

          <h2

            className="display text-paper"

            style={{ fontSize: "clamp(1.25rem, 4vw, 1.875rem)" }}

          >

            District of Columbia & territories

          </h2>

          <p className="prose-lead mt-3 max-w-2xl text-ash">

            DC is a federal district. Puerto Rico, American Samoa, Guam, the Northern

            Mariana Islands, and the U.S. Virgin Islands are U.S. territories. None are

            states. Congressional delegation and federal data are included in the record.

          </p>

        </div>

        <DataTable

          caption="DC and U.S. territory coverage: name, coverage level, last scrape, data not yet in record."

          cardLabel="DC and territory coverage"

          columns={columns}

          rows={buildRows(dcAndTerritories)}

        />

      </div>

    </div>

  );

}

function CoverageCard({

  label,

  count,

  level,

}: {

  label: string;

  count: number;

  level: StateCoverage["confidence"];

}) {

  const m = coverageMeta(level);

  return (

    <Card className="p-5">

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

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

        <span

          className="display text-paper"

          style={{ fontSize: "clamp(1.75rem, 6vw, 1.875rem)" }}

        >

          {count}

        </span>

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

      </div>

      <span

        className={clsx("mt-3 inline-block h-0.5 w-12 rounded-full")}

        style={{ backgroundColor: m.color }}

        aria-hidden="true"

      />

    </Card>

  );

}