/* ============================================================
   8 · THE WAGER — private side-bets on an outcome (takeover).
   Reuses the sealed-bid flip-to-reveal pattern from the Auction.
   ============================================================ */
const { useState: useS_wg, useEffect: useE_wg } = React;

function WagerMainView({ wager }){
  const game = useGame();
  const w = wager;
  useGameEvents((ev)=>{ if(ev.type==='wager-bet'){ try{ audio.play('coin'); }catch(_){} } else if(ev.type==='wager-resolve'){ try{ audio.play('beat'); }catch(_){} } });
  const resolved = w.status==='resolved';
  const bidders = game.players.filter(p=>!p.dead);
  const actual = w.outcomes.find(o=>o.id===w.actual);

  return (
    <div className={`wager-stage ${resolved?'is-resolved':''}`}>
      <Embers count={16}/>
      <div className="wager-titlebar">
        <div className="wager-eyebrow">{resolved ? 'The wager settles' : (w.mode==='pot'?'Shared pot · winner takes the pool':'House odds · win your stake or lose it')}</div>
        <div className="wager-prompt display">{w.prompt}</div>
      </div>

      <div className="wager-outcomes">
        {w.outcomes.map(o=>{
          const isActual = resolved && w.actual===o.id;
          const backers = resolved ? bidders.filter(p=>{ const b=w.bets[p.id]; return b&&!b.passed&&b.outcomeId===o.id; }) : [];
          return (
            <div key={o.id} className={`wager-out ${isActual?'actual':''}`}>
              <span className="wager-out-label">{o.label}</span>
              {isActual && <span className="wager-out-flag">✓ TRUE</span>}
              {backers.length>0 && <div className="wager-out-backers">{backers.map(p=><span key={p.id} className="wager-chip">{p.name.split(' ')[0]}</span>)}</div>}
            </div>
          );
        })}
      </div>

      <div className="wager-cards">
        {bidders.map(p=>{
          const b = w.bets[p.id];
          const won = resolved && b && !b.passed && b.outcomeId===w.actual && b.stake>0;
          return (
            <div key={p.id} className={`bet-card ${resolved?'revealed':''} ${won?'win':''}`}>
              <div className="bet-card-inner">
                <div className="bid-face front">
                  <span className="bid-name">{p.name.split(' ')[0]}</span>
                  <span className={`bid-status ${b?(b.passed?'pass':'in'):'wait'}`}>{b?(b.passed?'passed':'bet placed ✓'):'thinking…'}</span>
                </div>
                <div className="bid-face back">
                  <span className="bid-name">{p.name.split(' ')[0]}</span>
                  {resolved && b && !b.passed
                    ? <span className="bid-amount">{(w.outcomes.find(o=>o.id===b.outcomeId)||{label:'?'}).label.slice(0,10)} · {b.stake}c</span>
                    : <span className="bid-amount">{resolved?'— pass —':''}</span>}
                  {won && <span className="bid-win-tag">WON</span>}
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div className="wager-foot">
        {!resolved
          ? <span className="muted">{Object.keys(w.bets).length}/{bidders.length} have wagered · hidden until the Keeper calls it</span>
          : <span className="gold">{actual?`Outcome: ${actual.label}`:'Resolved'}</span>}
      </div>
    </div>
  );
}
window.WagerMainView = WagerMainView;

function WagerPlayerOverlay({ player }){
  const game = useGame();
  const w = game.wager;
  const [outcome, setOutcome] = useS_wg('');
  const [stake, setStake] = useS_wg(0);
  useGameEvents((ev)=>{ if(ev.type==='coins' && ev.playerId===player.id) haptic(HAPTIC.premium); });
  useE_wg(()=>{ const b=w.bets[player.id]; if(b&&!b.passed){ setOutcome(b.outcomeId); setStake(b.stake); } }, [w.open]);
  if(!w.open) return null;
  const resolved = w.status==='resolved';
  const mine = w.bets[player.id];
  const max = player.coins;
  const won = resolved && mine && !mine.passed && mine.outcomeId===w.actual && mine.stake>0;
  const clampS = (n)=>Math.max(0, Math.min(max, n));
  const place = ()=>{ if(!outcome) return; Game.placeWager(player.id, outcome, stake); haptic(HAPTIC.card); try{audio.play('coin');}catch(_){} };

  return (
    <div className={`wager-overlay ${resolved?'is-resolved':''}`}>
      <Embers count={8}/>
      <div className="wager-ov-inner animate-fade-rise">
        {resolved ? (
          <div className="wager-ov-result">
            <h2 className="display gold">{won?'You called it':mine&&!mine.passed?'Wrong call':'You sat it out'}</h2>
            <p className="muted" style={{textTransform:'none'}}>{won?`Your stake paid out.`:mine&&!mine.passed?'The coins are gone.':'No stake, no loss.'}</p>
          </div>
        ) : (
          <>
            <div className="wager-ov-eyebrow">Side-bet · {player.coins}c in purse</div>
            <h2 className="wager-ov-prompt display">{w.prompt}</h2>
            <div className="wager-ov-options">
              {w.outcomes.map(o=>(
                <button key={o.id} className={`wager-ov-opt ${outcome===o.id?'sel':''}`} onClick={()=>{ setOutcome(o.id); haptic([6]); }}>{o.label}</button>
              ))}
            </div>
            <div className="wager-ov-stake">
              <span className="wager-stake-amt">{stake}</span><span className="wager-stake-c">coin stake</span>
            </div>
            <input type="range" min="0" max={max} value={stake} className="auction-slider" onChange={e=>setStake(clampS(parseInt(e.target.value)||0))}/>
            <div className="auction-step-row">
              <button className="auction-step" onClick={()=>{setStake(s=>clampS(s-5)); haptic([6]);}}>−5</button>
              <button className="auction-step" onClick={()=>{setStake(s=>clampS(s-1)); haptic([6]);}}>−1</button>
              <button className="auction-step" onClick={()=>{setStake(s=>clampS(s+1)); haptic([6]);}}>+1</button>
              <button className="auction-step" onClick={()=>{setStake(s=>clampS(s+5)); haptic([6]);}}>+5</button>
              <button className="auction-step max" onClick={()=>{setStake(max); haptic([6]);}}>all in</button>
            </div>
            <div className="auction-actions">
              <button className="auction-place glass-btn" onClick={place} disabled={!outcome||stake<=0}>{mine&&!mine.passed?'Update bet':'Place bet'}</button>
              <button className="auction-pass" onClick={()=>{ Game.passWager(player.id); haptic([10]); }}>Pass</button>
            </div>
            <div className="auction-ov-state">{mine?(mine.passed?'You passed':`Locked: ${(w.outcomes.find(o=>o.id===mine.outcomeId)||{label:'?'}).label} · ${mine.stake}c`):'Bets are hidden until resolution'}</div>
          </>
        )}
      </div>
    </div>
  );
}
window.WagerPlayerOverlay = WagerPlayerOverlay;