// perfil-app.jsx

const PF_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1F93FF",
  "density": "comfortable"
}/*EDITMODE-END*/;

function PerfilApp() {
  const [t, setTweak] = useTweaks(PF_TWEAK_DEFAULTS);

  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem('horos-theme') || 'dark'; } catch { return 'dark'; }
  });

  React.useEffect(() => {
    document.documentElement.dataset.theme = theme;
    try { localStorage.setItem('horos-theme', theme); } catch {}
  }, [theme]);

  return (
    <div className={`app density-${t.density}`}>
      <Sidebar active="settings" />
      <div className="main">
        <Topbar theme={theme} onThemeChange={setTheme} />
        <div className="content">
          <PerfilPage theme={theme} onThemeChange={setTheme} />
        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Aparência">
          <TweakColor label="Cor de destaque" value={t.accent} onChange={v => setTweak('accent', v)}
                      options={['#1F93FF','#007dff','#10b981','#f97316','#ec4899']} />
          <TweakRadio label="Densidade" value={t.density} onChange={v => setTweak('density', v)}
                      options={[{ value:'comfortable', label:'Confortável' }, { value:'compact', label:'Compacta' }]} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

(async () => {
  if (window.DB_PROMISE) await window.DB_PROMISE;
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<PerfilApp />);
})();