// @ts-nocheck
import * as React from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export function DemoGalleryPage() {
  const demos = [
    {
      id: 'game-loop',
      name: 'MVP Loop Slice',
      color: 'var(--accent)',
      icon: '◎',
      validates: 'Connected horizontal slice: undock, navigate to belt, mine ore, dock, refine, fit, sell on market, and optionally run NPC combat. Uses a shared localStorage slice session across integrated demos.',
      limitations: 'Local browser persistence only. Deterministic fake economy and combat payouts. No backend or SpacetimeDB integration.',
      docPage: 'Gameplay → MVP Loop',
    },
    {
      id: 'starmap',
      name: 'Star Map (Galaxy Map)',
      color: 'var(--accent)',
      icon: '🗺',
      validates: 'Multi-system galaxy view with system connections, faction territories, click-to-navigate interaction, warp routes. Validates the Galaxy Map (region/constellation/system hierarchy). Each system has celestial body rendering.',
      limitations: 'This is the Galaxy Map, NOT the System Map. No single-system detail view showing belts, stations, and orbital bodies at navigation scale. A separate System Map demo is needed. Static galaxy topology — systems don\'t shift. No faction territory animation. World events shown as static icons, not animated effects. No waypoint creation or route planning integration.',
      docPage: 'Overview → HUD & View Mode Architecture → Map Mode',
    },
    {
      id: 'movement',
      name: 'Movement',
      color: 'var(--green)',
      icon: '→',
      validates: 'Click-to-move autopilot, ship interpolation between waypoints, ETA calculation, warp-to for distant objects. Validates the Movement Model design.',
      limitations: 'Client-side only — no server authority. Interpolation assumes constant speed; no acceleration/deceleration curves yet.',
      docPage: 'Backend → Movement Model',
    },
    {
      id: 'market',
      name: 'Market',
      color: 'var(--cyan)',
      icon: '📈',
      validates: 'Order book depth, bid/ask spread, price history charts, buy/sell order placement, margin accounts, commodity ticker. Validates the full market surface design.',
      limitations: 'Fixed seed data — prices don\'t propagate between systems (no info diffusion). NPC orders only, no player-to-player trades. ₢ symbol used for ISK. Futures contracts are simulated, not backed by SpacetimeDB.',
      docPage: 'Overview → Market Panel ★',
    },
    {
      id: 'combat',
      name: 'Combat',
      color: 'var(--red)',
      icon: '⚔',
      validates: 'FTL-style reactor power allocation (weapons/shields/engines/aux), target selection, auto-engage, module auto-cycling, capacitor drain, shield/armor/hull layers.',
      limitations: 'Solo PvE only. Single opponent at a time. No subsystem targeting. No weapon type differentiation (all deal generic damage). Power allocation is instant, not gradual.',
      docPage: 'Gameplay → Combat Model',
    },
    {
      id: 'fitting',
      name: 'Fitting',
      color: 'var(--purple)',
      icon: '🔧',
      validates: 'CPU/Power Grid slot constraints, High/Med/Low slot assignment, module fitting and unfiting, invalid fit rejection, fitting stat preview.',
      limitations: 'Single ship only (Frigate). No AI module slot type yet. No rig slots. No ship bonuses per skill level. Fitting only changes displayed stats, doesn\'t affect combat demo.',
      docPage: 'Ships & Fitting → Fitting / Slots',
    },
    {
      id: 'refining',
      name: 'Refining',
      color: 'var(--accent)',
      icon: '⚗',
      validates: 'Ore → mineral refining, batch sizes, efficiency curve by Industry skill level, yield calculation, station reprocessing interface.',
      limitations: 'No manufacturing chain beyond refining. No blueprint research. No production queues. Efficiency slider is manual, not skill-gated.',
      docPage: 'Economy → Refining',
    },
    {
      id: 'progression',
      name: 'Progression',
      color: 'var(--green)',
      icon: '📊',
      validates: 'XP-based skill progression across categories, level-up notifications, skill tree visualization, session XP tracking.',
      limitations: 'Flat XP curve — not the exponential curve described in the Social page. No skill prerequisites. No skill-based module restrictions. No time-based skill queue.',
      docPage: 'Progression & Social → XP & Skills',
    },
    {
      id: 'bounty',
      name: 'Bounty',
      color: 'var(--red)',
      icon: '💰',
      validates: 'Bounty placement, bounty tiers by pool size, kill feed display, bounty collection on ship destruction, anti-abuse rules (no self-claiming).',
      limitations: 'Bounty pool is static — no decay over time. Kill feed is pre-seeded, not generated from real combat. No galaxy-wide visibility tiers — all bounties visible everywhere.',
      docPage: 'Progression & Social → Bounty System',
    },
    {
      id: 'gamehud',
      name: 'Game HUD (Flight Mode)',
      color: 'var(--cyan)',
      icon: '🖥',
      validates: 'Flight Mode diegetic HUD: 3D viewport with overlay panels (shield/armor/hull arcs, module rack, overview sidebar, target lock, capacitor gauge, speed/ETA, chat stub). Validates the undocked in-space experience with diegetic overlays on the 3D scene.',
      limitations: 'Only shows Flight Mode (undocked). Station Mode (panel-based) not shown here — see Market/Fitting/Refining demos for panel UI. No panel undocking or free-floating mode. No multi-monitor support. No saved layout profiles. Chat is stub-only (no real messages).',
      docPage: 'Overview → HUD & View Mode Architecture → Flight Mode',
    },
    {
      id: 'chat',
      name: 'Chat & Comms',
      color: 'var(--cyan)',
      icon: '💬',
      validates: 'Range-based chat propagation, light-speed delay mechanics, channel switching (Local/Trade/Private), message delivery visualization, pilot proximity display. Validates the core social surface design.',
      limitations: 'Simulated delays only — no real network latency. NPC responses are scripted. Fleet channel is disabled (post-MVP). No corporation or alliance channels. Delay formula is simplified.',
      docPage: 'Progression & Social → Chat & Comms',
    },
    {
      id: 'zora',
      name: 'Zora Tier 0',
      color: 'var(--purple)',
      icon: '🤖',
      validates: 'Deterministic template selection by personality state × module availability × soul depth. Soul depth progression from blank (raw status codes) to deep (full personality). Module gating logic. Personality axes influence. Validates the Tier 0 implementation spec.',
      limitations: 'Tier 0 only — no LLM generation. Template database is a sample, not production-scale. Personality axes affect template selection but not text generation. No autonomous mode or inter-agent communication.',
      docPage: 'Ship AI — Zora → Implementation Tiers',
    },
    {
      id: 'galaxy',
      name: 'Galaxy Generation',
      color: 'var(--accent)',
      icon: '🌌',
      validates: 'Deterministic seeded galaxy generation with concrete parameters: 4 regions (Core/Frontier/Null/Deep Null), ~50 systems, Poisson disk constellation placement, MST + extra edges stargate topology, station/belt placement by security level, faction territory seeding, connectivity validation. Validates the Galaxy Generation spec in Backend → Galaxy Simulation → Galaxy Generation tab.',
      limitations: '2D top-down view only — no Z-depth or 3D system rendering. Galaxy shape is simplified (diamond layout, not true spiral). No NPC agent dialogue or mission seeding details. No wormhole connections for Deep Null. No world event overlay. Connectivity validation is BFS only (no minimum-gate-per-system check).',
      docPage: 'Backend → Galaxy Simulation → Galaxy Generation',
    },
  ];

  return (
    <div className="mx-auto max-w-content">
      <h1 style={{ marginBottom: '8px' }}>Interactive Demo Gallery</h1>
      <p style={{ color: 'var(--fg-dim)', fontSize: '0.95rem', maxWidth: '680px' }}>
        Thirteen interactive demos that validate specific game systems. Each demo is a standalone prototype
        focused on one aspect of the design unless opened through the MVP Loop Slice. They use fake data and simulated APIs — not connected to
        SpacetimeDB or a real server. Use these to evaluate feel and UX, not performance or scale.
        <strong>Note:</strong> The Star Map demo covers the <em>Galaxy Map</em>. A separate System Map demo (single-system
        navigation view) is still needed before Phase 1.
      </p>

      <div className="mb-6 grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-4" style={{ marginTop: 'var(--sp-5)' }}>
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--accent)' }}>13</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Demos</div>
        </div>
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--cyan)' }}>Fake Data</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Data Source</div>
        </div>
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--green)' }}>No Server</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Backend</div>
        </div>
        <div className="rounded-xl border border-border bg-surface p-5 max-md:rounded-lg max-md:p-4">
          <div className="font-mono text-[1.6rem] font-bold tabular-nums text-fg-bright" style={{ color: 'var(--purple)' }}>UX Only</div>
          <div className="mt-1 text-[0.75rem] uppercase tracking-[0.05em] text-muted">Purpose</div>
        </div>
      </div>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginTop: 'var(--sp-5)', marginBottom: 'var(--sp-6)' }}>
        <strong>How to use:</strong> Open demos from the sidebar under "Interactive Demos". Each demo has its own
        fullscreen mode. The limitations listed below are known gaps — they describe what the demo does <em>not</em>
        validate, not what the final game will lack.
      </div>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent" style={{ marginTop: 'var(--sp-5)', marginBottom: 'var(--sp-6)' }}>
        <strong>Connected demos:</strong> Star Map, Warp, Movement, and MVP Loop share navigation/session handoff.
        Market, Fitting, Refining, Combat, Progression, Bounty, Chat, and Zora can optionally consume the slice
        session. Standalone demo behavior is preserved when no <code>sliceSession</code> URL parameter is present.
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--sp-4)' }}>
        {demos.map((demo, i) => (
          <div key={i} className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: `3px solid ${demo.color}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)', marginBottom: 'var(--sp-4)' }}>
              <span style={{ fontSize: '1.4rem' }}>{demo.icon}</span>
              <h3 style={{ color: demo.color, margin: 0 }}>{demo.name} Demo</h3>
              <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem]" style={{
                background: 'var(--surface-raised)',
                color: demo.color,
                border: `1px solid ${demo.color}40`,
                fontSize: '0.65rem',
              }}>
                {demo.id}
              </span>
            </div>
            <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ gap: 'var(--sp-4)' }}>
              <div>
                <div style={{ fontSize: '0.7rem', color: 'var(--green)', fontWeight: 600, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', marginBottom: 'var(--sp-2)' }}>✓ VALIDATES</div>
                <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>{demo.validates}</p>
              </div>
              <div>
                <div style={{ fontSize: '0.7rem', color: 'var(--red)', fontWeight: 600, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', marginBottom: 'var(--sp-2)' }}>✗ LIMITATIONS</div>
                <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>{demo.limitations}</p>
              </div>
            </div>
            <div style={{ marginTop: 'var(--sp-3)', paddingTop: 'var(--sp-3)', borderTop: '1px solid var(--border)', fontSize: '0.8rem', color: 'var(--muted)' }}>
              <strong style={{ color: 'var(--fg-dim)' }}>Doc reference:</strong> {demo.docPage}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
