import React, { useState } from 'react';
import { Box, Typography, Button, CircularProgress, Alert, TextField } from '@mui/material';

interface SeleccionaReporteProps {
  onGenerarReporte: (params: { fechaDesde: string, fechaHasta: string }) => Promise<void>;
  isLoading?: boolean;
  apiErrorMessage?: string | null;
}

const SeleccionaReporteDistribucionSuscripciones: React.FC<SeleccionaReporteProps> = ({
  onGenerarReporte,
  isLoading,
  apiErrorMessage
}) => {
  const [fechaDesde, setFechaDesde] = useState(new Date().toISOString().split('T')[0]);
  const [fechaHasta, setFechaHasta] = useState(new Date().toISOString().split('T')[0]);

  const handleGenerar = () => {
    onGenerarReporte({ fechaDesde, fechaHasta });
  };

  return (
    <Box sx={{ p: 2, border: '1px solid #ccc', borderRadius: '4px', minWidth: 400 }}>
      <Typography variant="h6" gutterBottom>
        Reporte de Distribución de Suscripciones
      </Typography>
      <Typography variant="body2" color="text.secondary" sx={{mb: 2}}>
        Seleccione un rango de fechas para generar el listado de suscriptores activos y sus detalles de entrega.
      </Typography>

      <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mb: 2 }}>
        <TextField
            label="Fecha Desde"
            type="date"
            fullWidth
            value={fechaDesde}
            onChange={(e) => setFechaDesde(e.target.value)}
            InputLabelProps={{ shrink: true }}
            disabled={isLoading}
        />
        <TextField
            label="Fecha Hasta"
            type="date"
            fullWidth
            value={fechaHasta}
            onChange={(e) => setFechaHasta(e.target.value)}
            InputLabelProps={{ shrink: true }}
            disabled={isLoading}
        />
      </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 SeleccionaReporteDistribucionSuscripciones;