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

// 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");

  // Wall state (lifted from MapView)
  const [wallPosts, setWallPosts] = useState([]);
  const [wallLoading, setWallLoading] = useState(false);
  const [wallError, setWallError] = useState("");
  const [selectedPost, setSelectedPost] = useState(null);

  const handlePostsState = useCallback((next) => {
    if (!next) return;
    if (Array.isArray(next.posts)) setWallPosts(next.posts);
    setWallLoading(!!next.loading);
    setWallError(next.error || "");
  }, []);

  // 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 {
        setTheme("blue");
        document.body.setAttribute("data-theme", "blue");
      }
    } catch (e) {
      setTheme("blue");
      document.body.setAttribute("data-theme", "blue");
    }
  }, []);

  // 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}
              onPostsState={handlePostsState}
              selectedPost={selectedPost}
              onSelectPost={setSelectedPost}
            />
          </Suspense>
        </div>

        {/* BELOW THE MAP (page scroll like Facebook) */}
        <div className="below-stage">
          <div className="below-row">
            <div className="sociowall-panel">
              <div className="sociowall-header">SOCIOWALL</div>
              <PostList
                posts={wallPosts}
                loading={wallLoading}
                error={wallError}
                selectedPost={selectedPost}
                onSelectPost={setSelectedPost}
              />
            </div>

            <div className="chat-panel">
              <div className="chat-header">CHAT</div>
              <ul className="chat-users">
                <li>Yan</li>
                <li>Marc</li>
                <li>Fiso</li>
              </ul>
            </div>
          </div>
        </div>

        <div style={{ height: 18 }} />
      </div>
    </div>
  );
}
