import React, { useState } from 'react';
import {
    Box, Typography, Button, CircularProgress, Alert,
    FormControl, InputLabel, Select, MenuItem, type SelectChangeEvent
} from '@mui/material';

// --- Constantes para los selectores de fecha ---
const anios = Array.from({ length: 10 }, (_, i) => new Date().getFullYear() - i);
const meses = [
    { value: 1, label: 'Enero' }, { value: 2, label: 'Febrero' }, { value: 3, label: 'Marzo' },
    { value: 4, label: 'Abril' }, { value: 5, label: 'Mayo' }, { value: 6, label: 'Junio' },
    { value: 7, label: 'Julio' }, { value: 8, label: 'Agosto' }, { value: 9, label: 'Septiembre' },
    { value: 10, label: 'Octubre' }, { value: 11, label: 'Noviembre' }, { value: 12, label: 'Diciembre' }
];

interface SeleccionaReporteFacturasPublicidadProps {
  onGenerarReporte: (params: { anio: number; mes: number; }) => Promise<void>;
  isLoading?: boolean;
  apiErrorMessage?: string | null;
}

const SeleccionaReporteFacturasPublicidad: React.FC<SeleccionaReporteFacturasPublicidadProps> = ({
  onGenerarReporte,
  isLoading,
  apiErrorMessage
}) => {
  const [anio, setAnio] = useState<number>(new Date().getFullYear());
  const [mes, setMes] = useState<number>(new Date().getMonth() + 1);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!anio) errors.anio = 'Debe seleccionar un año.';
    if (!mes) errors.mes = 'Debe seleccionar un mes.';
    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleGenerar = () => {
    if (!validate()) return;
    onGenerarReporte({ anio, mes });
  };

  return (
    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: '4px', minWidth: 300 }}>
      <Typography variant="h6" gutterBottom>
        Parámetros: Reporte de Facturas para Publicidad
      </Typography>
      <Typography variant="body2" color="text.secondary" sx={{mb: 2}}>
        Seleccione el período para generar el reporte.
        <br />
        Se incluirán todas las suscripciones pagadas que aún están pendientes de facturar.
      </Typography>

      <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mb: 2 }}>
        <FormControl fullWidth margin="normal" size="small" error={!!localErrors.mes} disabled={isLoading}>
            <InputLabel>Mes</InputLabel>
            <Select value={mes} label="Mes" onChange={(e: SelectChangeEvent<number>) => setMes(e.target.value as number)}>
                {meses.map(m => <MenuItem key={m.value} value={m.value}>{m.label}</MenuItem>)}
            </Select>
        </FormControl>
        <FormControl fullWidth margin="normal" size="small" error={!!localErrors.anio} disabled={isLoading}>
            <InputLabel>Año</InputLabel>
            <Select value={anio} label="Año" onChange={(e: SelectChangeEvent<number>) => setAnio(e.target.value as number)}>
                {anios.map(a => <MenuItem key={a} value={a}>{a}</MenuItem>)}
            </Select>
        </FormControl>
      </Box>

      {apiErrorMessage && <Alert severity="error" sx={{ mt: 2 }}>{apiErrorMessage}</Alert>}

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

export default SeleccionaReporteFacturasPublicidad;