import React, { useState, useEffect } from 'react';
import {
  Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
  FormControl, InputLabel, Select, MenuItem, FormGroup, FormControlLabel,
  Checkbox, type SelectChangeEvent, Paper
} from '@mui/material';
import type { SuscripcionDto } from '../../../models/dtos/Suscripciones/SuscripcionDto';
import type { CreateSuscripcionDto } from '../../../models/dtos/Suscripciones/CreateSuscripcionDto';
import type { UpdateSuscripcionDto } from '../../../models/dtos/Suscripciones/UpdateSuscripcionDto';
import type { PublicacionDropdownDto } from '../../../models/dtos/Distribucion/PublicacionDropdownDto';
import publicacionService from '../../../services/Distribucion/publicacionService';

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'
};

const dias = [
  { label: 'Lunes', value: 'Lun' }, { label: 'Martes', value: 'Mar' },
  { label: 'Miércoles', value: 'Mie' }, { label: 'Jueves', value: 'Jue' },
  { label: 'Viernes', value: 'Vie' }, { label: 'Sábado', value: 'Sab' },
  { label: 'Domingo', value: 'Dom' }
];

interface SuscripcionFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateSuscripcionDto | UpdateSuscripcionDto, id?: number) => Promise<void>;
  idSuscriptor: number;
  initialData?: SuscripcionDto | null;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

interface FormState {
  idPublicacion?: number | '';
  fechaInicio?: string;
  fechaFin?: string | null;
  estado?: 'Activa' | 'Pausada' | 'Cancelada';
  observaciones?: string;
}

const SuscripcionFormModal: React.FC<SuscripcionFormModalProps> = ({ open, onClose, onSubmit, idSuscriptor, initialData, errorMessage, clearErrorMessage }) => {
  const [formData, setFormData] = useState<FormState>({});
  const [selectedDays, setSelectedDays] = useState<Set<string>>(new Set());
  const [publicaciones, setPublicaciones] = useState<PublicacionDropdownDto[]>([]);
  const [loading, setLoading] = useState(false);
  const [loadingPubs, setLoadingPubs] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  const isEditing = Boolean(initialData);

  useEffect(() => {
    const fetchPublicaciones = async () => {
      setLoadingPubs(true);
      try {
        const data = await publicacionService.getPublicacionesForDropdown(true);
        setPublicaciones(data);
      } catch (error) {
        setLocalErrors(prev => ({ ...prev, publicaciones: 'Error al cargar publicaciones.' }));
      } finally {
        setLoadingPubs(false);
      }
    };

    if (open) {
      fetchPublicaciones();
      const diasEntrega = initialData?.diasEntrega ? new Set<string>(initialData.diasEntrega.split(',')) : new Set<string>();
      setSelectedDays(diasEntrega);
      setFormData({
        idPublicacion: initialData?.idPublicacion || '',
        fechaInicio: initialData?.fechaInicio || '',
        fechaFin: initialData?.fechaFin || '',
        estado: initialData?.estado || 'Activa',
        observaciones: initialData?.observaciones || ''
      });
      setLocalErrors({});
    }
  }, [open, initialData]);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!formData.idPublicacion) errors.idPublicacion = "Debe seleccionar una publicación.";
    if (!formData.fechaInicio?.trim()) errors.fechaInicio = 'La Fecha de Inicio es obligatoria.';

    // --- INICIO DE LA MODIFICACIÓN ---
    if (formData.estado !== 'Activa' && !formData.fechaFin) {
      errors.fechaFin = 'La Fecha de Fin es obligatoria si el estado es Pausada o Cancelada.';
    }
    // --- FIN DE LA MODIFICACIÓN ---

    if (formData.fechaFin && formData.fechaInicio && new Date(formData.fechaFin) < new Date(formData.fechaInicio)) {
      errors.fechaFin = 'La Fecha de Fin no puede ser anterior a la de inicio.';
    }
    if (selectedDays.size === 0) errors.diasEntrega = "Debe seleccionar al menos un día de entrega.";
    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleDayChange = (dayValue: string) => {
    const newSelection = new Set(selectedDays);
    if (newSelection.has(dayValue)) newSelection.delete(dayValue);
    else newSelection.add(dayValue);
    setSelectedDays(newSelection);
    if (localErrors.diasEntrega) setLocalErrors(prev => ({ ...prev, diasEntrega: null }));
    if (errorMessage) clearErrorMessage();
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    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;
    setFormData(prev => ({ ...prev, [name]: value }));
    if (localErrors[name]) setLocalErrors(prev => ({ ...prev, [name]: null }));
    if (errorMessage) clearErrorMessage();
  };

  // --- INICIO DE LA MODIFICACIÓN ---
  const handleEstadoChange = (e: SelectChangeEvent<'Activa' | 'Pausada' | 'Cancelada'>) => {
    const nuevoEstado = e.target.value as 'Activa' | 'Pausada' | 'Cancelada';
    const hoy = new Date().toISOString().split('T')[0];

    setFormData(prev => {
      const newState = { ...prev, estado: nuevoEstado };

      if ((nuevoEstado === 'Cancelada' || nuevoEstado === 'Pausada') && !prev.fechaFin) {
        newState.fechaFin = hoy;
      } else if (nuevoEstado === 'Activa') {
        newState.fechaFin = null; // Limpiar la fecha de fin si se reactiva
      }
      return newState;
    });
    // Limpiar errores al cambiar
    if (localErrors.fechaFin) setLocalErrors(prev => ({ ...prev, fechaFin: null }));
    if (errorMessage) clearErrorMessage();
  };
  // --- FIN DE LA MODIFICACIÓN ---

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

    setLoading(true);
    let success = false;
    try {
      const dataToSubmit = {
        ...formData,
        fechaFin: formData.estado === 'Activa' ? null : formData.fechaFin, // Asegurarse de que fechaFin es null si está activa
        diasEntrega: Array.from(selectedDays),
      };

      if (isEditing && initialData) {
        await onSubmit(dataToSubmit as UpdateSuscripcionDto, initialData.idSuscripcion);
      } else {
        await onSubmit({ ...dataToSubmit, idSuscriptor, idPublicacion: Number(formData.idPublicacion) } as CreateSuscripcionDto);
      }
      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">{isEditing ? 'Editar Suscripción' : 'Nueva Suscripción'}</Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
          <FormControl fullWidth margin="dense" error={!!localErrors.idPublicacion}>
            <InputLabel id="pub-label" required>Publicación</InputLabel>
            <Select name="idPublicacion" labelId="pub-label" value={formData.idPublicacion || ''} onChange={handleSelectChange} label="Publicación" disabled={loading || loadingPubs || isEditing}>
              {publicaciones.map(p => <MenuItem key={p.idPublicacion} value={p.idPublicacion}>{p.nombre} ({p.nombreEmpresa})</MenuItem>)}
            </Select>
            {localErrors.idPublicacion && <Typography color="error" variant="caption">{localErrors.idPublicacion}</Typography>}
          </FormControl>
          <Typography sx={{ mt: 2, mb: 1, color: localErrors.diasEntrega ? 'error.main' : 'inherit' }}>Días de Entrega *</Typography>
          <Paper variant="outlined" sx={{ p: 1, borderColor: localErrors.diasEntrega ? 'error.main' : 'rgba(0, 0, 0, 0.23)' }}>
            <FormGroup row>
              {dias.map(d => <FormControlLabel key={d.value} control={<Checkbox checked={selectedDays.has(d.value)} onChange={() => handleDayChange(d.value)} disabled={loading} />} label={d.label} />)}
            </FormGroup>
          </Paper>
          {localErrors.diasEntrega && <Typography color="error" variant="caption">{localErrors.diasEntrega}</Typography>}

          <Box sx={{ display: 'flex', gap: 2, mt: 1 }}>
            <TextField name="fechaInicio" label="Fecha Inicio" type="date" value={formData.fechaInicio || ''} onChange={handleInputChange} required fullWidth margin="dense" InputLabelProps={{ shrink: true }} error={!!localErrors.fechaInicio} helperText={localErrors.fechaInicio} disabled={loading} />
            <TextField
              name="fechaFin"
              label={formData.estado !== 'Activa' ? "Fecha Fin (Requerida)" : "Fecha Fin (Automática)"}
              type="date"
              value={formData.fechaFin || ''}
              onChange={handleInputChange}
              fullWidth
              margin="dense"
              InputLabelProps={{ shrink: true }}
              error={!!localErrors.fechaFin}
              helperText={localErrors.fechaFin}
              disabled={loading || formData.estado === 'Activa'} // Deshabilitado si está activa
              required={formData.estado !== 'Activa'} // Requerido si no está activa
            />
          </Box>

          <FormControl fullWidth margin="dense">
            <InputLabel id="estado-label">Estado</InputLabel>
            <Select name="estado" labelId="estado-label" value={formData.estado || 'Activa'} onChange={handleEstadoChange} label="Estado" disabled={loading}>
              <MenuItem value="Activa">Activa</MenuItem>
              <MenuItem value="Pausada">Pausada</MenuItem>
              <MenuItem value="Cancelada">Cancelada</MenuItem>
            </Select>
          </FormControl>
          <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 }}>{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 || loadingPubs}>
              {loading ? <CircularProgress size={24} /> : 'Guardar'}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default SuscripcionFormModal;