import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react';
import { useIsMobile } from '@/hooks/use-mobile';
import { TooltipProvider } from '@/components/ui/tooltip';

// Define the shape of the layout state
interface LayoutState {
  style: React.CSSProperties;
  bodyClassName: string;
  isMobile: boolean;
  sidebarCollapsed: boolean;
  isMailViewExpanded: boolean;
  showMailView: () => void;
  hideMailView: () => void;
  toggleMailView: () => void;
  toggleSidebar: () => void;
}

// Create the context
const LayoutContext = createContext<LayoutState | undefined>(undefined);

// Provider component
interface LayoutProviderProps {
  sidebarCollapsed?: boolean;
  children: ReactNode;
  style?: React.CSSProperties;
  bodyClassName?: string;
}

export function LayoutProvider({ children, style: customStyle, bodyClassName = '', sidebarCollapsed = false}: LayoutProviderProps) {
  const isMobile = useIsMobile();
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(sidebarCollapsed);
  const [isMailViewExpanded, setIsMailViewExpanded] = useState(false);

  const defaultCssVariables = {
    '--sidebar-width': '240px',
    '--sidebar-width-collapse': '60px',
    '--sidebar-width-mobile': '240px',
    '--header-height-mobile': '60px',
    '--aside-width': '80px',
    '--aside-width-mobile': '60px',
    '--page-space': '10px',
    '--mail-list-width': '300px',
  };

  const cssVariables = useMemo(() => ({
    ...defaultCssVariables,
    ...customStyle,
  }), [customStyle]);

  const style: React.CSSProperties = cssVariables;

  // Sidebar toggle function
  const toggleSidebar = () => setIsSidebarCollapsed((open) => !open);
  
  // Aside expanded toggle function
  const toggleMailView = () => setIsMailViewExpanded((open) => !open);

  const showMailView = () => setIsMailViewExpanded(true);
  const hideMailView = () => setIsMailViewExpanded(false);

  // Apply CSS variables to HTML root and body className
  useEffect(() => {
    const html = document.documentElement;
    const body = document.body;
    
    // Store original values for cleanup
    const originalHtmlStyle = html.style.cssText;
    const originalBodyClasses = body.className;

    // Apply CSS variables to HTML root element
    Object.entries(cssVariables).forEach(([property, value]) => {
      html.style.setProperty(property, String(value));
    });

    // Apply body className if provided
    if (bodyClassName) {
      body.className = `${originalBodyClasses} ${bodyClassName}`.trim();
    }

    // Add data attributes to body for layout states
    body.setAttribute('data-sidebar-collapsed', isSidebarCollapsed.toString());
    body.setAttribute('data-mail-view-expanded', isMailViewExpanded.toString());

    // Cleanup function
    return () => {
      html.style.cssText = originalHtmlStyle;
      body.className = originalBodyClasses;
      body.removeAttribute('data-sidebar-collapsed');
      body.removeAttribute('data-mail-view-expanded');
    };
  }, [cssVariables, bodyClassName, isSidebarCollapsed, isMailViewExpanded]);

  return (
    <LayoutContext.Provider
      value={{
        bodyClassName,
        style,
        isMobile,
        sidebarCollapsed: isSidebarCollapsed,
        isMailViewExpanded,
        showMailView,
        hideMailView,
        toggleSidebar,
        toggleMailView,
      }}
    >
      <div
        data-slot="layout-wrapper"
        className="flex grow"
      >
        <TooltipProvider delayDuration={0}>
          {children}
        </TooltipProvider>
      </div>
    </LayoutContext.Provider>
  );
}

// Custom hook for consuming the context
export const useLayout = () => {
  const context = useContext(LayoutContext);
  if (!context) {
    throw new Error('useLayout must be used within a LayoutProvider');
  }
  return context;
};
