/* ============================================================
   ALIAS — team word-guessing race (+ optional Heads Up tilt mode)
   ============================================================ */
const { useState: useAl, useRef: useRAl } = React;

const TEAM_NAMES=['Red','Blue','Green','Gold'];
const TEAM_COLORS=['#FF5A3C','#3D8BFF','#16C2A3','#FFC22E'];

function balanceTeams(players,n){
  const t=Array.from({length:n},(_,i)=>({name:TEAM_NAMES[i],color:TEAM_COLORS[i],players:[],score:0,giver:0}));
  shuffle(players).forEach((p,i)=>t[i%n].players.push(p));
  return t;
}

function GameAlias({ game, players, onExit, onHome }){
  const leave=onHome||onExit;
  const [nTeams,setNTeams]=useAl(2);
  const [secs,setSecs]=useAl(60);
  const [target,setTarget]=useAl(30);
  const [headsUp,setHeadsUp]=useAl(false);
  const [huTarget,setHuTarget]=useAl(15);
  const [penalty,setPenalty]=useAl(true);
  const [cats,setCats]=useAl(()=>new Set(DATA.ALIAS_CATS));
  const [phase,setPhase]=useAl('setup');
  const [teams,setTeams]=useAl([]);
  const [turnTeam,setTurnTeam]=useAl(0);
  const [turnPlayer,setTurnPlayer]=useAl(0);
  const [playerScores,setPlayerScores]=useAl({});
  const deckRef=useRAl(null);
  const [turnLog,setTurnLog]=useAl({correct:0,skips:0,words:[]});
  const [winner,setWinner]=useAl(null);
  const [tiltReady,setTiltReady]=useAl(false);

  const toggleCat=(c)=>setCats(s=>{ const n=new Set(s); n.has(c)?n.delete(c):n.add(c); return n; });

  const buildDeck=()=>{
    const pool=DATA.ALIAS.filter(x=>cats.has(x.cat));
    deckRef.current=makeDeck(pool.length?pool:DATA.ALIAS);
  };

  const startGame=()=>{
    buildDeck();
    if(headsUp){
      setPlayerScores(Object.fromEntries(players.map(p=>[p,0])));
      setTurnPlayer(0);
      setPhase('intro');
    } else {
      setTeams(balanceTeams(players,nTeams));
      setPhase('teams');
    }
  };
  const beginPlay=()=>{ buildDeck(); setTurnTeam(0); setPhase('intro'); };

  /* ---------- SETUP ---------- */
  if(phase==='setup'){
    return (
      <div className="app screen">
        <TopBar onBack={onExit} title="Alias" color={game.color}/>
        <div className="setup">
          <h2>Alias</h2>
          <p className="lead">{headsUp
            ? 'Hold the phone to your forehead. Friends give clues. Tilt down = got it, tilt up = skip.'
            : 'Teams race the clock. Describe the word without saying it, any part of it, or a rhyme.'}</p>
          <div className="toggle-row" style={{marginBottom:18}}>
            <Switch on={headsUp} onChange={setHeadsUp}/>
            <div className="lbl"><b>Heads Up mode</b><small>Tilt to score — solo rotation, no teams</small></div>
          </div>
          {!headsUp && (
            <div className="field"><label>How many teams</label>
              <Stepper value={nTeams} min={2} max={Math.min(4,players.length)} onChange={setNTeams}/>
            </div>
          )}
          <div className="field"><label>Seconds per turn</label>
            <Segmented options={[{value:30,label:'30s'},{value:45,label:'45s'},{value:60,label:'60s'},{value:90,label:'90s'}]} value={secs} onChange={setSecs} color="var(--sky)"/>
          </div>
          <div className="field"><label>{headsUp ? 'Points to win' : 'Points to win'}</label>
            <div className="row" style={{gap:12}}>
              <Stepper value={headsUp?huTarget:target} min={10} max={60} onChange={v=>headsUp?setHuTarget(v):setTarget(v)}/>
              <span className="muted">{headsUp ? 'first player there wins' : 'first team there wins'}</span>
            </div>
          </div>
          <div className="field"><label>Categories</label>
            <div className="wrap" style={{gap:8}}>
              {DATA.ALIAS_CATS.map(c=>(
                <button key={c} onClick={()=>toggleCat(c)} className={'chip selectable'+(cats.has(c)?' sel':'')} style={{fontSize:14}}>{cats.has(c)?'✓ ':''}{c}</button>
              ))}
            </div>
          </div>
          <div className="toggle-row" style={{marginBottom:22}}>
            <Switch on={penalty} onChange={setPenalty}/>
            <div className="lbl"><b>Skip penalty</b><small>{penalty?'Skipping costs −1':'Skip freely, no penalty'}</small></div>
          </div>
          <Btn color="sky" size="lg" disabled={cats.size===0} onClick={startGame}>{headsUp ? 'Start →' : 'Make teams →'}</Btn>
        </div>
      </div>
    );
  }

  /* ---------- TEAMS (team mode only) ---------- */
  if(phase==='teams'){
    const move=(pl,from)=>{
      setTeams(ts=>{ const n=ts.map(t=>({...t,players:[...t.players]})); const to=(from+1)%n.length;
        n[from].players=n[from].players.filter(x=>x!==pl); n[to].players.push(pl); return n; });
    };
    return (
      <div className="app screen">
        <TopBar onBack={()=>setPhase('setup')} title="Alias · teams" color={game.color}
          right={<button className="iconbtn" onClick={()=>setTeams(balanceTeams(players,nTeams))} title="Reshuffle">🔀</button>}/>
        <div className="setup" style={{paddingTop:14}}>
          <h2 style={{fontSize:26}}>Your teams</h2>
          <p className="lead">Tap a player to bump them to the next team. Reshuffle with 🔀.</p>
          <div className="col" style={{gap:13}}>
            {teams.map((t,ti)=>(
              <div key={ti} className="teamblock" style={{background:t.color}}>
                <div className="row" style={{justifyContent:'space-between',marginBottom:10}}>
                  <h4>Team {t.name}</h4><span className="mono" style={{fontSize:11,color:'rgba(0,0,0,.55)',fontWeight:700}}>{t.players.length} players</span>
                </div>
                <div className="wrap" style={{gap:7}}>
                  {t.players.map(p=>(
                    <button key={p} onClick={()=>move(p,ti)} className="chip" style={{fontSize:14,cursor:'pointer'}}><Avatar name={p} size={20}/>{p}</button>
                  ))}
                  {t.players.length===0 && <span style={{color:'rgba(0,0,0,.5)',fontSize:13,fontStyle:'italic'}}>empty — bump someone here</span>}
                </div>
              </div>
            ))}
          </div>
          <div style={{marginTop:22}}><Btn color="sky" size="lg" disabled={teams.some(t=>t.players.length===0)} onClick={beginPlay}>Start playing →</Btn></div>
        </div>
      </div>
    );
  }

  const team=teams[turnTeam];
  const huGiver=players[turnPlayer % players.length];

  /* ---------- TURN INTRO ---------- */
  if(phase==='intro'){
    const giver=headsUp ? huGiver : team.players[team.giver % team.players.length];
    const needsTiltSetup=headsUp && !tiltReady;
    return (
      <div className="app screen">
        <TopBar onBack={onExit} title="Alias" color={game.color}
          right={headsUp
            ? <span className="mono" style={{fontSize:11,color:'#9082BE'}}>{playerScores[giver]||0} pts</span>
            : <TeamScorePill teams={teams}/>}/>
        <div className="center" style={{flex:1,padding:'20px 26px',gap:10}}>
          {!headsUp && <div className="tier-pill" style={{background:team.color,color:'#fff'}}>Team {team.name}'s turn</div>}
          <div className="kicker mt16">{headsUp ? 'on your forehead' : 'clue giver'}</div>
          <div className="stamp sh-sky" style={{fontSize:52}}>{giver}</div>
          <p className="muted mt16" style={{maxWidth:300}}>{headsUp
            ? 'Hold the phone screen-out on your forehead. Friends shout clues. Tilt down when you get it, up to skip.'
            : 'Hold the phone so only you can see it. Your team shouts guesses. ✓ correct, ✗ skip. Go fast!'}</p>
          {needsTiltSetup ? (
            <TiltPermissionPrompt onReady={()=>setTiltReady(true)}/>
          ) : (
            <div style={{width:'100%',maxWidth:320,marginTop:18}}>
              <Btn color="sky" size="lg" onClick={()=>{setTurnLog({correct:0,skips:0,words:[]});setPhase('count');}}>{giver} is ready →</Btn>
            </div>
          )}
        </div>
      </div>
    );
  }

  /* ---------- COUNTDOWN ---------- */
  if(phase==='count'){
    return (
      <div className="app screen">
        <TopBar title={headsUp ? huGiver : 'Team '+team.name} color={headsUp ? game.color : team.color}/>
        <Countdown from={3} go="GO!" onDone={()=>setPhase('active')}/>
      </div>
    );
  }

  /* ---------- ACTIVE ---------- */
  if(phase==='active'){
    return <AliasTurn
      team={headsUp ? null : team}
      giver={headsUp ? huGiver : undefined}
      headsUp={headsUp}
      secs={secs}
      penalty={penalty}
      deck={deckRef.current}
      onEnd={(log)=>{
        if(headsUp){
          const gained=log.correct-(penalty?log.skips:0);
          setPlayerScores(s=>({...s,[huGiver]:(s[huGiver]||0)+gained}));
          setTurnLog(log);
          setPhase('turnend');
        } else {
          setTeams(ts=>ts.map((t,i)=>i===turnTeam?{...t,score:Math.max(0,t.score+log.correct-(penalty?log.skips:0)),giver:t.giver+1}:t));
          setTurnLog(log);
          setPhase('turnend');
        }
      }}/>;
  }

  /* ---------- TURN END ---------- */
  if(phase==='turnend'){
    const gained=turnLog.correct-(penalty?turnLog.skips:0);
    if(headsUp){
      const score=playerScores[huGiver]||0;
      const reached=score>=huTarget;
      const leader=players.reduce((best,p)=>(playerScores[p]||0)>(playerScores[best]||0)?p:best,players[0]);
      return (
        <div className="app screen">
          <TopBar title="Alias" color={game.color}/>
          <div className="center" style={{flex:1,padding:'16px 24px',gap:10}}>
            <div className="tier-pill" style={{background:'var(--sky)',color:'#fff'}}>{huGiver}'s turn</div>
            <div className="stamp sh-sky" style={{fontSize:58}}>{gained>=0?'+':''}{gained}</div>
            <div className="mono" style={{color:'#A99AD6',fontSize:13}}>{turnLog.correct} guessed · {turnLog.skips} skipped · {score} total</div>
            {turnLog.words.length>0 && (
              <div className="card" style={{maxWidth:360,width:'100%',padding:'13px 15px',marginTop:6}}>
                <div className="panel-title" style={{marginBottom:9}}>This turn</div>
                <div className="wrap" style={{gap:7}}>
                  {turnLog.words.map((w,i)=><span key={i} className="tier-pill" style={{background:w.ok?'var(--teal)':'#E7DCC8',color:w.ok?'#06281f':'#9A8E78'}}>{w.ok?'✓':'✗'} {w.word}</span>)}
                </div>
              </div>
            )}
            <div style={{width:'100%',maxWidth:360,marginTop:8}}><PlayerStandings scores={playerScores} players={players} target={huTarget}/></div>
            <div style={{width:'100%',maxWidth:360,marginTop:6}}>
              {reached
                ? <Btn color="gold" size="lg" onClick={()=>{setWinner(leader);setPhase('win');}}>🏆 {leader} wins! See results →</Btn>
                : <Btn color="sky" size="lg" onClick={()=>{setTurnPlayer((turnPlayer+1)%players.length);setPhase('intro');}}>Next: {players[(turnPlayer+1)%players.length]} →</Btn>}
            </div>
          </div>
        </div>
      );
    }
    const reached=teams.find(t=>t.score>=target);
    return (
      <div className="app screen">
        <TopBar title="Alias" color={game.color}/>
        <div className="center" style={{flex:1,padding:'16px 24px',gap:10}}>
          <div className="tier-pill" style={{background:team.color,color:'#fff'}}>Team {team.name}</div>
          <div className="stamp sh-sky" style={{fontSize:58}}>{gained>=0?'+':''}{gained}</div>
          <div className="mono" style={{color:'#A99AD6',fontSize:13}}>{turnLog.correct} guessed · {turnLog.skips} skipped</div>
          {turnLog.words.length>0 && (
            <div className="card" style={{maxWidth:360,width:'100%',padding:'13px 15px',marginTop:6}}>
              <div className="panel-title" style={{marginBottom:9}}>This turn</div>
              <div className="wrap" style={{gap:7}}>
                {turnLog.words.map((w,i)=><span key={i} className="tier-pill" style={{background:w.ok?'var(--teal)':'#E7DCC8',color:w.ok?'#06281f':'#9A8E78'}}>{w.ok?'✓':'✗'} {w.word}</span>)}
              </div>
            </div>
          )}
          <div style={{width:'100%',maxWidth:360,marginTop:8}}><TeamStandings teams={teams} target={target}/></div>
          <div style={{width:'100%',maxWidth:360,marginTop:6}}>
            {reached
              ? <Btn color="gold" size="lg" onClick={()=>{setWinner(reached);setPhase('win');}}>🏆 Team {reached.name} wins! See results →</Btn>
              : <Btn color="sky" size="lg" onClick={()=>{setTurnTeam((turnTeam+1)%teams.length);setPhase('intro');}}>Next: Team {teams[(turnTeam+1)%teams.length].name} →</Btn>}
          </div>
        </div>
      </div>
    );
  }

  /* ---------- WIN ---------- */
  if(headsUp){
    return (
      <div className="app screen" style={{overflow:'hidden'}}>
        <Burst fire={true} colors={['#3D8BFF','#FFC22E','#FFF6E6']}/>
        <TopBar onBack={onExit} title="Alias" color={game.color}/>
        <div className="center" style={{flex:1,padding:'20px 24px',gap:12}}>
          <div className="kicker">champion</div>
          <div className="stamp sh-sky" style={{fontSize:60}}>{winner}</div>
          <div style={{width:'100%',maxWidth:360,marginTop:6}}><PlayerStandings scores={playerScores} players={players} target={huTarget}/></div>
          <div className="btn-row" style={{width:'100%',maxWidth:360,marginTop:8}}>
            <Btn variant="ghost" onClick={leave}>Home</Btn>
            <Btn color="sky" onClick={()=>{setPhase('setup');setTiltReady(false);}}>Rematch ↻</Btn>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="app screen" style={{overflow:'hidden'}}>
      <Burst fire={true} colors={[winner.color,'#FFC22E','#FFF6E6']}/>
      <TopBar onBack={onExit} title="Alias" color={game.color}/>
      <div className="center" style={{flex:1,padding:'20px 24px',gap:12}}>
        <div className="kicker">champions</div>
        <div className="stamp sh-sky" style={{fontSize:60}}>Team {winner.name}</div>
        <div style={{width:'100%',maxWidth:360,marginTop:6}}><TeamStandings teams={teams} target={target}/></div>
        <div className="btn-row" style={{width:'100%',maxWidth:360,marginTop:8}}>
          <Btn variant="ghost" onClick={leave}>Home</Btn>
          <Btn color="sky" onClick={()=>setPhase('setup')}>Rematch ↻</Btn>
        </div>
      </div>
    </div>
  );
}

function TiltPermissionPrompt({ onReady }){
  const { permissionState, requestPermission, needsPermission } = useTiltActions({ enabled: false });
  const [busy,setBusy]=React.useState(false);
  const go=async()=>{
    setBusy(true);
    const ok=await requestPermission();
    setBusy(false);
    if(ok || !needsPermission) onReady();
    else onReady(); // still proceed — tap fallback in AliasTurn
  };
  if(!needsPermission){
    return (
      <div style={{width:'100%',maxWidth:320,marginTop:18}}>
        <Btn color="sky" size="lg" onClick={onReady}>Ready →</Btn>
      </div>
    );
  }
  return (
    <div style={{width:'100%',maxWidth:320,marginTop:18}}>
      <p className="muted" style={{fontSize:13,marginBottom:12}}>Tilt needs motion permission on this device.</p>
      <Btn color="sky" size="lg" disabled={busy} onClick={go}>{permissionState==='denied'?'Continue with tap buttons':'Enable tilt →'}</Btn>
    </div>
  );
}

function AliasTurn({ team, giver, headsUp, secs, penalty, deck, onEnd }){
  const [word,setWord]=useAl(()=>deck.draw());
  const [log,setLog]=useAl({correct:0,skips:0,words:[]});
  const logRef=useRAl(log); logRef.current=log;
  const [rem]=useCountdown(secs, true, ()=>onEnd(logRef.current));
  const [flash,setFlash]=useAl(null);

  const advance=(ok)=>{
    window.partySounds?.play(ok?'correct':'wrong');
    setLog(l=>({correct:l.correct+(ok?1:0),skips:l.skips+(ok?0:1),words:[...l.words,{word:word.w,ok}]}));
    setFlash(ok?'ok':'skip'); setTimeout(()=>setFlash(null),250);
    setWord(deck.draw());
  };

  const { tiltAvailable } = useTiltActions({
    enabled: headsUp,
    onCorrect: ()=>advance(true),
    onSkip: ()=>advance(false),
  });

  const accent=headsUp ? 'var(--sky)' : team.color;
  const showTapFallback=headsUp && !tiltAvailable;

  return (
    <div className={'app screen'+(headsUp?' heads-up-active':'')} style={{overflow:'hidden'}}>
      <TopBar title={headsUp ? giver : 'Team '+team.name} color={accent}
        right={<span className="bigcount" style={{fontSize:30,color:rem<=10?'var(--coral)':'var(--cream)'}}>{rem}</span>}/>
      <div style={{padding:'6px 22px 0'}}><TimerBar remaining={rem} total={secs}/></div>
      <div className="center" style={{flex:1,padding:'14px 24px',gap:6}}>
        <div className="row" style={{gap:14}}>
          <div className="mono" style={{color:'var(--teal)',fontSize:15}}>✓ {log.correct}</div>
          <div className="mono" style={{color:'#9082BE',fontSize:15}}>✗ {log.skips}</div>
        </div>
        <div className={'bigcard'+(flash?' flash-'+flash:'')+(headsUp?' heads-up-card':'')}
          style={{borderColor:flash==='ok'?'var(--teal)':flash==='skip'?'var(--coral)':accent,transition:'border-color .2s',minHeight:headsUp?260:200}}>
          {!headsUp && <div className="tier-pill" style={{background:tierColor(word.tier),color:'#fff',alignSelf:'center',marginBottom:14}}>{word.cat} · {word.tier}</div>}
          <div className="secret-word" style={{fontSize:headsUp?56:48}}>{word.w}</div>
        </div>
        {headsUp && (
          <p className="mono" style={{fontSize:11,color:'#9082BE',marginTop:8}}>
            {tiltAvailable ? '↓ tilt down = got it · ↑ tilt up = skip' : 'Tilt unavailable — use buttons below'}
          </p>
        )}
      </div>
      {(!headsUp || showTapFallback) && (
        <div className="pad" style={{paddingTop:4}}>
          <div className="btn-row">
            <Btn color="coral" size="lg" sound={false} onClick={()=>advance(false)}>✗ Skip{penalty?' −1':''}</Btn>
            <Btn color="teal" size="lg" sound={false} onClick={()=>advance(true)}>✓ Got it</Btn>
          </div>
        </div>
      )}
    </div>
  );
}

function tierColor(t){ return t==='Easy'?'#16C2A3':t==='Medium'?'#FF8A3C':'#FF5C9D'; }
function TeamScorePill({teams}){
  return <div style={{display:'flex',gap:6}}>{teams.map((t,i)=><span key={i} className="mono" style={{fontSize:12,fontWeight:700,color:t.color}}>{t.score}</span>).reduce((a,b,i)=>i?[...a,<span key={'s'+i} style={{color:'#5B4E86'}}>/</span>,b]:[b],[])}</div>;
}
function TeamStandings({teams,target}){
  const max=Math.max(target,...teams.map(t=>t.score));
  return (
    <div className="tally">
      {[...teams].sort((a,b)=>b.score-a.score).map(t=>(
        <div key={t.name} className="tally-row">
          <b style={{fontFamily:'var(--font-display)',fontSize:16,width:56,color:t.color}}>{t.name}</b>
          <div className="tally-bar"><i style={{width:(t.score/max*100)+'%',background:t.color}}/></div>
          <b style={{fontFamily:'var(--font-display)',fontSize:18,minWidth:28,textAlign:'right'}}>{t.score}</b>
        </div>
      ))}
      <div className="mono" style={{fontSize:10.5,color:'#7E70AE',textAlign:'right'}}>target: {target}</div>
    </div>
  );
}
function PlayerStandings({scores,players,target}){
  const max=Math.max(target,...players.map(p=>scores[p]||0));
  return (
    <div className="tally">
      {[...players].sort((a,b)=>(scores[b]||0)-(scores[a]||0)).map(p=>(
        <div key={p} className="tally-row">
          <Avatar name={p} size={22}/>
          <b style={{fontFamily:'var(--font-display)',fontSize:16,flex:1}}>{p}</b>
          <div className="tally-bar"><i style={{width:((scores[p]||0)/max*100)+'%',background:avatarColor(p)}}/></div>
          <b style={{fontFamily:'var(--font-display)',fontSize:18,minWidth:28,textAlign:'right'}}>{scores[p]||0}</b>
        </div>
      ))}
      <div className="mono" style={{fontSize:10.5,color:'#7E70AE',textAlign:'right'}}>target: {target}</div>
    </div>
  );
}

window.GameAlias = GameAlias;