// @ts-nocheck
import * as React from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export function RoadmapPage() {
  const eras = [
    {
      id: 'core',
      title: 'VOID::NAV — Narrative-Driven Space Exploration Saga',
      subtitle: 'Build a single-player experience where you author your own mini-series. Inspired by Windward\'s freedom, Stellaris\'s strategic depth, and AI-generated storytelling. Every campaign generates a unique tale. Local persistence from day one — your story lives on your machine.',
      accent: 'var(--accent)',
      phases: [
        {
          num: '0',
          title: 'Local Skeleton & Star System',
          goal: 'Game client with rendered star system, station, and asteroids. Player can spawn and see the void.',
          doneWhen: 'Game boots. Shows a star system with a station and 3 asteroids. Ship visible in 3D viewport. Game state persists locally — closing and reopening restores state.',
          status: 'current',
        },
        {
          num: '1',
          title: 'Navigation & Exploration',
          goal: 'Click-to-navigate autopilot with smooth ship movement. Warp-to for distant objects. Explore POIs within a system.',
          doneWhen: 'Click an asteroid, station, or anomaly. Ship plots a course and moves there with smooth interpolation. ETA display updates. Warp-to for distant objects works. Player can freely navigate the star system.',
          status: 'upcoming',
        },
        {
          num: '2',
          title: 'Mining, Inventory & Trade',
          goal: 'Asteroid mining cycle, ore extraction, cargo hold. NPC market for buying/selling goods. Regional price differences between stations.',
          doneWhen: 'Approach asteroid, start mining. Mining cycle shows progress. Ore appears in cargo. Dock at station, sell ore for ISK. Fly to another station — prices are different. Buy low / sell high works.',
          status: 'upcoming',
        },
        {
          num: '3',
          title: 'AI Story Director Foundation',
          goal: 'Event tracking system. Player actions logged for narrative synthesis. Basic AI-generated story events trigger based on discoveries and choices.',
          doneWhen: 'Player actions (discover POI, trade, fight, ally with faction) are logged. AI generates narrative text describing events. Story log accessible showing campaign history. Discoveries generate story beats.',
          status: 'upcoming',
        },
        {
          num: '4',
          title: 'Diplomacy & Factions',
          goal: 'NPC agents offer quests. Faction standing system. Stellaris-inspired diplomatic options. Trade routes and alliances shape both world and narrative.',
          doneWhen: 'Talk to NPC agent at station. Accept a quest (deliver cargo, explore anomaly). Complete quest for ISK + standing. Standing unlocks better quests and prices. Supplying a station increases its prosperity. Faction relationships visible and affected by choices.',
          status: 'upcoming',
        },
        {
          num: '5',
          title: 'Ship Customization & Upgrades',
          goal: 'Multiple ship classes (scout, hauler, warship). Module fitting with High/Med/Low slots. CPU/PG constraints. Buy new ships at stations.',
          doneWhen: 'Dock at station. Open fitting screen. Equip weapons in high slots, shield booster in mid, cargo expander in low. Fitting affects stats. Can buy a new ship class. Invalid fits rejected (insufficient CPU/PG).',
          status: 'upcoming',
        },
        {
          num: '6',
          title: 'Strategic Conflict (Secondary)',
          goal: 'FTL-style combat as dramatic story beats, not gameplay loop. Auto-engage with power management. Consequences feed narrative.',
          doneWhen: 'Target hostile NPC. Ship auto-engages. Manage reactor power (weapons/shields/engines). Combat outcome affects story (loot, bounty, reputation changes). Defeats and victories logged in story.',
          status: 'upcoming',
        },
        {
          num: '7',
          title: 'Single-Player Polish & Procedural Galaxy',
          goal: 'Procedurally generated multi-system galaxy. Fog of war. Full HUD. Notifications. Tutorial sequence. Ship AI companion (Zora Tier 0). Story-driven progression.',
          doneWhen: 'Full game loop: discover → engage → AI story event → shape galaxy → next chapter. Procedural galaxy generates unique systems each campaign. Fog of war reveals as you travel. HUD shows all relevant info. Tutorial guides first 30 minutes. State persists locally.',
          status: 'future',
        },
      ],
    },
  ];

  function PhaseItem({ phase, isLast }) {
    const statusStyle = phase.status === 'current'
      ? { background: 'var(--accent-bg)', color: 'var(--accent)', border: '1px solid var(--accent-border)' }
      : phase.status === 'upcoming'
        ? { background: 'var(--cyan-bg)', color: 'var(--cyan)', border: '1px solid rgba(34,211,238,0.25)' }
        : { background: 'var(--surface-raised)', color: 'var(--muted)', border: '1px solid var(--border)' };

    return (
      <div className="mb-5 flex gap-4">
        <div className="flex min-w-10 flex-col items-center">
          <div
            className={`size-3 rounded-full ${phase.status === 'future' ? 'bg-border-light shadow-none' : 'bg-accent shadow-[0_0_8px_rgba(240,160,48,0.3)]'}`}
            style={phase.status === 'current' ? {
              background: 'var(--accent)',
              boxShadow: '0 0 12px rgba(240,160,48,0.4)',
              animation: 'pulse 2s infinite',
            } : {}}
          />
          {!isLast && <div className="mt-1 w-0.5 flex-1 bg-border" />}
        </div>
        <div className="flex-1">
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)', marginBottom: 'var(--sp-2)' }}>
            <span style={{
              fontFamily: 'var(--font-mono)',
              fontSize: '0.7rem',
              padding: '2px 8px',
              borderRadius: 'var(--radius-pill)',
              ...statusStyle,
            }}>
              PHASE {phase.num}
            </span>
            <h4 style={{ margin: 0 }}>{phase.title}</h4>
            {phase.status === 'current' && <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 font-mono text-[0.7rem] border border-[rgba(240,160,48,0.25)] bg-[rgba(240,160,48,0.08)] text-accent">IN PROGRESS</span>}
          </div>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>{phase.goal}</p>
          <div style={{ background: 'var(--surface-raised)', borderRadius: 'var(--radius-md)', padding: 'var(--sp-2) var(--sp-3)', fontSize: '0.8rem' }}>
            <span style={{ color: 'var(--muted)', fontFamily: 'var(--font-mono)', fontSize: '0.7rem' }}>DONE WHEN: </span>
            <span style={{ color: 'var(--fg-dim)' }}>{phase.doneWhen}</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-content">
      <h1 style={{ marginBottom: '8px' }}>Development Roadmap</h1>
      <p style={{ color: 'var(--fg-dim)', fontSize: '0.95rem', maxWidth: '720px' }}>
        Eight phases to a complete single-player narrative experience. <strong style={{ color: 'var(--fg)' }}>Core game</strong> is a story-driven
        space exploration saga — inspired by Windward's freedom, Stellaris's strategic depth, and AI-generated storytelling.
        Every phase has a verifiable done-when condition. Integration gates ensure all systems work together before advancing.
      </p>

      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-purple/20 bg-purple/8 text-purple" style={{ marginTop: 'var(--sp-4)', maxWidth: '720px' }}>
        <strong>Why narrative-driven and single-player?</strong> The game is about <em>your story</em> — Windward meets Stellaris with AI-generated
        narrative in the style of The Templin Institute. Every choice feeds the AI Story Director, weaving your actions into an ongoing saga.
        Local persistence means your story lives on your machine — no cloud required, no subscriptions, no always-online. Just you and the void.
        Future enhancements may add multiplayer, but the core experience is complete and standalone.
      </div>

      <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]" style={{ marginTop: 'var(--sp-8)' }}>
        <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">IG</span>
        <h2 style={{ margin: 0 }}>Integration Gates</h2>
      </div>
      <p style={{ color: 'var(--fg-dim)', fontSize: '0.95rem', maxWidth: '720px', marginBottom: 'var(--sp-4)' }}>
        Between phase groups, an integration gate ensures all systems work together before new ones are added.
        A gate is a focused playtest that exercises every previously-built feature end-to-end.
      </p>
      <div className="grid grid-cols-2 gap-5 max-[900px]:grid-cols-1" style={{ marginBottom: 'var(--sp-6)' }}>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--accent)' }}>
          <h4 style={{ color: 'var(--accent)' }}>Gate 1 — Exploration & Trade Loop (after Phase 2)</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            Navigate to asteroid → mine → fill cargo → dock → sell ore → navigate to another station → discover price difference → trade.
            The complete exploration and trade loop runs in a single session without errors. The galaxy feels alive and explorable.
            Local persistence works — closing and reopening restores state.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>Phases covered: 0, 1, 2</div>
        </div>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--purple)' }}>
          <h4 style={{ color: 'var(--purple)' }}>Gate 2 — Story Foundation (after Phase 3)</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            Player actions generate story events. AI Story Director weaves discoveries, trades, and choices into narrative text.
            Story log accessible showing campaign history. The game feels like it's telling YOUR story.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>Phases covered: 0–3</div>
        </div>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--green)' }}>
          <h4 style={{ color: 'var(--green)' }}>Gate 3 — Full Adventure Loop (after Phase 5)</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            Explore → discover → AI story event → engage faction → complete quest → earn standing → unlock new narrative branches.
            Diplomacy, trade, and story systems work as an integrated whole. Choices matter.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>Phases covered: 0–5</div>
        </div>
        <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ borderLeft: '3px solid var(--cyan)' }}>
          <h4 style={{ color: 'var(--cyan)' }}>Gate 4 — Core Game Complete (after Phase 7)</h4>
          <p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-2) 0' }}>
            Full solo game: discover → engage → AI story event → shape galaxy → next chapter.
            Procedurally generated galaxy, fog of war, HUD, notifications, Zora Tier 0, world events, tutorial, conflict as story beats.
            A new player can learn the game in one session and want to keep going. State persists locally.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>Phases covered: 0–7 (core game)</div>
        </div>
      </div>

      <div style={{ marginTop: 'var(--sp-8)' }}>
        {eras.map((era, ei) => (
          <div key={era.id} style={{ marginBottom: ei < eras.length - 1 ? 'var(--sp-8)' : 0 }}>
            {/* Era header */}
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: 'var(--sp-4)',
              marginBottom: 'var(--sp-5)',
              paddingBottom: 'var(--sp-3)',
              borderBottom: `2px solid ${era.accent}`,
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)',
                fontSize: '0.7rem',
                fontWeight: 700,
                letterSpacing: '0.08em',
                padding: '4px 12px',
                borderRadius: 'var(--radius-pill)',
                background: era.accent === 'var(--accent)' ? 'var(--accent-bg)' : 'var(--cyan-bg)',
                color: era.accent,
                border: `1px solid ${era.accent === 'var(--accent)' ? 'var(--accent-border)' : 'rgba(34,211,238,0.3)'}`,
              }}>
                CORE GAME
              </span>
              <div>
                <h2 style={{ margin: 0, fontSize: '1.1rem' }}>{era.title}</h2>
                <p style={{ color: 'var(--fg-dim)', fontSize: '0.82rem', margin: '4px 0 0 0' }}>{era.subtitle}</p>
              </div>
            </div>

            {/* Phase list */}
            {era.phases.map((phase, pi) => (
              <PhaseItem
                key={phase.num}
                phase={phase}
                isLast={pi === era.phases.length - 1}
              />
            ))}
          </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-8)', maxWidth: '720px' }}>
        <strong>Future Enhancements</strong> — Post-V1 features may include episodic mini-series generation (AI looks back at campaign history
        and generates "episodes" like a Templin Institute video), multiplayer co-op servers, and expanded narrative systems.
        These are optional enhancements — the core single-player narrative experience is complete and standalone.
      </div>
    </div>
  );
}
