import React, { useState, useEffect } from 'react';
import {
  Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
  InputAdornment
  // Quitar Grid si no se usa
} from '@mui/material';
import type { PrecioDto } from '../../../models/dtos/Distribucion/PrecioDto';
import type { CreatePrecioDto } from '../../../models/dtos/Distribucion/CreatePrecioDto';
import type { UpdatePrecioDto } from '../../../models/dtos/Distribucion/UpdatePrecioDto';

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

const diasSemana = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado", "Domingo"] as const;
type DiaSemana = typeof diasSemana[number];

interface PrecioFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreatePrecioDto | UpdatePrecioDto, idPrecio?: number) => Promise<void>;
  idPublicacion: number;
  initialData?: PrecioDto | null;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const PrecioFormModal: React.FC<PrecioFormModalProps> = ({
  open,
  onClose,
  onSubmit,
  idPublicacion,
  initialData,
  errorMessage,
  clearErrorMessage
}) => {
  const [vigenciaD, setVigenciaD] = useState('');
  const [vigenciaH, setVigenciaH] = useState('');
  const [preciosDia, setPreciosDia] = useState<Record<DiaSemana, string>>({
    Lunes: '', Martes: '', Miercoles: '', Jueves: '', Viernes: '', Sabado: '', Domingo: ''
  });

  const [loading, setLoading] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});
  const isEditing = Boolean(initialData);

  useEffect(() => {
  // Este efecto se ejecuta cuando el modal se abre o cuando los datos iniciales cambian
  if (open) {
    setVigenciaD(initialData?.vigenciaD || '');
    setVigenciaH(initialData?.vigenciaH || '');
    const initialPrecios: Record<DiaSemana, string> = { Lunes: '', Martes: '', Miercoles: '', Jueves: '', Viernes: '', Sabado: '', Domingo: '' };
    if (initialData) {
      diasSemana.forEach(dia => {
        const key = dia.toLowerCase() as keyof Omit<PrecioDto, 'idPrecio' | 'idPublicacion' | 'vigenciaD' | 'vigenciaH'>;
        initialPrecios[dia] = initialData[key]?.toString() || '';
      });
    }
    setPreciosDia(initialPrecios);
    setLocalErrors({});
    // NO llamar a clearErrorMessage aquí automáticamente al abrir si ya hay un error de un intento previo.
    // Solo limpiar si es una "nueva" apertura (ej, initialData cambió o se abrió desde cerrado)
  }
}, [open, initialData]);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    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 fecha inválido (YYYY-MM-DD).';
    }

    if (vigenciaH.trim() && !/^\d{4}-\d{2}-\d{2}$/.test(vigenciaH)) {
      errors.vigenciaH = 'Formato de fecha 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.';
    }

    let alMenosUnPrecio = false;
    diasSemana.forEach(dia => {
      const valor = preciosDia[dia];
      if (valor.trim()) {
        alMenosUnPrecio = true;
        if (isNaN(parseFloat(valor)) || parseFloat(valor) < 0) {
          errors[dia.toLowerCase()] = `Precio de ${dia} inválido.`;
        }
      }
    });
    if (!isEditing && !alMenosUnPrecio) {
      errors.dias = 'Debe ingresar al menos un precio para un día de la semana.';
    }

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

  const handlePrecioDiaChange = (dia: DiaSemana, value: string) => {
    setPreciosDia(prev => ({ ...prev, [dia]: value }));
    if (localErrors[dia.toLowerCase()] || localErrors.dias) {
      setLocalErrors(prev => ({ ...prev, [dia.toLowerCase()]: null, dias: null }));
    }
    if (errorMessage) clearErrorMessage();
  };
  const handleDateChange = (setter: React.Dispatch<React.SetStateAction<string>>, fieldName: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setter(e.target.value);
    if (localErrors[fieldName]) {
      setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
    }
    if (errorMessage) clearErrorMessage();
  };

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

    setLoading(true);
    let success = false; // Bandera para controlar el cierre
    try {
      const preciosNumericos: Partial<Record<keyof Omit<PrecioDto, 'idPrecio'|'idPublicacion'|'vigenciaD'|'vigenciaH'>, number | null>> = {};
      diasSemana.forEach(dia => {
        const valor = preciosDia[dia].trim();
        const key = dia.toLowerCase() as keyof typeof preciosNumericos;
        preciosNumericos[key] = valor ? parseFloat(valor) : null;
      });

      if (isEditing && initialData) {
        const dataToSubmit: UpdatePrecioDto = {
          vigenciaH: vigenciaH.trim() ? vigenciaH.split('T')[0] : null,
          ...preciosNumericos
        };
        await onSubmit(dataToSubmit, initialData.idPrecio);
      } else {
        const dataToSubmit: CreatePrecioDto = {
          idPublicacion,
          vigenciaD,
          ...preciosNumericos
        };
        await onSubmit(dataToSubmit);
      }
      success = true; // Marcar como exitoso si no hubo excepciones
    } catch (error: any) {
      // El error ya fue seteado en el padre (GestionarPreciosPublicacionPage)
      // y se pasa como prop 'errorMessage' a este modal.
      // No necesitamos setearlo aquí de nuevo.
      console.error("Error propagado al submit de PrecioFormModal:", 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 Período de Precio' : 'Agregar Nuevo Período de Precio'}
        </Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
          {/* Sección de Vigencias */}
          <Box sx={{ display: 'flex', gap: 2, mb: 2, flexWrap: 'wrap' }}>
            <TextField label="Vigencia Desde" type="date" value={vigenciaD} required={!isEditing}
              onChange={handleDateChange(setVigenciaD, 'vigenciaD')} margin="dense"
              error={!!localErrors.vigenciaD} helperText={localErrors.vigenciaD || ''}
              disabled={loading || isEditing}
              InputLabelProps={{ shrink: true }}
              sx={{ flex: 1, minWidth: isEditing ? 'calc(50% - 8px)' : '100%' }}
              autoFocus={!isEditing}
            />
            {isEditing && (
              <TextField label="Vigencia Hasta (Opcional)" type="date" value={vigenciaH}
                onChange={handleDateChange(setVigenciaH, 'vigenciaH')} margin="dense"
                error={!!localErrors.vigenciaH} helperText={localErrors.vigenciaH || ''}
                disabled={loading}
                InputLabelProps={{ shrink: true }}
                sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
              />
            )}
          </Box>

          {/* Sección de Precios por Día con Flexbox */}
          <Typography variant="subtitle1" sx={{ mt: 2, mb: 1 }}>Precios por Día:</Typography>
          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
            {diasSemana.map(dia => (
              <Box key={dia} sx={{ flexBasis: { xs: 'calc(50% - 8px)', sm: 'calc(33.33% - 11px)', md: 'calc(25% - 12px)' }, minWidth: '120px' }}>
                {/* El ajuste de -Xpx en flexBasis es aproximado para compensar el gap. 
                             Para 3 columnas (33.33%): gap es 16px, se distribuye entre 2 espacios -> 16/2 * 2/3 = ~11px
                             Para 4 columnas (25%): gap es 16px, se distribuye entre 3 espacios -> 16/3 * 3/4 = 12px
                         */}
                <TextField label={dia} type="number"
                  value={preciosDia[dia]}
                  onChange={(e) => handlePrecioDiaChange(dia, e.target.value)}
                  margin="dense" fullWidth
                  error={!!localErrors[dia.toLowerCase()]} helperText={localErrors[dia.toLowerCase()] || ''}
                  disabled={loading}
                  InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }}
                  inputProps={{ step: "0.01", lang: "es-AR" }}
                />
              </Box>
            ))}
          </Box>
          {localErrors.dias && <Alert severity="error" sx={{ width: '100%', mt: 1 }}>{localErrors.dias}</Alert>}


          {/* Mostrar error de la API si existe (pasado desde el padre) */}
          {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}>
              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Agregar Período')}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default PrecioFormModal;