"use client";

import { useEffect, useState } from "react";

import { useSearchParams } from "next/navigation";

import Link from "next/link";

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

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

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

import { ArchiveLink } from "@/components/record-archive";

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

import {

  SearchFilterBar,

  FilterField,

  FilterInput,

  FilterSelect,

  FilterSubmit,

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

import { resolveVoteSubject } from "@/lib/vote-subject";

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

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

function trunc(s: string | undefined, max: number): string {

  if (!s) return "";

  return s.length <= max ? s : s.slice(0, max - 1) + "…";

}

function VotesSkeleton() {

  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-1">

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

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

        ))}

      </div>

    </div>

  );

}

function VotesTable({ votes }: { votes: Vote[] }) {

  const columns: Column[] = [

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

    { key: "chamber", header: "Chamber", hideOnCard: true, width: "6rem" },

    { key: "what", header: "What was voted on", cardTitle: true },

    { key: "tally", header: "Tally", align: "right", width: "6rem" },

    { key: "record", header: "Record", align: "right", width: "13rem" },

  ];

  const rows: Row[] = votes.map((v) => {

    const variant = classifyStatus(v.result);

    const subject = resolveVoteSubject(v);

    return {

      key: v.id,

      cells: {

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

        chamber: <span className="uppercase text-ash-2">{v.chamber}</span>,

        what: (

          <span className="block text-paper">

            <Link

              href={v.href ?? "#"}

              className="focus-ring rounded-sm underline underline-offset-4 hover:text-paper"

            >

              <span

                className={

                  subject.kind === "bill"

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

                    : "block text-paper"

                }

              >

                {trunc(subject.primary, 90)}

              </span>

              {subject.secondary ? (

                <span className="mt-0.5 block text-[12px] text-ash-2">

                  {trunc(subject.secondary, 72)}

                </span>

              ) : null}

            </Link>

            <span className="mt-1.5 block">

              <StatusPill variant={variant} dot>

                {v.recorded ? "Recorded" : "Voice / UC"}

              </StatusPill>

            </span>

          </span>

        ),

        tally: (

          <span className="tabular-nums text-paper">

            {v.recorded ? `${v.yea}-${v.nay}` : "-"}

          </span>

        ),

        record: (

          <span className="inline-flex flex-col items-start gap-1.5 sm:items-end">

            <SourceLink url={v.sourceUrl} />

            {v.archiveUrl ? <ArchiveLink url={v.archiveUrl} label="Archived" /> : null}

          </span>

        ),

      },

    };

  });

  return (

    <DataTable

      caption="Recorded votes: date, chamber, what was voted on, tally, and source."

      cardLabel="Recorded votes"

      columns={columns}

      rows={rows}

      pageSize={50}

    />

  );

}

export function VotesBrowser() {

  const sp = useSearchParams();

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

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

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

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

  const [votes, setVotes] = useState<Vote[]>([]);

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

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

  useEffect(() => {

    setLoading(true);

    const params = new URLSearchParams();

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

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

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

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

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

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

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

      .then((data) => {

        setVotes(data.items ?? []);

        setTotal(data.total ?? 0);

      })

      .catch(() => {

        setVotes([]);

        setTotal(0);

      })

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

  }, [chamber, q, result, sort]);

  const isFiltered = !!(chamber || q || result || sort);

  const clearHref = "/votes";

  if (loading) {

    return <VotesSkeleton />;

  }

  return (

    <div>

      {}

      <div className="mt-8">

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

          <SearchFilterBar

            count={votes.length < total ? votes.length : total}

            total={total}

            countLabel="vote"

            clearHref={isFiltered ? clearHref : undefined}

          >

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

              <FilterInput

                name="q"

                defaultValue={q}

                placeholder="Keyword, bill number, question…"

                aria-label="Search votes by keyword or question"

              />

            </FilterField>

            <FilterField label="Chamber">

              <FilterSelect

                name="chamber"

                defaultValue={chamber}

                aria-label="Filter by chamber"

                options={[

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

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

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

                ]}

              />

            </FilterField>

            <FilterField label="Result">

              <FilterSelect

                name="result"

                defaultValue={result}

                aria-label="Filter by vote result"

                options={[

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

                  { value: "passed", label: "Passed" },

                  { value: "failed", label: "Failed" },

                ]}

              />

            </FilterField>

            <FilterField label="Sort by">

              <FilterSelect

                name="sort"

                defaultValue={sort}

                aria-label="Sort votes"

                options={[

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

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

                  { value: "result", label: "By result text" },

                ]}

              />

            </FilterField>

            <FilterSubmit />

          </SearchFilterBar>

        </form>

      </div>

      <div className="mt-8">

        <SectionHeader

          eyebrow={`${total.toLocaleString()} vote${total === 1 ? "" : "s"}${isFiltered ? " match" : ""} · showing ${votes.length}`}

          title="Recorded votes"

          description="Newest action first. A vote with no Yea/Nay tally passed by voice or unanimous consent - no individual record exists for those."

        />

        {votes.length === 0 ? (

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

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

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

              Adjust the filter or search above. The roll-call register covers

              recorded House and Senate votes.

            </p>

          </Card>

        ) : (

          <VotesTable votes={votes} />

        )}

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

          Source: clerk.house.gov and senate.gov roll-call XML. Figures only  - 

          no characterization.

        </p>

      </div>

    </div>

  );

}