// v4 CRT app shell. Manages theme, palette, background, scanlines, curvature.
// V4_PALETTES + applyV4Palette are defined in components/arcade_switcher.jsx
const { useState, useEffect } = React;

const V4_BACKGROUNDS = {
  'stars':  { label: 'starfield' },
  'grid':   { label: 'terminal grid' },
  'none':   { label: 'plain midnight' },
};

function applyV4Background(key) {
  document.body.classList.remove('bg-stars', 'bg-grid', 'bg-none');
  document.body.classList.add('bg-' + key);
}

const STORAGE_KEY = 'brianleach.v2.crt';

function loadPrefs() {
  const defaults = {
    theme: 'dark',
    palette: 'pacman',
    background: 'stars',
    scanlines: 55,
    curvature: true,
    showTweaks: false,
  };
  try {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
    return { ...defaults, ...saved };
  } catch (e) {
    return defaults;
  }
}

function App() {
  const initial = loadPrefs();

  const [paletteOpen, setPaletteOpen] = useState(false);
  const [theme, setTheme] = useState(initial.theme);
  const [tweaksVisible, setTweaksVisible] = useState(initial.showTweaks);

  const [v4Palette, setV4Palette] = useState(initial.palette);
  const [v4Bg, setV4Bg] = useState(initial.background);
  const [scanlines, setScanlines] = useState(initial.scanlines);
  const [curvature, setCurvature] = useState(initial.curvature);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  useEffect(() => {
    window.applyV4Palette(v4Palette);
  }, [v4Palette]);

  useEffect(() => {
    applyV4Background(v4Bg);
  }, [v4Bg]);

  useEffect(() => {
    document.documentElement.style.setProperty('--scanline-opacity', (scanlines / 100).toFixed(2));
  }, [scanlines]);

  useEffect(() => {
    document.body.classList.toggle('crt-curve', curvature);
  }, [curvature]);

  // ⌘K / Ctrl-K opens palette · ⇧T toggles theme · ⇧X toggles tweaks
  useEffect(() => {
    const onKey = (e) => {
      const mod = e.metaKey || e.ctrlKey;
      if (mod && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setPaletteOpen((o) => !o);
      } else if (e.shiftKey && e.key === 'T') {
        e.preventDefault();
        setTheme(t => t === 'dark' ? 'light' : 'dark');
      } else if (e.shiftKey && e.key === 'X') {
        e.preventDefault();
        setTweaksVisible(v => !v);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // Persist preferences locally so they survive a refresh.
  const persist = (edits) => {
    try {
      const cur = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
      localStorage.setItem(STORAGE_KEY, JSON.stringify({ ...cur, ...edits }));
    } catch (e) {}
  };

  const onToggleTheme = () => setTheme(t => {
    const nt = t === 'dark' ? 'light' : 'dark';
    persist({ theme: nt });
    return nt;
  });

  window.__downloadResume = () => {
    const txt = `BRIAN LEACH · RÉSUMÉ
Austin, TX · bleach@gmail.com · linkedin.com/in/bleach

PRINCIPAL AI LEAD

Rugiet · Principal AI Lead (2025–present)
  Company-wide AI adoption (Cursor, Claude Code, agentic workflows)
  DORA program: 48-hr shipping cycles at 95% success (HIPAA)
  Built AI conversational intake agent for clinical assessments
  Shipped full rebrand + React Native mobile app in 24 days
HelloFresh · Engineering Manager / Staff Engineer (2022–2025)
  $300M+ customer value via Unified Meal Kit initiative
Factor 75 · Senior Software Engineer (2019–2022)
  Scaled 3k → 300k meals/week; Rails → Go + GraphQL
Orbitz / Expedia · Senior Engineer (2001–2016)
  Co-built Orbitz iOS app, Apple Hall of Fame, 2010

(See full résumé on the site or LinkedIn.)`;
    const blob = new Blob([txt], { type: 'text/plain' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'brian-leach-resume.txt';
    a.click();
  };

  return (
    <div className="app" id="top">
      <Nav
        theme={theme}
        onToggleTheme={onToggleTheme}
        onOpenPalette={() => setPaletteOpen(true)}
        /* themeSwitcher={
          <ArcadeThemeSwitcher
            palette={v4Palette}
            setPalette={(k) => { setV4Palette(k); persist({ palette: k }); }}
          />
        } */
      />
      <Hero onOpenPalette={() => setPaletteOpen(true)} />
      <TerminalAbout />
      <Projects />
      <Blog />
      <Skills />
      <Resume />
      <Footer />

      <CommandPalette
        open={paletteOpen}
        onClose={() => setPaletteOpen(false)}
        palette={v4Palette}
        onSetPalette={(k) => { setV4Palette(k); persist({ palette: k }); }}
      />

      {tweaksVisible && (
        <V4Tweaks
          palette={v4Palette}    setPalette={(k) => { setV4Palette(k); persist({ palette: k }); }}
          bg={v4Bg}              setBg={(k) => { setV4Bg(k); persist({ background: k }); }}
          scanlines={scanlines}  setScanlines={(v) => { setScanlines(v); persist({ scanlines: v }); }}
          curvature={curvature}  setCurvature={(v) => { setCurvature(v); persist({ curvature: v }); }}
          onClose={() => { setTweaksVisible(false); persist({ showTweaks: false }); }}
        />
      )}
    </div>
  );
}

function V4Tweaks({ palette, setPalette, bg, setBg, scanlines, setScanlines, curvature, setCurvature, onClose }) {
  return (
    <div className="tweaks">
      <div className="tweaks-head">
        <span className="tweaks-title">Tweaks</span>
        <button className="tweak-btn" onClick={onClose}>×</button>
      </div>

      <div className="tweak-row">
        <span className="tweak-k">background</span>
        <div className="tweak-v">
          {Object.entries(V4_BACKGROUNDS).map(([k, p]) => (
            <button
              key={k}
              className={'tweak-btn ' + (bg === k ? 'on' : '')}
              onClick={() => setBg(k)}
            >{p.label}</button>
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <span className="tweak-k">scanlines</span>
        <div className="tweak-v">
          <input
            type="range" min="0" max="100" step="5" value={scanlines}
            onChange={(e) => setScanlines(parseInt(e.target.value, 10))}
            className="tweak-slider"
          />
          <span className="tweak-val">{scanlines}%</span>
        </div>
      </div>

      <div className="tweak-row">
        <span className="tweak-k">curvature</span>
        <div className="tweak-v">
          <button className={'tweak-btn ' + (curvature ? 'on' : '')} onClick={() => setCurvature(true)}>on</button>
          <button className={'tweak-btn ' + (!curvature ? 'on' : '')} onClick={() => setCurvature(false)}>off</button>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);