import React from 'react';
import { Box, Typography, Stack, Button, useTheme } from '@mui/material';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';

const steps = [
  { title: 'Cloud Kitchen Project', icon: '/images/createProfile/BasicInf.png' },
  { title: 'OperationalDetails', icon: '/images/icons/rocket.png'  },
  { title: 'Required Equipments', icon: '/images/createProfile/equipment.png'},
  { title: 'Visual Identity', icon: '/images/createProfile/Vector.png' },
  { title: 'Budget & Expansion', icon: '/images/createProfile/Expansion.png' },
  { title: 'Additional Notes & Concerns', icon: '/images/createProfile/Group.png' },
  { title: 'Submit & Confirmation', icon: '/images/createProfile/Confirmation.png' },
];

const SideProfile = ({ currentStepIndex = 0, onBack }) => {
  const theme = useTheme();

  return (
    <Box
      sx={{
        height: '100%',
        backgroundColor: '#FFFFFF',
        px: 3,
        py: 4,
        display: { xs: 'none', md: 'block' },
        borderRadius: 2,
        boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
        position: 'relative',
      }}
    >
      {/* العنوان الرئيسي */}
      <Typography fontSize="18px" fontWeight={600} mb={1.2}>
        Create Your Restaurant
      </Typography>
      <Typography variant="body2" color="text.secondary" mb={3}>
       Complete this process to register your restaurant on our amazing food platform.
      </Typography>

      {/* الخطوات */}
      <Stack spacing={3} sx={{ ml: 1, position: 'relative', pb: 12 }}>
        {steps.map((step, index) => (
          <Box key={index} position="relative">
            {/* الخط الرأسي بين الدوائر */}
            {index !== steps.length - 1 && (
              <Box
                sx={{
                  position: 'absolute',
                  top: '28px',
                  left: '23px',
                  width: '2px',
                  height: 'calc(100% - 5px)',
                  backgroundColor: '#E0E0E0',
                  zIndex: 0,
                }}
              />
            )}

            {/* محتوى كل خطوة */}
            <Box display="flex" alignItems="center" gap={2}>
              {/* الدائرة بالأيقونة */}
              <Box
                sx={{
                  position: 'relative',
                  width: 45,
                  height: 45,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  zIndex: 1,
                }}
              >
                {/* الدائرة الخلفية - تظهر دائمًا */}
                <Box
                  sx={{
                    position: 'absolute',
                    backgroundImage:
                      index <= currentStepIndex
                        ? 'linear-gradient(0deg, #FF914D, #F3F3F3)'
                        : 'linear-gradient(0deg, #DFDFDF, #F0F0F0)',
                    width: 48,
                    height: 48,
                    borderRadius: '50%',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                    zIndex: 0,
                  }}
                />

                {/* الدائرة الأمامية بالأيقونة */}
                <Box
                  sx={{
                    width: 40,
                    height: 40,
                    borderRadius: '50%',
                    backgroundColor: '#FFF',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    zIndex: 1,
                  }}
                >
                  <img
                    src={step.icon}
                    alt={step.title}
                    style={{
                      width: 20,
                      height: 20,
                      marginLeft: step.title === 'Required Equipments' ? 7 : 0,
                      objectFit: 'contain',
                    }}
                  />
                </Box>
              </Box>

              {/* العنوان */}
              <Typography
                sx={{
                  fontSize: '16px',
                  fontWeight: 600,
                  color: '#000',
                }}
              >
                {step.title}
              </Typography>
            </Box>
          </Box>
        ))}
      </Stack>

      {/* زر الرجوع */}
      <Box
        sx={{
          position: 'absolute',
          bottom: 16,
          right: 24,
        }}
      >
        <Button
          variant="text"
          startIcon={<ArrowBackIosIcon sx={{ fontSize: 20 }} />}
          onClick={onBack}
          disabled={currentStepIndex === 0}
          sx={{
            textTransform: 'none',
            fontSize: '20px',
            color: currentStepIndex === 0 ? '#C2C2C2' : '#6B7283',
            '&:hover': {
              backgroundColor: 'transparent',
              color: theme.palette.primary.main,
            },
          }}
        >
          Back
        </Button>
      </Box>
    </Box>
  );
};

export default SideProfile;