"use client";

import { createContext, useCallback, useContext, useState, type ReactNode } from "react";

type HeaderUIContextValue = {
  isMenuOpen: boolean;
  isSidebarOpen: boolean;
  toggleMenu: () => void;
  toggleSidebar: () => void;
  closeAll: () => void;
};

const HeaderUIContext = createContext<HeaderUIContextValue | null>(null);

/**
 * Provider for header UI state (mobile menu + slide sidebar open/closed).
 * Lifted out of Header so BodyOverlay (sibling of header in production DOM) can read it.
 */
export function HeaderUIProvider({ children }: { children: ReactNode }) {
  const [isMenuOpen, setMenuOpen] = useState(false);
  const [isSidebarOpen, setSidebarOpen] = useState(false);

  const toggleMenu = useCallback(() => {
    setMenuOpen((o) => !o);
    setSidebarOpen(false);
  }, []);

  const toggleSidebar = useCallback(() => {
    setSidebarOpen((o) => !o);
    setMenuOpen(false);
  }, []);

  const closeAll = useCallback(() => {
    setMenuOpen(false);
    setSidebarOpen(false);
  }, []);

  return (
    <HeaderUIContext.Provider value={{ isMenuOpen, isSidebarOpen, toggleMenu, toggleSidebar, closeAll }}>
      {children}
    </HeaderUIContext.Provider>
  );
}

export function useHeaderUI() {
  const ctx = useContext(HeaderUIContext);
  if (!ctx) throw new Error("useHeaderUI must be used inside <HeaderUIProvider>");
  return ctx;
}