"use client";

import { useEffect, useState } from "react";

import { useSearchParams } from "next/navigation";

import { Card, 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 {

  SearchFilterBar,

  FilterField,

  FilterInput,

  FilterSelect,

  FilterSubmit,

} from "@/components/search-filter-bar";

import type { Award } from "@/lib/feed";

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>

  );

}

function AwardsTable({ awards }: { awards: Award[] }) {

  const hasDate = awards.some((a) => a.actionDate && a.actionDate.trim());

  const columns: Column[] = [

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

    { key: "recipient", header: "Recipient" },

    { key: "program", header: "Program", hideOnCard: true },

    ...(hasDate ? [{ key: "date", header: "Date" } as Column] : []),

    { key: "amount", header: "Amount", align: "right" as const },

    { key: "source", header: "Source", align: "right" as const },

  ];

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

    key: a.id,

    cells: {

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

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

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

      ...(hasDate

        ? {

            date: (

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

                {formatDate(a.actionDate)}

              </span>

            ),

          }

        : {}),

      amount: <span className="tabular-nums text-paper">{a.amountText}</span>,

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

    },

  }));

  return (

    <DataTable

      caption="Federal awards: agency, recipient, program, amount, source."

      cardLabel="Federal awards"

      columns={columns}

      rows={rows}

      pageSize={50}

    />

  );

}

export function SpendingAwardsBrowser() {

  const sp = useSearchParams();

  const q = sp.get("q") ?? "";

  const sortParam = sp.get("sort") ?? "";

  const [awards, setAwards] = useState<Award[]>([]);

  const [loading, setLoading] = useState(true);

  useEffect(() => {

    setLoading(true);

    const params = new URLSearchParams();

    if (q) params.set("q", q);

    if (sortParam) params.set("sort", sortParam);

    params.set("limit", "100");

    fetch(`/api/spending/awards?${params.toString()}`)

      .then((r) => r.json())

      .then((data) => {

        setAwards(data.items ?? []);

      })

      .catch(() => {

        setAwards([]);

      })

      .finally(() => setLoading(false));

  }, [q, sortParam]);

  const isFiltered = !!(q || sortParam);

  const totalAwards = awards.reduce((n, a) => n + a.amount, 0);

  if (loading) {

    return <AwardsSkeleton />;

  }

  return (

    <div>

      {}

      <div className="mt-8">

        <form method="get" action="/spending" className="contents">

          <SearchFilterBar

            count={awards.length}

            countLabel="award"

            clearHref={isFiltered ? "/spending" : undefined}

          >

            <FilterField label="Search awards" span="2">

              <FilterInput

                name="q"

                defaultValue={q}

                placeholder="Agency, recipient, or program…"

                aria-label="Search federal awards by agency, recipient, or program"

              />

            </FilterField>

            <FilterField label="Sort by">

              <FilterSelect

                name="sort"

                defaultValue={sortParam}

                aria-label="Sort awards"

                options={[

                  { value: "", label: "Largest first" },

                  { value: "date", label: "Most recent" },

                  { value: "agency", label: "By agency" },

                ]}

              />

            </FilterField>

            <FilterSubmit />

          </SearchFilterBar>

        </form>

      </div>

      {}

      <div className="mt-12">

        <SectionHeader

          eyebrow="Federal awards"

          title="Contracts, grants, and assistance"

          description={`${awards.length} award${awards.length === 1 ? "" : "s"}${isFiltered ? " match" : ""} from USAspending.gov, largest first. The ${awards.length} shown here total ${formatUsd(totalAwards, { compact: true })}.`}

        />

        {awards.length === 0 ? (

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

            <p className="display text-2xl text-paper">No awards match.</p>

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

              Adjust the search above. Federal awards appear as the ingest runs.

            </p>

          </Card>

        ) : (

          <AwardsTable awards={awards} />

        )}

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

          Source: USAspending.gov. Figures reflect recorded award obligations;

          the source link on each row opens the official record.

        </p>

      </div>

    </div>

  );

}