import type { Metadata } from "next";

import Link from "next/link";

import { RegisterHero } from "@/components/register-hero";

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

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

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

import { ChangesFeed } from "@/components/changes-feed";

import {

  getFeedItems,

  getAwardsSummary,

  getChangeEvents,

  getCategories,

  type FeedItem,

} from "@/lib/feed";

import { formatUsd, formatDate, formatEt } from "@/lib/format";

export const metadata: Metadata = {

  title: "The Register",

  description:

    "A live, stamped ledger of official US government actions - bills, votes, and dollars. Every fact sourced.",

};

export const revalidate = 300;

const ACTION_LABEL: Record<FeedItem["kind"], string> = {

  bill: "Bills",

  vote: "Votes",

  award: "Awards",

  amendment: "Amendments",

  rider: "Riders",

  procedural: "Procedural",

  executive: "Federal Register",

  apportionment: "Apportionments",

};

const FEED_RENDER_LIMIT = 150;

export default async function RegisterPage() {

  const items = getFeedItems();

  const shown = items.slice(0, FEED_RENDER_LIMIT);

  const awardStats = getAwardsSummary();

  const changes = getChangeEvents(12);

  const topTopics = getCategories()

    .filter((c) => c.total > 0)

    .sort((a, b) => b.total - a.total)

    .slice(0, 8);

  const kindBreakdown = byKind(items);

  return (

    <>

      <RegisterHero seed={shown.slice(0, 12)} />

      <div className="mx-auto w-full max-w-register px-4 py-12 sm:px-6">

        {

}

        <p className="prose-lead mb-8 max-w-2xl text-ash">

          Every bill, vote, and federal award is listed below, drawn from

          Congress.gov, the Federal Register, and USAspending.gov. Ranked by

          date - never by clicks or editorial judgment. Every entry links to

          its official source.

        </p>

        <SectionHeader

          eyebrow="Full register · ranked"

          title="Every official action, in order"

        />

        {items.length === 0 ? (

          <Card className="p-8 text-center">

            <p className="display text-2xl text-paper">No actions on record.</p>

            <p className="prose-lead mx-auto mt-3 max-w-md text-ash">

              The register fills as the government acts. Each line will carry a

              link to its official source.

            </p>

          </Card>

        ) : (

          <RegisterTable items={shown} />

        )}

        {

}

        <details className="group mt-12">

          <summary className="focus-ring label inline-flex cursor-pointer list-none items-center gap-2 rounded-[3px] border border-line bg-surface px-4 py-3 text-ash hover:text-paper">

            <span aria-hidden="true" className="transition-transform group-open:rotate-90">▶</span>

            More: composition, awards & recently changed

          </summary>

          <div className="mt-6 grid gap-6 sm:grid-cols-2">

            {}

            <Card className="p-5">

              <p className="label mb-4">Composition by action type</p>

              <ul className="space-y-2.5">

                {kindBreakdown.map((a) => {

                  const max = Math.max(1, ...kindBreakdown.map((x) => x.count));

                  return (

                    <li key={a.kind} className="font-mono text-[12px]">

                      <div className="flex items-center justify-between">

                        <span className="text-ash">{ACTION_LABEL[a.kind]}</span>

                        <span className="tabular-nums text-paper">{a.count}</span>

                      </div>

                      <div className="mt-1 h-1 w-full overflow-hidden rounded-full bg-ink">

                        <span

                          className="block h-full rounded-full"

                          style={{

                            width: `${(a.count / max) * 100}%`,

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

                          }}

                        />

                      </div>

                    </li>

                  );

                })}

              </ul>

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

                Proportional to action volume. No editorial weighting.

              </p>

            </Card>

            <Card className="p-5">

              <p className="label mb-4">Awards, on record</p>

              <p className="display text-3xl text-paper">

                {formatUsd(awardStats.total, { compact: true })}

              </p>

              <p className="prose-lead mt-2 text-ash">

                {awardStats.count} federal awards from USAspending.gov, summed across

                the record. Figures only - no characterization.

              </p>

              <Link

                href="/spending"

                className="focus-ring tap label mt-5 gap-1 text-ash underline underline-offset-4 hover:text-paper"

              >

                Spending register →

              </Link>

            </Card>

          </div>

          <div className="mt-6 grid gap-6 sm:grid-cols-2">

            <Card className="p-5">

              <div className="mb-3 flex items-baseline justify-between">

                <p className="label">Recently changed</p>

                <Link

                  href="/calendar"

                  className="focus-ring tap label gap-1 text-ash underline underline-offset-4 hover:text-paper"

                >

                  Calendar →

                </Link>

              </div>

              <ChangesFeed items={changes} />

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

                What the ingest added, updated, or removed. Each entry links to its

                source.

              </p>

            </Card>

            <Card className="p-5">

              <div className="mb-3 flex items-baseline justify-between">

                <p className="label">Browse by topic</p>

                <Link

                  href="/categories"

                  className="focus-ring tap label gap-1 text-ash underline underline-offset-4 hover:text-paper"

                >

                  All topics →

                </Link>

              </div>

              <ul className="flex flex-wrap gap-1.5">

                {topTopics.map((c) => (

                  <li key={c.slug}>

                    <Link

                      href={`/bills?policyArea=${encodeURIComponent(c.label)}`}

                      className="focus-ring label inline-flex min-h-[44px] items-center gap-2 rounded-[3px] border border-line px-2.5 text-ash hover:text-paper"

                    >

                      <span className="text-paper">{c.label}</span>

                      <span className="text-ash-2">{c.total}</span>

                    </Link>

                  </li>

                ))}

              </ul>

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

                Bills and awards grouped by policy area. Counts only - no weighting.

              </p>

            </Card>

          </div>

        </details>

      </div>

    </>

  );

}

function byKind(items: FeedItem[]) {

  const map = new Map<FeedItem["kind"], number>();

  for (const i of items) map.set(i.kind, (map.get(i.kind) ?? 0) + 1);

  return Array.from(map, ([kind, count]) => ({ kind, count })).sort(

    (a, b) => b.count - a.count

  );

}

function RegisterTable({ items }: { items: FeedItem[] }) {

  const columns: Column[] = [

    { key: "date", header: "Date", width: "8rem" },

    { key: "body", header: "Body", hideOnCard: true, width: "6rem" },

    { key: "item", header: "Item", cardTitle: true },

    { key: "action", header: "Action", width: "8rem" },

    { key: "result", header: "Result", align: "right", width: "7rem" },

    { key: "source", header: "Source", align: "right", width: "11rem" },

  ];

  const rows: Row[] = items.map((r) => ({

    key: r.id,

    cells: {

      date: (

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

          {formatEt(r.actionDate) || formatDate(r.actionDate)}

        </span>

      ),

      body: <span className="uppercase text-ash-2">{r.chamber}</span>,

      item: (

        <span className="text-paper">

          {r.href ? (

            <Link

              href={r.href}

              className="focus-ring rounded-sm underline underline-offset-4"

            >

              {r.title}

            </Link>

          ) : (

            r.title

          )}

          {r.summary ? (

            <span className="block text-ash-2">{r.summary}</span>

          ) : null}

        </span>

      ),

      action: r.actionType ? (

        <span className="uppercase text-ash">{r.actionType}</span>

      ) : null,

      result: r.amountText ? (

        <span className="tabular-nums text-paper">{r.amountText}</span>

      ) : null,

      source: <SourceLink url={r.sourceUrl} />,

    },

  }));

  return (

    <DataTable

      caption="Official actions in ranked order: date, body, item, action, result, and source."

      cardLabel="Official actions in ranked order"

      columns={columns}

      rows={rows}

      pageSize={50}

    />

  );

}