// screens-casino.jsx — Group 3: Casino (3 screens)

const CASINO_CATS = [
  { id:'all', label:'All' }, { id:'live', label:'Live Casino' },
  { id:'slots', label:'Slots' }, { id:'table', label:'Table' },
  { id:'jackpots', label:'Jackpots' }, { id:'new', label:'New' },
  { id:'faves', label:'Favourites' },
];

/* ── Screen 10: Casino Lobby ── */
function CasinoLobbyScreen({ navigate }) {
  const [cat, setCat] = React.useState('all');
  const [jackpot, setJackpot] = React.useState(8241500.87);
  React.useEffect(() => {
    const t = setInterval(() => setJackpot(p => p + Math.random()*0.3), 200);
    return () => clearInterval(t);
  }, []);

  const filtered = cat === 'all' ? APP_GAMES
    : cat === 'live' ? APP_GAMES.filter(g => g.badge === 'LIVE')
    : cat === 'slots' ? APP_GAMES.filter(g => !g.badge || g.badge === 'NEW' || g.badge === 'HOT')
    : cat === 'jackpots' ? APP_GAMES.filter(g => g.badge === 'JACKPOT')
    : cat === 'new' ? APP_GAMES.filter(g => g.badge === 'NEW')
    : APP_GAMES;

  const liveGames = APP_GAMES.filter(g => g.badge === 'LIVE');

  return (
    <React.Fragment>
      <SearchBar placeholder="Search games, providers..." />
      {/* Category pills */}
      <div style={{ background:'var(--color-nav-bg)', borderBottom:'1px solid var(--color-border-subtle)', padding:'8px 16px', flexShrink:0 }}>
        <div style={{ display:'flex', gap:6, overflowX:'auto', WebkitOverflowScrolling:'touch' }}>
          {CASINO_CATS.map(c => {
            const on = cat === c.id;
            return <button key={c.id} onClick={() => setCat(c.id)} style={{ flexShrink:0, height:32, padding:'0 14px', borderRadius:8, background:on?'var(--color-primary)':'var(--color-surface)', border:`1px solid ${on?'var(--color-primary)':'var(--color-border)'}`, cursor:'pointer', fontFamily:'var(--font-body)', fontSize:12, fontWeight:on?600:400, color:on?'#fff':'var(--color-text-secondary)', whiteSpace:'nowrap' }}>{c.label}</button>;
          })}
        </div>
      </div>

      <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)' }}>
        {/* Featured banner */}
        <div style={{ padding:'12px 16px' }}>
          <div style={{ borderRadius:20, overflow:'hidden', height:130, position:'relative', cursor:'pointer', border:'1px solid rgba(255,255,255,0.07)' }} onClick={() => navigate('game-detail', { game:APP_GAMES[0] })}>
            <GameArt game={APP_GAMES[0]} />
            <div style={{ position:'absolute', inset:0, background:'linear-gradient(90deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 50%,transparent 80%)' }} />
            <div style={{ position:'relative', zIndex:2, height:'100%', display:'flex', flexDirection:'column', justifyContent:'flex-end', padding:'14px 16px' }}>
              <span style={{ fontFamily:'var(--font-body)', fontSize:10, fontWeight:600, color:APP_GAMES[0].glow, textTransform:'uppercase', letterSpacing:1, marginBottom:3 }}>Featured Game</span>
              <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:20, color:'#fff' }}>{APP_GAMES[0].name}</span>
              <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'rgba(255,255,255,0.65)' }}>{APP_GAMES[0].provider} · RTP {APP_GAMES[0].rtp}</span>
            </div>
          </div>
        </div>

        {/* Jackpot ticker */}
        <div style={{ margin:'0 16px 16px', borderRadius:14, background:'linear-gradient(135deg,#001408,#003818,#006028)', border:'1px solid rgba(39,196,132,0.3)', padding:'12px 16px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:10, fontWeight:600, color:'var(--color-success)', textTransform:'uppercase', letterSpacing:1, marginBottom:3 }}>Mega Jackpot</div>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:22, color:'#fff', fontVariantNumeric:'tabular-nums' }}>€{jackpot.toLocaleString('en-IE',{minimumFractionDigits:2,maximumFractionDigits:2})}</div>
          </div>
          <button onClick={() => navigate('game-detail', { game:APP_GAMES[10] })} style={{ height:34, padding:'0 14px', borderRadius:9, background:'var(--color-success)', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:'#fff' }}>Play now</button>
        </div>

        {/* Live Casino feature row */}
        {(cat === 'all' || cat === 'live') && (
          <div style={{ marginBottom:16 }}>
            <SectionHeader title="Live Casino" count={33} badge="LIVE" onSeeAll={() => {}} />
            <div style={{ display:'flex', gap:8, overflowX:'auto', padding:'0 16px 4px', WebkitOverflowScrolling:'touch' }}>
              {liveGames.map(game => (
                <div key={game.id} onClick={() => navigate('game-detail', { game })} style={{ flexShrink:0, width:160, cursor:'pointer' }}>
                  <div style={{ width:160, height:100, borderRadius:14, overflow:'hidden', position:'relative', border:'1px solid rgba(255,255,255,0.06)' }}>
                    <GameArt game={game} />
                    <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.7) 100%)' }} />
                    <div style={{ position:'absolute', top:7, left:8, display:'flex', alignItems:'center', gap:4, background:'rgba(0,0,0,0.55)', backdropFilter:'blur(4px)', borderRadius:5, padding:'2px 7px' }}>
                      <span style={{ width:5, height:5, borderRadius:'50%', background:'var(--color-danger)', animation:'pulse-live 1.5s infinite' }} />
                      <span style={{ fontSize:9, fontWeight:700, color:'#fff' }}>LIVE</span>
                    </div>
                    {game.players && <div style={{ position:'absolute', top:7, right:8, background:'rgba(0,0,0,0.55)', borderRadius:5, padding:'2px 5px', display:'flex', alignItems:'center', gap:3 }}>
                      <i className="ph ph-users" style={{ fontSize:8, color:'rgba(255,255,255,0.75)' }} />
                      <span style={{ fontSize:8, color:'rgba(255,255,255,0.75)', fontWeight:500 }}>{game.players}</span>
                    </div>}
                    <div style={{ position:'absolute', bottom:0, left:0, right:0, padding:'6px 10px' }}>
                      <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:12, color:'#fff' }}>{game.name}</div>
                      <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'rgba(255,255,255,0.6)' }}>{game.provider}</div>
                    </div>
                  </div>
                  <div style={{ display:'flex', justifyContent:'space-between', padding:'4px 2px 0' }}>
                    <span style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)' }}>Min €{game.minBet}</span>
                    <span style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)' }}>Max €{game.maxBet?.toLocaleString()}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* 2-col game grid */}
        <div style={{ padding:'0 16px 4px', marginBottom:4 }}>
          <SectionHeader title={cat === 'all' ? 'All Games' : CASINO_CATS.find(c=>c.id===cat)?.label} count={filtered.length} onSeeAll={() => {}} />
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, padding:'0 16px' }}>
          {filtered.map(game => (
            <div key={game.id} onClick={() => navigate('game-detail', { game })} style={{ cursor:'pointer' }}>
              <div style={{ width:'100%', aspectRatio:'4/5', borderRadius:14, overflow:'hidden', position:'relative', border:'1px solid rgba(255,255,255,0.06)', marginBottom:6 }}>
                <GameArt game={game} />
                <div style={{ position:'absolute', left:0, right:0, bottom:0, height:'50%', background:'linear-gradient(180deg,transparent,rgba(0,0,0,0.35))' }} />
                {game.badge && (
                  <div style={{ position:'absolute', top:7, left:7, background:game.badge==='LIVE'?'var(--color-danger)':game.badge==='JACKPOT'?'var(--color-success)':game.badge==='NEW'?'var(--color-primary)':'#F5484A', borderRadius:5, padding:'2px 6px', fontFamily:'var(--font-body)', fontWeight:800, fontSize:9, letterSpacing:0.4, color:'#fff' }}>{game.badge}</div>
                )}
              </div>
              <div style={{ fontFamily:'var(--font-body)', fontWeight:500, fontSize:12, color:'var(--color-text-primary)', marginBottom:2 }}>{game.name}</div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <span style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)' }}>{game.provider}</span>
                <span style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-accent)', fontWeight:500 }}>RTP {game.rtp}</span>
              </div>
            </div>
          ))}
        </div>
        <div style={{ height:24 }} />
      </div>
    </React.Fragment>
  );
}

/* ── Screen 11: Game Detail (bottom sheet style) ── */
function GameDetailSheet({ navigate, goBack, game }) {
  const g = game || APP_GAMES[0];
  const volColor = { Low:'var(--color-success)', Med:'var(--color-warning)', High:'var(--color-danger)' };
  const similarGames = APP_GAMES.filter(x => x.provider === g.provider && x.id !== g.id).slice(0,3);
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'var(--color-bg)' }}>
      {/* Sheet handle area */}
      <div style={{ background:'var(--color-surface)', borderRadius:'20px 20px 0 0', paddingTop:8, display:'flex', justifyContent:'center', flexShrink:0 }}>
        <div style={{ width:36, height:4, borderRadius:2, background:'var(--color-border)' }} />
      </div>
      <div style={{ flex:1, overflowY:'auto', background:'var(--color-surface)' }}>
        {/* Game thumbnail */}
        <div style={{ width:'100%', height:200, position:'relative', overflow:'hidden' }}>
          <GameArt game={g} />
          <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.7) 100%)' }} />
          <div style={{ position:'absolute', bottom:16, left:16, right:16 }}>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:22, color:'#fff', textShadow:'0 2px 8px rgba(0,0,0,0.6)', marginBottom:4 }}>{g.name}</div>
            <div style={{ display:'flex', gap:6 }}>
              <span style={{ background:'rgba(0,0,0,0.5)', backdropFilter:'blur(4px)', borderRadius:5, padding:'3px 8px', fontFamily:'var(--font-body)', fontSize:11, color:'rgba(255,255,255,0.85)' }}>{g.provider}</span>
              <span style={{ background:'rgba(0,221,202,0.2)', backdropFilter:'blur(4px)', border:'1px solid rgba(0,221,202,0.4)', borderRadius:5, padding:'3px 8px', fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'#1DD9CA' }}>RTP {g.rtp}</span>
            </div>
          </div>
          <button onClick={goBack} style={{ position:'absolute', top:12, right:12, width:34, height:34, borderRadius:10, background:'rgba(0,0,0,0.4)', backdropFilter:'blur(4px)', border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <i className="ph ph-x" style={{ fontSize:16, color:'#fff' }} />
          </button>
        </div>

        <div style={{ padding:'20px 16px' }}>
          {/* Info rows */}
          <div style={{ background:'var(--color-bg)', borderRadius:14, border:'1px solid var(--color-border)', padding:'2px 0', marginBottom:20 }}>
            {[
              ['Volatility', <span style={{ fontFamily:'var(--font-body)', fontWeight:600, fontSize:13, color:volColor[g.volatility] }}>{g.volatility}</span>],
              ['Min bet', `€${g.minBet}`],
              ['Max bet', `€${g.maxBet?.toLocaleString()}`],
              ['RTP', g.rtp],
            ].map(([label, val], i, arr) => (
              <div key={label} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'12px 16px', borderBottom:i<arr.length-1?'1px solid var(--color-border-subtle)':undefined }}>
                <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-muted)', whiteSpace:'nowrap' }}>{label}</span>
                {typeof val === 'string' ? <span style={{ fontFamily:'var(--font-body)', fontSize:13, fontWeight:500, color:'var(--color-text-primary)' }}>{val}</span> : val}
              </div>
            ))}
          </div>

          {/* Similar games */}
          {similarGames.length > 0 && (
            <div style={{ marginBottom:20 }}>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:14, color:'var(--color-text-primary)', marginBottom:10 }}>More from {g.provider}</div>
              <div style={{ display:'flex', gap:8 }}>
                {similarGames.map(sg => (
                  <div key={sg.id} onClick={() => navigate('game-detail', { game:sg })} style={{ width:90, cursor:'pointer' }}>
                    <div style={{ width:90, height:90, borderRadius:12, overflow:'hidden', position:'relative', border:'1px solid rgba(255,255,255,0.06)', marginBottom:4 }}>
                      <GameArt game={sg} />
                    </div>
                    <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-secondary)' }}>{sg.name}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
      <div style={{ padding:'12px 16px 28px', background:'var(--color-surface)', borderTop:'1px solid var(--color-border)', display:'flex', gap:10 }}>
        <button onClick={() => navigate('in-game', { game:g })} style={{ flex:2, height:52, borderRadius:12, background:'var(--color-primary)', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:15, fontWeight:600, color:'#fff' }}>Play now</button>
        <button style={{ flex:1, height:52, borderRadius:12, background:'var(--color-surface-raised)', border:'1px solid var(--color-border)', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:14, fontWeight:500, color:'var(--color-text-primary)' }}>Try demo</button>
        <button style={{ width:52, height:52, borderRadius:12, background:'var(--color-surface-raised)', border:'1px solid var(--color-border)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <i className="ph ph-heart" style={{ fontSize:20, color:'var(--color-text-muted)' }} />
        </button>
      </div>
    </div>
  );
}

/* ── Screen 12: In-Game HUD ── */
function InGameScreen({ navigate, goBack, game }) {
  const g = game || APP_GAMES[0];
  const [sessionMin, setSessionMin] = React.useState(0);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const t = setInterval(() => setSessionMin(p => p + 1), 60000);
    return () => clearInterval(t);
  }, []);
  const sessionColor = sessionMin >= 60 ? 'var(--color-warning)' : 'var(--color-text-muted)';
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'#000', position:'relative' }}>
      {/* Top HUD bar */}
      <div style={{ position:'absolute', top:0, left:0, right:0, zIndex:10, display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 14px', background:'linear-gradient(180deg,rgba(0,0,0,0.7) 0%,transparent 100%)' }}>
        <div style={{ display:'flex', alignItems:'center', gap:8 }}>
          <button onClick={goBack} style={{ width:34, height:34, borderRadius:8, background:'rgba(0,0,0,0.5)', backdropFilter:'blur(4px)', border:'1px solid rgba(255,255,255,0.15)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <i className="ph ph-x" style={{ fontSize:16, color:'#fff' }} />
          </button>
          <div style={{ display:'flex', alignItems:'center', gap:5, background:'rgba(0,0,0,0.5)', backdropFilter:'blur(4px)', borderRadius:8, padding:'5px 10px', border:`1px solid ${sessionColor}40` }}>
            <i className="ph ph-clock" style={{ fontSize:13, color:sessionColor }} />
            <span style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:sessionColor }}>{sessionMin}m played</span>
            {sessionMin >= 60 && <i className="ph ph-warning" style={{ fontSize:12, color:'var(--color-warning)' }} />}
          </div>
        </div>
        <div style={{ background:'rgba(0,0,0,0.5)', backdropFilter:'blur(4px)', borderRadius:8, padding:'5px 10px', border:'1px solid rgba(255,255,255,0.15)', display:'flex', alignItems:'center', gap:5 }}>
          <i className="ph ph-wallet" style={{ fontSize:13, color:'var(--color-success)' }} />
          <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:13, color:'#fff', fontVariantNumeric:'tabular-nums' }}>€1,325.83</span>
        </div>
      </div>

      {/* Game area placeholder */}
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', position:'relative', overflow:'hidden' }}>
        <GameArt game={g} />
        <div style={{ position:'absolute', inset:0, background:'rgba(0,0,0,0.45)' }} />
        <div style={{ position:'relative', zIndex:2, textAlign:'center' }}>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:28, color:'#fff', marginBottom:8, textShadow:'0 2px 10px rgba(0,0,0,0.8)' }}>{g.name}</div>
          <div style={{ fontFamily:'var(--font-body)', fontSize:14, color:'rgba(255,255,255,0.6)', marginBottom:20 }}>Game loading…</div>
          <div style={{ width:48, height:48, borderRadius:'50%', border:'3px solid rgba(255,255,255,0.15)', borderTopColor:'#fff', animation:'spin 1s linear infinite', margin:'0 auto' }} />
        </div>
      </div>

      {/* Bottom HUD */}
      <div style={{ position:'absolute', bottom:16, right:16, zIndex:10 }}>
        <button onClick={() => setMenuOpen(o=>!o)} style={{ width:44, height:44, borderRadius:12, background:'rgba(0,0,0,0.55)', backdropFilter:'blur(8px)', border:'1px solid rgba(255,255,255,0.15)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <i className="ph ph-dots-three" style={{ fontSize:22, color:'#fff' }} />
        </button>
        {menuOpen && (
          <div style={{ position:'absolute', bottom:52, right:0, width:200, background:'rgba(20,22,39,0.96)', backdropFilter:'blur(12px)', border:'1px solid var(--color-border)', borderRadius:14, padding:'8px 0', overflow:'hidden' }}>
            {[['ph-shield-check','Responsible gambling',() => navigate('rg-hub')],['ph-question','Game rules',() => {}],['ph-plus-circle','Deposit',() => navigate('deposit')],['ph-x','Exit game',goBack]].map(([icon,label,action],i) => (
              <button key={i} onClick={action} style={{ width:'100%', background:'none', border:'none', cursor:'pointer', padding:'12px 16px', display:'flex', alignItems:'center', gap:10, borderBottom:i<3?'1px solid var(--color-border-subtle)':undefined }}>
                <i className={`ph ${icon}`} style={{ fontSize:16, color:'var(--color-text-muted)' }} />
                <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-primary)' }}>{label}</span>
              </button>
            ))}
          </div>
        )}
      </div>
      <div style={{ position:'absolute', top:'40%', left:0, right:0, textAlign:'center', zIndex:5, pointerEvents:'none' }}>
        <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'rgba(255,255,255,0.3)' }}>↑ swipe up to exit</div>
      </div>
    </div>
  );
}

Object.assign(window, { CasinoLobbyScreen, GameDetailSheet, InGameScreen });