// SwitcharooWheel — admin-modal som tilfeldig parrer solo-spillere i 2v2-team
// 1. Henter alle player_registrations for turneringen (status='looking' eller 'locked_switcharoo')
// 2. Admin trykker SPIN — animert shuffle
// 3. Spillere parres 2-og-2 → opprettes som tournament_teams med generert navn
// 4. Hvis odde antall → siste spiller får BYE / kan plukkes inn senere

const SwitcharooWheel = ({ tournamentId, accent, onClose, onComplete }) => {
  const [players, setPlayers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [spinning, setSpinning] = useState(false);
  const [shuffleOrder, setShuffleOrder] = useState([]);
  const [done, setDone] = useState(false);
  const [pairs, setPairs] = useState([]);
  const [saving, setSaving] = useState(false);
  const [saveMsg, setSaveMsg] = useState(null);

  useEffect(() => {
    if (!tournamentId) return;
    setLoading(true);
    WZN_Store.getPlayerSignups(tournamentId).then(data => {
      // Kun spillere som ikke allerede er i et lag
      const available = (data || []).filter(p =>
        p.status === "looking" || p.status === "locked_switcharoo"
      );
      setPlayers(available);
      setShuffleOrder(available);
      setLoading(false);
    });
  }, [tournamentId]);

  const spin = () => {
    if (players.length < 2) {
      alert("Trenger minst 2 spillere for å spinne switcharoo!");
      return;
    }
    setSpinning(true);
    setDone(false);
    setPairs([]);

    // Animasjon: shuffle 20 ganger med kortere og kortere intervall
    let iterations = 0;
    const maxIter = 20;
    const animate = () => {
      const shuffled = [...players].sort(() => Math.random() - 0.5);
      setShuffleOrder(shuffled);
      iterations++;
      if (iterations < maxIter) {
        const delay = 50 + Math.pow(iterations, 1.8) * 4;
        setTimeout(animate, delay);
      } else {
        // Endelig shuffle = endelig rekkefølge
        const finalOrder = [...players].sort(() => Math.random() - 0.5);
        setShuffleOrder(finalOrder);
        // Lag par
        const newPairs = [];
        for (let i = 0; i < finalOrder.length; i += 2) {
          newPairs.push({
            id: `pair-${i/2 + 1}`,
            p1: finalOrder[i],
            p2: finalOrder[i + 1] || null, // null = BYE
            teamName: finalOrder[i + 1]
              ? `${(finalOrder[i].display_name||"P").slice(0,4).toUpperCase()}/${(finalOrder[i+1].display_name||"P").slice(0,4).toUpperCase()}`
              : `${(finalOrder[i].display_name||"P").slice(0,4).toUpperCase()} (BYE)`,
          });
        }
        setPairs(newPairs);
        setDone(true);
        setSpinning(false);
      }
    };
    animate();
  };

  const handleLockIn = async () => {
    if (pairs.length === 0) return;
    if (!confirm(`Lås inn ${pairs.length} 2v2-par som tournament_teams? Dette kan ikke angres.`)) return;

    setSaving(true);
    let errors = 0;
    for (const pair of pairs) {
      if (!pair.p2) continue; // hopp over BYE
      // Opprett tournament_team
      const teamData = {
        tournament_id: tournamentId,
        team_name: pair.teamName,
        team_tag: pair.teamName.slice(0, 4),
        captain: pair.p1.display_name,
        roster: [
          { displayName: pair.p1.display_name, activisionId: pair.p1.activision_id, playerRegId: pair.p1.id },
          { displayName: pair.p2.display_name, activisionId: pair.p2.activision_id, playerRegId: pair.p2.id },
        ],
        status: "active",
      };
      const { data, error } = await window.db.from("tournament_teams").insert([teamData]).select().single();
      if (error) { errors++; continue; }
      // Marker spillerne som in_team
      await window.db.from("player_registrations")
        .update({ status: "in_team", team_id: data.id })
        .in("id", [pair.p1.id, pair.p2.id]);
    }
    setSaving(false);
    setSaveMsg(errors > 0
      ? `Ferdig — men ${errors} par feilet. Sjekk console.`
      : `✓ ${pairs.length} par lagret som tournament_teams`);
    setTimeout(() => {
      onComplete && onComplete();
      onClose && onClose();
    }, 2000);
  };

  return (
    <div className="sw-overlay" onClick={onClose}>
      <div className="sw-modal" onClick={e => e.stopPropagation()} style={{borderColor: accent}}>
        <div className="sw-head">
          <div>
            <div className="hero-tag" style={{margin:0}}>
              <span className="tag-pip" style={{background: accent}} />
              <span>2V2 SWITCHAROO · ADMIN</span>
            </div>
            <h2 className="sw-title">SPIN THE WHEEL</h2>
            <div className="sw-sub">
              {loading ? "Laster…" : `${players.length} solo-spillere venter på å parres`}
            </div>
          </div>
          <button className="sw-x" onClick={onClose}>✕</button>
        </div>

        {loading && (
          <div className="sw-empty">Laster solo-spillere…</div>
        )}

        {!loading && players.length === 0 && (
          <div className="sw-empty">
            <div style={{fontSize:"2rem", marginBottom:".5rem"}}>👤</div>
            <div>Ingen solo-spillere påmeldt for denne turneringen ennå.</div>
            <div style={{fontSize:".8rem", color:"var(--text-faint)", marginTop:".5rem"}}>
              Solo-spillere må melde seg på via /player-signup før de kan switcharoo-paires.
            </div>
          </div>
        )}

        {!loading && players.length > 0 && !done && (
          <>
            <div className="sw-players-grid">
              {(spinning ? shuffleOrder : players).map((p, i) => (
                <div key={p.id} className={`sw-player ${spinning ? "shuffling" : ""}`}
                     style={spinning ? {transform: `translateY(${Math.sin(Date.now()/100 + i)*8}px)`} : null}>
                  <div className="sw-player-name">{p.display_name}</div>
                  <div className="sw-player-aid">{p.activision_id || "—"}</div>
                </div>
              ))}
            </div>

            <div className="sw-actions">
              <button
                className="cta cta-primary sw-spin"
                style={{background: accent, borderColor: accent}}
                onClick={spin}
                disabled={spinning || players.length < 2}
              >
                {spinning ? (
                  <><span className="sw-spin-icon">⟳</span> SPINNER…</>
                ) : (
                  <><span>🎰</span> SPIN THE WHEEL</>
                )}
              </button>
            </div>
          </>
        )}

        {!loading && done && (
          <>
            <div className="sw-result-head">
              <div style={{fontFamily:"var(--font-stencil)", fontSize:"1.25rem", letterSpacing:".05em"}}>
                ✓ {pairs.length} PAR DANNET
              </div>
              <button onClick={spin} className="cta cta-ghost" disabled={saving} style={{padding:".4rem .8rem"}}>
                ↻ SPIN PÅ NYTT
              </button>
            </div>

            <div className="sw-pairs">
              {pairs.map((pair, i) => (
                <div key={pair.id} className={`sw-pair ${!pair.p2 ? "sw-pair-bye" : ""}`} style={{borderColor: accent}}>
                  <div className="sw-pair-num" style={{color: accent}}>#{i+1}</div>
                  <div className="sw-pair-team-name" style={{color: accent}}>{pair.teamName}</div>
                  <div className="sw-pair-players">
                    <div className="sw-pair-p">
                      <b>{pair.p1.display_name}</b>
                      <span style={{color:"var(--text-faint)", fontSize:".75rem"}}>{pair.p1.activision_id || "—"}</span>
                    </div>
                    {pair.p2 && (
                      <>
                        <div style={{color:accent, fontFamily:"var(--font-stencil)", padding:"0 .5rem"}}>×</div>
                        <div className="sw-pair-p">
                          <b>{pair.p2.display_name}</b>
                          <span style={{color:"var(--text-faint)", fontSize:".75rem"}}>{pair.p2.activision_id || "—"}</span>
                        </div>
                      </>
                    )}
                    {!pair.p2 && (
                      <div style={{color:"var(--text-faint)", fontSize:".8rem", marginLeft:".75rem"}}>
                        BYE — ingen partner. Manuell håndtering.
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>

            {saveMsg && (
              <div style={{padding:".75rem", color: accent, textAlign:"center", fontFamily:"var(--font-mono)", letterSpacing:".1em"}}>
                {saveMsg}
              </div>
            )}

            <div className="sw-actions">
              <button className="cta cta-ghost" onClick={onClose} disabled={saving}>AVBRYT</button>
              <button
                className="cta cta-primary"
                style={{background: accent, borderColor: accent}}
                onClick={handleLockIn}
                disabled={saving}
              >
                {saving ? "LAGRER…" : "✓ LÅS INN OG OPPRETT 2V2-LAG"}
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

window.SwitcharooWheel = SwitcharooWheel;