/* TurboFlow — Tweaks panel */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "center",
  "accent": "#0ABAB5",
  "chairSpeed": 1,
  "chairDensity": 1,
  "flowDensity": 1,
  "flowSpeed": 1,
  "flowColor": "#0ABAB5",
  "typeScale": 1,
  "spaceScale": 1,
  "motion": true
}/*EDITMODE-END*/;

function hexToRgbStr(hex) {
  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if (!m) return '10, 186, 181';
  return parseInt(m[1], 16) + ', ' + parseInt(m[2], 16) + ', ' + parseInt(m[3], 16);
}

const HERO_LABELS = { center: 'Centered', split: 'Split', type: 'Type' };
const HERO_VALUES = { Centered: 'center', Split: 'split', Type: 'type' };

function TFTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-rgb', hexToRgbStr(t.accent));
    root.style.setProperty('--ts', String(t.typeScale));
    root.style.setProperty('--sp', String(t.spaceScale));
    document.body.classList.toggle('no-motion', !t.motion);
    const hero = document.getElementById('hero');
    if (hero) hero.setAttribute('data-variant', t.heroVariant);
    if (window.TFChair) {
      window.TFChair.setColor(t.accent);
      window.TFChair.setSpeed(t.chairSpeed);
      window.TFChair.setVariant(t.heroVariant);
      window.TFChair.setMotion(t.motion);
    }
    if (window.TFHeroFlow) {
      window.TFHeroFlow.setDensity(t.flowDensity);
      window.TFHeroFlow.setSpeed(t.flowSpeed);
      window.TFHeroFlow.setColor(t.flowColor);
      window.TFHeroFlow.setMotion(t.motion);
    }
  }, [t.accent, t.typeScale, t.spaceScale, t.motion, t.heroVariant, t.chairSpeed, t.flowDensity, t.flowSpeed, t.flowColor]);

  // density rebuilds geometry — debounce separately
  React.useEffect(() => {
    const id = setTimeout(() => {
      if (window.TFChair) window.TFChair.setDensity(t.chairDensity);
    }, 150);
    return () => clearTimeout(id);
  }, [t.chairDensity]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakRadio
        label="Layout"
        value={HERO_LABELS[t.heroVariant]}
        options={['Centered', 'Split', 'Type']}
        onChange={(v) => setTweak('heroVariant', HERO_VALUES[v])}
      />
      <TweakSection label="Particles" />
      <TweakSlider label="Dust drift" value={t.chairSpeed} min={0} max={3} step={0.1}
        onChange={(v) => setTweak('chairSpeed', v)} />
      <TweakSlider label="Dust density" value={t.chairDensity} min={0.2} max={2.5} step={0.1}
        onChange={(v) => setTweak('chairDensity', v)} />
      <TweakSection label="Data flow" />
      <TweakSlider label="Flow density" value={t.flowDensity} min={0} max={2.5} step={0.1}
        onChange={(v) => setTweak('flowDensity', v)} />
      <TweakSlider label="Flow speed" value={t.flowSpeed} min={0} max={4} step={0.1}
        onChange={(v) => setTweak('flowSpeed', v)} />
      <TweakColor label="Flow color" value={t.flowColor}
        options={['#0ABAB5', '#3AA7E0', '#9AE65C', '#B388FF']}
        onChange={(v) => setTweak('flowColor', v)} />
      <TweakSection label="Theme" />
      <TweakColor label="Accent" value={t.accent}
        options={['#0ABAB5', '#23C28E', '#3AA7E0', '#9AE65C']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSlider label="Type scale" value={t.typeScale} min={0.85} max={1.2} step={0.01}
        onChange={(v) => setTweak('typeScale', v)} />
      <TweakSlider label="Whitespace" value={t.spaceScale} min={0.7} max={1.4} step={0.05}
        onChange={(v) => setTweak('spaceScale', v)} />
      <TweakToggle label="Motion" value={t.motion}
        onChange={(v) => setTweak('motion', v)} />
    </TweaksPanel>
  );
}

const tweaksRoot = document.getElementById('tweaks-root');
ReactDOM.createRoot(tweaksRoot).render(<TFTweaks />);

/* Standalone access (exported file): open with ?tweaks=1 in the URL, or press T to toggle. */
(function () {
  let open = false;
  window.addEventListener('message', (e) => {
    const t = e?.data?.type;
    if (t === '__activate_edit_mode') open = true;
    else if (t === '__deactivate_edit_mode' || t === '__edit_mode_dismissed') open = false;
  });
  const post = (type) => window.postMessage({ type }, '*');
  const params = new URLSearchParams(location.search);
  if (params.get('tweaks') === '1' || location.hash === '#tweaks') {
    setTimeout(() => post('__activate_edit_mode'), 60);
  }
  window.addEventListener('keydown', (e) => {
    if (e.key !== 't' && e.key !== 'T') return;
    if (e.metaKey || e.ctrlKey || e.altKey) return;
    const el = document.activeElement;
    if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable)) return;
    post(open ? '__deactivate_edit_mode' : '__activate_edit_mode');
  });
})();