"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import type { RidingListItem } from "@/lib/api";
import { cls, prob, ratingLabel } from "@/lib/format";
import { PARTY_IDS, partyVar, partyLabel } from "@/lib/parties";
import { PartyBadge } from "./party";
import { Badge } from "./ui";

function norm(s: string) { return s.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]/g, ""); }

export function RidingsGrid({ ridings, regions, initialSort = "nom" }: { ridings: RidingListItem[]; regions: { id: string; name: string }[]; initialSort?: string }) {
  const [q, setQ] = useState("");
  const [region, setRegion] = useState("all");
  const [fav, setFav] = useState("all");
  const [sort, setSort] = useState<string>(initialSort);
  const rows = useMemo(() => {
    const nq = norm(q);
    let r = ridings.filter((x) => (!nq || norm(x.name).includes(nq)) && (region === "all" || x.region === region) && (fav === "all" || x.forecast?.favorite === fav));
    if (sort === "serre") r = r.slice().sort((a, b) => (a.forecast?.p ?? 1) - (b.forecast?.p ?? 1));
    else if (sort === "sur") r = r.slice().sort((a, b) => (b.forecast?.p ?? 0) - (a.forecast?.p ?? 0));
    else if (sort === "swing") r = r.slice().sort((a, b) => Math.abs(b.forecast?.swing ?? 0) - Math.abs(a.forecast?.swing ?? 0));
    return r;
  }, [ridings, q, region, fav, sort]);
  return (
    <div>
      <div className="flex flex-wrap gap-2 items-center mb-4 text-[13.5px]">
        <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Rechercher une circonscription…" className="card px-3 py-2 w-full sm:w-[280px] outline-none focus:border-accent" aria-label="Rechercher" />
        <select value={region} onChange={(e) => setRegion(e.target.value)} className="card px-2.5 py-2" aria-label="Région"><option value="all">Toutes les régions</option>{regions.map((g) => <option key={g.id} value={g.id}>{g.name}</option>)}</select>
        <select value={fav} onChange={(e) => setFav(e.target.value)} className="card px-2.5 py-2" aria-label="Favori"><option value="all">Tous les favoris</option>{PARTY_IDS.map((id) => <option key={id} value={id}>{partyLabel(id)} favori</option>)}</select>
        <select value={sort} onChange={(e) => setSort(e.target.value)} className="card px-2.5 py-2" aria-label="Tri"><option value="nom">Ordre alphabétique</option><option value="serre">Les plus serrées</option><option value="sur">Les plus sûres</option><option value="swing">Plus grand mouvement vs 2022</option></select>
        <span className="ml-auto text-ink-3 num">{rows.length} / {ridings.length}</span>
      </div>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
        {rows.map((r) => {
          const f = r.forecast;
          const pw = f ? Object.entries(f.pWin).filter(([k]) => k !== "aut").sort((a, b) => b[1] - a[1]) : [];
          return (
            <Link key={r.code} href={`/circonscription/${r.slug}`} className="card p-4 block hover:shadow-md transition-shadow">
              <div className="flex items-start justify-between gap-2">
                <div><div className="font-semibold text-[15px] leading-tight">{r.name}</div><div className="text-[11.5px] text-ink-3 mt-0.5">{r.regionName}{r.isNew ? " · nouvelle / renommée" : r.changed ? " · limites modifiées" : ""}</div></div>
                {f && <Badge tone={f.rating === "tossup" ? "warn" : f.rating === "lean" ? "accent" : "neutral"}>{ratingLabel(f.rating)}</Badge>}
              </div>
              {f ? (
                <>
                  <div className="mt-3 space-y-1">
                    {pw.slice(0, 5).map(([id, p]) => (
                      <div key={id} className={cls("grid grid-cols-[38px_1fr_46px] items-center gap-2 text-[12.5px]", p < 0.02 && "opacity-50")}>
                        <span className="font-semibold num" style={{ color: partyVar(id) }}>{partyLabel(id)}</span>
                        <div className="h-[6px] rounded-full bg-surface-3 overflow-hidden"><div className="h-full" style={{ width: `${p * 100}%`, background: partyVar(id) }} /></div>
                        <span className="num text-right">{prob(p)}</span>
                      </div>
                    ))}
                  </div>
                  <div className="mt-3 flex items-center justify-between text-[12px]"><span className="inline-flex items-center gap-1.5"><PartyBadge id={f.favorite} size="sm" /> favori</span>{r.live && r.live.status !== "NOT_STARTED" && <span className="text-ink-2 num">{r.live.bureaux[0]}/{r.live.bureaux[1]} bureaux</span>}<span className="text-ink-3">sortant·e {r.incumbent.party ? partyLabel(r.incumbent.party) : "—"}</span></div>
                </>
              ) : <div className="text-ink-3 text-[12.5px] mt-3">Pas de projection.</div>}
            </Link>
          );
        })}
      </div>
      <p className="text-[12px] text-ink-3 mt-4">Probabilité de victoire = part des simulations où le parti obtient le plus de voix dans la circonscription.</p>
    </div>
  );
}