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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "light",
  "accent": "green",
  "showDashTags": true,
  "headlineStyle": "italic-serif"
}/*EDITMODE-END*/;

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

  // Apply variants to body
  React.useEffect(() => {
    document.body.classList.toggle('var-dark-hero', t.heroStyle === 'dark');
    document.body.classList.toggle('accent-blue', t.accent === 'blue');
    document.body.classList.toggle('accent-mono', t.accent === 'mono');

    document.querySelectorAll('.prod-tag').forEach(el => {
      el.style.display = t.showDashTags ? '' : 'none';
    });

    // Headline accent style
    const accentEls = document.querySelectorAll('.hero h1 .accent');
    accentEls.forEach(el => {
      if (t.headlineStyle === 'italic-serif') {
        el.style.fontFamily = 'var(--font-serif)';
        el.style.fontStyle = 'italic';
        el.style.fontWeight = '400';
      } else if (t.headlineStyle === 'underline') {
        el.style.fontFamily = '';
        el.style.fontStyle = 'normal';
        el.style.fontWeight = '500';
        el.style.color = 'var(--ink)';
        el.style.textDecoration = 'underline';
        el.style.textDecorationColor = 'var(--green)';
        el.style.textDecorationThickness = '4px';
        el.style.textUnderlineOffset = '8px';
      } else {
        el.style.fontFamily = '';
        el.style.fontStyle = 'normal';
        el.style.fontWeight = '500';
        el.style.color = 'var(--ink)';
        el.style.textDecoration = '';
      }
    });
  }, [t.heroStyle, t.accent, t.showDashTags, t.headlineStyle]);

  return (
    <TweaksPanel title="Tweaks" defaultPosition={{ right: 24, bottom: 24 }}>
      <TweakSection label="Theme">
        <TweakRadio
          label="Hero treatment"
          value={t.heroStyle}
          onChange={(v) => setTweak('heroStyle', v)}
          options={[
            { value: 'light', label: 'Light' },
            { value: 'dark', label: 'Dark' },
          ]}
        />
        <TweakRadio
          label="Accent color"
          value={t.accent}
          onChange={(v) => setTweak('accent', v)}
          options={[
            { value: 'green', label: 'Green' },
            { value: 'blue', label: 'Blue' },
            { value: 'mono', label: 'Mono' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Hero">
        <TweakRadio
          label="Headline accent style"
          value={t.headlineStyle}
          onChange={(v) => setTweak('headlineStyle', v)}
          options={[
            { value: 'italic-serif', label: 'Italic serif' },
            { value: 'underline', label: 'Underline' },
            { value: 'plain', label: 'Plain' },
          ]}
        />
        <TweakToggle
          label="Floating annotations on dashboard"
          value={t.showDashTags}
          onChange={(v) => setTweak('showDashTags', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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