"use client";

import { useCallback, useEffect, useState } from "react";
import type { Session } from "next-auth";
import { usePathname } from "@/i18n/navigation";
import Sidebar from "@/components/layout/Sidebar";
import Header from "@/components/layout/Header";
import ImpersonationBanner from "@/components/layout/ImpersonationBanner";
import BusinessImpersonationBanner from "@/components/layout/BusinessImpersonationBanner";
import { DevModeProvider } from "@/components/providers/DevModeProvider";

const SIDEBAR_COLLAPSED_KEY = "cuppa-sidebar-collapsed";

interface DashboardShellProps {
  session: Session;
  devMode: boolean;
  canUseDevMode: boolean;
  children: React.ReactNode;
}

export default function DashboardShell({
  session,
  devMode,
  canUseDevMode,
  children,
}: DashboardShellProps) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    setMobileOpen(false);
  }, [pathname]);

  useEffect(() => {
    try {
      const stored = localStorage.getItem(SIDEBAR_COLLAPSED_KEY);
      if (stored !== null) {
        setSidebarCollapsed(stored === "true");
      }
    } catch {
      // ignore storage errors
    }
  }, []);

  useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [mobileOpen]);

  const toggleSidebarCollapsed = useCallback(() => {
    setSidebarCollapsed((prev) => {
      const next = !prev;
      try {
        localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(next));
      } catch {
        // ignore storage errors
      }
      return next;
    });
  }, []);

  return (
    <DevModeProvider devMode={devMode} canUseDevMode={canUseDevMode}>
      <div className="flex h-[100dvh] overflow-hidden bg-[var(--bg)] text-[var(--text)]">
        <Sidebar
          session={session}
          collapsed={sidebarCollapsed}
          onToggleCollapse={toggleSidebarCollapsed}
          mobileOpen={mobileOpen}
          onMobileClose={() => setMobileOpen(false)}
        />
        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
          <Header session={session} onMenuOpen={() => setMobileOpen(true)} />
          <ImpersonationBanner />
          <BusinessImpersonationBanner />
          <main className="flex-1 overflow-y-auto overflow-x-hidden p-4 sm:p-6 lg:p-8">
            {children}
          </main>
        </div>
      </div>
    </DevModeProvider>
  );
}