import { useState } from "react";
import { Crown, Vote } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { giocatori } from "@/lib/crapp-data";
import { useGiocatoreCorrente } from "@/lib/user-store";
import { conteggioPartita, mioVoto, useVotaMvp, useVotiMvp, type VotoMvp } from "@/lib/mvp-voti";

/** Pannello di votazione MVP di una partita: un voto a testa, modificabile. */
export function VotazioneMvp({ matchId }: { matchId: string }) {
  const io = useGiocatoreCorrente();
  const voti = useVotiMvp();
  const vota = useVotaMvp();
  const [aperto, setAperto] = useState(false);

  const tutti: VotoMvp[] = voti.data ?? [];
  const conteggio = conteggioPartita(tutti, matchId);
  const mio = io ? mioVoto(tutti, matchId, io.id) : null;
  const totale = conteggio.reduce((s, c) => s + c.voti, 0);
  const testa = conteggio[0];
  const pareggio = conteggio.length > 1 && conteggio[1]!.voti === testa?.voti;

  async function invia(id: string, nome: string) {
    if (!io) return;
    try {
      await vota.mutateAsync({
        match_id: matchId,
        votante_id: io.id,
        votato_id: id,
        votato_nome: nome,
      });
      setAperto(false);
      toast.success(`Voto MVP registrato: ${nome}`);
    } catch {
      toast.error("Voto non riuscito, riprova");
    }
  }

  return (
    <div className="mt-3 rounded-2xl bg-secondary/60 p-3">
      <div className="flex items-center justify-between gap-2">
        <p className="inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
          <Vote className="h-3.5 w-3.5" /> Voto MVP · {totale} {totale === 1 ? "voto" : "voti"}
        </p>
        <button
          type="button"
          onClick={() => setAperto((v) => !v)}
          disabled={!io}
          className="rounded-full bg-accent px-3 py-1 text-[10px] font-bold uppercase text-accent-foreground disabled:opacity-50"
        >
          {mio ? "Cambia voto" : "Vota"}
        </button>
      </div>

      <p className="mt-2 text-xs">
        {testa && !pareggio ? (
          <span className="inline-flex items-center gap-1 font-bold">
            <Crown className="h-3.5 w-3.5 text-warning" /> {testa.nome} ({testa.voti})
          </span>
        ) : (
          <span className="text-muted-foreground">
            {totale === 0 ? "Nessun voto: MVP da eleggere" : "Parità: servono altri voti"}
          </span>
        )}
      </p>
      {mio ? (
        <p className="mt-1 text-[11px] text-muted-foreground">Hai votato {mio.votato_nome}</p>
      ) : null}

      {aperto ? (
        <div className="mt-3 grid max-h-60 grid-cols-2 gap-1.5 overflow-y-auto">
          {giocatori.map((g) => (
            <button
              key={g.id}
              type="button"
              disabled={vota.isPending}
              onClick={() => invia(g.id, g.nome)}
              className={cn(
                "truncate rounded-xl px-2.5 py-2 text-left text-xs font-semibold transition-colors",
                mio?.votato_id === g.id
                  ? "bg-accent text-accent-foreground"
                  : "bg-card text-foreground",
              )}
            >
              {g.nome}
            </button>
          ))}
        </div>
      ) : conteggio.length > 0 ? (
        <div className="mt-2 flex flex-wrap gap-1.5">
          {conteggio.map((c) => (
            <span key={c.id} className="rounded-lg bg-card px-2 py-1 text-[11px] font-semibold">
              {c.nome} · {c.voti}
            </span>
          ))}
        </div>
      ) : null}
    </div>
  );
}