import React, { useState } from 'react';
import {
    Box, Typography, Stack, Button, useTheme, TextField, Radio,
    RadioGroup,
    FormControlLabel,
} from '@mui/material';
import ConfirmationDialog from './ConfirmationDialog'; // ✅ استدعاء المودال المنفصل

const Expansion = ({ currentStepIndex = 0, onNext, onBack }) => {
    const theme = useTheme();
    const [openModal, setOpenModal] = useState(false);

    const handleOpenModal = () => setOpenModal(true);
    const handleCloseModal = () => setOpenModal(false);
    const handleConfirmNext = () => {
        handleCloseModal();
        onNext();
    };
    return (
        <Box
            sx={{
                height: { xs: '90%', sm: '100%', md: '92.5%' },
                backgroundColor: '#FFFFFF',
                px: 4,
                pt: 5,
                pb: 23.2,
                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'
                        }
                    }}
                >
                    Expansion & Future Cooperation
                </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>
                <Box>
                    <Typography
                        variant="body2"
                        sx={{ fontWeight: 500, fontSize: '16px', mb: 1.5, color: '#191635' }}
                    >
                      Hosting Multiple Cloud Kitchens
                    </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>


                {/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
                {[
                    { label: 'Future Kitchen Plans', placeholder: '20' },
                ].map((field, index) => (
                    <Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1, mt: 3 }}>
                        <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={{ mt: 2 }}>
                    <Typography
                        variant="body2"
                        sx={{ fontWeight: 500, fontSize: '16px', mb: 1.5, mt: 2, color: '#191635' }}
                    >
                       Partnership & Support
                    </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>

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

            {/* ✅ Confirmation Modal */}
            <ConfirmationDialog
                open={openModal}
                onClose={handleCloseModal}
                onConfirm={handleConfirmNext}
                title="Confirm Submission"
                description="Are you sure you want to proceed to the next step?"
            />
        </Box>
    );
};

export default Expansion;