import { Flex, Box, Container, Dialog, Heading, IconButton, TextField } from '@radix-ui/themes';
import SidebarContent from '../components/layout/SidebarContent';
import { useLayout } from '../providers/LayoutProvider';
import { Menu, Search, Bell } from 'lucide-react';
import { Outlet } from 'react-router';

export default function LayoutContainer() {
  const { activeTab, isMobileMenuOpen, setIsMobileMenuOpen } = useLayout();
  return (
    <Flex style={{ minHeight: '100vh', backgroundColor: 'var(--gray-2)' }}>
      {/* Desktop Sidebar */}
      <Box
        display={{ initial: 'none', md: 'block' }}
        style={{
          width: '260px',
          backgroundColor: 'white',
          borderRight: '1px solid var(--gray-4)',
          position: 'sticky',
          top: 0,
          minHeight: '100vh',
          overflowY: 'auto',
        }}
      >
        <SidebarContent />
      </Box>

      {/* Main Content Area */}
      <Box style={{ flex: 1, minWidth: 0 }}>
        {' '}
        {/* Top Header (Mobile & Desktop) */}
        <Flex
          align="center"
          justify="between"
          px="4"
          style={{
            height: '64px',
            backgroundColor: 'white',
            borderBottom: '1px solid var(--gray-4)',
            position: 'sticky',
            top: 0,
            zIndex: 10,
          }}
        >
          <Flex align="center" gap="3">
            <Box display={{ md: 'none' }}>
              <Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
                <Dialog.Trigger>
                  <IconButton variant="ghost" color="gray">
                    <Menu />
                  </IconButton>
                </Dialog.Trigger>
                <Dialog.Content
                  style={{
                    position: 'fixed',
                    left: 0,
                    top: 0,
                    bottom: 0,
                    margin: 0,
                    width: '280px',
                    borderRadius: 0,
                    padding: 0,
                  }}
                >
                  <SidebarContent />
                </Dialog.Content>
              </Dialog.Root>
            </Box>
            <Heading size="4">{activeTab}</Heading>
          </Flex>

          <Flex align="center" gap="3">
            <TextField.Root placeholder="Search..." size="2">
              <TextField.Slot>
                <Search />
              </TextField.Slot>
            </TextField.Root>
            <IconButton variant="ghost" color="gray">
              <Bell />
            </IconButton>
          </Flex>
        </Flex>
        <Container size="4" p="5" style={{ paddingTop: 20 }}>
          <Outlet />
        </Container>
      </Box>
    </Flex>
  );
}