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

const Facilitation = ({ 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: 5.8,
                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'
                        }
                    }}
                >
                    Facilitation & 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, color: '#191635' }}
                    >
                        Additional Services Provided
                    </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>

                {/* Additional Services Input */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
                        Additional Services
                    </Typography>
                    <TextField
                        placeholder={`1. Marketing\n2. Logistics\n3. Staff Training`}
                        variant="outlined"
                        fullWidth
                        multiline
                        minRows={4}
                        sx={{
                            '& .MuiInputBase-root': {
                                fontWeight: 500,
                                fontSize: '15px',
                                alignItems: 'start',
                            },
                            '& textarea::placeholder': {
                                color: '#969BA7',
                                whiteSpace: 'pre-line', // لعرض الأسطر بشكل صحيح
                            },
                            '& .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, color: '#191635' }}
                    >
                        Ventilation and Cooling System
                    </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: 'Working Hours', placeholder: '8 hours' },
                ].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={{ pt: 1 }}>
                    <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 Facilitation;