import React, { useState, useEffect } from 'react';
import { Box, useTheme, useMediaQuery } from '@mui/material';
import KitchPlusAppBar from '../AppBar';
import Sidebar from '../SideHome';
import LoginRestaurant from './contcet/LoginRestaurant';
import BasicInformation from './contcet/BasicInformation';
import ContactInformation from './contcet/ContactInformation';
import BusinessHours from './contcet/BusinessHours';
import UploadMenu from './contcet/UploadMenu';
import Equipment from './contcet/Equipment';
import TypeOfRestaurant from './contcet/TypeOfRestaurant';
import OperationalCapacity from './contcet/OperationalCapacity';
import UploadPhotos from './contcet/UploadPhotos';
import SideProfile from './SideProfile';

const drawerWidth = 230;

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

  // ⬇️ إدارة الخطوة الحالية
  const [currentStep, setCurrentStep] = useState(0);

  const steps = [
    <BasicInformation onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <ContactInformation onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <BusinessHours onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <UploadMenu onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <Equipment onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <OperationalCapacity onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <TypeOfRestaurant onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <UploadPhotos onBack={() => setCurrentStep(currentStep - 1)} />,
  ];

  useEffect(() => {
    const checkProducts = async () => {
      const productsExist = await checkIfProductsExist();
      setHasProducts(productsExist);
    };
    checkProducts();
  }, []);

  const checkIfProductsExist = async () => {
    return false;
  };

  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: '100%', md: '100%' },
        marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 },
        transition: theme.transitions.create(['width'], {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.leavingScreen,
        }),
      }}>
        <KitchPlusAppBar
          onDrawerToggle={handleDrawerToggle}
          sidebarOpen={sidebarOpen}
          isMobile={isMobile}
        />
        <Box>
          <Box sx={{
            display: 'flex', height: '100vh',
 
          }}>
            <Box sx={{
              height: '100vh',
              ml: 3,
              mb: 2,
              width: { md: '30%' },
                   display: { xs: 'none', sm: 'none', md: 'block' },
                 overflowY: 'auto',
                           scrollbarWidth: 'none',
            '&::-webkit-scrollbar': {
              display: 'none',
            },
            }}>

              <Box sx={{
                minHeight: '100%', pb: 15, pt: 3,
           
              }}>
                <SideProfile
                  currentStepIndex={currentStep}
                  onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
                />


              </Box>
            </Box>

            <Box sx={{
              ml: { xs: 2, md: 3 },
              
              flexGrow: 1,
              height: '100vh',
              pr: { sm: 2, md: 1 },
          
              pt: 3,
              mb: { sm: 20 },
              width: { md: '60%' },     display: { xs: 'block', sm: 'block', md: 'block' },
                 overflowY: 'auto',
                           scrollbarWidth: 'none',
            '&::-webkit-scrollbar': {
              display: 'none',
            },
            }}>
              <Box sx={{
                minHeight: '100%', pb: 18, 
           
              }}>
                {steps[currentStep]}
              </Box>
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

export default RestaurantProfile;