import React, { useEffect } from "react";
import { Sidebar } from "./Sidebar";
import { TopBar } from "./TopBar";
import { NavBar, EVENT_NAV_IDS } from "./NavBar";
import { MainContent } from "./MainContent";
import { useAppNav } from "../contexts/AppNavContext";
import { useBreakpoint } from "../hooks/useBreakpoint";

export function AppShell() {
  const {
    activeNav,
    setActiveNav,
    selectedEventId,
    setSelectedEventId,
    setSearchQuery,
    sidebarCollapsed,
    setSidebarCollapsed,
    drawerOpen,
    setDrawerOpen,
  } = useAppNav();
  const bp = useBreakpoint();
  const isSmall = bp === "mobile" || bp === "tablet";

  const handleEventSelect = (eventId: string) => {
    setSelectedEventId(eventId);
    setActiveNav("dashboard");
  };

  const handleOpenSearchPage = (query: string) => {
    setSearchQuery(query);
    setActiveNav("search");
  };

  useEffect(() => {
    if (!selectedEventId) return;
    if (activeNav === "questions" || activeNav === "quiz") {
      setActiveNav("event-activities");
    }
  }, [selectedEventId, activeNav, setActiveNav]);

  useEffect(() => {
    if (activeNav === "dashboard" && selectedEventId) {
      setSidebarCollapsed(true);
    }
  }, [activeNav, selectedEventId, setSidebarCollapsed]);

  return (
    <div
      style={{
        display: "flex",
        height: "100vh",
        overflow: "hidden",
        background: "var(--background)",
      }}
    >
      {!isSmall && (
        <Sidebar
          activeItem={activeNav}
          onItemClick={setActiveNav}
          collapsed={sidebarCollapsed}
          onToggleCollapse={() => setSidebarCollapsed((v) => !v)}
          selectedEventId={selectedEventId}
          onEventSelect={handleEventSelect}
        />
      )}
      {isSmall && (
        <Sidebar
          activeItem={activeNav}
          onItemClick={setActiveNav}
          collapsed={false}
          onToggleCollapse={() => {}}
          drawerOpen={drawerOpen}
          onDrawerClose={() => setDrawerOpen(false)}
          selectedEventId={selectedEventId}
          onEventSelect={handleEventSelect}
        />
      )}
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          flex: 1,
          overflow: "hidden",
          minWidth: 0,
        }}
      >
        <TopBar
          onMenuClick={() => setDrawerOpen((v) => !v)}
          onNavigate={setActiveNav}
          onEventSelect={handleEventSelect}
          onOpenSearchPage={handleOpenSearchPage}
        />
        {selectedEventId !== null && EVENT_NAV_IDS.has(activeNav) && (
          <NavBar activeItem={activeNav} onNavigate={setActiveNav} />
        )}
        <main
          style={{
            flex: 1,
            overflowY: "auto",
            background: "var(--background)",
          }}
        >
          <div
            style={{
              padding:
                bp === "mobile"
                  ? "16px 14px"
                  : bp === "tablet"
                    ? "20px 20px"
                    : "24px 28px",
              maxWidth: "1280px",
            }}
          >
            <MainContent />
          </div>
        </main>
      </div>
    </div>
  );
}