import { useEffect } from "react";
import { ChatFullscreen } from "./components/ChatFullscreen";
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);
  const chatFullscreen = useOfficeStore((s) => s.chatFullscreen);
  const selectedAgentId = useOfficeStore((s) => s.selectedAgentId);
  const mode = useOfficeStore((s) => s.mode);

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

  const showFullscreenChat = chatFullscreen && mode === "live" && selectedAgentId !== null;

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