// Anologe — Tweaks panel mount (uses tweaks-panel.jsx primitives)

function AnologTweaks() {
  const defaults = window.__TWEAK_DEFAULTS || {};
  // useTweaks() persists to disk via __edit_mode_set_keys
  const [t, setTweak] = useTweaks(defaults);

  // Apply live to CSS vars + classes; also mirror to localStorage so sibling pages see the same state.
  React.useEffect(() => {
    const root = document.documentElement;
    if (t.accent) root.style.setProperty('--accent', t.accent);
    const density = ({ cozy: 0.85, regular: 1, spacious: 1.18 })[t.density] || 1;
    root.style.setProperty('--density', density);
    document.body.classList.remove('tp-default', 'tp-editorial', 'tp-mono');
    document.body.classList.add('tp-' + (t.typePair || 'default'));
    document.body.classList.remove('hero-split', 'hero-stacked', 'hero-editorial');
    document.body.classList.add('hero-' + (t.heroVariant || 'split'));
    const dash = document.getElementById('hero-dashboard');
    if (dash) dash.style.display = t.showDashboard === false ? 'none' : '';
    try { localStorage.setItem('anologe-tweaks', JSON.stringify(t)); } catch (e) {}
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakColor
          label="Accent color"
          value={t.accent}
          onChange={(v) => setTweak('accent', v)}
          options={['#d8ea2c', '#ff5b1f', '#3b82f6', '#0a0a0a']}
        />
      </TweakSection>

      <TweakSection title="Type">
        <TweakRadio
          label="Pairing"
          value={t.typePair}
          onChange={(v) => setTweak('typePair', v)}
          options={[
            { value: 'default', label: 'Inter + Flex' },
            { value: 'editorial', label: 'Editorial' },
            { value: 'mono', label: 'Mono' }
          ]}
        />
      </TweakSection>

      <TweakSection title="Density">
        <TweakRadio
          label="Density"
          value={t.density}
          onChange={(v) => setTweak('density', v)}
          options={[
            { value: 'cozy', label: 'Cozy' },
            { value: 'regular', label: 'Regular' },
            { value: 'spacious', label: 'Spacious' }
          ]}
        />
      </TweakSection>

      <TweakSection title="Hero">
        <TweakRadio
          label="Layout"
          value={t.heroVariant}
          onChange={(v) => setTweak('heroVariant', v)}
          options={[
            { value: 'split', label: 'Split' },
            { value: 'stacked', label: 'Stacked' },
            { value: 'editorial', label: 'Editorial' }
          ]}
        />
        <TweakToggle
          label="Show dashboard"
          value={t.showDashboard}
          onChange={(v) => setTweak('showDashboard', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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