import React, { useState, useEffect } from 'react';
import { Box, useTheme, useMediaQuery, Skeleton } from '@mui/material';
import KitchPlusAppBar from '../AppBar';
import Sidebar from '../SideHome';
import AnalyticsContect from './AnalyticsContect';

const drawerWidth = 230;

const AnalyticsPage = () => {
  const [timeFrame, setTimeFrame] = useState('month');

  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const [hasProducts, setHasProducts] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);

  // محاكاة التحقق من المنتجات
  useEffect(() => {
    const checkProducts = async () => {
      setIsLoading(true);
      const productsExist = await checkIfProductsExist(); // استبدل بمنطقك
      setHasProducts(productsExist);
      setIsLoading(false);
    };

    checkProducts();
  }, []);

  const checkIfProductsExist = async () => {
    return new Promise((resolve) => setTimeout(() => resolve(true), 1500)); // محاكاة تأخير
  };

  useEffect(() => {
    if (window.innerWidth >= theme.breakpoints.values.md) {
      setSidebarOpen(true);
    } else {
      setSidebarOpen(false);
    }
  }, [theme.breakpoints.values.md]);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= theme.breakpoints.values.md) {
        setSidebarOpen(true);
      } else {
        setSidebarOpen(false);
      }
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [theme.breakpoints.values.md]);

  const handleDrawerToggle = () => {
    setSidebarOpen(!sidebarOpen);
  };
  return (


    <Box sx={{ display: 'flex', height: '100vh', backgroundColor: '#F6F6F6', overflow: 'hidden' }}>
      <Sidebar open={sidebarOpen} onClose={handleDrawerToggle} isMobile={isMobile} drawerWidth={drawerWidth} />

      <Box
        sx={{
          flexGrow: 1,
          display: 'flex',
          flexDirection: 'column',
          width: { xs: '100%', sm: sidebarOpen ? `calc(100% - ${drawerWidth}px)` : '100%' },
          marginLeft: 0,
          transition: theme.transitions.create(['width'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
        }}
      >

        <KitchPlusAppBar onDrawerToggle={handleDrawerToggle} sidebarOpen={sidebarOpen} isMobile={isMobile} />

        <Box sx={{
          flexGrow: 1,
          width: sidebarOpen ? 'calc(100% - 20px)' : '100%',
          pt: { xs: 0.5, sm: 1 },
          mt: { xs: 1, sm: 0 },
          overflowY: 'auto',
          pl: { xs: 0, sm: 1 },
          pr: { xs: 1, sm: 1 },
          pb: { xs: 1, sm: 2 },
          scrollbarWidth: 'none',
          '&::-webkit-scrollbar': { display: 'none' },
          transition: theme.transitions.create(['margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
        }}>
          {isLoading ? (
            <>
              <Skeleton variant="rectangular" height={50} sx={{ mb: 2 }} />
              <Skeleton variant="rectangular" height={200} sx={{ mb: 2 }} />
              <Skeleton variant="rectangular" height={300} sx={{ mb: 2 }} />
            </>
          ) : (
            <AnalyticsContect />
          )}
        </Box>
      </Box>
    </Box>
  );
};

export default AnalyticsPage;