/**
 * Main Layout Component for Redirect Intelligence v2
 * 
 * Provides navigation, header, and responsive layout structure
 */

import React, { ReactNode } from 'react';
import {
  Box,
  Flex,
  Spacer,
  Container,
  useColorModeValue,
  useDisclosure,
  Drawer,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
  DrawerHeader,
  DrawerBody,
  VStack,
  IconButton,
  useBreakpointValue,
} from '@chakra-ui/react';
import { HamburgerIcon } from '@chakra-ui/icons';

import { Navbar } from './Navbar';
import { MobileNav } from './MobileNav';
import { Footer } from './Footer';

interface LayoutProps {
  children: ReactNode;
}

export function Layout({ children }: LayoutProps) {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const bg = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.700');
  const isMobile = useBreakpointValue({ base: true, md: false });

  return (
    <Box minH="100vh" bg={useColorModeValue('gray.50', 'gray.900')}>
      {/* Header */}
      <Box
        bg={bg}
        borderBottom="1px"
        borderColor={borderColor}
        position="sticky"
        top={0}
        zIndex={1000}
        shadow="sm"
      >
        <Container maxW="7xl">
          <Flex h={16} alignItems="center">
            {/* Mobile menu button */}
            {isMobile && (
              <IconButton
                icon={<HamburgerIcon />}
                variant="ghost"
                onClick={onOpen}
                mr={4}
                aria-label="Open navigation menu"
              />
            )}

            {/* Desktop navigation */}
            {!isMobile && <Navbar />}
            
            <Spacer />
            
            {/* Right side nav items */}
            <Navbar rightSide />
          </Flex>
        </Container>
      </Box>

      {/* Mobile drawer navigation */}
      <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader borderBottomWidth="1px">
            Navigation
          </DrawerHeader>
          <DrawerBody p={0}>
            <MobileNav onClose={onClose} />
          </DrawerBody>
        </DrawerContent>
      </Drawer>

      {/* Main content */}
      <Box as="main" flex="1">
        <Container maxW="7xl" py={6}>
          {children}
        </Container>
      </Box>

      {/* Footer */}
      <Footer />
    </Box>
  );
}
