import React, { useState } from 'react';
import {
  Box,
  Typography,
  Stack,
  Button,
  useTheme,
  TextField
} from '@mui/material';
import ConfirmationDialog from './ConfirmationDialog';
import { useLocation, useNavigate } from 'react-router-dom';

const AdditionalNotes = ({ currentStepIndex = 0, onNext, onBack, formData, updateFormData, onSubmit }) => {
  const theme = useTheme();
  const [openModal, setOpenModal] = useState(false);
  const [loading, setLoading] = useState(false);

  const navigate = useNavigate();
  const location = useLocation();

  const handleOpenModal = () => setOpenModal(true);
  const handleCloseModal = () => setOpenModal(false);

  const handleNotesChange = (e) => {
    updateFormData({ need_help: e.target.value });
  };

  const handleConfirmSubmit = async () => {
    setLoading(true);
    try {
      if (onSubmit) {
        await onSubmit();
      }
      setOpenModal(false);

      // التوجيه فقط إذا كانت الصفحة هي /create-restaurant
      if (location.pathname === '/create-restaurant') {
        navigate('/restaurant');
      }
      // إذا كانت من رابط آخر مثل /create-kitchen لا نفعل شيئًا
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  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>

        <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}
            value={formData.need_help || ''}
            onChange={handleNotesChange}
            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>

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

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

export default AdditionalNotes;