import React, { useState, useEffect } from 'react';
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert, FormControl, InputLabel, Select, MenuItem, type SelectChangeEvent, InputAdornment } from '@mui/material';
import type { CreateAjusteDto } from '../../../models/dtos/Suscripciones/CreateAjusteDto';
import type { UpdateAjusteDto } from '../../../models/dtos/Suscripciones/UpdateAjusteDto';
import type { AjusteDto } from '../../../models/dtos/Suscripciones/AjusteDto';
import type { EmpresaDropdownDto } from '../../../models/dtos/Distribucion/EmpresaDropdownDto';

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

// --- TIPO UNIFICADO PARA EL ESTADO DEL FORMULARIO ---
type AjusteFormData = Partial<CreateAjusteDto & UpdateAjusteDto>;

interface AjusteFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateAjusteDto | UpdateAjusteDto, id?: number) => Promise<void>;
  initialData?: AjusteDto | null;
  idSuscriptor: number;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
  empresas: EmpresaDropdownDto[];
}

const AjusteFormModal: React.FC<AjusteFormModalProps> = ({ open, onClose, onSubmit, idSuscriptor, errorMessage, clearErrorMessage, initialData, empresas }) => {
  const [formData, setFormData] = useState<AjusteFormData>({});
  const [loading, setLoading] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  const isEditing = Boolean(initialData);

  useEffect(() => {
    if (open) {
      const fechaParaFormulario = initialData?.fechaAjuste
        ? initialData.fechaAjuste.split(' ')[0]
        : new Date().toISOString().split('T')[0];

      setFormData({
        idSuscriptor: initialData?.idSuscriptor || idSuscriptor,
        idEmpresa: initialData?.idEmpresa || undefined, // undefined para que el placeholder se muestre
        fechaAjuste: fechaParaFormulario,
        tipoAjuste: initialData?.tipoAjuste || 'Credito',
        monto: initialData?.monto || undefined,
        motivo: initialData?.motivo || ''
      });
      setLocalErrors({});
    }
  }, [open, initialData, idSuscriptor]);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!formData.idEmpresa) errors.idEmpresa = "Debe seleccionar una empresa.";
    if (!formData.fechaAjuste) errors.fechaAjuste = "La fecha es obligatoria.";
    if (!formData.tipoAjuste) errors.tipoAjuste = "Seleccione un tipo.";
    if (!formData.monto || formData.monto <= 0) errors.monto = "El monto debe ser mayor a cero.";
    if (!formData.motivo?.trim()) errors.motivo = "El motivo es obligatorio.";
    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev: AjusteFormData) => ({
      ...prev,
      [name]: name === 'monto' && value !== '' ? parseFloat(value) : value
    }));
    if (localErrors[name]) setLocalErrors(prev => ({ ...prev, [name]: null }));
    if (errorMessage) clearErrorMessage();
  };

  const handleSelectChange = (e: SelectChangeEvent<string | number>) => { // Acepta string o number
    const { name, value } = e.target;
    setFormData((prev: AjusteFormData) => ({ ...prev, [name]: value }));
    if (localErrors[name]) setLocalErrors(prev => ({ ...prev, [name]: null }));
    if (errorMessage) clearErrorMessage();
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    clearErrorMessage();
    if (!validate()) return;
    setLoading(true);
    let success = false;
    try {
      if (isEditing && initialData) {
        await onSubmit(formData as UpdateAjusteDto, initialData.idAjuste);
      } else {
        await onSubmit(formData as CreateAjusteDto);
      }
      success = true;
    } catch (error) {
      success = false;
    } finally {
      setLoading(false);
      if (success) onClose();
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6">{isEditing ? 'Editar Ajuste Manual' : 'Registrar Ajuste Manual'}</Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>

          <TextField name="fechaAjuste" label="Fecha del Ajuste" type="date" value={formData.fechaAjuste || ''} onChange={handleInputChange} required fullWidth margin="dense" InputLabelProps={{ shrink: true }} error={!!localErrors.fechaAjuste} helperText={localErrors.fechaAjuste} />
          <FormControl fullWidth margin="dense" required error={!!localErrors.idEmpresa}>
            <InputLabel id="empresa-label">Empresa</InputLabel>
            <Select
              name="idEmpresa"
              labelId="empresa-label"
              value={formData.idEmpresa || ''}
              onChange={handleSelectChange}
              label="Empresa"
            >
              {empresas.map((empresa) => (
                <MenuItem key={empresa.idEmpresa} value={empresa.idEmpresa}>
                  {empresa.nombre}
                </MenuItem>
              ))}
            </Select>
            {localErrors.idEmpresa && <Typography color="error" variant="caption">{localErrors.idEmpresa}</Typography>}
          </FormControl>
          <FormControl fullWidth margin="dense" error={!!localErrors.tipoAjuste}>
            <InputLabel id="tipo-ajuste-label" required>Tipo de Ajuste</InputLabel>
            <Select name="tipoAjuste" labelId="tipo-ajuste-label" value={formData.tipoAjuste || ''} onChange={handleSelectChange} label="Tipo de Ajuste">
              <MenuItem value="Credito">Crédito (Descuento a favor del cliente)</MenuItem>
              <MenuItem value="Debito">Débito (Cargo extra al cliente)</MenuItem>
            </Select>
          </FormControl>

          <TextField name="monto" label="Monto" type="number" value={formData.monto || ''} onChange={handleInputChange} required fullWidth margin="dense" error={!!localErrors.monto} helperText={localErrors.monto} InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }} inputProps={{ step: "0.01" }} />
          <TextField name="motivo" label="Motivo" value={formData.motivo || ''} onChange={handleInputChange} required fullWidth margin="dense" multiline rows={3} error={!!localErrors.motivo} helperText={localErrors.motivo} />

          <Alert severity="info" sx={{ mt: 2 }}>
            Nota: Este ajuste se aplicará a la factura de la <strong>empresa seleccionada</strong> en el período correspondiente a la "Fecha del Ajuste".
          </Alert>

          {errorMessage && <Alert severity="error" sx={{ mt: 2 }}>{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}>
              {loading ? <CircularProgress size={24} /> : 'Guardar Ajuste'}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default AjusteFormModal;