import React, { useState, useEffect } from 'react';
import { Box, useTheme, useMediaQuery } from '@mui/material';
import KitchPlusAppBar from '../AppBar';
import Sidebar from '../SideHome';
import PostSubmission from './contcet/PostSubmission';
import CloudKitchenHosting from './contcet/CloudKitchenHosting';
import Infrastructure from './contcet/Infrastructure';
import RstaurantOperations from './contcet/RstaurantOperations';
import Facilitation from './contcet/Facilitation';
import Expansion from './contcet/Expansion';

import SideProfile from './SideProfile';

const drawerWidth = 230;

const HostKitchen = () => {
  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 = [
    <CloudKitchenHosting onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <RstaurantOperations onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <Infrastructure onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <Facilitation onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
    <Expansion onNext={() => setCurrentStep(currentStep + 1)} 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 sx={{
          flexGrow: 1,
          width: sidebarOpen ? 'calc(100% - 20px)' : '100%',
          pt: { xs: 0.5, sm: 1 },
          mt: { xs: 1, sm: 2 },
          overflowY: 'auto',
          pl: { xs: 0, sm: 2 },
          pr: { xs: 1, sm: 2 },
          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,
          }),
        }}>
          <PostSubmission />
        </Box> */}
        <Box>
          <Box sx={{
            display: 'flex', height: '100vh',
            overflowY: 'auto',
            scrollbarWidth: 'none',
            '&::-webkit-scrollbar': {
              display: 'none',
            },
          }}>
            <Box sx={{
              height: '100vh',
              ml: 3,
              mb: 2,
              width: { xs: '30%', md: '30%' },
              display: { xs: 'none', sm: 'block', 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: 1, md: 3 },
              flexGrow: 1,
              height: '100vh',
              pr: { sm: 2, md: 1 },
              pt: 3,
              mb: { sm: 20 },
              width: { xs: '50%', 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 HostKitchen;