import React, { useState, useEffect } from 'react';
import Header from './components/Header';
import DecidronSimulator from './components/decidron/DecidronSimulator';
import { loadSettings, saveSettings } from './utils/settings';
import './styles/variables.css';
import './styles/layout.css';
import './styles/components.css';
import './styles/ccai.css';

const THEME_KEY = 'decidron-theme';

export default function App() {
  const [theme, setTheme] = useState(
    () => localStorage.getItem(THEME_KEY)
      || (window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
  );
  const [settings, setSettings] = useState(() => loadSettings());

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem(THEME_KEY, theme);
  }, [theme]);

  useEffect(() => {
    saveSettings(settings);
  }, [settings]);

  const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));

  return (
    <div className="app">
      <Header
        theme={theme}
        onToggleTheme={toggleTheme}
        settings={settings}
        onSettingsChange={setSettings}
      />
      <main className="app-main">
        <DecidronSimulator settings={settings} />
      </main>
    </div>
  );
}