import React, { useState, useEffect } from 'react';
import {
    Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
    FormControl, InputLabel, Select, MenuItem, InputAdornment
} from '@mui/material';
import type { PorcPagoDto } from '../../../models/dtos/Distribucion/PorcPagoDto';
import type { CreatePorcPagoDto } from '../../../models/dtos/Distribucion/CreatePorcPagoDto';
import type { UpdatePorcPagoDto } from '../../../models/dtos/Distribucion/UpdatePorcPagoDto';
import type { DistribuidorDto } from '../../../models/dtos/Distribucion/DistribuidorDto';
import distribuidorService from '../../../services/Distribucion/distribuidorService'; // Para cargar distribuidores

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

interface PorcPagoFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreatePorcPagoDto | UpdatePorcPagoDto, idPorcentaje?: number) => Promise<void>;
  idPublicacion: number;
  initialData?: PorcPagoDto | null; // Para editar
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const PorcPagoFormModal: React.FC<PorcPagoFormModalProps> = ({
  open,
  onClose,
  onSubmit,
  idPublicacion,
  initialData,
  errorMessage,
  clearErrorMessage
}) => {
  const [idDistribuidor, setIdDistribuidor] = useState<number | string>('');
  const [vigenciaD, setVigenciaD] = useState(''); // "yyyy-MM-dd"
  const [vigenciaH, setVigenciaH] = useState(''); // "yyyy-MM-dd"
  const [porcentaje, setPorcentaje] = useState<string>('');

  const [distribuidores, setDistribuidores] = useState<DistribuidorDto[]>([]);
  const [loading, setLoading] = useState(false);
  const [loadingDistribuidores, setLoadingDistribuidores] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  const isEditing = Boolean(initialData);

  useEffect(() => {
    const fetchDistribuidores = async () => {
        setLoadingDistribuidores(true);
        try {
            const data = await distribuidorService.getAllDistribuidores();
            setDistribuidores(data);
        } catch (error) {
            console.error("Error al cargar distribuidores", error);
            setLocalErrors(prev => ({...prev, distribuidores: 'Error al cargar distribuidores.'}));
        } finally {
            setLoadingDistribuidores(false);
        }
    };

    if (open) {
        fetchDistribuidores();
        setIdDistribuidor(initialData?.idDistribuidor || '');
        setVigenciaD(initialData?.vigenciaD || '');
        setVigenciaH(initialData?.vigenciaH || '');
        setPorcentaje(initialData?.porcentaje?.toString() || '');
        setLocalErrors({});
        clearErrorMessage();
    }
  }, [open, initialData, clearErrorMessage]);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!idDistribuidor) errors.idDistribuidor = 'Debe seleccionar un distribuidor.';
    if (!isEditing && !vigenciaD.trim()) {
        errors.vigenciaD = 'La Vigencia Desde es obligatoria.';
    } else if (vigenciaD.trim() && !/^\d{4}-\d{2}-\d{2}$/.test(vigenciaD)) {
        errors.vigenciaD = 'Formato de Vigencia Desde inválido (YYYY-MM-DD).';
    }
    if (vigenciaH.trim() && !/^\d{4}-\d{2}-\d{2}$/.test(vigenciaH)) {
        errors.vigenciaH = 'Formato de Vigencia Hasta inválido (YYYY-MM-DD).';
    } else if (vigenciaH.trim() && vigenciaD.trim() && new Date(vigenciaH) < new Date(vigenciaD)) {
        errors.vigenciaH = 'Vigencia Hasta no puede ser anterior a Vigencia Desde.';
    }
    if (!porcentaje.trim()) errors.porcentaje = 'El porcentaje es obligatorio.';
    else {
        const porcNum = parseFloat(porcentaje);
        if (isNaN(porcNum) || porcNum < 0 || porcNum > 100) {
            errors.porcentaje = 'El porcentaje debe ser un número entre 0 y 100.';
        }
    }
    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 porcentajeNum = parseFloat(porcentaje);

      if (isEditing && initialData) {
        const dataToSubmit: UpdatePorcPagoDto = {
            porcentaje: porcentajeNum,
            vigenciaH: vigenciaH.trim() ? vigenciaH : null,
        };
        await onSubmit(dataToSubmit, initialData.idPorcentaje);
      } else {
        const dataToSubmit: CreatePorcPagoDto = {
            idPublicacion,
            idDistribuidor: Number(idDistribuidor),
            vigenciaD,
            porcentaje: porcentajeNum,
        };
        await onSubmit(dataToSubmit);
      }
      onClose();
    } catch (error: any) {
      console.error("Error en submit de PorcPagoFormModal:", error);
    } finally {
       setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>
          {isEditing ? 'Editar Porcentaje de Pago' : 'Agregar Nuevo Porcentaje de Pago'}
        </Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
            <FormControl fullWidth margin="dense" error={!!localErrors.idDistribuidor}>
                <InputLabel id="distribuidor-porc-select-label" required>Distribuidor</InputLabel>
                <Select labelId="distribuidor-porc-select-label" label="Distribuidor" value={idDistribuidor}
                    onChange={(e) => {setIdDistribuidor(e.target.value as number); handleInputChange('idDistribuidor');}}
                    disabled={loading || loadingDistribuidores || isEditing} // Distribuidor no se edita
                >
                    <MenuItem value="" disabled><em>Seleccione un distribuidor</em></MenuItem>
                    {distribuidores.map((d) => (<MenuItem key={d.idDistribuidor} value={d.idDistribuidor}>{d.nombre}</MenuItem>))}
                </Select>
                {localErrors.idDistribuidor && <Typography color="error" variant="caption">{localErrors.idDistribuidor}</Typography>}
            </FormControl>
            <TextField label="Vigencia Desde" type="date" value={vigenciaD} required={!isEditing}
                onChange={(e) => {setVigenciaD(e.target.value); handleInputChange('vigenciaD');}}
                margin="dense" fullWidth error={!!localErrors.vigenciaD} helperText={localErrors.vigenciaD || ''}
                disabled={loading || isEditing} InputLabelProps={{ shrink: true }} autoFocus={!isEditing}
            />
            {isEditing && (
                <TextField label="Vigencia Hasta (Opcional)" type="date" value={vigenciaH}
                    onChange={(e) => {setVigenciaH(e.target.value); handleInputChange('vigenciaH');}}
                    margin="dense" fullWidth error={!!localErrors.vigenciaH} helperText={localErrors.vigenciaH || ''}
                    disabled={loading} InputLabelProps={{ shrink: true }}
                />
            )}
            <TextField label="Porcentaje" type="number" value={porcentaje} required
                onChange={(e) => {setPorcentaje(e.target.value); handleInputChange('porcentaje');}}
                margin="dense" fullWidth error={!!localErrors.porcentaje} helperText={localErrors.porcentaje || ''}
                disabled={loading}
                InputProps={{ endAdornment: <InputAdornment position="end">%</InputAdornment> }}
                inputProps={{ step: "0.01", lang:"es-AR" }}
            />

          {errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</Alert>}
          {localErrors.distribuidores && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.distribuidores}</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 || loadingDistribuidores}>
              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Agregar Porcentaje')}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default PorcPagoFormModal;