import { ReactNode } from 'react';
import { Box } from './Box';

export interface LayoutProps {
  children: ReactNode;
  header?: ReactNode;
  footer?: ReactNode;
  sidebar?: ReactNode;
  fixedSidebar?: boolean;
  fixedHeader?: boolean;
  fixedFooter?: boolean;
}

/**
 * Layout is the canonical app frame component.
 * Redesigned for "Cockpit" layout: Sidebar is primary (full height), Header and Content sit to the right.
 */
export const Layout = ({ 
  children, 
  header, 
  footer, 
  sidebar,
  fixedSidebar = true,
  fixedHeader = true,
  fixedFooter = true // Default to true for AppShellBar
}: LayoutProps) => {
  return (
    <Box display="flex" minHeight="100vh" className="bg-base-black text-text-high">
      {/* Sidebar - Primary Vertical Axis - Solid Background */}
      {sidebar && (
        <Box 
          as="aside" 
          width="64" // 16rem / 256px
          display={{ base: 'none', lg: 'block' }}
          position={fixedSidebar ? "fixed" : "relative"}
          top={0}
          bottom={0}
          left={0}
          zIndex={50}
          className="bg-base-black border-r border-outline-steel"
        >
          {sidebar}
        </Box>
      )}
      
      {/* Main Content Area - Right of Sidebar */}
      <Box 
        display="flex" 
        flexDirection="col" 
        flex={1} 
        marginLeft={fixedSidebar && sidebar ? { lg: 64 } : undefined}
        minWidth="0" // Prevent flex child overflow
      >
        {/* Header - Rendered directly as it contains AppShellBar (fixed) */}
        {header}
        
        {/* Main Scrollable Content */}
        <Box 
          as="main" 
          flex={1} 
          display="flex" 
          flexDirection="col"
          position="relative"
          marginTop={fixedHeader ? 14 : 0} // Offset for fixed header (h-14)
          paddingBottom={fixedFooter ? 14 : 0} // Offset for fixed footer (h-14)
        >
          <Box flex={1} p={0}>
            {children}
          </Box>
        </Box>

        {/* Footer - Rendered directly as it contains AppShellBar (fixed) */}
        {footer}
      </Box>
    </Box>
  );
};