import React, { useState, useEffect } from 'react';
import {
    Box, Typography, TextField, Button, CircularProgress, Alert,
    FormControl, InputLabel, Select, MenuItem, FormControlLabel, Checkbox
} from '@mui/material';
import type { PlantaDropdownDto } from '../../models/dtos/Impresion/PlantaDropdownDto';
import plantaService from '../../services/Impresion/plantaService';

interface SeleccionaReporteComparativaConsumoBobinasProps {
  onGenerarReporte: (params: {
    fechaInicioMesA: string;
    fechaFinMesA: string;
    fechaInicioMesB: string;
    fechaFinMesB: string;
    idPlanta?: number | null;
    consolidado: boolean;
  }) => Promise<void>;
  onCancel: () => void;
  isLoading?: boolean;
  apiErrorMessage?: string | null;
}

const SeleccionaReporteComparativaConsumoBobinas: React.FC<SeleccionaReporteComparativaConsumoBobinasProps> = ({
  onGenerarReporte,
  isLoading,
  apiErrorMessage
}) => {
  const today = new Date();
  const currentMonthYear = today.toISOString().substring(0, 7); // YYYY-MM para el mes actual
  const lastMonthDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);
  const lastMonthYear = lastMonthDate.toISOString().substring(0, 7); // YYYY-MM para el mes pasado

  const [mesAnioA, setMesAnioA] = useState<string>(lastMonthYear);
  const [mesAnioB, setMesAnioB] = useState<string>(currentMonthYear);
  const [idPlanta, setIdPlanta] = useState<number | string>('');
  const [consolidado, setConsolidado] = useState<boolean>(false);

  const [plantas, setPlantas] = useState<PlantaDropdownDto[]>([]);
  const [loadingDropdowns, setLoadingDropdowns] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  useEffect(() => {
    const fetchPlantas = async () => {
      setLoadingDropdowns(true);
      try {
        const plantasData = await plantaService.getPlantasForDropdown();
        setPlantas(plantasData);
      } catch (error) {
        console.error("Error al cargar plantas:", error);
        setLocalErrors(prev => ({ ...prev, dropdowns: 'Error al cargar plantas.' }));
      } finally {
        setLoadingDropdowns(false);
      }
    };
    fetchPlantas();
  }, []);

  useEffect(() => {
    if (consolidado) {
      setIdPlanta('');
    }
  }, [consolidado]);

  const getFirstAndLastDayOfMonth = (yearMonth: string): { firstDay: string, lastDay: string } => {
    const [year, month] = yearMonth.split('-').map(Number);
    const firstDay = new Date(year, month - 1, 1);
    const lastDay = new Date(year, month, 0); // El día 0 del siguiente mes es el último del mes actual
    return {
      firstDay: firstDay.toISOString().split('T')[0],
      lastDay: lastDay.toISOString().split('T')[0],
    };
  };

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!mesAnioA) errors.mesAnioA = 'Mes/Año A es obligatorio.';
    if (!mesAnioB) errors.mesAnioB = 'Mes/Año B es obligatorio.';
    if (mesAnioA && mesAnioB && mesAnioA === mesAnioB) {
        errors.mesAnioB = 'Mes A y Mes B no pueden ser iguales para una comparativa.';
    }
    if (!consolidado && !idPlanta) {
      errors.idPlanta = 'Seleccione una planta si no es consolidado.';
    }
    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleGenerar = () => {
    if (!validate()) return;

    const periodoA = getFirstAndLastDayOfMonth(mesAnioA);
    const periodoB = getFirstAndLastDayOfMonth(mesAnioB);

    onGenerarReporte({
      fechaInicioMesA: periodoA.firstDay,
      fechaFinMesA: periodoA.lastDay,
      fechaInicioMesB: periodoB.firstDay,
      fechaFinMesB: periodoB.lastDay,
      idPlanta: consolidado ? null : Number(idPlanta),
      consolidado
    });
  };

  return (
    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: '4px', minWidth: 380 }}>
      <Typography variant="h6" gutterBottom>
        Parámetros: Comparativa Consumo Bobinas
      </Typography>
      
      <Box sx={{ display: 'flex', gap: 2, mb: 1, alignItems: 'flex-start' }}>
        <TextField
            label="Mes/Año A" type="month" value={mesAnioA}
            onChange={(e) => { setMesAnioA(e.target.value); setLocalErrors(p => ({ ...p, mesAnioA: null, mesAnioB: null })); }}
            margin="normal" fullWidth required error={!!localErrors.mesAnioA} helperText={localErrors.mesAnioA}
            disabled={isLoading} InputLabelProps={{ shrink: true }} sx={{flex: 1}}
        />
        <TextField
            label="Mes/Año B" type="month" value={mesAnioB}
            onChange={(e) => { setMesAnioB(e.target.value); setLocalErrors(p => ({ ...p, mesAnioB: null })); }}
            margin="normal" fullWidth required error={!!localErrors.mesAnioB} helperText={localErrors.mesAnioB}
            disabled={isLoading} InputLabelProps={{ shrink: true }} sx={{flex: 1}}
        />
      </Box>
      
      <FormControlLabel
        control={
          <Checkbox
            checked={consolidado}
            onChange={(e) => setConsolidado(e.target.checked)}
            disabled={isLoading}
          />
        }
        label="Consolidado (Todas las Plantas)"
        sx={{ mt: 1, mb: 1, display: 'block' }}
      />
      <FormControl fullWidth margin="normal" error={!!localErrors.idPlanta} disabled={isLoading || loadingDropdowns || consolidado}>
        <InputLabel id="planta-select-label-comp" required={!consolidado}>Planta</InputLabel>
        <Select
          labelId="planta-select-label-comp"
          label="Planta"
          value={consolidado ? '' : idPlanta}
          onChange={(e) => { setIdPlanta(e.target.value as number); setLocalErrors(p => ({ ...p, idPlanta: null })); }}
        >
          <MenuItem value="" disabled><em>{consolidado ? 'N/A (Consolidado)' : 'Seleccione una planta'}</em></MenuItem>
          {plantas.map((p) => (
            <MenuItem key={p.idPlanta} value={p.idPlanta}>{p.nombre}</MenuItem>
          ))}
        </Select>
        {localErrors.idPlanta && <Typography color="error" variant="caption" sx={{ml:1.5}}>{localErrors.idPlanta}</Typography>}
      </FormControl>

      {apiErrorMessage && <Alert severity="error" sx={{ mt: 2 }}>{apiErrorMessage}</Alert>}
      {localErrors.dropdowns && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.dropdowns}</Alert>}

      <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
        <Button onClick={handleGenerar} variant="contained" disabled={isLoading || loadingDropdowns}>
          {isLoading ? <CircularProgress size={24} /> : 'Generar Reporte'}
        </Button>
      </Box>
    </Box>
  );
};

export default SeleccionaReporteComparativaConsumoBobinas;