import React, { useState } from 'react';
import { Box, Stack ,useTheme} from '@mui/material';
import Side from './Side';
import EmailInputSection from './EmailInputSection';
import OtpVerification from './OtpVerification';
import NewPassword from './NewPassword';
import Congratulations from './Congratulations';



const ForgetForm = () => {
  const [emailOrPhone, setEmailOrPhone] = useState('');
  const [currentSlide, setCurrentSlide] = useState(0);
    const theme = useTheme();
  const slides = [
    { component: EmailInputSection, title: "Email Verification" },
    { component: OtpVerification, title: "OTP Verification" },
    { component: NewPassword, title: "New Password" },
    { component: Congratulations, title: "Congratulations" }
  ];

  const handleNext = () => {
    if (currentSlide < slides.length - 1) {
      setCurrentSlide(prev => prev + 1);
    }
  };

  const handleBack = () => {
    if (currentSlide > 0) {
      setCurrentSlide(prev => prev - 1);
    }
  };

  const CurrentComponent = slides[currentSlide].component;

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: { xs: 'column', sm: 'row' },
        minHeight: '100vh',
        backgroundColor: '#fff',
       
      }}
    >
      {/* ✅ Sidebar يظهر فقط من sm+ */}
      <Box sx={{ width: { sm: '40%', xs: '0%' }, display: { xs: 'none', sm: 'block' } }}>
        <Side currentStepIndex={currentSlide} onNext={handleNext} onBack={handleBack} />
      </Box>

      {/* ✅ Form */}
      <Box
        sx={{
          width: { sm: '60%' },
          minHeight: { xs: '100vh', sm: '130vh', md: '90vh' },
          position: 'relative',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'flex-start',
          paddingTop: { xs: 2, sm: 4 },
          paddingLeft: { xs: 2, sm: 4 },
          backgroundColor: '#fff',
        }}
      >
        <Box
          sx={{
            width: '100%',
            maxWidth: 686,
            pr: { xs: 3, sm: 2, md: 1 },
            pt: { xs: 2, sm: 4, md: 1 },
          }}
        >
          <Stack spacing={2} alignItems="flex-start">


            {/* إظهار المكون الحالي فقط */}
            <CurrentComponent
              emailOrPhone={emailOrPhone}
              setEmailOrPhone={setEmailOrPhone}
            />


          </Stack>
        </Box>

        {/* ✅ مؤشر الشرائح السفلي */}
        <Box
          sx={{
            position: { xs: 'absolute', sm: 'absolute' },
            bottom: { xs: '5%', sm: '-1%', md: '2%' },
            left: '50%',
            transform: 'translateX(-50%)',
            display: 'flex',
            gap: 1,
            width: '80%',
            maxWidth: 600,
            justifyContent: 'center',
            height: {
              xs: 3,
              sm: 5,
              md: 6,
            },
          }}
        >
          {slides.map((_, index) => (
            <Box
              key={index}
              sx={{
                width: '100vh',
                height: 5,
                bgcolor: index === currentSlide ?  theme.palette.primary.main : 'rgba(0, 0, 0, 0.2)',
                borderRadius: 2,
                cursor: 'pointer',
                transition: 'background-color 0.3s',
              }}
            // onClick={() => setCurrentSlide(index)} // يمكنك تفعيلها لاحقًا
            />
          ))}
        </Box>
      </Box>
    </Box>
  );
};

export default ForgetForm;