// @ts-nocheck
import * as React from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export function TechStackPage() {
  const [activeTab, setActiveTab] = React.useState('frontend');

  const tabs = [
    { id: 'frontend', label: 'Frontend' },
    { id: 'rendering', label: '3D Rendering' },
    { id: 'state', label: 'State' },
    { id: 'backend', label: 'Backend' },
    { id: 'styling', label: 'Styling' },
    { id: 'auth', label: 'Auth' },
  ];

  const decisions = {
    frontend: {
      choice: 'Vite + React + TypeScript',
      reason: 'Fast client-side app setup, no server-rendering complexity, good for a real-time game UI.',
      whyNot: "Next.js is not necessary for the MVP. The prototype is a client-side real-time game, not a content site. Next.js can be introduced later for marketing pages, account pages, SSR, or API routes.",
    },
    rendering: {
      choice: 'React Three Fiber',
      reason: 'Declarative React renderer for Three.js; good for a browser prototype and React integration.',
      whyNot: "A full engine like Unity or Bevy would slow iteration on panels, tables, forms, chat, and market UX. The gameplay is UI-heavy and economy/social-system-heavy.",
    },
    state: {
      choice: 'Zustand',
      reason: 'Simple local state for panels, selection, active tabs, camera preferences, and modal state.',
      whyNot: "Redux would add ceremony without benefit at prototype scale. Context API re-renders would hurt performance with frequent state updates.",
    },
    backend: {
      choice: 'Local Persistence (Rust/Bevy)',
      reason: 'Game client manages state locally with persistent storage. No cloud dependency, no always-online requirement. Your story lives on your machine.',
      whyNot: "Server-based backends would add complexity, hosting costs, and always-online requirements. Local-first is simpler and respects player ownership.",
    },
    styling: {
      choice: 'Tailwind CSS',
      reason: 'Fast UI iteration for panels, tables, HUDs, and dense game interfaces.',
      whyNot: "CSS-in-JS adds runtime overhead. Vanilla CSS at this scale would slow panel iteration.",
    },
    auth: {
      choice: 'Local Profile (MVP)',
      reason: 'Simple local profile management. Player creates captain name and saves locally. Add external auth only if multiplayer is added later.',
      whyNot: "Full OAuth/JWT would add complexity before we know the right identity model. Local is sufficient for single-player narrative experience.",
    },
  };

  const d = decisions[activeTab];

  return (
    <div className="mx-auto max-w-content">
      <h1 style={{ marginBottom: '8px' }}>Technical Direction</h1>
      <p style={{ color: 'var(--fg-dim)', fontSize: '0.95rem', maxWidth: '680px' }}>
        Each layer is chosen for iteration speed during the prototype phase. Architecture is designed
        so any layer can be replaced as the game evolves.
      </p>

      {/* Decision tabs */}
      <div style={{ display: 'flex', gap: 'var(--sp-2)', marginBottom: 'var(--sp-6)', flexWrap: 'wrap' }}>
        {tabs.map(t => (
          <button
            key={t.id}
            className={`inline-flex cursor-pointer items-center gap-2 rounded-lg border border-border bg-surface-raised px-4 py-2 font-body text-[0.8rem] font-medium text-fg transition-all duration-150 hover:border-border-light hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-55 px-3 py-1 text-[0.75rem]${activeTab === t.id ? ' border-accent bg-accent font-semibold text-bg hover:bg-accent-hover' : ''}`}
            onClick={() => setActiveTab(t.id)}
          >
            {t.label}
          </button>
        ))}
      </div>

      {/* Active decision */}
      <div className="mb-6 rounded-xl border border-border bg-surface p-6 max-md:rounded-lg max-md:p-4" style={{ marginBottom: 'var(--sp-6)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)', marginBottom: 'var(--sp-4)' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
            {activeTab}
          </span>
          <span style={{ width: '1px', height: '16px', background: 'var(--border)' }} />
          <span style={{ fontFamily: 'var(--font-display)', fontSize: '1.3rem', fontWeight: 600, color: 'var(--fg-bright)' }}>
            {d.choice}
          </span>
        </div>
        <p style={{ color: 'var(--fg-dim)', fontSize: '0.9rem', marginBottom: 'var(--sp-4)' }}>
          <strong style={{ color: 'var(--fg)' }}>Why:</strong> {d.reason}
        </p>
        <div style={{ background: 'var(--surface-raised)', borderRadius: 'var(--radius-md)', padding: 'var(--sp-4)', fontSize: '0.85rem', color: 'var(--fg-dim)' }}>
          <strong style={{ color: 'var(--muted)' }}>Why not the alternatives:</strong> {d.whyNot}
        </div>
      </div>

      {/* Full decision table */}
      <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]">
        <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">TECH-ALL</span>
        <h2 style={{ margin: 0 }}>Decision Matrix</h2>
      </div>

      <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised">
        <thead>
          <tr><th>Layer</th><th>Choice</th><th>Reason</th></tr>
        </thead>
        <tbody>
          <tr>
            <td style={{ color: 'var(--cyan)' }}>Frontend</td>
            <td>Vite + React + TypeScript</td>
            <td style={{ color: 'var(--fg-dim)' }}>Fast client-side app, no SSR complexity.</td>
          </tr>
          <tr>
            <td style={{ color: 'var(--purple)' }}>3D Rendering</td>
            <td>React Three Fiber</td>
            <td style={{ color: 'var(--fg-dim)' }}>Declarative React renderer for Three.js.</td>
          </tr>
          <tr>
            <td style={{ color: 'var(--green)' }}>UI State</td>
            <td>Zustand</td>
            <td style={{ color: 'var(--fg-dim)' }}>Simple local state for panels and UI.</td>
          </tr>
          <tr>
            <td style={{ color: 'var(--accent)' }}>Backend</td>
            <td>Local Persistence (Rust/Bevy)</td>
            <td style={{ color: 'var(--fg-dim)' }}>Game client manages state locally with persistent storage.</td>
          </tr>
          <tr>
            <td style={{ color: 'var(--fg-dim)' }}>Styling</td>
            <td>Tailwind CSS</td>
            <td style={{ color: 'var(--fg-dim)' }}>Fast iteration for panels, tables, HUDs.</td>
          </tr>
          <tr>
            <td style={{ color: 'var(--muted)' }}>Auth</td>
            <td>Local Profile</td>
            <td style={{ color: 'var(--fg-dim)' }}>Simple local profile management. Single-player experience.</td>
          </tr>
        </tbody>
      </table>

      {/* File structure */}
      <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">TECH-FS</span>
        <h2 style={{ margin: 0 }}>Starter File Structure</h2>
      </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={{ marginBottom: 'var(--sp-5)', fontSize: '0.82rem' }}>
        <strong>Note:</strong> The file structure below is the <em>production target</em> for a Vite + React + TypeScript project.
        The current prototype uses a simpler layout: <code>js/pages/</code>, <code>js/components/</code>, <code>js/demos/</code>, <code>js/lib/</code>, and <code>css/</code> —
        a flat structure loaded via Babel standalone without a build step. The prototype structure will migrate to the layout below when moving to Vite.
      </div>

      <div className="mb-5 overflow-x-auto rounded-lg border border-border bg-surface px-5 py-4 [&_code]:bg-transparent [&_code]:p-0 [&_code]:font-mono [&_code]:text-[0.82rem] [&_code]:leading-[1.6] [&_code]:text-fg-dim">
        <code>
          <span className="text-muted italic">{'//'} Project layout</span><br/>
          <span className="text-purple">/apps/game/src</span>       <span className="text-muted italic">{'     //'} Rust + Bevy game client</span><br/>
          <span className="text-purple">/apps/docs/src</span>       <span className="text-muted italic">{'     //'} Design documentation</span><br/>
          <span className="text-purple">/apps/site/src</span>       <span className="text-muted italic">{'     //'} Landing page website</span><br/>
          <span className="text-purple">/packages/ui/src</span>     <span className="text-muted italic">{'     //'} Shared UI components</span><br/>
        </code>
      </div>

      <h3>Packages</h3>
      <table className="w-full border-collapse text-[0.85rem] max-md:block max-md:overflow-x-auto max-md:rounded-lg max-md:border max-md:border-border max-md:[&_thead]:table max-md:[&_tbody]:table max-md:[&_thead]:min-w-[680px] max-md:[&_tbody]:min-w-[680px] [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-border [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-mono [&_th]:text-[0.7rem] [&_th]:uppercase [&_th]:tracking-[0.06em] [&_th]:text-muted [&_td]:border-b [&_td]:border-border [&_td]:px-4 [&_td]:py-3 [&_td]:font-mono [&_td]:text-[0.8rem] [&_td]:text-fg [&_tr:hover_td]:bg-surface-raised">
        <thead><tr><th>Package</th><th>Purpose</th></tr></thead>
        <tbody>
          <tr><td>vite, react, react-dom, typescript</td><td>Core frontend (docs, site).</td></tr>
          <tr><td>three, @react-three/fiber, @react-three/drei</td><td>3D scene and helper controls (docs demos).</td></tr>
          <tr><td>zustand</td><td>Local UI/game view state.</td></tr>
          <tr><td>tailwindcss</td><td>Panel and HUD styling.</td></tr>
          <tr><td>bevy, rust</td><td>Game client engine and language.</td></tr>
        </tbody>
      </table>
    </div>
  );
}
