import React, { useEffect, useState } from "react";
import TopBar from "./components/Layout/TopBar";
import MapView from "./components/Map/MapView";

const THEME_KEY = "sociowire:theme";

export default function App() {
  const [theme, setTheme] = useState("dark");

  // charge le thème au démarrage
  useEffect(() => {
    if (typeof window === "undefined") return;
    try {
      const saved = localStorage.getItem(THEME_KEY);
      if (saved === "dark" || saved === "blue" || saved === "light") {
        setTheme(saved);
        document.body.setAttribute("data-theme", saved);
      } else {
        document.body.setAttribute("data-theme", "dark");
      }
    } catch {
      document.body.setAttribute("data-theme", "dark");
    }
  }, []);

  // applique / sauvegarde le thème
  useEffect(() => {
    if (typeof window === "undefined") return;
    try {
      document.body.setAttribute("data-theme", theme);
      localStorage.setItem(THEME_KEY, theme);
    } catch {
      // ignore
    }
  }, [theme]);

  return (
    <div className="app-root">
      <TopBar theme={theme} onChangeTheme={setTheme} />
      <div className="main-shell">
        <div className="map-shell">
          {/* on passe le thème à la carte */}
          <MapView theme={theme} />
        </div>
      </div>
    </div>
  );
}