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

// Lazy-load de la carte (gros chunk : maplibre, CSS, etc.)
const MapView = React.lazy(() => import("./components/Map/MapView"));

const THEME_KEY = "sociowire:theme";

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

  // 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 (e) {
      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 (e) {
      // ignore
    }
  }, [theme]);

  return (
    <div className="app-root">
      <TopBar theme={theme} onChangeTheme={setTheme} />
      <div className="main-shell">
        <div className="map-shell">
          <Suspense fallback={<div style={{ padding: 16 }}>Loading map…</div>}>
            <MapView theme={theme} />
          </Suspense>
        </div>
      </div>
    </div>
  );
}