"use client";

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

import Link from "next/link";

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

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

import { PositionTag } from "@/components/position-tag";

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

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

interface Props {

  bioguide: string;

  year: number | null;

  count: number;

  defaultOpen?: boolean;

}

export function MemberVoteYear({

  bioguide,

  year,

  count,

  defaultOpen = false,

}: Props) {

  const [open, setOpen] = useState(defaultOpen);

  const [votes, setVotes] = useState<MemberVote[] | null>(null);

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

  const [error, setError] = useState(false);

  const fetchedRef = useRef(false);

  const doFetch = useCallback(() => {

    if (fetchedRef.current) return;

    fetchedRef.current = true;

    setLoading(true);

    const yearParam = year == null ? "null" : year.toString();

    fetch(`/api/members/${bioguide}/votes?year=${yearParam}`)

      .then((r) => {

        if (!r.ok) throw new Error("fetch failed");

        return r.json() as Promise<{ votes: MemberVote[] }>;

      })

      .then((data) => {

        setVotes(data.votes);

        setLoading(false);

      })

      .catch(() => {

        fetchedRef.current = false;

        setError(true);

        setLoading(false);

      });

  }, [bioguide, year]);

  useEffect(() => { if (defaultOpen) doFetch(); }, []);

  const handleToggle = useCallback(

    (e: React.SyntheticEvent<HTMLDetailsElement>) => {

      const nowOpen = e.currentTarget.open;

      setOpen(nowOpen);

      if (nowOpen) doFetch();

    },

    [doFetch]

  );

  return (

    <Card className="overflow-hidden">

      {

}

      <details open={open} className="overflow-hidden" onToggle={handleToggle}>

        <summary className="focus-ring flex cursor-pointer items-center justify-between gap-3 px-4 py-3.5">

          <span className="font-mono text-[13px] text-paper">

            {year ?? "Undated"}

          </span>

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

            {count} vote{count === 1 ? "" : "s"}

          </span>

        </summary>

        <div className="overflow-hidden border-t border-line">

          {loading && (

            <p className="px-4 py-3 font-mono text-[13px] text-ash-2">

              Loading…

            </p>

          )}

          {error && (

            <p className="px-4 py-3 font-mono text-[13px] text-ash-2">

              Failed to load - open again to retry.

            </p>

          )}

          {votes && <VoteTable votes={votes} />}

        </div>

      </details>

    </Card>

  );

}

const PAGE = 50;

function VoteTable({ votes }: { votes: MemberVote[] }) {

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

  const columns: Column[] = [

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

    { key: "result", header: "Question", cardTitle: true },

    { key: "voted", header: "Voted", width: "7rem" },

  ];

  const visible = useMemo(() => votes.slice(0, shown), [votes, shown]);

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

    key: v.voteId,

    cells: {

      date: (

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

      ),

      result: (

        <span className="text-paper">

          <Link

            href={v.voteHref}

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

          >

            {v.question || v.result}

          </Link>

          <span className="block text-ash-2">{v.result}</span>

        </span>

      ),

      voted: <PositionTag position={v.position} />,

    },

  }));

  return (

    <>

      <DataTable

        caption="This member's recorded votes: date, question, result, position."

        cardLabel="Recorded votes"

        columns={columns}

        rows={rows}

      />

      {votes.length > shown ? (

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

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

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

          </span>

          <button

            type="button"

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

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

          >

            Show {Math.min(PAGE, votes.length - shown)} more

          </button>

        </div>

      ) : null}

    </>

  );

}