Voto MVP: definitivo, a pari merito, segreto e a tempo nell'app

Il pannello chiede conferma e non permette di cambiare il voto; con una parità in testa gli MVP
sono più d'uno; i conteggi vengono dalla vista mvp_voti_anonimi e il proprio voto dalla tabella;
il voto si chiude 24 ore dopo l'apertura.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/crapp/VotazioneMvp.tsx

@@ -9,15 +9,21 @@ import type { Evento } from "@/lib/eventi";
 import {
   conteggioPartita,
   mioVoto,
+  mvpPartita,
   ORE_ATTESA_MVP,
+  useMieiVotiMvp,
   useVotaMvp,
   useVotiMvp,
+  VOTI_MINIMI_MVP,
   votoMvpAperto,
-  type VotoMvp,
+  votoMvpChiuso,
+  DURATA_VOTO_MVP_ORE,
+  type VotoMvpPubblico,
 } from "@/lib/mvp-voti";
 
 /**
- * Pannello di votazione MVP di una partita: un voto a testa, modificabile.
+ * Pannello di votazione MVP di una partita: un voto a testa, definitivo. Con una parità in
+ * testa gli MVP sono più d'uno.
  *
  * I voti sono legati all'evento CrAPP, non al referto CSI né allo scout: si vota anche
  * senza risultato caricato, dalle due ore dopo il fischio d'inizio. Votano e sono votabili
@@ -28,20 +34,22 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
   // Solo `.id` serve qui, niente statistiche; `null` per l'allenatore, che non gioca (DD-034).
   const io = useGiocatoreInCampo();
   const voti = useVotiMvp();
+  const miei = useMieiVotiMvp(io?.id);
   const vota = useVotaMvp();
   const { righe: squadra } = useGiocatoriSquadra();
   const { risposte } = usePresenzeEvento(evento.id);
   const presente = (id: string) => risposte[id] === "presente" || risposte[id] === "ritardo";
   const rosa = squadra.filter((g) => inRosa(g) && presente(g.id));
   const [aperto, setAperto] = useState(false);
+  const [scelto, setScelto] = useState<{ id: string; nome: string } | null>(null);
 
-  const tutti: VotoMvp[] = voti.data ?? [];
+  const tutti: VotoMvpPubblico[] = voti.data ?? [];
   const conteggio = conteggioPartita(tutti, matchId);
-  const mio = io ? mioVoto(tutti, matchId, io.id) : null;
+  const mio = io ? mioVoto(miei.data ?? [], matchId, io.id) : null;
+  const chiuso = votoMvpChiuso(evento.data, evento.ora);
   const totale = conteggio.reduce((s, c) => s + c.voti, 0);
-  const testa = conteggio[0];
-  const pareggio = conteggio.length > 1 && conteggio[1]!.voti === testa?.voti;
-  const puoVotare = !!io && presente(io.id);
+  const mvp = mvpPartita(tutti, matchId);
+  const puoVotare = !!io && !mio && !chiuso && presente(io.id);
 
   if (!votoMvpAperto(evento.data, evento.ora)) {
     return (
@@ -66,9 +74,10 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
         votato_nome: nome,
       });
       setAperto(false);
+      setScelto(null);
       toast.success(`Voto MVP registrato: ${nome}`);
     } catch {
-      toast.error("Voto non riuscito, riprova");
+      toast.error("Voto non riuscito: se hai già votato, il voto non si può cambiare");
     }
   }
 
@@ -78,58 +87,87 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
         <p className="inline-flex items-center gap-1.5 text-[13px] 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={!puoVotare}
-          className="rounded-full bg-accent px-3 py-1 text-[13px] font-bold uppercase text-accent-foreground disabled:opacity-50"
-        >
-          {mio ? "Cambia voto" : "Vota"}
-        </button>
+        {mio || chiuso ? null : (
+          <button
+            type="button"
+            onClick={() => setAperto((v) => !v)}
+            disabled={!puoVotare}
+            className="rounded-full bg-accent px-3 py-1 text-[13px] font-bold uppercase text-accent-foreground disabled:opacity-50"
+          >
+            Vota
+          </button>
+        )}
       </div>
 
       <p className="mt-2 text-[13px]">
-        {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})
+        {mvp.length > 0 ? (
+          <span className="inline-flex flex-wrap items-center gap-x-3 gap-y-1 font-bold">
+            {mvp.map((c) => (
+              <span key={c.id} className="inline-flex items-center gap-1">
+                <Crown className="h-3.5 w-3.5 text-warning" /> {c.nome} ({c.voti})
+              </span>
+            ))}
           </span>
         ) : (
           <span className="text-muted-foreground">
-            {totale === 0 ? "Nessun voto: MVP da eleggere" : "Parità: servono altri voti"}
+            {totale === 0
+              ? "Nessun voto: MVP da eleggere"
+              : `Servono almeno ${VOTI_MINIMI_MVP} voti per eleggere l'MVP`}
           </span>
         )}
       </p>
       {mio ? (
-        <p className="mt-1 text-[13px] text-muted-foreground">Hai votato {mio.votato_nome}</p>
+        <p className="mt-1 text-[13px] text-muted-foreground">
+          Hai votato {mio.votato_nome}: il voto non si può cambiare.
+        </p>
+      ) : chiuso ? (
+        <p className="mt-1 text-[13px] text-muted-foreground">Votazione chiusa.</p>
       ) : !puoVotare ? (
         <p className="mt-1 text-[13px] text-muted-foreground">
           Vota chi era presente a questa partita.
         </p>
-      ) : null}
+      ) : (
+        <p className="mt-1 text-[13px] text-muted-foreground">
+          Il voto è segreto e resta aperto {DURATA_VOTO_MVP_ORE} ore.
+        </p>
+      )}
 
-      {aperto ? (
-        <div className="mt-3 grid max-h-60 grid-cols-2 gap-1.5 overflow-y-auto">
-          {/* Sé stessi fuori dall'elenco, come nei badge social: l'auto-voto è vietato
+      {aperto && !mio ? (
+        <>
+          <div className="mt-3 grid max-h-60 grid-cols-2 gap-1.5 overflow-y-auto">
+            {/* Sé stessi fuori dall'elenco, come nei badge social: l'auto-voto è vietato
               anche dal vincolo `mvp_no_autovoto` (M12). */}
-          {rosa
-            .filter((g) => g.id !== io?.id)
-            .map((g) => (
-              <button
-                key={g.id}
-                type="button"
-                disabled={vota.isPending}
-                onClick={() => invia(g.id, nomeCompleto(g))}
-                className={cn(
-                  "truncate rounded-xl px-2.5 py-2 text-left text-[13px] font-semibold transition-colors",
-                  mio?.votato_id === g.id
-                    ? "bg-accent text-accent-foreground"
-                    : "bg-card text-foreground",
-                )}
-              >
-                {nomeCompleto(g)}
-              </button>
-            ))}
-        </div>
+            {rosa
+              .filter((g) => g.id !== io?.id)
+              .map((g) => (
+                <button
+                  key={g.id}
+                  type="button"
+                  disabled={vota.isPending}
+                  onClick={() => setScelto({ id: g.id, nome: nomeCompleto(g) })}
+                  className={cn(
+                    "truncate rounded-xl px-2.5 py-2 text-left text-[13px] font-semibold transition-colors",
+                    scelto?.id === g.id
+                      ? "bg-accent text-accent-foreground"
+                      : "bg-card text-foreground",
+                  )}
+                >
+                  {nomeCompleto(g)}
+                </button>
+              ))}
+          </div>
+          <button
+            type="button"
+            disabled={!scelto || vota.isPending}
+            onClick={() => scelto && invia(scelto.id, scelto.nome)}
+            className="mt-2 w-full rounded-full bg-accent px-3 py-2 text-[13px] font-bold uppercase text-accent-foreground disabled:opacity-50"
+          >
+            {scelto ? `Conferma il voto per ${scelto.nome}` : "Scegli chi votare"}
+          </button>
+          <p className="mt-1 text-center text-[13px] text-muted-foreground">
+            Il voto è definitivo: non si può cambiare.
+          </p>
+        </>
       ) : conteggio.length > 0 ? (
         <div className="mt-2 flex flex-wrap gap-1.5">
           {conteggio.map((c) => (