"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import type { Poll } from "@/lib/api";
import { cls, dateShort, int, modeLabel } from "@/lib/format";
import { PARTY_IDS, partyLabel, partyVar } from "@/lib/parties";
import { PollRowMobile } from "./forecast-blocks";

export function PollsTable({ polls }: { polls: Poll[] }) {
  const [firm, setFirm] = useState("all");
  const [year, setYear] = useState("all");
  const [onlyPrimary, setOnlyPrimary] = useState(false);
  const [shown, setShown] = useState(25);
  const firms = useMemo(() => Array.from(new Map(polls.map((p) => [p.pollster.id, p.pollster.name])).entries()), [polls]);
  const years = useMemo(() => Array.from(new Set(polls.map((p) => p.fieldworkEnd.slice(0, 4)))).sort().reverse(), [polls]);
  const rows = polls.filter((p) => (firm === "all" || p.pollster.id === firm) && (year === "all" || p.fieldworkEnd.startsWith(year)) && (!onlyPrimary || p.sourceTier === "primary"));
  return (
    <div>
      <div className="flex flex-wrap items-center gap-2 p-3 border-b border-border text-[13px]">
        <select value={firm} onChange={(e) => setFirm(e.target.value)} className="card px-2.5 py-1.5 max-w-[48%]" aria-label="Firme"><option value="all">Toutes les firmes</option>{firms.map(([id, n]) => <option key={id} value={id}>{n}</option>)}</select>
        <select value={year} onChange={(e) => setYear(e.target.value)} className="card px-2.5 py-1.5" aria-label="Année"><option value="all">Toutes les années</option>{years.map((y) => <option key={y} value={y}>{y}</option>)}</select>
        <label className="inline-flex items-center gap-2 ml-1"><input type="checkbox" checked={onlyPrimary} onChange={(e) => setOnlyPrimary(e.target.checked)} /> <span className="hidden sm:inline">Documents originaux seulement</span><span className="sm:hidden">Originaux</span></label>
        <span className="ml-auto num text-ink-3">{rows.length} sondages</span>
      </div>
      <div className="md:hidden">
        {rows.slice(0, shown).map((p) => <PollRowMobile key={p.id} p={p} />)}
        {rows.length > shown && <button onClick={() => setShown((n) => n + 25)} className="w-full py-3 text-[13px] font-semibold text-accent border-t border-border">Afficher 25 sondages de plus ({rows.length - shown} restants)</button>}
      </div>
      <div className="hidden md:block overflow-x-auto max-h-[70vh]">
        <table className="data-table min-w-[820px]">
          <thead><tr><th>Firme</th><th>Terrain</th><th className="r">n</th>{PARTY_IDS.map((id) => <th key={id} className="r"><span className="inline-flex items-center gap-1"><span className="w-1.5 h-1.5 rounded-full" style={{ background: partyVar(id) }} />{partyLabel(id)}</span></th>)}<th className="r">Autres</th><th className="r">Poids</th><th>Source</th></tr></thead>
          <tbody>
            {rows.map((p) => {
              const lead = Object.entries(p.results).filter(([k]) => k !== "aut").sort((a, b) => b[1] - a[1])[0]?.[0];
              return (
                <tr key={p.id} className={cls(p.excluded && "opacity-50")} title={[p.sponsor && `Commanditaire : ${p.sponsor}`, p.mode && `Mode : ${modeLabel(p.mode)}`, p.population && `Population : ${p.population}`, p.publicationDate && `Publié le ${dateShort(p.publicationDate)}`].filter(Boolean).join("\n")}>
                  <td><Link href={`/sondages/${p.id}`} className="font-semibold hover:underline">{p.pollster.name}</Link>{p.sponsor && <div className="text-[11.5px] text-ink-3">{p.sponsor}</div>}</td>
                  <td className="num whitespace-nowrap"><Link href={`/sondages/${p.id}`}>{p.fieldworkStart ? `${dateShort(p.fieldworkStart)} – ` : ""}{dateShort(p.fieldworkEnd)}</Link></td>
                  <td className="r num">{int(p.sampleSize)}</td>
                  {PARTY_IDS.map((id) => <td key={id} className={cls("r num mono", id === lead && "font-bold")} style={id === lead ? { color: partyVar(id) } : undefined}>{p.results[id] !== undefined ? p.results[id].toFixed(p.results[id] % 1 ? 1 : 0).replace(".", ",") : "—"}</td>)}
                  <td className="r num text-ink-2 mono">{p.results["aut"] !== undefined ? p.results["aut"].toFixed(0) : "—"}</td>
                  <td className="r num text-ink-2 mono">{p.weight ? p.weight.weight.toFixed(2) : "—"}</td>
                  <td className="whitespace-nowrap">{p.sourceTier === "primary" ? <span className="text-[10.5px] font-semibold uppercase tracking-wide text-ok mono">PDF archivé</span> : <span className="text-[10.5px] font-semibold uppercase tracking-wide text-warn mono" title="Valeur relevée par un index tiers ; document original en cours de récupération">index</span>}{p.excluded && <span className="ml-1 text-[10.5px] uppercase text-live mono">exclu</span>}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}