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

const RequiredEquipments = ({ currentStepIndex = 0, onNext, onBack, formData, updateFormData }) => {
    const theme = useTheme();
    const [errors, setErrors] = useState({});

    // تعيين القيمة الافتراضية لـ needSpecializedEquipment إذا غير موجودة
    useEffect(() => {
        if (!formData.needSpecializedEquipment) {
            updateFormData({ needSpecializedEquipment: 'no' });
        }
    }, [formData.needSpecializedEquipment, updateFormData]);

    // التعامل مع تغير القيمة النصية للمعدات العامة
    const handleEquipmentChange = (e) => {
        updateFormData({ equipment: e.target.value });
    };


    const handleNeedSpecializedChange = (e) => {
        updateFormData({ needSpecializedEquipment: e.target.value });
    };

    // التعامل مع القيمة النصية للمعدات المتخصصة
    const handleSpecializedEquipmentChange = (e) => {
        updateFormData({ specialized_equipment: e.target.value });
    };

    // دالة التحقق من صحة الحقول
    const validate = () => {
        let tempErrors = {};

        // if (!formData.equipment || formData.equipment.trim() === '') {
        //     tempErrors.equipment = 'Equipment is required';
        // }
        // if (!formData.needSpecializedEquipment || (formData.needSpecializedEquipment !== 'yes' && formData.needSpecializedEquipment !== 'no')) {
        //     tempErrors.needSpecializedEquipment = 'Please select Yes or No';
        // }
        if (formData.needSpecializedEquipment === 'yes' && (!formData.specialized_equipment || formData.specialized_equipment.trim() === '')) {
            tempErrors.specialized_equipment = 'Please specify specialized equipments';
        }

        setErrors(tempErrors);
        return Object.keys(tempErrors).length === 0;
    };

    // دالة معالجة الضغط على زر Next مع تحقق الفالديشن
    const handleNext = () => {
        if (validate()) {
            onNext();
        }
    };

    return (
        <Box
            sx={{
                height: { xs: '90%', sm: '100%', md: 740 },
                backgroundColor: '#FFFFFF',
                px: 4,
                pt: { xs: 4, md: 4.5 },
                pb: 10,
                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'
                        }
                    }}
                >
                    Required Equipments
                </Typography>

                <Box sx={{ width: '70%' }}>
                    <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>

                {/* Equipment Input */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
                        Equipment
                    </Typography>
                    <TextField
                        placeholder="Ovens  Refrigerators  Pizza Machines  |"
                        variant="outlined"
                        fullWidth
                        value={formData.equipment || ''}
                        onChange={handleEquipmentChange}
                        error={!!errors.equipment}
                        helperText={errors.equipment}
                        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>

                {/* Need Specialized Equipment */}
                <Box>
                    <Typography
                        variant="body2"
                        sx={{ fontWeight: 500, fontSize: '16px', mb: 1, mt: 2, color: '#191635' }}
                    >
                        Need Specialized Equipment
                    </Typography>
                    <RadioGroup
                        row
                        name="needSpecializedEquipment"
                        value={formData.needSpecializedEquipment || 'no'}
                        onChange={handleNeedSpecializedChange}
                    >
                        <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={{
                                        pl: 5,
                                        color: 'rgba(150, 155, 167, 0.6)',
                                        transform: 'scale(0.85)',
                                        '&.Mui-checked': {
                                            color: theme.palette.primary.main
                                        }
                                    }}
                                />
                            }
                            label="No"
                        />
                    </RadioGroup>
                    {errors.needSpecializedEquipment && (
                        <Typography color="error" variant="caption" sx={{ mt: 0.5 }}>
                            {errors.needSpecializedEquipment}
                        </Typography>
                    )}
                </Box>

                {/* Specialized Equipments For Food Preparation */}
                {formData.needSpecializedEquipment === 'yes' && (
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                        <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
                            Specialized Equipments For Food Preparation
                        </Typography>
                        <TextField
                            placeholder="Knife  Spoon  Handle  |"
                            variant="outlined"
                            fullWidth
                            multiline
                            minRows={3}
                            value={formData.specialized_equipment || ''}
                            onChange={handleSpecializedEquipmentChange}
                            error={!!errors.specialized_equipment}
                            helperText={errors.specialized_equipment
}
                            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>
                )}

                {/* Buttons */}
                <Box sx={{ pt: 2 }}>
                    <Button
                        variant="contained"
                        fullWidth
                        onClick={handleNext}
                        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>

                    <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: 'block', md: 'none' },
                            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 RequiredEquipments;