// IA app — same shell as other Horos pages

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

function IAApp() {
  const [t, setTweak] = useTweaks(IA_TWEAK_DEFAULTS);

  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem('horos-theme') || 'light'; }
    catch { return 'light'; }
  });
  React.useEffect(() => {
    document.documentElement.dataset.theme = theme;
    try { localStorage.setItem('horos-theme', theme); } catch {}
  }, [theme]);

  React.useEffect(() => {
    const root = document.documentElement;
    const a = t.accent;
    root.style.setProperty('--accent', a);
    root.style.setProperty('--accent-soft', iaShade(a, 60));
    root.style.setProperty('--accent-glow', iaHexA(a, 0.35));
  }, [t.accent]);

  return (
    <div className={`app density-${t.density}`}>
      <Sidebar active="ai" />

      <div className="main">
        <Topbar theme={theme} onThemeChange={setTheme} />
        <div className="content ia-content">
          <IAPage />
        </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>
  );
}

function iaHexA(hex, a) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}
function iaShade(hex, amount) {
  const h = hex.replace('#', '');
  const r = Math.min(255, parseInt(h.slice(0, 2), 16) + amount);
  const g = Math.min(255, parseInt(h.slice(2, 4), 16) + amount);
  const b = Math.min(255, parseInt(h.slice(4, 6), 16) + amount);
  return `#${[r, g, b].map(x => x.toString(16).padStart(2, '0')).join('')}`;
}

const iaRoot = ReactDOM.createRoot(document.getElementById('root'));
iaRoot.render(<IAApp />);