/* ============================================================
   WORD SNEAK — slip secret words into conversation
   ============================================================ */
const { useState: useW, useRef: useRW, useEffect: useEW } = React;

function GameWordSneak({ game, players, scoring, scores, addScore, onExit, onHome }){
  const leave=onHome||onExit;
  const [tier,setTier]=useW('Medium');
  const [perPlayer,setPerPlayer]=useW(2);
  const [minutes,setMinutes]=useW(4);
  const [phase,setPhase]=useW('setup');   // setup | deal | prompt | play | resolve | done
  const [assign,setAssign]=useW({});         // player -> [{word,status}]
  const [prompt,setPrompt]=useW('');
  const [catchMode,setCatchMode]=useW(null); // null | {caught} | 'pick'

  const begin=()=>{
    const deck=makeDeck(DATA.SNEAK[tier]);
    const a={}; players.forEach(p=>{ a[p]=deck.draw(perPlayer).map(w=>({word:w,status:'active'})); });
    setAssign(a); setPrompt(rand(DATA.SNEAK_PROMPTS)); setPhase('deal');
  };

  /* ---- SETUP ---- */
  if(phase==='setup'){
    return (
      <div className="app screen">
        <TopBar onBack={onExit} title="Word Sneak" color={game.color}/>
        <div className="setup">
          <h2>Word Sneak</h2>
          <p className="lead">Everyone gets secret words to slip into the conversation. Catch others doing it before they pull it off.</p>
          <div className="field"><label>Difficulty</label>
            <Segmented options={['Easy','Medium','Hard']} value={tier} onChange={setTier} color="var(--pink)"/>
            <p className="muted" style={{fontSize:12.5,marginTop:10}}>{tier==='Easy'?'Everyday words — gentle warm-up.':tier==='Medium'?'Unusual but workable. The sweet spot.':'Nearly impossible. Good luck. 😈'}</p>
          </div>
          <div className="field"><label>Words per player</label><Stepper value={perPlayer} min={2} max={3} onChange={setPerPlayer}/></div>
          <div className="field"><label>Discussion time</label>
            <div className="row" style={{gap:12}}><Stepper value={minutes} min={3} max={5} onChange={setMinutes}/><span className="muted">minutes</span></div>
          </div>
          <Btn color="pink" size="lg" onClick={begin}>Deal secret words →</Btn>
        </div>
      </div>
    );
  }

  /* ---- DEAL ---- */
  if(phase==='deal'){
    return (
      <div className="app screen">
        <TopBar title="Word Sneak · your words" color={game.color}/>
        <PrivateReveal players={players} accent={game.color} doneLabel="Got my words"
          onDone={()=>setPhase('prompt')}
          getContent={(name)=>(
            <div className="center" style={{gap:14}}>
              <div className="role-card-big">
                <div className="kicker">sneak these in</div>
                <div className="col" style={{gap:10,marginTop:14}}>
                  {assign[name].map((w,i)=>(
                    <div key={i} className="secret-word" style={{fontSize:34,color:PALETTE[i%PALETTE.length],lineHeight:1}}>{w.word}</div>
                  ))}
                </div>
                <p className="muted" style={{color:'#6E6453',fontSize:13,marginTop:16}}>Work them into normal talk. Don't get caught!</p>
              </div>
            </div>
          )}/>
      </div>
    );
  }

  /* ---- PROMPT ---- */
  if(phase==='prompt'){
    return (
      <div className="app screen">
        <TopBar onBack={onExit} title="Word Sneak" color={game.color}/>
        <div className="center" style={{flex:1,padding:'16px 26px',gap:14}}>
          <div className="kicker">talk about…</div>
          <div className="bigcard" style={{borderColor:'var(--pink)'}}>
            <span style={{fontSize:34}}>💬</span>
            <div className="q" style={{marginTop:10}}>{prompt}</div>
          </div>
          <p className="muted" style={{maxWidth:300,fontSize:14}}>Chat naturally for {minutes} minutes. Slip your words in. Tap a player the instant you catch them.</p>
          <button className="mono" onClick={()=>setPrompt(rand(DATA.SNEAK_PROMPTS))} style={{background:'none',border:'none',color:'#9082BE',fontSize:12,cursor:'pointer',textDecoration:'underline'}}>shuffle prompt</button>
        </div>
        <div className="pad" style={{paddingTop:6}}><Btn color="pink" size="lg" onClick={()=>setPhase('play')}>Start the clock →</Btn></div>
      </div>
    );
  }

  /* ---- PLAY ---- */
  if(phase==='play'){
    return <SneakPlay game={game} players={players} assign={assign} setAssign={setAssign}
      minutes={minutes} scoring={scoring} addScore={addScore}
      onEnd={()=>setPhase('resolve')} onExit={onExit}/>;
  }

  /* ---- RESOLVE ---- */
  if(phase==='resolve'){
    const markSneaked=(player,i)=>{
      window.partySounds?.play('correct');
      setAssign(a=>{ const n={...a}; n[player]=n[player].map((w,j)=> j===i && w.status==='active' ? {...w,status:'sneaked'} : w); return n; });
      if(scoring) addScore(player,2);
    };
    return (
      <div className="app screen">
        <TopBar title="Word Sneak · the reveal" color={game.color}/>
        <div className="setup" style={{paddingTop:14}}>
          <h2 style={{fontSize:26}}>Who pulled it off?</h2>
          <p className="lead">Reveal your words. Tap the ones you actually snuck in (and nobody caught) for +2 each.</p>
          <div className="col" style={{gap:13}}>
            {players.map(p=>(
              <div key={p} className="card" style={{padding:'13px 15px'}}>
                <div className="row" style={{gap:10,marginBottom:10}}><Avatar name={p}/><b style={{fontSize:17,fontFamily:'var(--font-display)'}}>{p}</b></div>
                <div className="wrap" style={{gap:8}}>
                  {assign[p].map((w,i)=>(
                    <button key={i} onClick={()=>w.status==='active'&&markSneaked(p,i)} disabled={w.status!=='active'}
                      style={sneakWordBtn(w.status)}>
                      {w.status==='caught'?'🚫 ':w.status==='sneaked'?'✓ ':''}{w.word}
                    </button>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <div style={{marginTop:20}}><Btn color="pink" size="lg" onClick={()=>setPhase('done')}>{scoring?'See the scores →':'Finish →'}</Btn></div>
        </div>
      </div>
    );
  }

  /* ---- DONE ---- */
  return (
    <div className="app screen">
      <TopBar onBack={onExit} title="Word Sneak" color={game.color}/>
      <div className="center" style={{flex:1,padding:'20px 24px',gap:14}}>
        <Burst fire={true} colors={['#FF5C9D','#9A6CFF','#FFC22E']}/>
        <div className="stamp sh-pink" style={{fontSize:48}}>Sneaky!</div>
        {scoring
          ? <div style={{width:'100%',maxWidth:360}}><ScoreBoard scores={scores} players={players} accent="var(--pink)"/></div>
          : <p className="serif-i" style={{fontSize:21,color:'#FFD79A'}}>archipelago. nailed it. probably.</p>}
        <div className="btn-row" style={{width:'100%',maxWidth:360,marginTop:6}}>
          <Btn variant="ghost" onClick={leave}>Home</Btn>
          <Btn color="pink" onClick={()=>setPhase('setup')}>Play again ↻</Btn>
        </div>
      </div>
    </div>
  );
}

function SneakPlay({ game, players, assign, setAssign, minutes, scoring, addScore, onEnd, onExit }){
  const total=minutes*60;
  const [running,setRunning]=useW(true);
  const [rem]=useCountdown(total, running, onEnd);
  const [overlay,setOverlay]=useW(null);   // {step:'caught'|'catcher', caught?}

  const remainingCount=(p)=>assign[p].filter(w=>w.status==='active').length;

  const resolveCatch=(caught,catcher)=>{
    setAssign(a=>{ const n={...a}; const idx=n[caught].findIndex(w=>w.status==='active'); if(idx>=0) n[caught]=n[caught].map((w,j)=>j===idx?{...w,status:'caught'}:w); return n; });
    if(scoring) addScore(catcher,1);
    setOverlay(null);
  };

  return (
    <div className="app screen" style={{overflow:'hidden'}}>
      <TopBar onBack={onExit} title="Word Sneak · live" color={game.color}
        right={<button className="iconbtn" onClick={()=>setRunning(r=>!r)}>{running?'⏸':'▶'}</button>}/>
      <div className="pad" style={{paddingTop:10}}>
        <div className="center" style={{gap:6,marginBottom:6}}>
          <div className="bigcount" style={{fontSize:74,color:rem<=20?'var(--coral)':'var(--cream)'}}>{fmtTime(rem)}</div>
          <div className="kicker">talk &amp; sneak — tap whoever slips up</div>
        </div>
        <div style={{maxWidth:380,margin:'10px auto 0'}}><TimerBar remaining={rem} total={total}/></div>

        <div className="col" style={{gap:10,marginTop:22}}>
          {players.map(p=>(
            <button key={p} onClick={()=>setOverlay({step:'catcher',caught:p})}
              style={{display:'flex',alignItems:'center',gap:12,background:'rgba(255,255,255,.05)',border:'2px solid rgba(255,255,255,.1)',borderRadius:15,padding:'12px 15px',cursor:'pointer',textAlign:'left',width:'100%'}}>
              <Avatar name={p} size={28}/><b style={{flex:1,fontSize:17,color:'var(--cream)'}}>{p}</b>
              <span className="mono" style={{fontSize:11,color:'#9082BE'}}>{remainingCount(p)} left</span>
              <span style={{fontSize:18}}>🚨</span>
            </button>
          ))}
        </div>
      </div>
      <div className="pad" style={{paddingTop:4}}><Btn variant="ghost" onClick={onEnd}>End early & reveal →</Btn></div>

      {overlay && (
        <div className="sneak-overlay" onClick={()=>setOverlay(null)}>
          <div className="sneak-sheet" onClick={e=>e.stopPropagation()}>
            <div className="panel-title" style={{textAlign:'center',marginBottom:6}}>Caught <b style={{color:'var(--cream)'}}>{overlay.caught}</b>!</div>
            <p className="tcenter muted" style={{marginBottom:16,fontSize:14}}>Who caught them sneaking?</p>
            <div className="wrap" style={{gap:9,justifyContent:'center'}}>
              {players.filter(p=>p!==overlay.caught).map(p=>(
                <button key={p} className="chip selectable" onClick={()=>resolveCatch(overlay.caught,p)}><Avatar name={p} size={20}/>{p}</button>
              ))}
            </div>
            <div style={{marginTop:18}}><Btn variant="ghost" size="sm" onClick={()=>setOverlay(null)}>Cancel</Btn></div>
          </div>
        </div>
      )}
    </div>
  );
}

function sneakWordBtn(status){
  const base={fontFamily:'var(--font-display)',fontWeight:700,fontSize:17,padding:'9px 15px',borderRadius:12,cursor:'pointer',border:'2.5px solid var(--ink)',transition:'all .15s'};
  if(status==='sneaked') return {...base,background:'var(--teal)',color:'#06281f'};
  if(status==='caught')  return {...base,background:'#E7DCC8',color:'#9A8E78',textDecoration:'line-through',cursor:'default',opacity:.7};
  return {...base,background:'var(--cream)',color:'var(--ink)'};
}

window.GameWordSneak = GameWordSneak;