/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#5fb5c4",
  "navy": "#0c1b3c",
  "vibe": "default",
  "marquee": true,
  "hideThumbs": false
}/*EDITMODE-END*/;

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

  // Apply tweaks live to CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--teal', t.accent);
    // derive a "deep" version by darkening lightly
    root.style.setProperty('--teal-deep', t.accent);

    // navy
    root.style.setProperty('--navy', t.navy);
    // body BG follows navy
    document.body.style.background = t.navy;
    // also flip the deep navy a few stops darker by mixing toward black
    const hex = t.navy.replace('#','');
    const r = parseInt(hex.slice(0,2),16);
    const g = parseInt(hex.slice(2,4),16);
    const b = parseInt(hex.slice(4,6),16);
    const dark = (v) => Math.max(0, Math.round(v * 0.55));
    const deep = `#${[dark(r),dark(g),dark(b)].map(v=>v.toString(16).padStart(2,'0')).join('')}`;
    root.style.setProperty('--navy-deep', deep);

    // Vibe presets
    if (t.vibe === 'editorial') {
      document.documentElement.style.setProperty('--f-display', '"Instrument Serif", serif');
    } else if (t.vibe === 'technical') {
      document.documentElement.style.setProperty('--f-display', '"JetBrains Mono", monospace');
    } else {
      document.documentElement.style.setProperty('--f-display', '"Space Grotesk", "Helvetica Neue", Arial, sans-serif');
    }

    // Marquee
    const m = document.querySelector('.marquee');
    if (m) m.style.display = t.marquee ? '' : 'none';

    // Hide research thumbs
    document.querySelectorAll('.row-thumb').forEach((el) => {
      el.style.display = t.hideThumbs ? 'none' : '';
    });
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakColor
          tweak="accent"
          value={t.accent}
          onChange={(v) => setTweak('accent', v)}
          options={['#5fb5c4', '#c47a5f', '#a3c45f', '#c45f9b', '#f4efe6']}
        />
      </TweakSection>

      <TweakSection title="Navy">
        <TweakColor
          tweak="navy"
          value={t.navy}
          onChange={(v) => setTweak('navy', v)}
          options={['#0c1b3c', '#06112a', '#162a52', '#1a1f3d', '#091226']}
        />
      </TweakSection>

      <TweakSection title="Display type">
        <TweakRadio
          tweak="vibe"
          value={t.vibe}
          onChange={(v) => setTweak('vibe', v)}
          options={[
            { value: 'default',    label: 'Grotesk' },
            { value: 'editorial',  label: 'Editorial' },
            { value: 'technical',  label: 'Mono' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Show marquee">
        <TweakToggle
          tweak="marquee"
          value={t.marquee}
          onChange={(v) => setTweak('marquee', v)}
        />
      </TweakSection>

      <TweakSection title="Hide research thumbs">
        <TweakToggle
          tweak="hideThumbs"
          value={t.hideThumbs}
          onChange={(v) => setTweak('hideThumbs', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// Mount
const tweaksRoot = document.createElement('div');
tweaksRoot.id = 'tweaks-root';
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<PrimaTweaks />);