"use client";

import { useMemo, useState, useCallback } from "react";

import Link from "next/link";

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

import { PartyTag } from "@/components/party-tag";

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

import {

  SearchFilterBar,

  FilterField,

  FilterInput,

  FilterSelect,

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

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

import type { MemberSummary } 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}`;

}

export function MembersBrowser({

  seed,

  states,

  hiddenCount = 0,

}: {

  seed: MemberSummary[];

  states: string[];

  hiddenCount?: number;

}) {

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

  const [state, setState] = useState("");

  const [chamber, setChamber] = useState("");

  const [party, setParty] = useState("");

  const [sort, setSort] = useState("");

  const [showAllHistorical, setShowAllHistorical] = useState(false);

  const [allMembers, setAllMembers] = useState<MemberSummary[] | null>(null);

  const [loadingAll, setLoadingAll] = useState(false);

  const handleShowAll = useCallback(async () => {

    if (!showAllHistorical) {

      if (!allMembers && hiddenCount > 0) {

        setLoadingAll(true);

        try {

          const res = await fetch("/api/members?limit=200");

          const first = await res.json();

          const items: MemberSummary[] = [...first.items];

          let offset = first.items.length;

          while (items.length < first.total) {

            const page = await fetch(`/api/members?limit=200&offset=${offset}`);

            const data = await page.json();

            items.push(...data.items);

            offset += data.items.length;

            if (!data.items.length) break;

          }

          setAllMembers(items);

        } catch {

        } finally {

          setLoadingAll(false);

        }

      }

      setShowAllHistorical(true);

    } else {

      setShowAllHistorical(false);

    }

  }, [showAllHistorical, allMembers, hiddenCount]);

  const pool = showAllHistorical && allMembers ? allMembers : seed;

  const filtered = useMemo(() => {

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

    const anyFilterActive = !!(q || state || chamber || party || sort);

    return pool

      .filter((m) => {

        if (

          !anyFilterActive &&

          !showAllHistorical &&

          !m.isCurrent &&

          !m.photoUrl

        ) {

          return false;

        }

        if (

          query &&

          !m.name.toLowerCase().includes(query) &&

          !m.bioguide.toLowerCase().includes(query)

        ) {

          return false;

        }

        if (state && m.state !== state) return false;

        if (chamber && m.chamber !== chamber) return false;

        if (party && m.partyCode !== party) return false;

        return true;

      })

      .sort((a, b) => {

        if (sort === "name") return a.name.localeCompare(b.name);

        if (sort === "state") {

          const sc = a.state.localeCompare(b.state);

          return sc !== 0 ? sc : a.name.localeCompare(b.name);

        }

        if (sort === "chamber") {

          const cc = a.chamber.localeCompare(b.chamber);

          return cc !== 0 ? cc : a.name.localeCompare(b.name);

        }

        const aCurr = a.isCurrent ? 0 : 1;

        const bCurr = b.isCurrent ? 0 : 1;

        if (aCurr !== bCurr) return aCurr - bCurr;

        const aPhoto = a.photoUrl ? 0 : 1;

        const bPhoto = b.photoUrl ? 0 : 1;

        if (aPhoto !== bPhoto) return aPhoto - bPhoto;

        return a.name.localeCompare(b.name);

      });

  }, [pool, q, state, chamber, party, sort, showAllHistorical]);

  const anyFilterActive = !!(q || state || chamber || party || sort);

  return (

    <>

      {

}

      <SearchFilterBar

        count={filtered.length}

        countLabel="member"

        onClear={

          anyFilterActive

            ? () => {

                setQ("");

                setState("");

                setChamber("");

                setParty("");

                setSort("");

              }

            : undefined

        }

      >

        <FilterField label="Search by name" span="2">

          <FilterInput

            value={q}

            onChange={setQ}

            placeholder="Name or bioguide ID…"

            aria-label="Search members by name or bioguide ID"

          />

        </FilterField>

        <FilterField label="State">

          <FilterSelect

            value={state}

            onChange={setState}

            aria-label="Filter by state"

            options={[

              { value: "", label: "All states" },

              ...states.map((s) => ({ value: s, label: s })),

            ]}

          />

        </FilterField>

        <FilterField label="Chamber">

          <FilterSelect

            value={chamber}

            onChange={setChamber}

            aria-label="Filter by chamber"

            options={[

              { value: "", label: "Both chambers" },

              { value: "senate", label: "Senate" },

              { value: "house", label: "House" },

            ]}

          />

        </FilterField>

        <FilterField label="Party">

          <FilterSelect

            value={party}

            onChange={setParty}

            aria-label="Filter by party"

            options={[

              { value: "", label: "All parties" },

              { value: "D", label: "Democrat" },

              { value: "R", label: "Republican" },

              { value: "I", label: "Independent" },

            ]}

          />

        </FilterField>

        <FilterField label="Sort by">

          <FilterSelect

            value={sort}

            onChange={setSort}

            aria-label="Sort members"

            options={[

              { value: "", label: "Default" },

              { value: "name", label: "Name (A-Z)" },

              { value: "state", label: "State (A-Z)" },

              { value: "chamber", label: "Chamber" },

            ]}

          />

        </FilterField>

      </SearchFilterBar>

      {}

      {!anyFilterActive && hiddenCount > 0 && (

        <div className="mt-3 flex justify-end">

          <button

            type="button"

            onClick={handleShowAll}

            disabled={loadingAll}

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

          >

            {loadingAll

              ? "Loading…"

              : showAllHistorical

              ? "Hide historical members without a photo"

              : `Show all ${hiddenCount.toLocaleString()} historical members`}

          </button>

        </div>

      )}

      {!anyFilterActive && !showAllHistorical && hiddenCount > 0 && (

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

          Showing current Congress and members with a recorded photo

        </p>

      )}

      {}

      <div className="mt-6">

        {filtered.length === 0 ? (

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

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

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

              Adjust the filters above. The roster covers the sitting House and

              Senate plus historical members back to the 1st Congress.

            </p>

          </Card>

        ) : (

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

            {filtered.map((m) => (

              <Link

                key={m.id}

                href={m.href}

                className="focus-ring group rounded-[3px] border border-line bg-surface p-4 transition-colors hover:bg-graphite"

              >

                <div className="flex items-start gap-3">

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

                  <div className="flex min-w-0 flex-1 items-start justify-between gap-2">

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

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

                        {m.name}

                      </p>

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

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

                        {m.state}

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

                      </p>

                    </div>

                    <PartyTag party={m.partyCode} />

                  </div>

                </div>

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

                  <span className="label text-ash-2">{m.bioguide}</span>

                  <span className="label text-ash">Record →</span>

                </div>

              </Link>

            ))}

          </div>

        )}

      </div>

    </>

  );

}