/* ── Slots ───────────────────────────────────────────────────────────────── */
const SLOT_SYMBOLS = [
  { sym: '♛', name: 'Crown',  cls: 'amethyst', weight: 1,  mult: 20 },
  { sym: '◆', name: 'Gem',    cls: 'sapphire', weight: 2,  mult: 10 },
  { sym: '⚔', name: 'Blade',  cls: 'gold',     weight: 4,  mult: 5  },
  { sym: '✦', name: 'Star',   cls: 'emerald',  weight: 15, mult: 3  },
  { sym: '○', name: 'Naught', cls: 'muted',    weight: 3,  mult: 0  },
];

function Slots({ balance, apiFetch, onBack, onBalanceChange }) {
  const { useState } = React;

  const [reels, setReels]       = useState([SLOT_SYMBOLS[4], SLOT_SYMBOLS[4], SLOT_SYMBOLS[4]]);
  const [spinning, setSpinning] = useState([false, false, false]);
  const [betAmount, setBetAmount] = useState(100);
  const [phase, setPhase]       = useState('idle');
  const [result, setResult]     = useState(null);
  const [history, setHistory]   = useState([]);
  const [err, setErr]           = useState('');

  function delay(ms) { return new Promise(r => setTimeout(r, ms)); }

  async function spin() {
    setErr('');
    const amt = parseInt(betAmount);
    if (!amt || amt <= 0) { setErr('Enter a valid bet'); return; }
    if (amt > balance)    { setErr('Insufficient balance'); return; }

    setPhase('spinning');
    setResult(null);
    setSpinning([true, true, true]);
    window.SoundFX?.slotSpinStart();

    let data;
    try {
      data = await apiFetch('/api/game/slots/play', { amount: amt });
    } catch (e) { setSpinning([false,false,false]); setPhase('idle'); setErr(e.message); window.SoundFX?.slotSpinStop(); return; }

    // Stagger reel reveals — slower so each stop feels deliberate
    await delay(1400);
    setSpinning([false, true, true]);
    setReels(r => [data.reels[0], r[1], r[2]]);
    window.SoundFX?.slotLand(0);

    await delay(1000);
    setSpinning([false, false, true]);
    setReels(r => [r[0], data.reels[1], r[2]]);
    window.SoundFX?.slotLand(1);

    await delay(800);
    setSpinning([false, false, false]);
    setReels(data.reels);
    window.SoundFX?.slotSpinStop();
    window.SoundFX?.slotLand(2);
    onBalanceChange(data.balance);

    setResult(data);
    setPhase('done');
    if (data.allMatch && data.mult > 0) window.SoundFX?.win(); else window.SoundFX?.bust();
    setHistory(h => [{ bet: amt, net: data.net, sym: data.reels[0].sym, allMatch: data.allMatch }, ...h.slice(0, 19)]);
  }

  return (
    <div className="game-panel" data-game-view="slots">
      <div className="game-panel-header">
        <button className="btn-back" onClick={onBack}>Lobby</button>
        <div>
          <h1 className="game-panel-title">Slots</h1>
          <div className="game-panel-subtitle">·❦· The Spinning Reels ·❦·</div>
        </div>
        <div className="game-panel-meta"><span>Up to 20×</span></div>
      </div>

      <div className="game-table">
        <FiligreeCorners />
        <div className="slot-machine">
          <div className="reels-container">
            {reels.map((sym, i) => (
              <div key={i} className={`reel${spinning[i] ? ' spinning' : ''}`}>
                <div className={`reel-symbol ${sym.cls}`}>{sym.sym}</div>
              </div>
            ))}
          </div>

          <div className={`game-status${result ? ` ${result.allMatch && result.mult > 0 ? 'win' : 'loss'}` : ''}`}>
            {result && (result.allMatch
              ? result.mult > 0
                ? `${result.reels[0].name} × ${result.mult} — +${result.winAmount.toLocaleString()} G`
                : 'No Prize'
              : 'No Match'
            )}
          </div>
        </div>

        <div className="table-divider" />

        <div className="section-header"><span className="section-title">Payouts — Three of a Kind</span><div className="section-line" /></div>
        <div className="payout-table">
          {SLOT_SYMBOLS.filter(s => s.mult > 0).map(s => (
            <div key={s.sym} className="payout-row">
              <span className={`payout-sym ${s.cls}`}>{s.sym} {s.sym} {s.sym}</span>
              <span className="payout-name">{s.name}</span>
              <span className="payout-mult">{s.mult}×</span>
            </div>
          ))}
        </div>
      </div>

      <div className="bet-controls">
        <span className="bet-label">Bet</span>
        <input
          className="bet-input"
          type="number"
          min={1}
          max={1000}
          value={betAmount}
          onChange={e => setBetAmount(e.target.value)}
          disabled={phase === 'spinning'}
        />
        <div className="bet-presets">
          {[100, 250, 500, 1000].map(n => (
            <button key={n} className="btn-preset" onClick={() => { window.SoundFX?.chip(); setBetAmount(n); }} disabled={phase === 'spinning'}>
              {n >= 1000 ? `${n/1000}k` : n}
            </button>
          ))}
        </div>
        <div className="bet-increments">
          {[10, 25, 100].map(n => (
            <button key={n} className="btn-increment" disabled={phase === 'spinning'}
              onClick={() => { window.SoundFX?.chip(); setBetAmount(Math.min(1000, (parseInt(betAmount)||0) + n)); }}>
              +{n}
            </button>
          ))}
        </div>
        <div className="action-buttons">
          <button className="btn btn-primary btn-lg" onClick={() => { window.SoundFX?.chip(); spin(); }} disabled={phase === 'spinning'}>
            {phase === 'spinning' ? 'Spinning…' : 'Spin'}
          </button>
        </div>
      </div>
      {err && <p style={{ color: 'var(--garnet)', fontSize: 12, marginTop: 10 }}>{err}</p>}

      {history.length > 0 && (
        <div style={{ marginTop: 20 }}>
          <div className="section-header"><span className="section-title">Recent Spins</span><div className="section-line" /></div>
          <div className="history-feed">
            {history.map((h, i) => (
              <div key={i} className="history-item">
                <span className="history-game">Slots</span>
                <span className="history-bet">{h.allMatch ? h.sym + ' ' + h.sym + ' ' + h.sym : '— — —'}</span>
                <span className={`history-result ${h.net > 0 ? 'pos' : h.net < 0 ? 'neg' : 'zero'}`}>
                  {h.net > 0 ? '+' : ''}{h.net.toLocaleString()} G
                </span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}