import type { Metadata } from "next";

import Link from "next/link";

import {

  getMembersDefault,

  getMemberCounts,

  getMemberStates,

} from "@/lib/feed";

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

import { MembersBrowser } from "@/components/members-browser";

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

export const metadata: Metadata = {

  title: "Members of Congress",

  description:

    "Browse the U.S. House and Senate. Search by name, state, chamber, or party. Each member links to their full record.",

};

export const revalidate = 300;

export default function MembersPage() {

  const counts = getMemberCounts();

  const defaultMembers = getMembersDefault();

  const hiddenCount = counts.total - defaultMembers.length;

  const states = getMemberStates();

  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"

          >

            Representatives

          </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="Congress roster"

        title="Representatives"

        lead="Search and filter the sitting House and Senate. Open a member to see their recorded votes, sponsored bills, and amendments - what your representative did, on the record."

      />

      <div>

        {

}

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

          <SummaryCard

            label="Currently serving"

            count={counts.currentTotal}

            sub={`${counts.total.toLocaleString()} on record, all Congresses`}

          />

          <SummaryCard

            label="Senate"

            count={counts.currentSenate}

            sub={`${counts.senate.toLocaleString()} on record`}

          />

          <SummaryCard

            label="House"

            count={counts.currentHouse}

            sub={`${counts.house.toLocaleString()} on record`}

          />

        </div>

        <div className="mt-10">

          <MembersBrowser

            seed={defaultMembers}

            states={states}

            hiddenCount={hiddenCount > 0 ? hiddenCount : 0}

          />

        </div>

      </div>

      {}

      <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="Members of Congress - Roster"

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

          sourceUrl="https://bioguide.congress.gov/"

        />

      </div>

    </div>

  );

}

function SummaryCard({

  label,

  count,

  sub,

}: {

  label: string;

  count: number;

  sub?: string;

}) {

  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.toLocaleString()}</span>

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

      </div>

      {sub ? <p className="label mt-2 text-ash-2">{sub}</p> : null}

    </Card>

  );

}