// Painel de Tweaks do Nexus · monta separado do app vanilla e aplica via CSS vars.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#34BDF0",
  "theme": "Escuro",
  "density": "Confortável",
  "panel": "Expansível",
  "scan": true
}/*EDITMODE-END*/;

function NexusTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {
    if (window.applyNexusTweaks) window.applyNexusTweaks(t);
  }, [t.accent, t.theme, t.density, t.panel, t.scan]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Aparência" />
      <TweakRadio
        label="Tema"
        value={t.theme}
        options={['Escuro', 'Claro']}
        onChange={(v) => setTweak('theme', v)}
      />
      <TweakColor
        label="Acento"
        value={t.accent}
        options={['#34BDF0', '#1E9FE0', '#67D2EE', '#FFFFFF']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakRadio
        label="Densidade"
        value={t.density}
        options={['Confortável', 'Compacto']}
        onChange={(v) => setTweak('density', v)}
      />
      <TweakToggle
        label="Animação de scan"
        value={t.scan}
        onChange={(v) => setTweak('scan', v)}
      />
      <TweakSection label="Layout" />
      <TweakRadio
        label="Painel contextual"
        value={t.panel}
        options={['Expansível', 'Sempre aberto']}
        onChange={(v) => setTweak('panel', v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const root = document.getElementById('tweaks-root');
  if (root && window.ReactDOM) ReactDOM.createRoot(root).render(<NexusTweaks />);
})();