// Root app — wires tweaks + sections
const { useState, useEffect } = React;

function App() {
  const initial = window.__TWEAKS__ || {};
  const [heroVariant, setHeroVariant] = useState(initial.heroVariant || 1);
  const [accent, setAccent] = useState(initial.accent || "#9EF01A");
  const [bg, setBg] = useState(initial.background || "cream");
  const [intensity, setIntensity] = useState(initial.punkIntensity ?? 60);
  const [stickers, setStickers] = useState(initial.stickers || "on");
  const [editMode, setEditMode] = useState(false);

  // apply accent + bg + intensity as CSS vars
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--acid', accent);
    // derive a slightly darker version for halftones
    root.style.setProperty('--acid-dark', accent);

    if (bg === 'noir') {
      root.style.setProperty('--cream', '#17171A');
      root.style.setProperty('--cream-2', '#1F1F22');
      root.style.setProperty('--ink', '#F5EFDD');
      root.style.setProperty('--ink-2', '#EEE6CF');
    } else {
      root.style.setProperty('--cream', '#F5EFDD');
      root.style.setProperty('--cream-2', '#EEE6CF');
      root.style.setProperty('--ink', '#0E0E10');
      root.style.setProperty('--ink-2', '#17171A');
    }

    // intensity: 0 = no rotation, no halftone, clean; 100 = everything
    const k = intensity / 100;
    document.body.style.setProperty('--rot', (k * 1) + '');
    // scale rotation on stickers via data attr
    document.body.dataset.intensity = intensity;

    // opacity on grain
    const grain = Math.max(0.05, 0.45 * k);
    document.styleSheets; // noop
    let tag = document.getElementById('grain-style');
    if (!tag) { tag = document.createElement('style'); tag.id = 'grain-style'; document.head.appendChild(tag); }
    tag.textContent = `body::before{opacity:${grain};} body::after{opacity:${Math.max(0.4, 0.9*k)};}
      .xerox{ transform: rotate(${(-0.5 * k).toFixed(2)}deg); }
      .xerox.dark{ transform: rotate(${(0.7 * k).toFixed(2)}deg); }
      [data-intensity="0"] .tape, [data-intensity="0"] .burst, [data-intensity="0"] .stamp { display: none; }
    `;
  }, [accent, bg, intensity]);

  const persist = (edits) => {
    window.parent?.postMessage({type:'__edit_mode_set_keys', edits}, '*');
  };

  // Edit mode listeners
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setEditMode(true);
      if (d.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    // announce after listener registered
    window.parent?.postMessage({type:'__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Wire the DOM tweaks panel
  useEffect(() => {
    const panel = document.getElementById('tweaks');
    if (editMode) panel.classList.add('open'); else panel.classList.remove('open');

    const heroOpts = document.getElementById('heroOpts');
    const accentOpts = document.getElementById('accentOpts');
    const bgOpts = document.getElementById('bgOpts');
    const stickerOpts = document.getElementById('stickerOpts');
    const piRange = document.getElementById('piRange');
    const piVal = document.getElementById('piVal');
    const closeBtn = document.getElementById('tweak-close');

    // reflect state
    heroOpts.querySelectorAll('button').forEach(b => b.classList.toggle('on', +b.dataset.v === heroVariant));
    accentOpts.querySelectorAll('button').forEach(b => b.classList.toggle('on', b.dataset.c === accent));
    bgOpts.querySelectorAll('button').forEach(b => b.classList.toggle('on', b.dataset.b === bg));
    stickerOpts.querySelectorAll('button').forEach(b => b.classList.toggle('on', b.dataset.s === stickers));
    piRange.value = intensity; piVal.textContent = intensity;

    const hH = (e) => { const v = +e.target.dataset.v; setHeroVariant(v); persist({heroVariant: v}); };
    const hA = (e) => { const c = e.target.dataset.c; setAccent(c); persist({accent: c}); };
    const hB = (e) => { const b = e.target.dataset.b; setBg(b); persist({background: b}); };
    const hS = (e) => { const s = e.target.dataset.s; setStickers(s); persist({stickers: s}); };
    const hR = (e) => { const v = +e.target.value; setIntensity(v); persist({punkIntensity: v}); };
    const hClose = () => { window.parent?.postMessage({type:'__deactivate_edit_mode'}, '*'); setEditMode(false); };

    const bind = (el, fn) => { if (!el) return; el.querySelectorAll('button').forEach(b => b.addEventListener('click', fn)); return () => el.querySelectorAll('button').forEach(b => b.removeEventListener('click', fn)); };
    const u1 = bind(heroOpts, hH);
    const u2 = bind(accentOpts, hA);
    const u3 = bind(bgOpts, hB);
    const u4 = bind(stickerOpts, hS);
    piRange.addEventListener('input', hR);
    closeBtn?.addEventListener('click', hClose);
    return () => { u1?.(); u2?.(); u3?.(); u4?.(); piRange.removeEventListener('input', hR); closeBtn?.removeEventListener('click', hClose); };
  }, [editMode, heroVariant, accent, bg, stickers, intensity]);

  const HeroEl = heroVariant === 2 ? HeroFlyer : heroVariant === 3 ? HeroSplit : HeroRansom;

  return (
    <>
      <HeroEl/>
      <Marquee/>
      <About/>
      <Experience/>
      <Skills stickersEnabled={stickers === 'on'}/>
      <Contact/>
    </>
  );
}

// Safety-pin cursor follower
(function pin(){
  const el = document.querySelector('.pin');
  if (!el) return;
  let tx = window.innerWidth/2, ty = window.innerHeight/2;
  let x = tx, y = ty;
  const lerp = (a,b,t)=> a + (b-a)*t;
  window.addEventListener('pointermove', (e)=>{ tx = e.clientX; ty = e.clientY; });
  function tick(){
    x = lerp(x, tx, 0.25); y = lerp(y, ty, 0.25);
    const rot = Math.atan2(ty - y, tx - x) * 180/Math.PI;
    el.style.transform = `translate(${x}px, ${y}px) translate(-50%,-50%) rotate(${rot + 20}deg)`;
    requestAnimationFrame(tick);
  }
  tick();
})();

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