'use client';

import Box from '@mui/material/Box';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import { styled } from '@mui/material/styles';
import Sidebar from '../sidebar/Sidebar';
import Header from '../header/Header';
import { useCustomizerStore } from '../store/useCustomizerStore';

interface DashboardLayoutProps {
  children: React.ReactNode;
}

interface StyledMainProps {
  isMobile?: boolean;
}

const StyledMain = styled(Box, {
  shouldForwardProp: (prop) => prop !== 'isMobile',
})<StyledMainProps>(({ theme, isMobile }) => ({
  flexGrow: 1,
  padding: theme.spacing(3),
  overflow: 'auto',
  backgroundColor: theme.palette.background.default,
  ...(isMobile && {
    paddingTop: theme.spacing(1),
  }),
}));

export default function DashboardLayout({ children }: DashboardLayoutProps) {
  const theme = useTheme();
  const lgUp = useMediaQuery(theme.breakpoints.up('lg'));
  const { isHydrated } = useCustomizerStore();

  if (!isHydrated) {
    return (
      <Box sx={{ display: 'flex', height: '100vh' }}>
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            flexGrow: 1,
            overflow: 'hidden',
          }}
        >
          <StyledMain isMobile={!lgUp}>{children}</StyledMain>
        </Box>
      </Box>
    );
  }

  return (
    <Box sx={{ display: 'flex', height: '100vh' }}>
      <Sidebar />
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          flexGrow: 1,
          overflow: 'hidden',
        }}
      >
        <Header />
        <StyledMain isMobile={!lgUp}>{children}</StyledMain>
      </Box>
    </Box>
  );
}