"use client";

import { useEffect, useState } from "react";

import { useSearchParams } from "next/navigation";

import Link from "next/link";

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

import { StatusPill, classifyStatus } from "@/components/status-pill";

import { formatDate, congressLabel, formatBillNumber, ordinal } from "@/lib/format";

import {

  SearchFilterBar,

  FilterField,

  FilterInput,

  FilterSelect,

  FilterSubmit,

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

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

const STATUS_SHORT: Record<string, string> = {

  passed: "Passed",

  failed: "Failed",

  held: "In committee",

  pending: "Pending",

  neutral: "Introduced",

};

function BillsSkeleton() {

  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-40 animate-pulse rounded-sm bg-graphite" />

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

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

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

        ))}

      </div>

    </div>

  );

}

function BillCards({ bills }: { bills: BillListItem[] }) {

  return (

    <ul

      style={{ display: "flex", flexDirection: "column", gap: "12px", listStyle: "none", padding: 0, margin: 0 }}

      role="list"

    >

      {bills.map((b) => {

        const variant = classifyStatus(b.status);

        const cong = congressLabel(b.congress);

        return (

          <li key={b.id}>

            <div

              style={{

                borderRadius: "10px",

                border: "1px solid var(--dk-line)",

                background: "var(--dk-surface)",

                padding: "clamp(20px, 3vw, 28px)",

                transition: "border-color 0.2s, background 0.2s",

              }}

            >

              <div

                style={{

                  display: "flex",

                  flexWrap: "wrap",

                  alignItems: "flex-start",

                  justifyContent: "space-between",

                  gap: "12px",

                  marginBottom: "12px",

                }}

              >

                <span

                  className="font-mono"

                  style={{ fontSize: "13px", color: "var(--dk-ash-2)", letterSpacing: "0.06em", fontWeight: 700 }}

                >

                  {formatBillNumber(b.number)}

                  {cong ? (

                    <span style={{ color: "var(--dk-ash-2)", fontWeight: 400, marginLeft: "8px" }}>

                      {cong}

                    </span>

                  ) : null}

                </span>

                <StatusPill variant={variant}>

                  {STATUS_SHORT[variant] ?? "Introduced"}

                </StatusPill>

              </div>

              <Link

                href={b.href}

                className="focus-ring font-prose text-paper"

                style={{

                  display: "block",

                  fontSize: "clamp(1rem, 1.8vw, 1.125rem)",

                  lineHeight: 1.5,

                  textDecoration: "underline",

                  textDecorationColor: "var(--dk-line)",

                  textUnderlineOffset: "3px",

                  marginBottom: "16px",

                }}

              >

                {b.title}

              </Link>

              <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "16px" }}>

                {b.policyArea ? (

                  <Link

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

                    className="focus-ring label hover:underline"

                    style={{ color: "var(--dk-signal)", fontSize: "12px", letterSpacing: "0.1em" }}

                  >

                    {b.policyArea}

                  </Link>

                ) : null}

                <span className="font-mono" style={{ fontSize: "12px", color: "var(--dk-ash-2)" }}>

                  {formatDate(b.updatedAt)}

                </span>

                <SourceLink url={b.sourceUrl} />

              </div>

            </div>

          </li>

        );

      })}

    </ul>

  );

}

function dropParam(current: URLSearchParams, key: string): string {

  const next = new URLSearchParams(current.toString());

  next.delete(key);

  const s = next.toString();

  return s ? `/bills?${s}` : "/bills";

}

export function BillsBrowser({

  policyAreas,

  congresses,

}: {

  policyAreas: string[];

  congresses: number[];

}) {

  const sp = useSearchParams();

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

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

  const congressRaw = sp.get("congress") ?? "";

  const congressNum = parseInt(congressRaw, 10);

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

  const [bills, setBills] = useState<BillListItem[]>([]);

  const [total, setTotal] = useState(0);

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

  const [shown, setShown] = useState(50);

  useEffect(() => {

    setLoading(true);

    setShown(50);

    const params = new URLSearchParams();

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

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

    if (congressRaw) params.set("congress", congressRaw);

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

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

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

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

      .then((data) => {

        setBills(data.items ?? []);

        setTotal(data.total ?? 0);

      })

      .catch(() => {

        setBills([]);

        setTotal(0);

      })

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

  }, [policyArea, q, congressRaw, sortParam]);

  const isFiltered = !!(policyArea || q || Number.isFinite(congressNum) || sortParam);

  const activeChips: Array<{ label: string; href: string }> = [];

  if (policyArea)

    activeChips.push({ label: `Area: ${policyArea}`, href: dropParam(sp, "policyArea") });

  if (q)

    activeChips.push({ label: `Search: ${q}`, href: dropParam(sp, "q") });

  if (Number.isFinite(congressNum))

    activeChips.push({ label: `Congress: ${congressNum}`, href: dropParam(sp, "congress") });

  if (loading) {

    return <BillsSkeleton />;

  }

  return (

    <div>

      {}

      {activeChips.length > 0 ? (

        <div className="flex flex-wrap items-center gap-2" style={{ marginBottom: "16px" }}>

          {activeChips.map((c) => (

            <Link

              key={c.label}

              href={c.href}

              className="focus-ring no-underline"

              style={{

                display: "inline-flex",

                alignItems: "center",

                gap: "6px",

                minHeight: "44px",

                padding: "0 14px",

                border: "1px solid var(--dk-line)",

                borderRadius: "8px",

                fontFamily: "var(--font-mono), ui-monospace, monospace",

                fontSize: "12px",

                letterSpacing: "0.08em",

                textTransform: "uppercase",

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

              }}

            >

              <span aria-hidden="true">×</span> {c.label}

            </Link>

          ))}

          <Link

            href="/bills"

            className="focus-ring no-underline"

            style={{

              display: "inline-flex",

              alignItems: "center",

              minHeight: "44px",

              padding: "0 14px",

              fontFamily: "var(--font-mono), ui-monospace, monospace",

              fontSize: "12px",

              letterSpacing: "0.08em",

              textTransform: "uppercase",

              color: "var(--dk-paper)",

              textDecoration: "underline",

              textUnderlineOffset: "4px",

            }}

          >

            Clear all

          </Link>

        </div>

      ) : null}

      {}

      <div className="mt-8">

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

          <SearchFilterBar

            count={total}

            countLabel="bill"

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

          >

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

              <FilterInput

                name="q"

                defaultValue={q}

                placeholder="Bill number or title…"

                aria-label="Search bills by number or title"

              />

            </FilterField>

            <FilterField label="Policy area">

              <FilterSelect

                name="policyArea"

                defaultValue={policyArea}

                aria-label="Filter by policy area"

                options={[

                  { value: "", label: "Any area" },

                  ...policyAreas.map((p) => ({ value: p, label: p })),

                ]}

              />

            </FilterField>

            <FilterField label="Congress">

              <FilterSelect

                name="congress"

                defaultValue={Number.isFinite(congressNum) ? String(congressNum) : ""}

                aria-label="Filter by Congress number"

                options={[

                  { value: "", label: "Any congress" },

                  ...congresses.map((c) => ({ value: String(c), label: ordinal(c) })),

                ]}

              />

            </FilterField>

            <FilterField label="Sort by">

              <FilterSelect

                name="sort"

                defaultValue={sortParam}

                aria-label="Sort bills"

                options={[

                  { value: "", label: "Newest action" },

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

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

                ]}

              />

            </FilterField>

            <FilterSubmit />

          </SearchFilterBar>

        </form>

      </div>

      {}

      <section style={{ marginTop: "32px" }} aria-label="Bills list">

        <p className="label" style={{ color: "var(--dk-ash)", marginBottom: "24px" }}>

          {total.toLocaleString()} bill{total === 1 ? "" : "s"}

          {isFiltered ? " match" : ""} · showing {Math.min(shown, bills.length).toLocaleString()}

        </p>

        {bills.length === 0 ? (

          <div className="rounded-[6px] border border-line bg-surface p-8" role="status">

            <p className="font-prose" style={{ fontSize: "1.0625rem", color: "var(--dk-ash)" }}>

              No bills match this filter in the current record.

            </p>

          </div>

        ) : (

          <>

            <BillCards bills={bills.slice(0, shown)} />

            {bills.length > shown ? (

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

                <span className="label" style={{ color: "var(--dk-ash-2)" }}>

                  Showing {shown.toLocaleString()} of {bills.length.toLocaleString()}

                </span>

                <button

                  type="button"

                  onClick={() => setShown((n) => n + 50)}

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

                >

                  Show {Math.min(50, bills.length - shown).toLocaleString()} more

                </button>

              </div>

            ) : null}

          </>

        )}

      </section>

    </div>

  );

}