/* ============================================================
   LOOT AUCTION — sealed-bid bidding when a rare item drops.
   • AuctionMainView      — item, timer, player bid cards (flip-to-reveal)
   • AuctionPlayerOverlay — bid stepper capped at coins + Pass
   Award reuses the shared 'purchase' fly-to animation.
   ============================================================ */
const { useState: useS_au, useEffect: useE_au } = React;

const ITEM_TYPE_GLYPH = { weapon:'⚔', magic:'✶', item:'◈' };

function AuctionMainView({ auction }){
  const game = useGame();
  const a = auction;
  const [left, setLeft] = useS_au(Math.max(0, a.endsAt-Date.now()));
  useGameEvents((ev)=>{ if(ev.type==='auction-bid'){ try{ audio.play('coin'); }catch(_){} } else if(ev.type==='auction-close'){ try{ audio.play('beat'); }catch(_){} } });
  useE_au(()=>{
    if(a.status!=='live'){ setLeft(0); return; }
    const tick=()=>{ const l=a.endsAt-Date.now(); setLeft(Math.max(0,l)); if(l<=0) Game.closeAuction(); };
    tick(); const id=setInterval(tick, 200); return ()=>clearInterval(id);
  }, [a.status, a.endsAt]);

  const item = a.item || { name:'', type:'item', desc:'' };
  const closed = a.status==='closed';
  const low = left<8000 && a.status==='live';
  const bidders = game.players.filter(p=>!p.dead);

  return (
    <div className={`auction-stage ${closed?'is-closed':''}`}>
      <Embers count={18}/>
      <div className="auction-titlebar">
        <div className="auction-eyebrow">A rare find is offered</div>
        <div className="auction-title display">{item.name}</div>
      </div>

      <div className="auction-main">
        <div className="auction-item">
          <div className={`auction-art type-${item.type}`}>
            <span className="auction-art-glyph">{ITEM_TYPE_GLYPH[item.type]||'◈'}</span>
            <span className="auction-art-tag">{(ITEM_TYPES[item.type]||{label:'Item'}).label}</span>
          </div>
          {item.desc && <div className="auction-desc">{item.desc}</div>}
          {item.reqs && item.reqs.length>0 && <div className="auction-reqs">Requires {reqText(item.reqs)}</div>}
          {a.reserve>0 && <div className="auction-reserve">Reserve · {a.reserve}c</div>}
        </div>

        <div className="auction-side">
          {!closed
            ? <div className={`auction-timer ${low?'low':''}`}>{Math.ceil(left/1000)}<span>s</span></div>
            : <div className="auction-hammer display">{a.winner ? 'SOLD' : a.tie.length ? 'TIED' : 'NO SALE'}</div>}
          <div className="auction-cards">
            {bidders.map(p=>{
              const b = a.bids[p.id];
              const isWinner = closed && a.winner===p.id;
              const isTie = closed && a.tie.includes(p.id);
              return (
                <div key={p.id} className={`bid-card ${closed?'revealed':''} ${isWinner?'winner':''} ${isTie?'tie':''}`}>
                  <div className="bid-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' : 'bid placed ✓') : 'thinking…'}
                      </span>
                    </div>
                    <div className="bid-face back">
                      <span className="bid-name">{p.name.split(' ')[0]}</span>
                      <span className="bid-amount">{closed ? (b ? (b.passed ? '— pass —' : `${b.amount}c`) : 'no bid') : ''}</span>
                      {isWinner && <span className="bid-win-tag">WINNER</span>}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}
window.AuctionMainView = AuctionMainView;

function AuctionPlayerOverlay({ player }){
  const game = useGame();
  const a = game.auction;
  const [amt, setAmt] = useS_au(0);
  useGameEvents((ev)=>{ if(ev.type==='purchase' && ev.playerId===player.id) haptic(HAPTIC.premium); });
  useE_au(()=>{ const b=a.bids[player.id]; if(b && !b.passed) setAmt(b.amount); }, [a.open]);
  if(!a.open) return null;

  const item = a.item || {name:''};
  const mine = a.bids[player.id];
  const closed = a.status==='closed';
  const won = closed && a.winner===player.id;
  const inTie = closed && a.tie.includes(player.id);
  const max = player.coins;
  const clamp2 = (n)=>Math.max(0, Math.min(max, n));
  const step = (d)=>{ const v=clamp2(amt+d); setAmt(v); haptic([6]); };
  const place = ()=>{ Game.placeBid(player.id, amt); haptic(HAPTIC.card); try{audio.play('coin');}catch(_){} };
  const pass = ()=>{ Game.passBid(player.id); haptic([10]); };

  return (
    <div className={`auction-overlay ${closed?'is-closed':''}`}>
      <Embers count={10}/>
      <div className="auction-ov-inner animate-fade-rise">
        {closed ? (
          <div className={`auction-ov-result ${won?'won':''}`}>
            <h2 className="display gold">{won?'You won it':inTie?'It\u2019s a tie':'Not this time'}</h2>
            <p className="muted" style={{textTransform:'none'}}>
              {won ? `${item.name} is yours.` : inTie ? 'The Keeper will break the tie.' : `${item.name} went to another.`}
            </p>
          </div>
        ) : (
          <>
            <div className="auction-ov-eyebrow">Sealed bid · {item.name}</div>
            <div className="auction-ov-coins">Your purse · <strong className="gold">{player.coins}c</strong></div>
            <div className="auction-bid-display">
              <span className="auction-bid-amt">{amt}</span><span className="auction-bid-c">coins</span>
            </div>
            <input type="range" min="0" max={max} value={amt} className="auction-slider"
                   onChange={e=>setAmt(clamp2(parseInt(e.target.value)||0))}/>
            <div className="auction-step-row">
              <button className="auction-step" onClick={()=>step(-5)}>−5</button>
              <button className="auction-step" onClick={()=>step(-1)}>−1</button>
              <button className="auction-step" onClick={()=>step(1)}>+1</button>
              <button className="auction-step" onClick={()=>step(5)}>+5</button>
              <button className="auction-step max" onClick={()=>{ setAmt(max); haptic([6]); }}>all in</button>
            </div>
            <div className="auction-actions">
              <button className="auction-place glass-btn" onClick={place} disabled={amt<=0}>
                {mine && !mine.passed ? 'Update bid' : 'Place bid'}
              </button>
              <button className="auction-pass" onClick={pass}>Pass</button>
            </div>
            <div className="auction-ov-state">
              {mine ? (mine.passed ? 'You passed — tap a bid to rejoin' : `Locked in: ${mine.amount}c · change until time runs out`) : 'Bids are hidden until the hammer falls'}
            </div>
          </>
        )}
      </div>
    </div>
  );
}
window.AuctionPlayerOverlay = AuctionPlayerOverlay;