import type { Metadata } from "next";

import Link from "next/link";

import { Suspense } from "react";

import { getFiscal, getApportionments, type Apportionment } from "@/lib/feed";

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

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

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

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

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

import { SpendingAwardsBrowser } from "@/components/spending-awards-browser";

export const metadata: Metadata = {

  title: "Spending",

  description:

    "Federal awards, OMB apportionments, and fiscal totals from USAspending.gov, .max.gov, and Treasury. Every figure sourced.",

};

export const revalidate = 300;

function dedash(s: string): string {

  return s ? s.replace(/--/g, "-") : s;

}

function apportionmentColor(status: string): string {

  const s = (status || "").toLowerCase();

  if (s.startsWith("withhold")) return "var(--dk-nay)";

  if (s.startsWith("delay")) return "var(--dk-hold)";

  return "var(--dk-yea)";

}

function AwardsSkeleton() {

  return (

    <div className="mt-8 space-y-4">

      <div className="h-14 w-full animate-pulse rounded-sm bg-graphite" />

      <div className="mt-8 mb-4 h-4 w-48 animate-pulse rounded-sm bg-graphite" />

      <div className="space-y-1">

        {Array.from({ length: 10 }).map((_, i) => (

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

        ))}

      </div>

    </div>

  );

}

export default function SpendingPage() {

  const fiscal = getFiscal();

  const apportionments = getApportionments();

  const withheld = apportionments.filter((a) =>

    (a.status || "").toLowerCase().startsWith("withhold")

  );

  const delayed = apportionments.filter((a) =>

    (a.status || "").toLowerCase().startsWith("delay")

  );

  const released = apportionments.filter((a) =>

    (a.status || "").toLowerCase().startsWith("release")

  );

  const withholdTotal = withheld.reduce(

    (n, a) => n + (a.appropriated ?? 0) - (a.apportioned ?? 0),

    0

  );

  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"

          >

            Spending

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

        title="Dollars, by official record"

        lead="Awards from USAspending.gov; debt, outlays, and cash from the Daily Treasury Statement. Figures only - no characterization."

      />

      {}

      <nav

        aria-label="Spending sections"

        style={{ marginBottom: "clamp(24px, 4vw, 40px)" }}

      >

        <p

          className="label"

          style={{ color: "var(--dk-ash-2)", fontSize: "12px", letterSpacing: "0.12em", marginBottom: "10px" }}

        >

          Jump to

        </p>

        <div className="flex flex-wrap gap-2">

          {[

            { href: "#awards", label: "Awards" },

            { href: "#apportionment", label: "Apportionment tracker" },

            { href: "#fiscal", label: "Fiscal totals" },

          ].map(({ href, label }) => (

            <a

              key={href}

              href={href}

              className="focus-ring label inline-flex min-h-[44px] items-center rounded-[3px] border border-line bg-surface px-4 text-ash transition-colors hover:bg-graphite hover:text-paper no-underline"

              style={{ fontSize: "12px", letterSpacing: "0.10em" }}

            >

              {label}

            </a>

          ))}

        </div>

      </nav>

      {}

      <section id="awards">

      <Suspense fallback={<AwardsSkeleton />}>

        <SpendingAwardsBrowser />

      </Suspense>

      </section>

      {}

      <section id="apportionment" style={{ marginTop: "clamp(40px, 7vw, 64px)" }}>

        <SectionHeader

          eyebrow="Apportionments"

          title="Impound tracker"

          description="Appropriations vs. amounts apportioned for spending, per agency and account. A withheld or delayed status is recorded as fact, not characterized."

        />

        {}

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

          <ImpoundCard label="Released" count={released.length} color="var(--dk-yea)" />

          <ImpoundCard label="Delayed" count={delayed.length} color="var(--dk-hold)" />

          <ImpoundCard

            label="Withheld"

            count={withheld.length}

            color="var(--dk-nay)"

            sub={withholdTotal > 0 ? `${formatUsd(withholdTotal, { compact: true })} gap` : undefined}

          />

        </div>

        {apportionments.length === 0 ? (

          <Card className="p-5">

            <p className="font-mono text-[13px] text-ash">

              Apportionment data from OMB (.max.gov) is not yet in the record.

              When the feed is active, each row shows appropriated vs. apportioned

              and a released, delayed, or withheld status.

            </p>

          </Card>

        ) : (

          <ApportionmentsTable apportionments={apportionments} color={apportionmentColor} />

        )}

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

          Source: apportionment-public.max.gov (OMB). Appropriated and apportioned are recorded figures; the gap is shown where one exists.

        </p>

      </section>

      {}

      <section id="fiscal" style={{ marginTop: "clamp(40px, 7vw, 64px)" }}>

        <SectionHeader eyebrow="Treasury" title="Fiscal totals" />

        {fiscal.length > 0 ? (

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

            {fiscal.map((m) => (

              <Card key={m.id} className="p-5">

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

                <p className="display text-2xl text-paper">{m.valueText}</p>

                <p className="label mt-2 text-ash-2">{formatDate(m.date)}</p>

                <div className="mt-3">

                  <SourceLink url={m.sourceUrl} />

                </div>

              </Card>

            ))}

          </div>

        ) : (

          <Card className="p-5">

            <p className="label mb-2">Fiscal totals</p>

            <p className="font-mono text-[13px] text-ash">

              Debt, outlays, and cash figures from Treasury are not yet in the

              record. The Daily Treasury Statement feed will populate this panel.

            </p>

            <div className="mt-3">

              <SourceLink url="https://fiscaldata.treasury.gov/datasets/daily-treasury-statement/operating-cash-balance" />

            </div>

          </Card>

        )}

      </section>

      {}

      <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="Spending - Federal awards and apportionments"

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

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

        />

      </div>

    </div>

  );

}

function ApportionmentsTable({

  apportionments,

  color,

}: {

  apportionments: Apportionment[];

  color: (s: string) => string;

}) {

  const columns: Column[] = [

    { key: "agency", header: "Agency", cardTitle: true },

    { key: "account", header: "Account", width: "7.5rem" },

    { key: "appropriated", header: "Appropriated", align: "right", width: "8rem", hideOnCard: true },

    { key: "apportioned", header: "Apportioned", align: "right", width: "8rem", hideOnCard: true },

    { key: "status", header: "Status", width: "6.5rem" },

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

  ];

  const rows: Row[] = apportionments.map((a) => {

    const c = color(a.status);

    return {

      key: a.id,

      cells: {

        agency: <span className="text-paper">{dedash(a.agency)}</span>,

        account: <span className="text-ash">{a.account}</span>,

        appropriated: (

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

            {a.appropriated == null ? "-" : formatUsd(a.appropriated)}

          </span>

        ),

        apportioned: (

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

            {a.apportioned == null ? "-" : formatUsd(a.apportioned)}

          </span>

        ),

        status: (

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

            <span

              aria-hidden="true"

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

              style={{ backgroundColor: c }}

            />

            {a.status}

          </span>

        ),

        source: <SourceLink url={a.sourceUrl} label="OMB" />,

      },

    };

  });

  return (

    <DataTable

      caption="OMB apportionments: agency, account, appropriated, apportioned, status, source."

      cardLabel="OMB apportionments"

      columns={columns}

      rows={rows}

    />

  );

}

function ImpoundCard({

  label,

  count,

  color,

  sub,

}: {

  label: string;

  count: number;

  color: string;

  sub?: string;

}) {

  return (

    <Card className="p-5">

      <div className="label mb-2 flex items-center gap-1.5" style={{ color }}>

        <span

          aria-hidden="true"

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

          style={{ backgroundColor: color }}

        />

        {label}

      </div>

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

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

        <span className="label text-ash-2">account{count === 1 ? "" : "s"}</span>

      </div>

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

    </Card>

  );

}