import { useEffect } from "react";
import { FloorPlan } from "./components/FloorPlan";
import { HeaderBar } from "./components/HeaderBar";
import { SidePanel } from "./components/SidePanel";
import { setMode, startRuntime } from "./sim/runtime";
import { loadPreferredMode, useOfficeStore } from "./store/office-store";

export default function App() {
  const theme = useOfficeStore((s) => s.theme);
  const panelOpen = useOfficeStore((s) => s.panelOpen);

  useEffect(() => {
    startRuntime();
    if (loadPreferredMode() === "live") setMode("live");
  }, []);

  return (
    <div className={`app ${theme}`}>
      <HeaderBar />
      <div className={`main-row ${panelOpen ? "" : "panel-closed"}`}>
        <FloorPlan />
        {panelOpen && <SidePanel />}
      </div>
    </div>
  );
}