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

const AdditionalNotes = ({ currentStepIndex = 0, onNext, onBack }) => {
    const theme = useTheme();
    const navigate = useNavigate();
    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: 740 },
                backgroundColor: '#FFFFFF',
                px: 4,
                pt: { xs: 4, md: 11 },
                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' }
                }}>
                    Additional Notes
                </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>

                {/*Notes / Concerns Input */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
                        Notes / Concerns
                    </Typography>
                    <TextField
                        placeholder="Write for us"
                        variant="outlined"
                        fullWidth
                        multiline
                        minRows={7}
                        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={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>

                    <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>

            {/* ✅ 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 AdditionalNotes;