/* Dump — tweaks.jsx: in-app Tweaks panel.
   Drives the live UI through the app's existing design-options (DumpAPI.setDx)
   plus a couple of CSS-variable tweaks (accent, font). Mounts into its own
   React root so it can't disturb the main app mount; stays hidden until the
   user turns Tweaks on (host protocol lives in tweaks-panel.jsx). */

function TweaksRoot() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#FF6B35",
    "focusBtn": "coral",
    "capacity": "segments",
    "calRange": "day",
    "font": "IBM Plex Sans"
  }/*EDITMODE-END*/;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const firstDx = React.useRef(true);

  // Design-options drive the live app via the store. Skip the first run so we
  // don't clobber a value the user set in Settings (the store already persists it).
  React.useEffect(() => {
    if (firstDx.current) { firstDx.current = false; return; }
    if (window.DumpAPI && DumpAPI.setDx) {
      DumpAPI.setDx({ focusBtn: t.focusBtn, capacity: t.capacity, calRange: t.calRange });
    }
  }, [t.focusBtn, t.capacity, t.calRange]);

  // Accent + font live only in the tweak store, so re-apply on every mount.
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--accent', t.accent);
    r.setProperty('--accent-deep', 'color-mix(in srgb, ' + t.accent + ' 78%, black)');
  }, [t.accent]);

  React.useEffect(() => {
    const map = {
      'IBM Plex Sans': "'IBM Plex Sans', system-ui, sans-serif",
      'Inter': "'Inter', system-ui, sans-serif",
      'System': "system-ui, -apple-system, Segoe UI, sans-serif"
    };
    document.documentElement.style.setProperty('--sans', map[t.font] || map['IBM Plex Sans']);
  }, [t.font]);

  return (
    <TweaksPanel>
      <TweakSection label="Accent & buttons" />
      <TweakColor label="Accent" value={t.accent}
        options={['#FF6B35', '#F5A623', '#6d5ae0', '#3f9d62', '#2A6FDB']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakRadio label="Focus button" value={t.focusBtn}
        options={['coral', 'violet', 'ghost']}
        onChange={(v) => setTweak('focusBtn', v)} />
      <TweakSection label="Calendar" />
      <TweakRadio label="Capacity" value={t.capacity}
        options={['segments', 'bar', 'ring']}
        onChange={(v) => setTweak('capacity', v)} />
      <TweakRadio label="Hours" value={t.calRange}
        options={['work', 'day', 'extended']}
        onChange={(v) => setTweak('calRange', v)} />
      <TweakSection label="Type" />
      <TweakRadio label="Font" value={t.font}
        options={['IBM Plex Sans', 'Inter', 'System']}
        onChange={(v) => setTweak('font', v)} />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  function go() {
    if (window.__tweaksMounted) return;
    if (!window.React || !window.ReactDOM || !window.useTweaks || !window.TweaksPanel || !document.body) {
      setTimeout(go, 60); return;
    }
    window.__tweaksMounted = true;
    const host = document.createElement('div');
    host.id = 'tweaks-root';
    document.body.appendChild(host);
    ReactDOM.createRoot(host).render(<TweaksRoot />);
  }
  go();
})();