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

const ContactInformation = ({ formData, updateFormData, onNext, onBack }) => {
  const theme = useTheme();
  const [errors, setErrors] = useState({});

  const handleChange = (field, value) => {
    updateFormData({ [field]: value });
    setErrors(prev => ({ ...prev, [field]: '' })); // إزالة الخطأ عند التعديل
  };

  const validateFields = () => {
    const newErrors = {};
    if (!formData.Phone || formData.Phone.trim() === '') {
      newErrors.Phone = 'Phone number is required';
    } else if (!/^\+?\d{7,15}$/.test(formData.Phone.trim())) {
      newErrors.Phone = 'Invalid phone number';
    }

    if (!formData.Email || formData.Email.trim() === '') {
      newErrors.Email = 'Email is required';
    } else if (!/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(formData.Email.trim())) {
      newErrors.Email = 'Invalid Email address';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleNextClick = () => {
    if (validateFields()) {
      onNext();
    }
  };

  return (
    <Box
      sx={{
        height: { xs: '90%', sm: '100%', md: 740 },
        backgroundColor: '#FFFFFF',
        px: 4,
        pt: { xs: 4, md: 14.5 },
        pb: { xs: 20, sm: 20, md: 0 },
        display: 'block',
        borderRadius: 2,
        boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
        position: 'relative',
        width: { xs: '85%', sm: '90%' },
      }}
    >
      <Stack spacing={1.5}>
        <Typography fontWeight={700} sx={{ fontSize: { xs: '1.8rem', sm: '2rem', md: '2.2rem' } }}>
          Contact Information
        </Typography>

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

        {/* Phone Number Input */}
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
            Phone Number
          </Typography>
          <TextField
            placeholder="03055376864"
            variant="outlined"
            fullWidth
            value={formData.Phone || ''}
            onChange={(e) => handleChange('Phone', e.target.value)}
            error={!!errors.Phone}
            helperText={errors.Phone || ' '}
            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>

        {/* Email Input */}
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
            Email
          </Typography>
          <TextField
            placeholder="example@example.com"
            type="Email"
            variant="outlined"
            fullWidth
            value={formData.Email || ''}
            onChange={(e) => handleChange('Email', e.target.value)}
            error={!!errors.Email}
            helperText={errors.Email || ' '}
            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>

        {/* Next & Back Buttons */}
        <Box sx={{ pt: 2 }}>
          <Button
            variant="contained"
            fullWidth
            onClick={handleNextClick}
            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>
    </Box>
  );
};

export default ContactInformation;