import React from 'react';
import { Box } from '@mantine/core';

export interface SidebarLayoutProps {
  children: React.ReactNode;
  sidebar?: React.ReactNode;
  sidebarOpened?: boolean;
  sidebarWidth?: number;
  sidebarPosition?: 'left' | 'right';
  offsetTop?: number;
  className?: string;
  
  // Animation settings
  transitionDuration?: string;
}

/**
 * SidebarLayout provides a responsive layout that shrinks the main content area
 * when a sidebar is opened, rather than overlaying on top of the content.
 * 
 * This ensures the main content remains visible and accessible when sidebars are open.
 */
const SidebarLayout: React.FC<SidebarLayoutProps> = ({
  children,
  sidebar,
  sidebarOpened = false,
  sidebarWidth = 450,
  sidebarPosition = 'right',
  offsetTop = 60,
  transitionDuration = '0.3s',
  className,
}) => {
  // Calculate main content area margins based on sidebar state
  const getMainContentStyles = (): React.CSSProperties => {
    if (!sidebarOpened) {
      return {
        marginLeft: 0,
        marginRight: 0,
        transition: `margin ${transitionDuration} ease`,
      };
    }

    return {
      marginLeft: sidebarPosition === 'left' ? `${sidebarWidth}px` : 0,
      marginRight: sidebarPosition === 'right' ? `${sidebarWidth}px` : 0,
      transition: `margin ${transitionDuration} ease`,
    };
  };

  // Calculate sidebar container styles for proper positioning
  const getSidebarContainerStyles = (): React.CSSProperties => ({
    position: 'fixed',
    top: offsetTop,
    bottom: 0,
    width: `${sidebarWidth}px`,
    zIndex: 1000,
    [sidebarPosition]: sidebarOpened ? 0 : `-${sidebarWidth}px`,
    transition: `${sidebarPosition} ${transitionDuration} ease`,
    pointerEvents: sidebarOpened ? 'auto' : 'none',
  });

  return (
    <Box className={className} style={{ position: 'relative', minHeight: '100%' }}>
      {/* Main Content Area - adjusts width based on sidebar state */}
      <Box style={getMainContentStyles()}>
        {children}
      </Box>

      {/* Sidebar Container - positioned absolutely but doesn't overlay content */}
      {sidebar && (
        <Box style={getSidebarContainerStyles()}>
          {sidebar}
        </Box>
      )}
    </Box>
  );
};

export default SidebarLayout;

/**
 * Higher-level wrapper that combines SidebarLayout with responsive behavior
 * and mobile-friendly overlays when screen size is too small.
 */
export interface ResponsiveSidebarLayoutProps extends SidebarLayoutProps {
  mobileBreakpoint?: number;
  overlayOnMobile?: boolean;
}

export const ResponsiveSidebarLayout: React.FC<ResponsiveSidebarLayoutProps> = ({
  mobileBreakpoint = 768,
  overlayOnMobile = true,
  ...props
}) => {
  const [isMobile, setIsMobile] = React.useState(false);

  React.useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < mobileBreakpoint);
    };

    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, [mobileBreakpoint]);

  // On mobile, use overlay behavior instead of shrinking content
  if (isMobile && overlayOnMobile) {
    return (
      <Box style={{ position: 'relative', minHeight: '100%' }}>
        {props.children}
        {props.sidebar && props.sidebarOpened && (
          <Box
            style={{
              position: 'fixed',
              top: props.offsetTop || 60,
              bottom: 0,
              [props.sidebarPosition || 'right']: 0,
              width: `${props.sidebarWidth || 450}px`,
              zIndex: 1000,
              transition: `transform ${props.transitionDuration || '0.3s'} ease`,
            }}
          >
            {props.sidebar}
          </Box>
        )}
        
        {/* Mobile overlay backdrop */}
        {props.sidebarOpened && (
          <Box
            style={{
              position: 'fixed',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              backgroundColor: 'rgba(0, 0, 0, 0.5)',
              zIndex: 999,
            }}
            onClick={() => {
              // If sidebar has onClose, call it
              if (React.isValidElement(props.sidebar) && props.sidebar.props.onClose) {
                props.sidebar.props.onClose();
              }
            }}
          />
        )}
      </Box>
    );
  }

  return <SidebarLayout {...props} />;
};

// Hook for managing sidebar layout state
export const useSidebarLayout = (initialOpened = false) => {
  const [sidebarOpened, setSidebarOpened] = React.useState(initialOpened);
  
  const openSidebar = React.useCallback(() => setSidebarOpened(true), []);
  const closeSidebar = React.useCallback(() => setSidebarOpened(false), []);
  const toggleSidebar = React.useCallback(() => setSidebarOpened(prev => !prev), []);
  
  return {
    sidebarOpened,
    openSidebar,
    closeSidebar,
    toggleSidebar,
    setSidebarOpened,
  };
};