/* Tweaks panel for the Bode landing page */

const BODE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "intensity": "standard",
  "accent": "blue",
  "coral": "sparing",
  "surface": "light",
  "hero": "type"
}/*EDITMODE-END*/;

function BodeTweaks() {
  const [tweaks, setTweak] = useTweaks(BODE_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const body = document.body;
    body.classList.remove('calm', 'standard', 'max');
    body.classList.add(tweaks.intensity);
    body.classList.toggle('dark', tweaks.surface === 'dark');
    body.classList.remove('coral-sparing', 'coral-generous');
    body.classList.add(`coral-${tweaks.coral}`);
    const accentMap = { blue: '#3B5BF6', indigo: '#2B0094', both: '#3B5BF6' };
    document.documentElement.style.setProperty('--accent', accentMap[tweaks.accent] || '#3B5BF6');
    document.documentElement.style.setProperty('--accent-2', tweaks.accent === 'indigo' ? '#3B5BF6' : '#2B0094');
    body.dataset.hero = tweaks.hero;
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Animation intensity">
        <TweakRadio
          value={tweaks.intensity}
          onChange={(v) => setTweak('intensity', v)}
          options={[
            { value: 'calm', label: 'Calm' },
            { value: 'standard', label: 'Standard' },
            { value: 'max', label: 'Max' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Accent colour">
        <TweakRadio
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
          options={[
            { value: 'blue', label: 'Electric Blue' },
            { value: 'indigo', label: 'Deep Indigo' },
            { value: 'both', label: 'Both' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Coral usage">
        <TweakRadio
          value={tweaks.coral}
          onChange={(v) => setTweak('coral', v)}
          options={[
            { value: 'sparing', label: 'Sparing' },
            { value: 'generous', label: 'Generous' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Surface">
        <TweakRadio
          value={tweaks.surface}
          onChange={(v) => setTweak('surface', v)}
          options={[
            { value: 'light', label: 'Light' },
            { value: 'dark', label: 'Dark' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Hero variation">
        <TweakSelect
          value={tweaks.hero}
          onChange={(v) => setTweak('hero', v)}
          options={[
            { value: 'type', label: 'Type-driven assembly' },
            { value: 'blueprint', label: 'Blueprint reveal' },
            { value: 'agent', label: 'Live agent terminal focus' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.BodeTweaks = BodeTweaks;