/* ============================================================
   PARTY — app shell, home screen, routing
   ============================================================ */
const { useState: useStateA, useEffect: useEffectA } = React;

const ROSTER_KEY = 'party:roster';
function loadRoster(){
  try{
    const raw=localStorage.getItem(ROSTER_KEY);
    if(!raw) return [];
    const p=JSON.parse(raw);
    return Array.isArray(p) ? p.filter(x=>typeof x==='string'&&x.trim()) : [];
  }catch{ return []; }
}

const GAME_LIST = [
  { key:'chwazi',  name:'Chwazi',     color:'var(--coral)', hex:'#FF5A3C', min:2, max:10, comp:()=>window.GameChwazi },
  { key:'imposter',name:'Imposter',   color:'var(--gold)',  hex:'#FFC22E', min:4, max:12, comp:()=>window.GameImposter },
  { key:'avalon',  name:'Avalon',     color:'var(--grape)', hex:'#9A6CFF', min:5, max:10, comp:()=>window.GameAvalon },
  { key:'hottake', name:'Hot Take',   color:'var(--teal)',  hex:'#16C2A3', min:3, max:10, comp:()=>window.GameHotTake },
  { key:'sneak',   name:'Word Sneak', color:'var(--pink)',  hex:'#FF5C9D', min:3, max:8,  comp:()=>window.GameWordSneak },
  { key:'alias',   name:'Alias',      color:'var(--sky)',   hex:'#3D8BFF', min:4, max:12, comp:()=>window.GameAlias },
  { key:'wyr',     name:'Would You Rather', color:'var(--gold)', hex:'#FF8A3C', min:3, max:10, comp:()=>window.GameWouldYouRather },
  { key:'wavelength', name:'Wavelength', color:'var(--grape)', hex:'#6B5CFF', min:3, max:10, comp:()=>window.GameWavelength },
];

function GameCard({g, idx, count, onPlay}){
  const ok = count>=g.min;
  return (
    <button
      className="gamecard"
      style={{ background:g.hex, animationDelay:(idx*65)+'ms', opacity:ok?1:0.6 }}
      onClick={()=>onPlay(g)}
    >
      <div className="gc-deco"></div>
      <h3>{g.name}</h3>
      <div className="gc-bottom">
        <span className="gc-badge">{ok? `${g.min}–${g.max}` : `Need ${g.min}+`}</span>
      </div>
    </button>
  );
}

function Home({players, setPlayers, onPlay}){
  const [name,setName]=useStateA('');
  const add=()=>{
    const n=name.trim(); if(!n) return;
    if(players.some(p=>p.toLowerCase()===n.toLowerCase())){ setName(''); return; }
    setPlayers([...players,n]); setName('');
    window.partySounds?.play('add');
  };
  return (
    <div className="app screen">
      {/* hero */}
      <div className="hero pad" style={{paddingBottom:6}}>
        <div className="wordmark-wrap">
          <div className="wordmark wiggle">PAR<span className="b">TY</span> GAM<span className="c">ES</span></div>
          <SoundToggle style={{position:'absolute',top:0,right:0}}/>
        </div>
      </div>

      {/* roster */}
      <div className="pad" style={{paddingTop:18,paddingBottom:8}}>
        <div className="panel-head">
          <div className="panel-title">Who's playing</div>
          {players.length>0 && <div className="mono" style={{fontSize:11,color:'var(--coral)',fontWeight:700,cursor:'pointer'}} onClick={()=>setPlayers([])}>CLEAR ALL</div>}
        </div>

        <div className="addrow">
          <input className="addinput" value={name} placeholder="Add a player…" maxLength={14}
            onChange={e=>setName(e.target.value)} onKeyDown={e=>e.key==='Enter'&&add()} />
          <button className="addbtn" onClick={add}>Add</button>
        </div>

        {players.length>0 ? (
          <div className="roster" style={{marginTop:14}}>
            {players.map(p=><Chip key={p} name={p} onRemove={()=>setPlayers(players.filter(x=>x!==p))}/>)}
          </div>
        ) : (
          <p className="muted" style={{marginTop:14,fontSize:14}}>Add everyone at the table. They carry into every game.</p>
        )}
      </div>

      {/* games */}
      <div className="pad" style={{paddingTop:14}}>
        <div className="panel-title" style={{marginBottom:13}}>Pick a game</div>
        <div className="gamegrid">
          {GAME_LIST.map((g,i)=><GameCard key={g.key} g={g} idx={i} count={players.length} onPlay={onPlay}/>)}
        </div>
        <div className="tcenter panel-title" style={{marginTop:28}}>created by Mario ✦</div>
      </div>
    </div>
  );
}

/* ---------- not-enough-players gate ---------- */
function Gate({g, count, onBack}){
  return (
    <div className="app screen">
      <TopBar onBack={onBack} title={g.name} color={g.color}/>
      <div className="center" style={{flex:1,padding:'30px 26px',gap:6}}>
        <div className="stamp sh-ink" style={{fontSize:54}}>Almost!</div>
        <p className="serif-i" style={{fontSize:22,color:'#FFD79A',marginTop:10}}>{g.name} needs {g.min}+ players</p>
        <p className="muted mt16" style={{maxWidth:300}}>You've got {count}. Round up {g.min-count} more {g.min-count===1?'friend':'friends'} and head back.</p>
        <div style={{width:'100%',maxWidth:320,marginTop:26}}><Btn color="grape" onClick={onBack}>← Back to roster</Btn></div>
      </div>
    </div>
  );
}

function App(){
  const [players,setPlayers]=useStateA(loadRoster);
  const scoring=false;
  const [scores,setScores]=useStateA({});
  const [route,setRoute]=useStateA({name:'home'});
  const [exitOpen,setExitOpen]=useStateA(false);

  useEffectA(()=>{
    try{ localStorage.setItem(ROSTER_KEY, JSON.stringify(players)); }catch{}
  },[players]);

  useEffectA(()=>{
    const unlock=()=>window.partySounds?.resume();
    document.addEventListener('pointerdown',unlock,{once:true});
    document.addEventListener('keydown',unlock,{once:true});
    return ()=>{
      document.removeEventListener('pointerdown',unlock);
      document.removeEventListener('keydown',unlock);
    };
  },[]);

  const addScore=(p,pts)=>setScores(s=>({...s,[p]:(s[p]||0)+pts}));
  const resetScores=()=>setScores({});

  const play=(g)=>{ setExitOpen(false); window.partySounds?.play('tap'); setRoute({name:'game',key:g.key}); };
  const goHome=()=>{ setExitOpen(false); setRoute({name:'home'}); };
  const requestExit=()=>setExitOpen(true);

  const activeGame=route.name==='game' ? GAME_LIST.find(x=>x.key===route.key) : null;

  let content;
  if(route.name==='home'){
    content=<Home players={players} setPlayers={setPlayers} onPlay={play}/>;
  } else {
    const g=GAME_LIST.find(x=>x.key===route.key);
    if(players.length<g.min){
      content=<Gate g={g} count={players.length} onBack={goHome}/>;
    } else {
      const Comp=g.comp();
      content = Comp
        ? <Comp game={g} players={players} scoring={scoring} scores={scores} addScore={addScore} resetScores={resetScores} onExit={requestExit} onHome={goHome}/>
        : <ComingSoon g={g} onBack={goHome}/>;
    }
  }

  return (
    <div className="stage">
      <ConfettiBG count={22}/>
      {content}
      <ExitConfirm open={exitOpen} gameName={activeGame?.name} onStay={()=>setExitOpen(false)} onLeave={goHome}/>
    </div>
  );
}

function ComingSoon({g,onBack}){
  return (
    <div className="app screen">
      <TopBar onBack={onBack} title={g.name} color={g.color}/>
      <div className="center" style={{flex:1,padding:30}}>
        <div className="stamp sh-grape" style={{fontSize:48}}>Soon</div>
        <p className="muted mt16">{g.name} is being built.</p>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);