import React, { useState } from 'react';
import { Box, Alert, Paper } from '@mui/material';
import reporteService from '../../services/Reportes/reportesService';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';
import SeleccionaReporteDistribucionSuscripciones from './SeleccionaReporteDistribucionSuscripciones';

const ReporteDistribucionSuscripcionesPage: React.FC = () => {
    const [loading, setLoading] = useState(false);
    const [apiError, setApiError] = useState<string | null>(null);
    
    const { tienePermiso, isSuperAdmin } = usePermissions();
    const puedeVerReporte = isSuperAdmin || tienePermiso("RR011");

    const handleGenerateReport = async (params: { fechaDesde: string; fechaHasta: string; }) => {
        setLoading(true);
        setApiError(null);
        try {
            const { fileContent, fileName } = await reporteService.getReporteDistribucionSuscripcionesPdf(params.fechaDesde, params.fechaHasta);
            
            const url = window.URL.createObjectURL(new Blob([fileContent], { type: 'application/pdf' }));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', fileName);
            document.body.appendChild(link);
            link.click();
            link.parentNode?.removeChild(link);
            window.URL.revokeObjectURL(url);

        } catch (err: any) {
            let message = 'Ocurrió un error al generar el reporte.';
            if (axios.isAxiosError(err) && err.response) {
                if (err.response.status === 404) {
                    message = "No se encontraron datos para los parámetros seleccionados.";
                } else if (err.response.data instanceof Blob && err.response.data.type === "application/json") {
                    const errorText = await err.response.data.text();
                    try {
                        const errorJson = JSON.parse(errorText);
                        message = errorJson.message || message;
                    } catch { 
                        message = errorText || message; 
                    }
                }
            }
            setApiError(message);
        } finally {
            setLoading(false);
        }
    };
    
    if (!puedeVerReporte) {
        return <Alert severity="error">No tiene permiso para ver este reporte.</Alert>;
    }

    return (
        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start', pt: 4 }}>
            <Paper elevation={3} sx={{ borderRadius: '8px' }}>
                 <SeleccionaReporteDistribucionSuscripciones
                    onGenerarReporte={handleGenerateReport}
                    isLoading={loading}
                    apiErrorMessage={apiError}
                />
            </Paper>
        </Box>
    );
};

export default ReporteDistribucionSuscripcionesPage;