"use client";

import { useMemo, useState } from "react";

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

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

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

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

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

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

export function ExecutiveBrowser({

  seed,

  typeLabels,

}: {

  seed: ExecutiveAction[];

  typeLabels: Record<string, string>;

}) {

  const types = useMemo(

    () =>

      Array.from(new Set(seed.map((e) => (e.type || "").toLowerCase()))).sort(),

    [seed]

  );

  const [type, setType] = useState("");

  const [q, setQ] = useState("");

  const filtered = useMemo(() => {

    const query = q.trim().toLowerCase();

    return seed.filter((e) => {

      if (type && (e.type || "").toLowerCase() !== type) return false;

      if (

        query &&

        !e.title.toLowerCase().includes(query) &&

        !e.agency.toLowerCase().includes(query)

      ) {

        return false;

      }

      return true;

    });

  }, [seed, type, q]);

  return (

    <>

      <Card className="p-4 sm:p-5">

        <div className="grid gap-3 sm:grid-cols-[1fr_auto] sm:items-end">

          <label className="block">

            <span className="label mb-1.5 block">Search title or agency</span>

            <input

              type="search"

              value={q}

              onChange={(e) => setQ(e.target.value)}

              placeholder="e.g. emissions, FAA, Treasury"

              aria-label="Search Federal Register actions"

              className="focus-ring w-full rounded-[2px] border border-line bg-ink px-3 py-2 font-mono text-[13px] text-paper placeholder:text-ash-2"

            />

          </label>

          <label className="block">

            <span className="label mb-1.5 block">Type</span>

            <select

              value={type}

              onChange={(e) => setType(e.target.value)}

              aria-label="Filter by action type"

              className={clsx(

                "focus-ring rounded-[2px] border border-line bg-ink px-3 py-2",

                "font-mono text-[13px] text-paper"

              )}

            >

              <option value="" className="bg-surface text-paper">

                All types

              </option>

              {types.map((t) => (

                <option key={t} value={t} className="bg-surface text-paper">

                  {typeLabels[t] || t}

                </option>

              ))}

            </select>

          </label>

        </div>

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

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

            {filtered.length} of {seed.length} actions

          </p>

          {(q || type) && (

            <button

              type="button"

              onClick={() => {

                setQ("");

                setType("");

              }}

              className="focus-ring label rounded-sm px-2 py-1 text-ash underline underline-offset-4 hover:text-paper"

            >

              Clear

            </button>

          )}

        </div>

      </Card>

      <div className="mt-6">

        {filtered.length === 0 ? (

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

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

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

              Adjust the filter or search. The Federal Register feed updates daily.

            </p>

          </Card>

        ) : (

          <ExecutiveTable rows={filtered} typeLabels={typeLabels} />

        )}

      </div>

    </>

  );

}

function ExecutiveTable({

  rows: items,

  typeLabels,

}: {

  rows: ExecutiveAction[];

  typeLabels: Record<string, string>;

}) {

  const columns: Column[] = [

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

    { key: "type", header: "Type", hideOnCard: true, width: "9rem" },

    { key: "title", header: "Title", cardTitle: true },

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

  ];

  const data: Row[] = items.map((e) => ({

    key: e.id,

    cells: {

      date: <span className="tabular-nums text-ash">{formatDate(e.date)}</span>,

      type: (

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

          {typeLabels[(e.type || "").toLowerCase()] || e.type || "-"}

        </span>

      ),

      title: (

        <span className="text-paper">

          <span className="block">{e.title}</span>

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

            {e.agency}

            {e.frDocNumber ? ` · Doc ${e.frDocNumber}` : ""}

          </span>

        </span>

      ),

      source: <SourceLink url={e.sourceUrl} label="FR" />,

    },

  }));

  return (

    <DataTable

      caption="Federal Register actions: date, type, title, agency, document number, source."

      cardLabel="Federal Register actions"

      columns={columns}

      rows={data}

      pageSize={50}

    />

  );

}