GestionIntegralWeb/Frontend/src/components/Modals/Distribucion/RecargoZonaFormModal.tsx

// src/components/Modals/Distribucion/RecargoZonaFormModal.tsx
import React, { useState, useEffect } from 'react';
import {
    Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
    FormControl, InputLabel, Select, MenuItem, InputAdornment
} from '@mui/material';
import type { RecargoZonaDto } from '../../../models/dtos/Distribucion/RecargoZonaDto';
import type { CreateRecargoZonaDto } from '../../../models/dtos/Distribucion/CreateRecargoZonaDto';
import type { UpdateRecargoZonaDto } from '../../../models/dtos/Distribucion/UpdateRecargoZonaDto';
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: '90%', sm: 500 },
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
    maxHeight: '90vh',
    overflowY: 'auto'
};

interface RecargoZonaFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateRecargoZonaDto | UpdateRecargoZonaDto, idRecargo?: number) => Promise<void>;
  idPublicacion: number;
  initialData?: RecargoZonaDto | null;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const RecargoZonaFormModal: React.FC<RecargoZonaFormModalProps> = ({
  open,
  onClose,
  onSubmit,
  idPublicacion,
  initialData,
  errorMessage, // Esta prop viene del padre (GestionarRecargosPublicacionPage)
  clearErrorMessage
}) => {
  const [idZona, setIdZona] = useState<number | string>('');
  const [vigenciaD, setVigenciaD] = useState('');
  const [vigenciaH, setVigenciaH] = useState('');
  const [valor, setValor] = useState<string>('');

  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();
            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();
        setIdZona(initialData?.idZona || '');
        setVigenciaD(initialData?.vigenciaD || '');
        setVigenciaH(initialData?.vigenciaH || '');
        setValor(initialData?.valor?.toString() || '');
        setLocalErrors({});
        // No limpiar errorMessage aquí si queremos que persista un error de submit anterior
        // clearErrorMessage(); // Se limpia al abrir desde la página o al inicio de un nuevo submit
    }
  }, [open, initialData]); // Quitar clearErrorMessage de aquí para que no limpie el error del padre en cada re-render por 'open'

  const validate = (): boolean => {
    // ... (lógica de validación sin cambios)
    const errors: { [key: string]: string | null } = {};
    if (!idZona) errors.idZona = 'Debe seleccionar una zona.';
    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 (!valor.trim()) errors.valor = 'El valor es obligatorio.';
    else if (isNaN(parseFloat(valor)) || parseFloat(valor) < 0) {
        errors.valor = 'El valor debe ser un número positivo.';
    }
    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleInputChange = (fieldName: string) => {
    if (localErrors[fieldName]) setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
    if (errorMessage) clearErrorMessage(); // Limpiar error del padre si el usuario modifica un campo
  };

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    clearErrorMessage(); // Limpiar errores del padre antes de un nuevo intento
    if (!validate()) return;

    setLoading(true);
    let success = false; // Bandera para controlar el cierre del modal
    try {
      const valorNum = parseFloat(valor);

      if (isEditing && initialData) {
        const dataToSubmit: UpdateRecargoZonaDto = {
            valor: valorNum,
            vigenciaH: vigenciaH.trim() ? vigenciaH.split('T')[0] : null, // Enviar solo fecha o null
        };
        await onSubmit(dataToSubmit, initialData.idRecargo);
      } else {
        const dataToSubmit: CreateRecargoZonaDto = {
            idPublicacion,
            idZona: Number(idZona),
            vigenciaD: vigenciaD.split('T')[0], // Enviar solo fecha
            valor: valorNum,
        };
        await onSubmit(dataToSubmit);
      }
      success = true; // Marcar como exitoso si no hubo excepciones
    } catch (error: any) {
      // El error de la API ya fue seteado en la página padre (GestionarRecargosPublicacionPage)
      // y se pasa a este modal a través de la prop 'errorMessage'.
      // No necesitamos hacer setApiErrorMessage aquí.
      console.error("Error propagado al submit de RecargoZonaFormModal:", error);
      success = false; // Marcar como no exitoso
    } finally {
       setLoading(false);
       if (success) { // Solo cerrar si la operación fue exitosa
         onClose();
       }
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>
          {isEditing ? 'Editar Recargo por Zona' : 'Agregar Nuevo Recargo por Zona'}
        </Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
            <FormControl fullWidth margin="dense" error={!!localErrors.idZona}>
                <InputLabel id="zona-recargo-select-label" required>Zona</InputLabel>
                <Select labelId="zona-recargo-select-label" label="Zona" value={idZona}
                    onChange={(e) => {setIdZona(e.target.value as number); handleInputChange('idZona');}}
                    disabled={loading || loadingZonas || isEditing}
                >
                    <MenuItem value="" disabled><em>Seleccione una zona</em></MenuItem>
                    {zonas.map((z) => (<MenuItem key={z.idZona} value={z.idZona}>{z.nombre}</MenuItem>))}
                </Select>
                {localErrors.idZona && <Typography color="error" variant="caption">{localErrors.idZona}</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="Valor Recargo" type="number" value={valor} required
                onChange={(e) => {setValor(e.target.value); handleInputChange('valor');}}
                margin="dense" fullWidth error={!!localErrors.valor} helperText={localErrors.valor || ''}
                disabled={loading}
                InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }}
                inputProps={{ step: "0.01", lang:"es-AR" }}
            />

          {/* Este Alert mostrará el error de la API que viene de la página padre */}
          {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' : 'Agregar Recargo')}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default RecargoZonaFormModal;