/* ============================================================
   Tweaks (live design controls)
   ============================================================ */

const IBD_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "navy",
  "typeset": "serifPlex",
  "theme": "light",
  "density": "comfy",
  "heroLayout": "default",
  "cardStyle": "bordered"
}/*EDITMODE-END*/;

function applyTweaksToDocument(t) {
  const el = document.documentElement;
  el.setAttribute('data-theme', t.theme === 'dark' ? 'dark' : 'light');
  el.setAttribute('data-palette', t.palette);
  el.setAttribute('data-typeset', t.typeset);
  el.setAttribute('data-density', t.density);
  el.setAttribute('data-herolayout', t.heroLayout);
  el.setAttribute('data-cardstyle', t.cardStyle);
}

function IBDTweaks() {
  const [t, setTweak] = useTweaks(IBD_TWEAK_DEFAULTS);

  useEffect(() => { applyTweaksToDocument(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks · IBD">
      <TweakSection label="Paleta">
        <TweakSelect
          label="Paleta institucional"
          value={t.palette}
          onChange={v => setTweak('palette', v)}
          options={[
            { value: 'navy', label: 'Navy IBD (padrão)' },
            { value: 'azul', label: 'Azul institucional' },
            { value: 'forest', label: 'Verde acadêmico' },
            { value: 'bordeaux', label: 'Bordô editorial' },
          ]}
        />
        <TweakRadio
          label="Modo"
          value={t.theme}
          onChange={v => setTweak('theme', v)}
          options={[
            { value: 'light', label: 'Claro' },
            { value: 'dark', label: 'Escuro' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Tipografia">
        <TweakSelect
          label="Pareamento"
          value={t.typeset}
          onChange={v => setTweak('typeset', v)}
          options={[
            { value: 'serifPlex', label: 'Source Serif + IBM Plex' },
            { value: 'newsreader', label: 'Newsreader + DM Sans' },
            { value: 'spectral', label: 'Spectral + Manrope' },
            { value: 'garamond', label: 'EB Garamond + Plex' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Layout">
        <TweakRadio
          label="Densidade"
          value={t.density}
          onChange={v => setTweak('density', v)}
          options={[
            { value: 'compact', label: 'Compacto' },
            { value: 'comfy', label: 'Padrão' },
            { value: 'airy', label: 'Espaçoso' },
          ]}
        />
        <TweakSelect
          label="Hero da home"
          value={t.heroLayout}
          onChange={v => setTweak('heroLayout', v)}
          options={[
            { value: 'default', label: 'Editorial (padrão)' },
            { value: 'split', label: 'Dividido 50/50' },
            { value: 'centered', label: 'Centralizado' },
          ]}
        />
        <TweakSelect
          label="Cards de conteúdo"
          value={t.cardStyle}
          onChange={v => setTweak('cardStyle', v)}
          options={[
            { value: 'bordered', label: 'Boxed' },
            { value: 'paper', label: 'Papel (filete dourado)' },
            { value: 'minimal', label: 'Lista editorial' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Sessão de teste">
        <TweakButton label="Limpar cadastros locais" onClick={() => {
          localStorage.removeItem('ibd:users');
          localStorage.removeItem('ibd:session');
          location.reload();
        }} />
      </TweakSection>
    </TweaksPanel>
  );
}

window.IBDTweaks = IBDTweaks;
window.applyTweaksToDocument = applyTweaksToDocument;
window.IBD_TWEAK_DEFAULTS = IBD_TWEAK_DEFAULTS;