import React, { useState, useEffect } from 'react';
import {
    Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
    FormControl, InputLabel, Select, MenuItem
} from '@mui/material';
import type { DistribuidorDto } from '../../../models/dtos/Distribucion/DistribuidorDto';
import type { CreateDistribuidorDto } from '../../../models/dtos/Distribucion/CreateDistribuidorDto';
import type { UpdateDistribuidorDto } from '../../../models/dtos/Distribucion/UpdateDistribuidorDto';
import type { ZonaDto } from '../../../models/dtos/Zonas/ZonaDto';
import zonaService from '../../../services/Distribucion/zonaService';

const modalStyle = {
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: { xs: '95%', sm: '80%', md: '600px' },
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
    maxHeight: '90vh',
    overflowY: 'auto'
};

interface DistribuidorFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateDistribuidorDto | UpdateDistribuidorDto, id?: number) => Promise<void>;
  initialData?: DistribuidorDto | null;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const DistribuidorFormModal: React.FC<DistribuidorFormModalProps> = ({
  open,
  onClose,
  onSubmit,
  initialData,
  errorMessage,
  clearErrorMessage
}) => {
  const [nombre, setNombre] = useState('');
  const [contacto, setContacto] = useState('');
  const [nroDoc, setNroDoc] = useState('');
  const [idZona, setIdZona] = useState<number | string>(''); // Puede ser string vacío
  const [calle, setCalle] = useState('');
  const [numero, setNumero] = useState('');
  const [piso, setPiso] = useState('');
  const [depto, setDepto] = useState('');
  const [telefono, setTelefono] = useState('');
  const [email, setEmail] = useState('');
  const [localidad, setLocalidad] = useState('');

  const [zonas, setZonas] = useState<ZonaDto[]>([]);
  const [loading, setLoading] = useState(false);
  const [loadingZonas, setLoadingZonas] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  const isEditing = Boolean(initialData);

  useEffect(() => {
    const fetchZonas = async () => {
        setLoadingZonas(true);
        try {
            const data = await zonaService.getAllZonas(); // Solo activas por defecto
            setZonas(data);
        } catch (error) {
            console.error("Error al cargar zonas", error);
            setLocalErrors(prev => ({...prev, zonas: 'Error al cargar zonas.'}));
        } finally {
            setLoadingZonas(false);
        }
    };

    if (open) {
        fetchZonas();
        setNombre(initialData?.nombre || '');
        setContacto(initialData?.contacto || '');
        setNroDoc(initialData?.nroDoc || '');
        setIdZona(initialData?.idZona || '');
        setCalle(initialData?.calle || '');
        setNumero(initialData?.numero || '');
        setPiso(initialData?.piso || '');
        setDepto(initialData?.depto || '');
        setTelefono(initialData?.telefono || '');
        setEmail(initialData?.email || '');
        setLocalidad(initialData?.localidad || '');
        setLocalErrors({});
        clearErrorMessage();
    }
  }, [open, initialData, clearErrorMessage]);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!nombre.trim()) errors.nombre = 'El nombre es obligatorio.';
    if (!nroDoc.trim()) errors.nroDoc = 'El Nro. Documento es obligatorio.';
    else if (nroDoc.trim().length > 11) errors.nroDoc = 'El Nro. Documento no debe exceder los 11 caracteres.';

    if (email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        errors.email = 'Formato de email inválido.';
    }
    // No es obligatorio que IdZona tenga valor
    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleInputChange = (fieldName: string) => {
    if (localErrors[fieldName]) {
        setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
    }
    if (errorMessage) clearErrorMessage();
  };

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    clearErrorMessage();
    if (!validate()) return;

    setLoading(true);
    try {
      const dataToSubmit = {
          nombre,
          contacto: contacto || undefined,
          nroDoc,
          idZona: idZona ? Number(idZona) : null, // Enviar null si está vacío
          calle: calle || undefined,
          numero: numero || undefined,
          piso: piso || undefined,
          depto: depto || undefined,
          telefono: telefono || undefined,
          email: email || undefined,
          localidad: localidad || undefined,
      };

      if (isEditing && initialData) {
        await onSubmit(dataToSubmit as UpdateDistribuidorDto, initialData.idDistribuidor);
      } else {
        await onSubmit(dataToSubmit as CreateDistribuidorDto);
      }
      onClose();
    } catch (error: any) {
      console.error("Error en submit de DistribuidorFormModal:", error);
    } finally {
       setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>
          {isEditing ? 'Editar Distribuidor' : 'Agregar Nuevo Distribuidor'}
        </Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
            {/* Usando Box con Flexbox para layout de dos columnas responsivo */}
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
                    <TextField label="Nombre Distribuidor" value={nombre} required
                        onChange={(e) => {setNombre(e.target.value); handleInputChange('nombre');}}
                        margin="dense" fullWidth error={!!localErrors.nombre} helperText={localErrors.nombre || ''}
                        disabled={loading} autoFocus={!isEditing}
                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }} // -8px es la mitad del gap
                    />
                    <TextField label="Nro. Documento (CUIT/CUIL)" value={nroDoc} required
                        onChange={(e) => {setNroDoc(e.target.value); handleInputChange('nroDoc');}}
                        margin="dense" fullWidth error={!!localErrors.nroDoc} helperText={localErrors.nroDoc || ''}
                        disabled={loading}
                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
                    />
                </Box>
                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mt:1 }}>
                     <TextField label="Contacto" value={contacto}
                        onChange={(e) => setContacto(e.target.value)}
                        margin="dense" fullWidth disabled={loading}
                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
                    />
                    <FormControl fullWidth margin="dense" error={!!localErrors.idZona} sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}>
                        <InputLabel id="zona-dist-select-label">Zona (Opcional)</InputLabel>
                        <Select labelId="zona-dist-select-label" label="Zona (Opcional)" value={idZona}
                            onChange={(e) => {setIdZona(e.target.value as number); handleInputChange('idZona');}}
                            disabled={loading || loadingZonas}
                        >
                            <MenuItem value=""><em>Ninguna</em></MenuItem>
                            {zonas.map((z) => (<MenuItem key={z.idZona} value={z.idZona}>{z.nombre}</MenuItem>))}
                        </Select>
                    </FormControl>
                </Box>
                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mt:1 }}>
                    <TextField label="Calle" value={calle} onChange={(e) => setCalle(e.target.value)} margin="dense"
                        sx={{ flex: 3, minWidth: 'calc(60% - 8px)'}} // Más ancho para la calle
                        disabled={loading}
                    />
                    <TextField label="Número" value={numero} onChange={(e) => setNumero(e.target.value)} margin="dense"
                        sx={{ flex: 1, minWidth: 'calc(40% - 8px)'}}
                        disabled={loading}
                    />
                </Box>
                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mt:1 }}>
                     <TextField label="Piso" value={piso} onChange={(e) => setPiso(e.target.value)} margin="dense"
                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)'}}
                        disabled={loading}
                    />
                    <TextField label="Depto." value={depto} onChange={(e) => setDepto(e.target.value)} margin="dense"
                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)'}}
                        disabled={loading}
                    />
                </Box>
                 <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mt:1 }}>
                    <TextField label="Teléfono" value={telefono} onChange={(e) => setTelefono(e.target.value)} margin="dense"
                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)'}}
                        disabled={loading}
                    />
                    <TextField label="Email" value={email} type="email"
                        onChange={(e) => {setEmail(e.target.value); handleInputChange('email');}}
                        margin="dense" fullWidth error={!!localErrors.email} helperText={localErrors.email || ''}
                        disabled={loading}
                        sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
                    />
                </Box>
                <TextField label="Localidad" value={localidad} onChange={(e) => setLocalidad(e.target.value)} margin="dense" fullWidth disabled={loading} sx={{mt:1}}/>
            </Box>

          {errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</Alert>}
          {localErrors.zonas && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.zonas}</Alert>}

          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
            <Button onClick={onClose} color="secondary" disabled={loading}>Cancelar</Button>
            <Button type="submit" variant="contained" disabled={loading || loadingZonas}>
              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Crear Distribuidor')}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default DistribuidorFormModal;