import React, { useState, useEffect } from 'react';
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert, FormControl, InputLabel, Select, MenuItem, type SelectChangeEvent } from '@mui/material';
import type { SuscriptorDto } from '../../../models/dtos/Suscripciones/SuscriptorDto';
import type { CreateSuscriptorDto } from '../../../models/dtos/Suscripciones/CreateSuscriptorDto';
import type { UpdateSuscriptorDto } from '../../../models/dtos/Suscripciones/UpdateSuscriptorDto';
import type { FormaPagoDto } from '../../../models/dtos/Suscripciones/FormaPagoDto';
import formaPagoService from '../../../services/Suscripciones/formaPagoService';

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 SuscriptorFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateSuscriptorDto | UpdateSuscriptorDto, id?: number) => Promise<void>;
  initialData?: SuscriptorDto | null;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const SuscriptorFormModal: React.FC<SuscriptorFormModalProps> = ({ open, onClose, onSubmit, initialData, errorMessage, clearErrorMessage }) => {
  const [formData, setFormData] = useState<Partial<CreateSuscriptorDto>>({});
  const [formasDePago, setFormasDePago] = useState<FormaPagoDto[]>([]);
  const [loading, setLoading] = useState(false);
  const [loadingFormasPago, setLoadingFormasPago] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  const isEditing = Boolean(initialData);
  const CBURequerido = formasDePago.find(fp => fp.idFormaPago === formData.idFormaPagoPreferida)?.requiereCBU ?? false;

  useEffect(() => {
    const fetchFormasDePago = async () => {
      setLoadingFormasPago(true);
      try {
        const data = await formaPagoService.getAllFormasDePago();
        setFormasDePago(data);
      } catch (error) {
        console.error("Error al cargar formas de pago", error);
        setLocalErrors(prev => ({ ...prev, formasDePago: 'Error al cargar formas de pago.' }));
      } finally {
        setLoadingFormasPago(false);
      }
    };

    if (open) {
      fetchFormasDePago();
      const dataParaFormulario: Partial<CreateSuscriptorDto> = {
        nombreCompleto: initialData?.nombreCompleto || '',
        email: initialData?.email || '',
        telefono: initialData?.telefono || '',
        direccion: initialData?.direccion || '',
        tipoDocumento: initialData?.tipoDocumento || 'DNI',
        nroDocumento: initialData?.nroDocumento || '',
        cbu: initialData?.cbu || '',
        idFormaPagoPreferida: initialData?.idFormaPagoPreferida,
        observaciones: initialData?.observaciones || ''
      };
      setFormData(dataParaFormulario);
      setLocalErrors({});
    }
  }, [open, initialData]);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!formData.nombreCompleto?.trim()) errors.nombreCompleto = 'El nombre es obligatorio.';
    if (!formData.direccion?.trim()) errors.direccion = 'La dirección es obligatoria.';
    if (!formData.tipoDocumento) errors.tipoDocumento = 'El tipo de documento es obligatorio.';
    if (!formData.nroDocumento?.trim()) errors.nroDocumento = 'El número de documento es obligatorio.';
    if (!formData.idFormaPagoPreferida) errors.idFormaPagoPreferida = 'La forma de pago es obligatoria.';

    // Validar formato de Nro de Documento (solo números)
    if (formData.nroDocumento && !/^[0-9]+$/.test(formData.nroDocumento)) {
      errors.nroDocumento = 'El documento solo debe contener números.';
    }

    // Validar formato de Email
    if (formData.email && !/^\S+@\S+\.\S+$/.test(formData.email)) {
      errors.email = 'El formato del email no es válido.';
    }

    // Validar formato y longitud de CBU
    if (CBURequerido) {
      if (!formData.cbu || !/^[0-9]+$/.test(formData.cbu) || formData.cbu.length !== 22) {
        errors.cbu = 'El CBU es obligatorio y debe tener 22 dígitos numéricos.';
      }
    } else if (formData.cbu && formData.cbu.trim().length > 0 && (!/^[0-9]+$/.test(formData.cbu) || formData.cbu.length !== 26)) {
      errors.cbu = 'El CBU debe tener 22 dígitos numéricos o estar vacío.';
    }

    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  // --- HANDLER DE INPUT MEJORADO ---
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;

    // Prevenir entrada de caracteres no numéricos para CBU y NroDocumento
    if (name === 'cbu' || name === 'nroDocumento') {
      const numericValue = value.replace(/[^0-9]/g, '');
      setFormData(prev => ({ ...prev, [name]: numericValue }));
    } else {
      setFormData(prev => ({ ...prev, [name]: value }));
    }

    if (localErrors[name]) setLocalErrors(prev => ({ ...prev, [name]: null }));
    if (errorMessage) clearErrorMessage();
  };

  const handleSelectChange = (e: SelectChangeEvent<any>) => {
    const { name, value } = e.target;
    const newFormData = { ...formData, [name]: value };

    if (name === 'idFormaPagoPreferida') {
      const formaDePagoSeleccionada = formasDePago.find(fp => fp.idFormaPago === value);
      if (formaDePagoSeleccionada && !formaDePagoSeleccionada.requiereCBU) {
        newFormData.cbu = '';
      }
    }
    setFormData(newFormData);
    if (localErrors[name]) setLocalErrors(prev => ({ ...prev, [name]: null }));
    if (errorMessage) clearErrorMessage();
  };

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

    setLoading(true);
    let success = false;
    try {
      const dataToSubmit = {
        ...formData,
        idFormaPagoPreferida: Number(formData.idFormaPagoPreferida),
        cbu: formData.cbu?.trim() || null
      } as CreateSuscriptorDto | UpdateSuscriptorDto;

      await onSubmit(dataToSubmit, initialData?.idSuscriptor);
      success = true;
    } catch (error) {
      success = false;
    } finally {
      setLoading(false);
      if (success) {
        onClose();
      }
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>
          {isEditing ? 'Editar Suscriptor' : 'Nuevo Suscriptor'}
        </Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
          <TextField name="nombreCompleto" label="Nombre Completo" value={formData.nombreCompleto || ''} onChange={handleInputChange} required fullWidth margin="dense" error={!!localErrors.nombreCompleto} helperText={localErrors.nombreCompleto} disabled={loading} autoFocus />
          <TextField name="direccion" label="Dirección" value={formData.direccion || ''} onChange={handleInputChange} required fullWidth margin="dense" error={!!localErrors.direccion} helperText={localErrors.direccion} disabled={loading} />
          <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
            <TextField name="email" label="Email" type="email" value={formData.email || ''} onChange={handleInputChange} fullWidth margin="dense" sx={{ flex: 1 }} error={!!localErrors.email} helperText={localErrors.email} disabled={loading} />
            <TextField name="telefono" label="Teléfono" value={formData.telefono || ''} onChange={handleInputChange} fullWidth margin="dense" sx={{ flex: 1 }} disabled={loading} />
          </Box>
          <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
            <FormControl margin="dense" sx={{ minWidth: 120 }}>
              <InputLabel id="tipo-doc-label">Tipo</InputLabel>
              <Select labelId="tipo-doc-label" name="tipoDocumento" value={formData.tipoDocumento || 'DNI'} onChange={handleSelectChange} label="Tipo" disabled={loading}>
                <MenuItem value="DNI">DNI</MenuItem>
                <MenuItem value="CUIT">CUIT</MenuItem>
                <MenuItem value="CUIL">CUIL</MenuItem>
              </Select>
            </FormControl>
            <TextField name="nroDocumento" label="Nro Documento" value={formData.nroDocumento || ''} onChange={handleInputChange} required fullWidth margin="dense" sx={{ flex: 2 }} error={!!localErrors.nroDocumento} helperText={localErrors.nroDocumento} disabled={loading} inputProps={{ maxLength: 11 }} />
          </Box>
          <FormControl fullWidth margin="dense" error={!!localErrors.idFormaPagoPreferida}>
            <InputLabel id="forma-pago-label" required>Forma de Pago</InputLabel>
            <Select
              labelId="forma-pago-label"
              name="idFormaPagoPreferida"
              value={loadingFormasPago ? '' : formData.idFormaPagoPreferida || ''}
              onChange={handleSelectChange}
              label="Forma de Pago"
              disabled={loading || loadingFormasPago}
            >
              {loadingFormasPago && <MenuItem value=""><em>Cargando...</em></MenuItem>}

              {formasDePago.map(fp => <MenuItem key={fp.idFormaPago} value={fp.idFormaPago}>{fp.nombre}</MenuItem>)}
            </Select>
            {localErrors.idFormaPagoPreferida && <Typography color="error" variant="caption">{localErrors.idFormaPagoPreferida}</Typography>}
          </FormControl>

          {CBURequerido && (
            <TextField
              name="cbu"
              label="CBU"
              value={formData.cbu || ''}
              onChange={handleInputChange}
              required
              fullWidth
              margin="dense"
              error={!!localErrors.cbu}
              helperText={localErrors.cbu}
              disabled={loading}
              inputProps={{ maxLength: 22 }}
            />
          )}

          <TextField name="observaciones" label="Observaciones" value={formData.observaciones || ''} onChange={handleInputChange} multiline rows={2} fullWidth margin="dense" disabled={loading} />

          {errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</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 || loadingFormasPago}>
              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Crear Suscriptor')}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default SuscriptorFormModal;