import React from 'react';
import {
  Box, Typography, Stack, Button, useTheme, TextField, Radio,
  RadioGroup,
  FormControlLabel,
} from '@mui/material';

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

  return (
    <Box
      sx={{
        height: { xs: '90%', sm: '100%', md: '92.5%' },
        backgroundColor: '#FFFFFF',
        px: 4,
        pt: 5,
        pb: 11,
        display: 'block',
        borderRadius: 2,
        boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
        position: 'relative',
        width: { xs: '85%', sm: '90%' },
      }}
    >
      <Stack spacing={2.5}>
        <Typography
          fontWeight={700}
          sx={{
            fontSize: {
              xs: '1.8rem',
              sm: '2rem',
              md: '2.2rem'
            }
          }}
        >
          Cloud Kitchen Project
        </Typography>
        <Box sx={{ width: '80%' }}>
          <Typography
            fontSize="16px"
            color="text.secondary"
            fontWeight={500}
            sx={{ pb: 1 }}
          >
            Enter your basic information to proceed to registration of your own restaurant on this platform
          </Typography>
        </Box>

        {[
          { label: 'Restaurant Name', placeholder: 'Al-Baik Foods' },
          { label: 'Cuisine Type', placeholder: 'Italian, Chinese, etc.' },
        ].map((field, index) => (
          <Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
            <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
              {field.label}
            </Typography>
            <TextField
              placeholder={field.placeholder}
              variant="outlined"
              fullWidth
              sx={{
                '& input': { fontWeight: 500, fontSize: '15px' },
                '& input::placeholder': { color: '#969BA7' },
                '& .MuiOutlinedInput-root': {
                  borderRadius: '10px',
                  transition: '0.3s',
                  '&.Mui-focused fieldset': {
                    borderColor: theme.palette.primary.main,
                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
                  }
                },
                '& .MuiOutlinedInput-root.Mui-focused': {
                  borderColor: '#3f51b5',
                  boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
                }
              }}
            />
          </Box>
        ))}


        <Box sx={{}}>
          <Typography
            variant="body2"
            sx={{ fontWeight: 500, fontSize: '16px', mb: 1, mt: 2, color: '#191635' }}
          >
            Existing Brand
          </Typography>
          <RadioGroup row name="additionalFacilities">
            <FormControlLabel
              value="yes"
              control={
                <Radio
                  sx={{
                    color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
                    transform: 'scale(0.85)',          // تقليل حجم الزر لتقليل "سُمك الحواف"
                    '&.Mui-checked': {
                      color: theme.palette.primary.main
                    }
                  }}
                />
              }
              label="Yes"
            />
            <FormControlLabel
              value="no"
              control={
                <Radio
                  sx={{
                    color: 'rgba(150, 155, 167, 0.6)',
                    transform: 'scale(0.85)',
                    '&.Mui-checked': {
                      color: theme.palette.primary.main
                    }
                  }}
                />
              }
              label="No"
            />
          </RadioGroup>

        </Box>

        {/* Further Brand Details Input */}
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
            Further Brand Details
          </Typography>
          <TextField
            placeholder="We need Pizza Machine"
            variant="outlined"
            fullWidth
            multiline
            minRows={3}
            sx={{
              '& .MuiInputBase-root': {
                fontWeight: 500,
                fontSize: '15px',
                alignItems: 'start',
              },
              '& textarea::placeholder': {
                color: '#969BA7',
              },
              '& .MuiOutlinedInput-root': {
                borderRadius: '10px',
                transition: '0.3s',
                '&.Mui-focused fieldset': {
                  borderColor: theme.palette.primary.main,
                  boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
                },
              },
              '& .MuiOutlinedInput-root.Mui-focused': {
                borderColor: '#3f51b5',
                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
              }
            }}
          />
        </Box>

        {[
          { label: 'Age Group', placeholder: '15 - 75' },
          { label: 'Location', placeholder: 'Street 123, Jordan' },
        ].map((field, index) => (
          <Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
            <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
              {field.label}
            </Typography>
            <TextField
              placeholder={field.placeholder}
              variant="outlined"
              fullWidth
              sx={{
                '& input': { fontWeight: 500, fontSize: '15px' },
                '& input::placeholder': { color: '#969BA7' },
                '& .MuiOutlinedInput-root': {
                  borderRadius: '10px',
                  transition: '0.3s',
                  '&.Mui-focused fieldset': {
                    borderColor: theme.palette.primary.main,
                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
                  }
                },
                '& .MuiOutlinedInput-root.Mui-focused': {
                  borderColor: '#3f51b5',
                  boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
                }
              }}
            />
          </Box>
        ))}


        <Box sx={{}}>
          <Typography
            variant="body2"
            sx={{ fontWeight: 500, fontSize: '16px', mb: 1, mt: 2, color: '#191635' }}
          >
            Menu Status
          </Typography>
          <RadioGroup row name="additionalFacilities">
            <FormControlLabel
              value="yes"
              control={
                <Radio
                  sx={{
                    color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
                    transform: 'scale(0.85)',          // تقليل حجم الزر لتقليل "سُمك الحواف"
                    '&.Mui-checked': {
                      color: theme.palette.primary.main
                    }
                  }}
                />
              }
              label="Yes"
            />
            <FormControlLabel
              value="no"
              control={
                <Radio
                  sx={{
                    color: 'rgba(150, 155, 167, 0.6)',
                    transform: 'scale(0.85)',
                    '&.Mui-checked': {
                      color: theme.palette.primary.main
                    }
                  }}
                />
              }
              label="No"
            />
          </RadioGroup>

        </Box>

        {/* Further Brand Details Input */}
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
            Need Help
          </Typography>
          <TextField
            placeholder="Write here..."
            variant="outlined"
            fullWidth
            multiline
            minRows={3}
            sx={{
              '& .MuiInputBase-root': {
                fontWeight: 500,
                fontSize: '15px',
                alignItems: 'start',
              },
              '& textarea::placeholder': {
                color: '#969BA7',
              },
              '& .MuiOutlinedInput-root': {
                borderRadius: '10px',
                transition: '0.3s',
                '&.Mui-focused fieldset': {
                  borderColor: theme.palette.primary.main,
                  boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
                },
              },
              '& .MuiOutlinedInput-root.Mui-focused': {
                borderColor: '#3f51b5',
                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
              }
            }}
          />
        </Box>

        <Box sx={{ pt: 2.8 }}>
          <Button
            variant="contained"
            fullWidth
            onClick={onNext}
            sx={{
              fontFamily: 'PlusJakartaSans',
              fontWeight: 600,
              fontSize: { xs: '14px', sm: '16px' },
              height: { xs: '45px', sm: '52px' },
              borderRadius: '50px',
              textTransform: 'none',
              color: 'white',
              backgroundColor: theme.palette.primary.main,
              '&:hover': {
                backgroundColor: theme.palette.primary.hover,
              },
            }}
          >
            Next
          </Button>

          {/* زر Back تحت زر Next */}
          <Button
            variant="outlined"
            fullWidth
            onClick={onBack}
            sx={{
              mt: 2,
              fontFamily: 'PlusJakartaSans',
              fontWeight: 600,
              fontSize: { xs: '14px', sm: '16px' },
              height: { xs: '45px', sm: '52px' },
              borderRadius: '50px',
              textTransform: 'none',
              display: { xs: 'block', sm: 'none', md: 'none' }, // يظهر فقط في xs و sm
              borderColor: theme.palette.primary.main,
              color: theme.palette.primary.main,
              '&:hover': {
                backgroundColor: theme.palette.primary.light,
                borderColor: theme.palette.primary.main,
              },
            }}
          >
            Back
          </Button>
        </Box>

      </Stack>
    </Box>
  );
};

export default CloudKitchenProject;