/* ============================================================================
   tweaks-app.jsx — React island that drives the Tweaks panel.
   Applies project-card variations (the user's requested exploration) plus a
   couple of tasteful extras (accent ink color, hero name treatment) to the
   vanilla DOM. Only visible when the host activates Tweaks mode.
   ========================================================================= */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cardStyle": "default",
  "cardGrid": "editorial",
  "accent": "#2d6a3e",
  "cardTilt": true,
  "inkReactivity": 1
}/*EDITMODE-END*/;

const ACCENT_SOFT = {
  "#2d6a3e": "#3d8a52",
  "#d9472b": "#e06b54",
  "#5b6cf0": "#8a96f5",
  "#2f6d63": "#4f8f84",
  "#b8862b": "#d0a44f"
};

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

  React.useEffect(() => {
    const grid = document.getElementById('workGrid');
    if (grid) {
      grid.setAttribute('data-cardstyle', t.cardStyle);
      grid.setAttribute('data-grid', t.cardGrid === 'editorial' ? 'editorial' : t.cardGrid);
    }
  }, [t.cardStyle, t.cardGrid]);

  React.useEffect(() => {
    document.body.style.setProperty('--vermillion', t.accent);
    document.body.style.setProperty('--vermillion-soft', ACCENT_SOFT[t.accent] || t.accent);
  }, [t.accent]);

  React.useEffect(() => {
    document.body.classList.toggle('no-tilt', !t.cardTilt);
    window.__noTilt = !t.cardTilt;
  }, [t.cardTilt]);

  React.useEffect(() => {
    window.__inkReactivity = t.inkReactivity;
  }, [t.inkReactivity]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Project cards" />
      <TweakRadio
        label="Card style"
        value={t.cardStyle}
        options={['default', 'outline', 'solid', 'index']}
        onChange={(v) => setTweak('cardStyle', v)}
      />
      <TweakRadio
        label="Layout"
        value={t.cardGrid}
        options={['editorial', 'uniform', 'list']}
        onChange={(v) => setTweak('cardGrid', v)}
      />
      <TweakToggle
        label="3D tilt on hover"
        value={t.cardTilt}
        onChange={(v) => setTweak('cardTilt', v)}
      />

      <TweakSection label="Ink & accent" />
      <TweakColor
        label="Hanko accent"
        value={t.accent}
        options={['#2d6a3e', '#153019', '#5b6cf0', '#b8862b']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSlider
        label="Ink reactivity"
        value={t.inkReactivity}
        min={0.3} max={2} step={0.1}
        onChange={(v) => setTweak('inkReactivity', v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const el = document.getElementById('tweaks-root');
  if (!el || !window.React || !window.ReactDOM) return;
  ReactDOM.createRoot(el).render(<TweaksApp />);
})();