import React, { useState, useEffect } from 'react';
import {
    Modal, Box, Typography, Button, CircularProgress, Alert, FormGroup, FormControlLabel, Checkbox, Paper
} from '@mui/material';
import publicacionService from '../../../services/Distribucion/publicacionService';
import type { PublicacionDto } from '../../../models/dtos/Distribucion/PublicacionDto';
//import type { PublicacionDiaSemanaDto } from '../../../models/dtos/Distribucion/PublicacionDiaSemanaDto';
import type { UpdatePublicacionDiasSemanaRequestDto } from '../../../models/dtos/Distribucion/UpdatePublicacionDiasSemanaRequestDto';
import axios from 'axios';

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

const diasSemanaNombres = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];

interface PublicacionDiasSemanaModalProps {
  open: boolean;
  onClose: () => void;
  publicacion: PublicacionDto | null;
  onConfigSaved: () => void; // Para recargar la lista de publicaciones si es necesario
}

const PublicacionDiasSemanaModal: React.FC<PublicacionDiasSemanaModalProps> = ({
  open,
  onClose,
  publicacion,
  onConfigSaved
}) => {
  const [selectedDays, setSelectedDays] = useState<Set<number>>(new Set());
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (open && publicacion) {
      setLoading(true);
      setError(null);
      publicacionService.getConfiguracionDiasPublicacion(publicacion.idPublicacion)
        .then(configs => {
          const activeDays = new Set(configs.filter(c => c.activo).map(c => c.diaSemana));
          setSelectedDays(activeDays);
        })
        .catch(err => {
          console.error("Error al cargar configuración de días:", err);
          setError("Error al cargar la configuración actual de días.");
        })
        .finally(() => setLoading(false));
    } else {
      setSelectedDays(new Set()); // Resetear al cerrar o si no hay publicación
    }
  }, [open, publicacion]);

  const handleCheckboxChange = (dayIndex: number) => {
    setSelectedDays(prev => {
      const newSelection = new Set(prev);
      if (newSelection.has(dayIndex)) {
        newSelection.delete(dayIndex);
      } else {
        newSelection.add(dayIndex);
      }
      return newSelection;
    });
    setError(null); // Limpiar error al cambiar
  };

  const handleSubmit = async () => {
    if (!publicacion) return;
    setLoading(true);
    setError(null);
    const requestDto: UpdatePublicacionDiasSemanaRequestDto = {
      diasActivos: Array.from(selectedDays)
    };
    try {
      await publicacionService.updateConfiguracionDiasPublicacion(publicacion.idPublicacion, requestDto);
      onConfigSaved(); // Notificar al padre que se guardó
      onClose();
    } catch (err: any) {
      console.error("Error al guardar configuración de días:", err);
      const message = axios.isAxiosError(err) && err.response?.data?.message 
        ? err.response.data.message 
        : 'Error al guardar la configuración.';
      setError(message);
    } finally {
      setLoading(false);
    }
  };

  if (!publicacion) return null;

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" gutterBottom>
          Configurar Días de Salida para: {publicacion.nombre}
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{mb:2}}>
            Marque los días en que esta publicación debe aparecer por defecto en los movimientos de canillitas.
        </Typography>
        
        {loading && <Box sx={{display:'flex', justifyContent:'center', my:2}}><CircularProgress /></Box>}
        {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}

        {!loading && (
            <Paper variant="outlined" sx={{p:2}}>
                <FormGroup>
                {diasSemanaNombres.map((nombreDia, index) => (
                    <FormControlLabel
                    key={index}
                    control={
                        <Checkbox
                        checked={selectedDays.has(index)}
                        onChange={() => handleCheckboxChange(index)}
                        />
                    }
                    label={nombreDia}
                    />
                ))}
                </FormGroup>
            </Paper>
        )}

        <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
          <Button onClick={onClose} color="secondary" disabled={loading}>Cancelar</Button>
          <Button onClick={handleSubmit} variant="contained" disabled={loading}>
            {loading ? <CircularProgress size={24} /> : 'Guardar Configuración'}
          </Button>
        </Box>
      </Box>
    </Modal>
  );
};

export default PublicacionDiasSemanaModal;