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

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

    const [selectedDays, setSelectedDays] = useState([]);

    const handleCheckboxChange = (day) => {
        setSelectedDays((prev) =>
            prev.includes(day)
                ? prev.filter((d) => d !== day)
                : [...prev, day]
        );
    };

    const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

    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'
                        }
                    }}
                >
                    Business Hours
                </Typography>

                <Box sx={{ width: '70%' }}>
                    <Typography
                        fontSize="16px"
                        color="text.secondary"
                        fontWeight={500}
                        sx={{ pb: 1 }}
                    >
                        Enter your business hours to proceed to registration of your own restaurant on this platform
                    </Typography>
                </Box>

                {/* Operational Hours Input */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
                        Operational Hours
                    </Typography>
                    <TextField
                        placeholder="16 hours"
                        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>

                {/* Checkboxes for Days of the Week */}
                <Box sx={{ mt: 2 }}>
                    <Typography
                        variant="body2"
                        color="black"
                        sx={{ fontWeight: '500', fontSize: '16px', mb: 1 }}
                    >
                        Closed Days
                    </Typography>
                    <FormGroup
                        row
                        sx={{
                            display: 'flex',
                            flexWrap: 'wrap',
                            gap: 1,
                        }}
                    >
                        {days.map((day) => {
                            const isChecked = selectedDays.includes(day);
                            return (
                                <FormControlLabel
                                    key={day}
                                    control={
                                        <Checkbox
                                            checked={isChecked}
                                            onChange={() => handleCheckboxChange(day)}
                                            sx={{
                                                transform: 'scale(1.5)',
                                                color: '#F0EDED',
                                                '&.Mui-checked': {
                                                    color: '#FF914D',
                                                },
                                            }}
                                        />
                                    }
                                    label={
                                        <Typography
                                            sx={{
                                                color: isChecked ? '#e57f3f' : '#969BA7',
                                                fontWeight: 500
                                            }}
                                        >
                                            {day}
                                        </Typography>
                                    }
                                    sx={{
                                        m: 0,
                                        width: { xs: '45%', sm: '30%', md: '22%' },
                                    }}
                                />
                            );
                        })}
                    </FormGroup>
                </Box>

                {/* Next Button */}
 
                <Box sx={{ pt: 2 }}>
                                     <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: 'block', 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 BusinessHours;