"use client";

import { useEffect, useState } from "react";

import { useSearchParams } from "next/navigation";

import Link from "next/link";

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

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

import { MemberAvatar } from "@/components/member-avatar";

import { SearchBox } from "@/components/search-box";

import { ShowMore } from "@/components/show-more";

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

import type { BillListItem, MemberSummary, ExecutiveAction, StateCoverage } from "@/lib/feed";

function formatDistrict(chamber: string, district: number | null): string {

  if (chamber === "senate") return "";

  if (district === null || district <= 0) return " · At-Large";

  return ` · Dist. ${district}`;

}

type SearchResultAward = {

  id: string;

  agency: string;

  recipient: string;

  amount: number;

  sourceUrl: string;

};

type SearchResults = {

  bills: BillListItem[];

  members: MemberSummary[];

  executive: ExecutiveAction[];

  awards: SearchResultAward[];

  states: StateCoverage[];

};

type ResultType = "all" | "bills" | "members" | "executive" | "awards" | "states";

const TYPE_LABELS: Record<ResultType, string> = {

  all: "All types",

  bills: "Bills",

  members: "Members",

  executive: "Federal Register",

  awards: "Federal awards",

  states: "States",

};

function buildHref(q: string, type: ResultType, sort: string): string {

  const params = new URLSearchParams();

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

  if (type && type !== "all") params.set("type", type);

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

  const qs = params.toString();

  return `/search${qs ? `?${qs}` : ""}`;

}

function applySortToResults(results: SearchResults, sort: string): SearchResults {

  if (!sort || sort === "relevance") return results;

  if (sort === "alpha") {

    return {

      ...results,

      bills: [...results.bills].sort((a, b) => a.title.localeCompare(b.title)),

      members: [...results.members].sort((a, b) => a.name.localeCompare(b.name)),

      executive: [...results.executive].sort((a, b) => a.title.localeCompare(b.title)),

    };

  }

  if (sort === "amount") {

    return {

      ...results,

      awards: [...results.awards].sort((a, b) => b.amount - a.amount),

    };

  }

  return results;

}

function ResultGroup({

  title,

  count,

  children,

}: {

  title: string;

  count: number;

  children: React.ReactNode;

}) {

  return (

    <div>

      <p className="label mb-3">

        {title} · {count}

      </p>

      <Card>{children}</Card>

    </div>

  );

}

function SearchSkeleton() {

  return (

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

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

      <div className="mt-6 h-8 w-64 animate-pulse rounded-sm bg-graphite" />

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

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

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

        ))}

      </div>

    </div>

  );

}

export function SearchBrowser() {

  const sp = useSearchParams();

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

  const typeParam = (sp.get("type") ?? "all") as ResultType;

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

  const [rawResults, setRawResults] = useState<SearchResults>({

    bills: [],

    members: [],

    executive: [],

    awards: [],

    states: [],

  });

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

  useEffect(() => {

    if (!q) {

      setRawResults({ bills: [], members: [], executive: [], awards: [], states: [] });

      return;

    }

    setLoading(true);

    fetch(`/api/search?q=${encodeURIComponent(q)}`)

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

      .then((data) => {

        setRawResults({

          bills: data.bills ?? [],

          members: data.members ?? [],

          executive: data.executive ?? [],

          awards: data.awards ?? [],

          states: data.states ?? [],

        });

      })

      .catch(() => {

        setRawResults({ bills: [], members: [], executive: [], awards: [], states: [] });

      })

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

  }, [q]);

  const results = applySortToResults(rawResults, sortParam);

  const total =

    results.bills.length +

    results.members.length +

    results.executive.length +

    results.awards.length +

    results.states.length;

  const activeType: ResultType =

    ["all", "bills", "members", "executive", "awards", "states"].includes(typeParam)

      ? typeParam

      : "all";

  const showBills = activeType === "all" || activeType === "bills";

  const showMembers = activeType === "all" || activeType === "members";

  const showExec = activeType === "all" || activeType === "executive";

  const showAwards = activeType === "all" || activeType === "awards";

  const showStates = activeType === "all" || activeType === "states";

  const visibleTotal =

    (showBills ? results.bills.length : 0) +

    (showMembers ? results.members.length : 0) +

    (showExec ? results.executive.length : 0) +

    (showAwards ? results.awards.length : 0) +

    (showStates ? results.states.length : 0);

  return (

    <div>

      <SearchBox initialValue={q} />

      {!q ? (

        <div className="mt-6">

          <p className="label mb-3 text-ash-2">Try a starting point</p>

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

            {["tax", "defense", "California", "appropriations", "Texas", "immigration"].map(

              (chip) => (

                <Link

                  key={chip}

                  href={`/search?q=${encodeURIComponent(chip)}`}

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

                >

                  {chip}

                </Link>

              )

            )}

          </div>

        </div>

      ) : null}

      {loading ? (

        <div className="mt-10">

          <SearchSkeleton />

        </div>

      ) : q ? (

        <div className="mt-10">

          {}

          <div className="mb-6 flex flex-wrap items-center justify-between gap-3">

            {}

            <div className="flex flex-wrap gap-2" role="group" aria-label="Filter results by type">

              {(["all", "bills", "members", "executive", "awards", "states"] as ResultType[]).map(

                (type) => {

                  const count =

                    type === "all"

                      ? total

                      : type === "bills"

                      ? results.bills.length

                      : type === "members"

                      ? results.members.length

                      : type === "executive"

                      ? results.executive.length

                      : type === "awards"

                      ? results.awards.length

                      : results.states.length;

                  if (type !== "all" && count === 0) return null;

                  const active = activeType === type;

                  return (

                    <Link

                      key={type}

                      href={buildHref(q, type, sortParam)}

                      aria-current={active ? "true" : undefined}

                      className={[

                        "focus-ring label inline-flex min-h-[44px] items-center rounded-[2px] border px-3 transition-colors",

                        active

                          ? "border-paper bg-surface text-paper"

                          : "border-line bg-surface text-ash hover:bg-graphite hover:text-paper",

                      ].join(" ")}

                    >

                      {TYPE_LABELS[type]}

                      {count > 0 ? (

                        <span className="ml-1.5 tabular-nums text-ash-2">{count}</span>

                      ) : null}

                    </Link>

                  );

                }

              )}

            </div>

            {}

            <form method="get" action="/search" className="flex items-center gap-2">

              <input type="hidden" name="q" value={q} />

              {activeType !== "all" && (

                <input type="hidden" name="type" value={activeType} />

              )}

              <label htmlFor="search-sort" className="label text-ash-2">

                Sort

              </label>

              <select

                id="search-sort"

                name="sort"

                defaultValue={sortParam}

                aria-label="Sort search results"

                className="focus-ring min-h-[44px] rounded-[3px] border border-line bg-surface px-3 py-2 font-mono text-[13px] text-paper"

              >

                <option value="">Relevance / newest</option>

                <option value="alpha">Alphabetical (A-Z)</option>

                <option value="amount">By amount (awards)</option>

              </select>

              <button

                type="submit"

                className="focus-ring label min-h-[44px] rounded-[3px] border border-line bg-surface px-3 text-paper hover:bg-graphite"

              >

                Apply

              </button>

            </form>

          </div>

          <p className="label mb-6 text-ash">

            {visibleTotal} result{visibleTotal === 1 ? "" : "s"} for “{q}”

            {activeType !== "all" ? ` · ${TYPE_LABELS[activeType]}` : ""}

          </p>

          {visibleTotal === 0 ? (

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

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

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

                Try a state code, a bill number, an agency, or a member's name.

              </p>

            </Card>

          ) : (

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

              {showMembers && results.members.length > 0 ? (

                <ResultGroup title="Members" count={results.members.length}>

                  <ShowMore

                    pageSize={50}

                    items={results.members.map((m) => (

                      <Link

                        key={m.id}

                        href={m.href}

                        className="focus-ring group flex items-center gap-3 border-b border-line p-3 transition-colors last:border-0 hover:bg-graphite/60"

                      >

                        <MemberAvatar name={m.name} photoUrl={m.photoUrl} size="sm" />

                        <span className="min-w-0">

                          <span className="block font-mono text-[13px] text-paper group-hover:underline">

                            {m.name}

                          </span>

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

                            {m.chamber === "senate" ? "Senate" : "House"} · {m.state}

                            {formatDistrict(m.chamber, m.district)} · {m.party}

                          </span>

                        </span>

                      </Link>

                    ))}

                  />

                </ResultGroup>

              ) : null}

              {showBills && results.bills.length > 0 ? (

                <ResultGroup title="Bills" count={results.bills.length}>

                  <ShowMore

                    pageSize={50}

                    items={results.bills.map((b) => {

                      const cong = congressLabel(b.congress);

                      return (

                        <Link

                          key={b.id}

                          href={b.href}

                          className="focus-ring group block border-b border-line p-3 transition-colors last:border-0 hover:bg-graphite/60"

                        >

                          <p className="font-mono text-[13px] text-paper group-hover:underline">

                            {formatBillNumber(b.number)}

                            {cong ? ` · ${cong}` : ""}

                          </p>

                          <p className="font-mono text-[12px] text-ash">{b.title}</p>

                          <p className="label mt-1 text-ash-2">{b.policyArea}</p>

                        </Link>

                      );

                    })}

                  />

                </ResultGroup>

              ) : null}

              {showExec && results.executive.length > 0 ? (

                <ResultGroup title="Federal Register" count={results.executive.length}>

                  <ShowMore

                    pageSize={50}

                    items={results.executive.map((e) => (

                      <div

                        key={e.id}

                        className="flex items-start justify-between gap-3 border-b border-line p-3 last:border-0"

                      >

                        <div className="min-w-0">

                          <p className="font-mono text-[13px] text-paper">{e.title}</p>

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

                            {e.agency}

                            {e.date ? ` · ${e.date.slice(0, 10)}` : ""}

                          </p>

                        </div>

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

                      </div>

                    ))}

                  />

                </ResultGroup>

              ) : null}

              {showAwards && results.awards.length > 0 ? (

                <ResultGroup title="Federal awards" count={results.awards.length}>

                  <ShowMore

                    pageSize={50}

                    items={results.awards.map((a) => (

                      <div

                        key={a.id}

                        className="flex items-start justify-between gap-3 border-b border-line p-3 last:border-0"

                      >

                        <div className="min-w-0">

                          <p className="font-mono text-[13px] text-paper">{a.agency}</p>

                          <p className="label mt-1 text-ash-2">{a.recipient}</p>

                        </div>

                        <SourceLink url={a.sourceUrl} label="USAspending" />

                      </div>

                    ))}

                  />

                </ResultGroup>

              ) : null}

              {showStates && results.states.length > 0 ? (

                <ResultGroup title="States" count={results.states.length}>

                  <ShowMore

                    pageSize={50}

                    items={results.states.map((s) => (

                      <Link

                        key={s.code}

                        href={`/states/${s.code}`}

                        className="focus-ring group block border-b border-line p-3 transition-colors last:border-0 hover:bg-graphite/60"

                      >

                        <p className="font-mono text-[13px] text-paper group-hover:underline">

                          {s.code} · {s.name}

                        </p>

                      </Link>

                    ))}

                  />

                </ResultGroup>

              ) : null}

            </div>

          )}

        </div>

      ) : null}

    </div>

  );

}