// App shell + Tweaks panel + modal orchestration

window.__tweaks = window.__tweaks || { ...TWEAK_DEFAULTS };

function TweaksPanel({ tweaks, setTweaks }) {
  const update = (key, val) => {
    const next = { ...tweaks, [key]: val };
    setTweaks(next);
    window.__tweaks = next;
    if (window.__editMode) {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
    }
  };

  if (!window.__showTweaks) return null;

  return (
    <div className="tweaks-panel">
      <h4>Tweaks</h4>
      <div className="tweak-row">
        <label>Layout</label>
        <div className="tweak-chips">
          {[['v1','editorial'],['v2','datasheet'],['v3','blueprint']].map(([k,label]) => (
            <button key={k} className={`tweak-chip ${tweaks.variation === k ? 'active' : ''}`} onClick={() => update('variation', k)}>{label}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <label>Theme</label>
        <div className="tweak-chips">
          {['paper', 'ink'].map(t => (
            <button key={t} className={`tweak-chip ${tweaks.theme === t ? 'active' : ''}`} onClick={() => update('theme', t)}>{t}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <label>Accent</label>
        <div className="tweak-chips">
          {['amber', 'blue', 'green', 'red'].map(t => (
            <button key={t} className={`tweak-chip ${tweaks.accent === t ? 'active' : ''}`} onClick={() => update('accent', t)}>{t}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <label>Blueprint grid</label>
        <button className={`tweak-toggle ${tweaks.showGrid ? 'on' : ''}`} onClick={() => update('showGrid', !tweaks.showGrid)} />
      </div>
      <div className="tweak-row">
        <label>Stats reel</label>
        <button className={`tweak-toggle ${tweaks.showStats ? 'on' : ''}`} onClick={() => update('showStats', !tweaks.showStats)} />
      </div>
      <div className="tweak-row">
        <label>Marquee</label>
        <button className={`tweak-toggle ${tweaks.showMarquee ? 'on' : ''}`} onClick={() => update('showMarquee', !tweaks.showMarquee)} />
      </div>
    </div>
  );
}

function App() {
  const [tweaks, setTweaks] = React.useState({ ...TWEAK_DEFAULTS });
  const [, force] = React.useState(0);
  const [activeProject, setActiveProject] = React.useState(null);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    document.documentElement.setAttribute('data-accent', tweaks.accent);
    const grid = document.getElementById('bg-grid');
    if (grid) grid.classList.toggle('hidden', !tweaks.showGrid);
    window.__tweaks = tweaks;
  }, [tweaks]);

  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data || !e.data.type) return;
      if (e.data.type === '__activate_edit_mode') {
        window.__editMode = true;
        window.__showTweaks = true;
        force(n => n + 1);
      }
      if (e.data.type === '__deactivate_edit_mode') {
        window.__editMode = false;
        window.__showTweaks = false;
        force(n => n + 1);
      }
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const toggleTheme = () => setTweaks({ ...tweaks, theme: tweaks.theme === 'ink' ? 'paper' : 'ink' });

  return (
    <>
      <Hero theme={tweaks.theme} onToggleTheme={toggleTheme} variation={tweaks.variation} />
      <HobbyTicker />
      {tweaks.showMarquee && <Marquee />}
      <StatsReel />
      <About />
      <Experience />
      <Skills />
      <Projects onOpenProject={setActiveProject} />
      <Certifications />
      <Builds />
      <Contact />
      <ScrollSpy theme={tweaks.theme} onToggleTheme={toggleTheme} />
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} />
      <ProjectModal project={activeProject} onClose={() => setActiveProject(null)} />
    </>
  );
}

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