/* Gaming dashboard demo — what we can build for gaming clients */
const GamingDashboard = () => (
  <AppProvider>
    <GamingDashboardInner/>
  </AppProvider>
);

const GamingDashboardInner = () => {
  const app = useApp();
  // Live KPIs
  const players  = useLiveNumber(12840, { delta: 25, min: 12500, max: 13200, interval: 900 });
  const matches  = useLiveNumber(248,   { delta: 4,  min: 220,   max: 280 });
  const rewards  = useLiveNumber(8920,  { delta: 12, min: 8800,  max: 9100 });
  const retention= useLiveNumber(74.3,  { delta: 0.3, min: 72,   max: 77,   decimals: 1 });
  const missions = useLiveNumber(31590, { delta: 35, min: 31300, max: 31900 });
  const mpStatus = useLiveNumber(99.6,  { delta: 0.05, min: 99.3, max: 99.95, decimals: 2 });

  const [bars, setBars] = React.useState([42, 58, 52, 71, 64, 80, 70, 88, 75, 92, 80, 100]);
  React.useEffect(() => {
    const id = setInterval(() => {
      setBars(prev => {
        const next = [...prev.slice(1), Math.max(30, Math.min(100, prev[prev.length-1] + (Math.random()*28-14)))];
        return next.map(v => Math.round(v));
      });
    }, 1500);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="dash-root game-dash">
      {/* Sidebar */}
      <aside className="dash-sidebar">
        <div className="dash-brand">
          <span className="game-brand-mark"><IconPlay size={14}/></span>
          <div>
            <div className="dash-brand-name">GameHub Demo</div>
            <div className="dash-brand-sub">Console · v2.4</div>
          </div>
        </div>
        <button className="dash-search" onClick={() => app.toast('Search (demo)')}>
          <IconSearch size={13}/>
          <span>Search players…</span>
          <kbd>⌘K</kbd>
        </button>
        <div className="dash-nav-group">
          <div className="dash-nav-label">Console</div>
          <button className="dash-nav-item active"><span className="dash-nav-icon"><IconHome size={14}/></span><span className="dash-nav-label-txt">Overview</span></button>
          <button className="dash-nav-item" onClick={() => app.toast('Players · view')}><span className="dash-nav-icon"><IconUsers size={14}/></span><span className="dash-nav-label-txt">Players</span><span className="dash-nav-badge">12.8K</span></button>
          <button className="dash-nav-item" onClick={() => app.toast('Matches · view')}><span className="dash-nav-icon"><IconBolt size={14}/></span><span className="dash-nav-label-txt">Live Matches</span></button>
          <button className="dash-nav-item" onClick={() => app.toast('Leaderboards · view')}><span className="dash-nav-icon"><IconChart size={14}/></span><span className="dash-nav-label-txt">Leaderboard</span></button>
        </div>
        <div className="dash-nav-group">
          <div className="dash-nav-label">Web4</div>
          <button className="dash-nav-item" onClick={() => app.toast('Rewards engine')}><span className="dash-nav-icon"><IconSparkle size={14}/></span><span className="dash-nav-label-txt">Rewards Engine</span></button>
          <button className="dash-nav-item" onClick={() => app.toast('Web4 economy')}><span className="dash-nav-icon"><IconNetwork size={14}/></span><span className="dash-nav-label-txt">Web4 Economy</span></button>
        </div>
        <div className="dash-sidebar-foot">
          <div className="dash-health">
            <div className="dash-health-top">
              <span className="dash-pulse"/>
              <span>Multiplayer</span>
              <span className="dash-health-val live">{fmt(mpStatus,2)}%</span>
            </div>
            <div className="dash-health-bar"><i style={{width: '96%'}}/></div>
          </div>
        </div>
      </aside>

      <main className="dash-main">
        <header className="dash-topbar">
          <div className="dash-crumbs">
            <span className="muted-2">Console</span>
            <span className="dash-sep">/</span>
            <span>GameHub Demo</span>
          </div>
          <div className="dash-tabs">
            <button className="dash-tab active">Live</button>
            <button className="dash-tab" onClick={() => app.toast('Tab · seasons')}>Seasons</button>
            <button className="dash-tab" onClick={() => app.toast('Tab · economy')}>Economy</button>
          </div>
          <div className="dash-top-actions">
            <button className="dash-icon-btn" onClick={() => app.openModal({ kind: 'notifs' })}><IconBell size={13}/><span className="dash-icon-dot"/></button>
            <button className="dash-connect" onClick={() => app.toast({ title: 'Connected', msg: 'Web4 wallet · 0x4f…ab9c' })}><span className="dash-connect-dot"/>Connect</button>
            <button className="dash-avatar" onClick={() => app.toast('Profile · Game Admin')}/>
          </div>
        </header>

        <div className="dash-body">
          {/* KPIs */}
          <div className="dash-kpis">
            <Kpi label="Active Players"      value={fmt(players)}      delta="+312 last 5m"  trend="up"
              onClick={() => app.openModal({ kind: 'detail', item: { eyebrow: 'PLAYERS', title: 'Active Players', value: players, delta: '+312 last 5m', rows: [
                { label: 'Peak today', value: '13,420' }, { label: 'New signups', value: '+184' }, { label: 'Concurrent', value: '8,210' },
              ]}})}/>
            <Kpi label="Live Matches"        value={fmt(matches)}      delta="+8 last min"   trend="up"
              onClick={() => app.openModal({ kind: 'detail', item: { eyebrow: 'MATCHES', title: 'Live Matches', value: matches, delta: '+8 last minute', rows: [
                { label: 'Ranked', value: '142' }, { label: 'Casual', value: '78' }, { label: 'Custom', value: '28' },
              ]}})}/>
            <Kpi label="Rewards Claimed"     value={fmt(rewards)}      delta="+24 / hr"      trend="up"
              onClick={() => app.openModal({ kind: 'detail', item: { eyebrow: 'REWARDS', title: 'Rewards Claimed', value: rewards, delta: '+24 / hr', rows: [
                { label: 'Tokens', value: '4,280' }, { label: 'NFTs', value: '180' }, { label: 'XP boosts', value: '4,460' },
              ]}})}/>
            <Kpi label="Retention · 30d"     value={fmt(retention,1)+'%'} delta="+2.4%"   trend="up"
              onClick={() => app.openModal({ kind: 'detail', item: { eyebrow: 'RETENTION', title: 'Retention · 30d', value: Math.round(retention*100)/100, delta: '+2.4 pts', rows: [
                { label: 'D1', value: '88.4%' }, { label: 'D7', value: '78.1%' }, { label: 'D30', value: '74.3%' },
              ]}})}/>
          </div>

          {/* Main content: chart + leaderboard */}
          <div className="dash-content">
            <section className="dash-chart-card">
              <div className="dash-card-head">
                <div>
                  <div className="dash-card-eyebrow">Mission Progress · 24h</div>
                  <div className="dash-card-title">Completions / hour</div>
                </div>
                <div className="dash-legend">
                  <span><i style={{background:'#22d3ee'}}/> Daily</span>
                  <span><i style={{background:'#fbbf24'}}/> Weekly</span>
                  <button className="dash-pill-btn" onClick={() => app.toast('Range · 24h')}>24h <IconChevronDown size={11}/></button>
                </div>
              </div>
              <div className="dash-chart">
                <svg viewBox="0 0 720 200" preserveAspectRatio="none" width="100%" height="200">
                  <defs>
                    <linearGradient id="game-fill" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0" stopColor="#22d3ee" stopOpacity="0.45"/>
                      <stop offset="1" stopColor="#22d3ee" stopOpacity="0"/>
                    </linearGradient>
                    <linearGradient id="game-line" x1="0" y1="0" x2="1" y2="0">
                      <stop offset="0" stopColor="#5eead4"/>
                      <stop offset="1" stopColor="#22d3ee"/>
                    </linearGradient>
                  </defs>
                  {[40, 80, 120, 160].map(y => (
                    <line key={y} x1="0" y1={y} x2="720" y2={y} stroke="rgba(255,255,255,0.04)" strokeDasharray="2 4"/>
                  ))}
                  <GameLiveChart bars={bars}/>
                </svg>
                <div className="dash-chart-tip" style={{left:'70.8%'}}>
                  <div className="dash-chart-tip-label">Live · 24h</div>
                  <div className="dash-chart-tip-val"><strong className="live">{fmt(missions)}</strong> missions</div>
                </div>
                <div className="dash-chart-axis">
                  <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>Now</span>
                </div>
              </div>
            </section>

            <aside className="dash-action">
              <div className="dash-action-head">
                <div className="dash-action-title">Leaderboard</div>
                <button className="dash-icon-btn small" onClick={() => app.toast('Filter · season')}><IconMore size={12}/></button>
              </div>
              <div className="dash-action-metric">
                <LeaderRow rank="1" name="Alex Morgan"  pts={48210}/>
                <LeaderRow rank="2" name="Maya Stone"   pts={41584}/>
                <LeaderRow rank="3" name="Ethan Carter" pts={38192}/>
                <LeaderRow rank="4" name="Sofia Lane"   pts={32074}/>
              </div>
              <button className="dash-deploy-btn" onClick={() => app.openModal({ kind: 'deploy', target: 'rewards-engine' })}>
                <IconRocket size={14}/> Push Rewards
                <IconArrowRight size={13}/>
              </button>
              <div className="dash-mini-list">
                <button className="dash-mini-row" onClick={() => app.toast('Match · started')}><span className="dot ok"/>Match #2841 started<span className="t">12s</span></button>
                <button className="dash-mini-row" onClick={() => app.toast('Mission · cleared')}><span className="dot ok"/>Mission · Galaxy Run<span className="t">40s</span></button>
                <button className="dash-mini-row" onClick={() => app.toast({ msg: 'Server queue at 92%', tone: 'warn' })}><span className="dot warn"/>Server queue 92%<span className="t">2m</span></button>
              </div>
            </aside>
          </div>

          {/* Game modules */}
          <section className="dash-modules">
            <ModuleCard name="Multiplayer Engine" tag="REAL-TIME"  status="healthy" metric="248 live matches" accent="#22d3ee" progress={96}/>
            <ModuleCard name="Rewards Engine"     tag="WEB4"       status="healthy" metric="8,920 claimed"    accent="#fbbf24" progress={88}/>
            <ModuleCard name="Mission System"     tag="GAMEPLAY"   status="healthy" metric="31,590 today"     accent="#5eead4" progress={94}/>
            <ModuleCard name="Web4 Wallet"        tag="ECONOMY"    status="syncing" metric="3,210 wallets"    accent="#7c5cff" progress={72}/>
          </section>

          {/* Events */}
          <section className="dash-card">
            <div className="dash-card-head">
              <div>
                <div className="dash-card-eyebrow">Game Events</div>
                <div className="dash-card-title">Live · streaming</div>
              </div>
              <span className="dash-mini-pill"><span className="dot"/>Streaming</span>
            </div>
            <GameEventsList/>
          </section>
        </div>
      </main>
    </div>
  );
};

const LeaderRow = ({ rank, name, pts }) => {
  const app = useApp();
  const live = useLiveNumber(pts, { delta: 12, min: pts - 80, max: pts + 80, interval: 1100 });
  return (
    <button className="dash-action-row leader-row" onClick={() => app.toast({ title: name, msg: `Rank #${rank} · ${fmt(live)} pts` })}>
      <span className="leader-rank">#{rank}</span>
      <span>{name}</span>
      <span className="dash-action-val live">{fmt(live)}</span>
    </button>
  );
};

const GameLiveChart = ({ bars }) => {
  const W = 720;
  const N = bars.length;
  const step = W / (N - 1);
  const pts = bars.map((v, i) => [i * step, 180 - (v / 100) * 160]);
  const path = pts.reduce((acc, [x, y], i, a) => {
    if (i === 0) return `M${x},${y}`;
    const [px, py] = a[i - 1];
    const cx = (px + x) / 2;
    return `${acc} C${cx},${py} ${cx},${y} ${x},${y}`;
  }, '');
  const area = path + ` L${W},200 L0,200 Z`;
  const last = pts[pts.length - 1];
  return (
    <React.Fragment>
      <path d={area} fill="url(#game-fill)"/>
      <path d={path} stroke="url(#game-line)" strokeWidth="1.8" fill="none"/>
      <circle cx={last[0]} cy={last[1]} r="3.5" fill="#5eead4"/>
      <circle cx={last[0]} cy={last[1]} r="8" fill="#5eead4" opacity="0.2">
        <animate attributeName="r" values="6;12;6" dur="1.8s" repeatCount="indefinite"/>
      </circle>
    </React.Fragment>
  );
};

const GAME_EVENTS = [
  { sev: 'ok',   txt: 'Match #2841 · victory · Alex Morgan',  meta: 'arena · 03:42:18' },
  { sev: 'info', txt: 'New season launched · Galactic Run',    meta: 'global · 03:39:54' },
  { sev: 'ok',   txt: 'Reward claimed · 420 tokens',           meta: 'wallet · 03:38:02' },
  { sev: 'warn', txt: 'Server queue at 92%',                   meta: 'eu-central · 03:28:47' },
  { sev: 'ok',   txt: 'Achievement unlocked · Sky Master',     meta: 'us-west-2 · 03:22:11' },
  { sev: 'info', txt: 'Leaderboard reset in 4h',               meta: 'global · 03:14:50' },
];
const GameEventsList = () => {
  const app = useApp();
  return (
    <div className="dash-events">
      {GAME_EVENTS.map((e, i) => (
        <button key={i} className="dash-event" onClick={() => app.toast({ msg: e.txt, tone: e.sev === 'warn' ? 'warn' : 'ok' })}>
          <span className={"dash-event-sev " + e.sev}/>
          <span className="dash-event-txt">{e.txt}</span>
          <span className="dash-event-meta dash-mono">{e.meta}</span>
        </button>
      ))}
    </div>
  );
};

Object.assign(window, { GamingDashboard });