import React, { useState, useCallback, useMemo } from 'react';
import {
  Box, Typography, Paper, CircularProgress, Alert, Button
} from '@mui/material';
import { DataGrid, type GridColDef, GridFooterContainer, GridFooter } from '@mui/x-data-grid';
import { esES } from '@mui/x-data-grid/locales';
import reportesService from '../../services/Reportes/reportesService';
import type { TiradasPublicacionesSeccionesDto } from '../../models/dtos/Reportes/TiradasPublicacionesSeccionesDto';
import SeleccionaReporteTiradasPublicacionesSecciones from './SeleccionaReporteTiradasPublicacionesSecciones';
import { usePermissions } from '../../hooks/usePermissions';
import * as XLSX from 'xlsx';
import axios from 'axios';

// Interfaz extendida para DataGrid
interface TiradasPublicacionesSeccionesDataGridDto extends TiradasPublicacionesSeccionesDto {
  id: string;
}

const ReporteTiradasPublicacionesSeccionesPage: React.FC = () => {
  const [reportData, setReportData] = useState<TiradasPublicacionesSeccionesDataGridDto[]>([]);
  const [loading, setLoading] = useState(false);
  const [loadingPdf, setLoadingPdf] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [apiErrorParams, setApiErrorParams] = useState<string | null>(null);
  const [showParamSelector, setShowParamSelector] = useState(true);
  const [currentParams, setCurrentParams] = useState<{
    idPublicacion: number;
    fechaDesde: string;
    fechaHasta: string;
    idPlanta?: number | null;
    consolidado: boolean;
    nombrePublicacion?: string;
    nombrePlanta?: string;
    mesAnioParaNombreArchivo?: string;
  } | null>(null);
  const { tienePermiso, isSuperAdmin } = usePermissions();
  const puedeVerReporte = isSuperAdmin || tienePermiso("RR008");

  const numberLocaleFormatter = (value: number | null | undefined, fractionDigits: number = 0) =>
    value != null ? Number(value).toLocaleString('es-AR', { minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits }) : '';

  const handleGenerarReporte = useCallback(async (params: {
    idPublicacion: number;
    fechaDesde: string;
    fechaHasta: string;
    idPlanta?: number | null;
    consolidado: boolean;
  }) => {
    if (!puedeVerReporte) {
      setError("No tiene permiso para generar este reporte.");
      setLoading(false);
      return;
    }
    setLoading(true);
    setError(null);
    setApiErrorParams(null);
    setReportData([]);

    const pubService = (await import('../../services/Distribucion/publicacionService')).default;
    const pubData = await pubService.getPublicacionById(params.idPublicacion);
    let plantaNombre = "Consolidado";
    if (!params.consolidado && params.idPlanta) {
      const plantaService = (await import('../../services/Impresion/plantaService')).default;
      const plantaData = await plantaService.getPlantaById(params.idPlanta);
      plantaNombre = plantaData?.nombre ?? "N/A";
    }
    // Formatear mes y año para el título/nombre de archivo
    // const fechaDesdeObj = new Date(params.fechaDesde + 'T00:00:00'); // Asegurar que es local
    // const mesAnioNombre = fechaDesdeObj.toLocaleDateString('es-AR', { month: 'long', year: 'numeric', timeZone: 'UTC' });

    // Usar el formato mes/año del PDF para el nombre del archivo si se prefiere, o el que ya tenías
    const dateParts = params.fechaDesde.split('-'); // Asume YYYY-MM-DD
    const mesAnioNombre = `${dateParts[1]}/${dateParts[0]}`;


    setCurrentParams({ ...params, nombrePublicacion: pubData?.nombre, nombrePlanta: plantaNombre, mesAnioParaNombreArchivo: mesAnioNombre });

    try {
      const data = await reportesService.getTiradasPublicacionesSecciones(params);
      const dataWithIds = data.map((item, index) => ({ ...item, id: `${item.nombreSeccion}-${index}` }));
      setReportData(dataWithIds);
      if (dataWithIds.length === 0) {
        setError("No se encontraron datos para los parámetros seleccionados.");
      }
      setShowParamSelector(false);
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message
        ? err.response.data.message
        : 'Ocurrió un error al generar el reporte.';
      setApiErrorParams(message);
    } finally {
      setLoading(false);
    }
  }, []);

  const handleVolverAParametros = useCallback(() => {
    setShowParamSelector(true);
    setReportData([]);
    setError(null);
    setApiErrorParams(null);
    setCurrentParams(null);
  }, []);

  const handleExportToExcel = useCallback(() => {
    if (reportData.length === 0) {
      alert("No hay datos para exportar.");
      return;
    }
    const dataToExport = reportData.map(item => ({
      "Nombre Sección": item.nombreSeccion,
      "Páginas Impresas": item.totalPaginasImpresas, // Cambiado para coincidir con PDF
      "Total Ediciones": item.cantidadTiradas,    // Cambiado para coincidir con PDF
      "Pág. Por Edición (Promedio)": item.totalPaginasEjemplares, // Nombre según PDF
      "Total Ejemplares": item.totalEjemplares,
      "Pág. Ejemplar (Promedio)": item.promedioPaginasPorEjemplar, // Nombre según PDF
    }));

    // Totales para Excel
    const totales = {
      "Nombre Sección": "Totales",
      "Páginas Impresas": reportData.reduce((sum, item) => sum + item.totalPaginasImpresas, 0),
      "Total Ediciones": reportData.reduce((sum, item) => sum + item.cantidadTiradas, 0),
      "Pág. Por Edición (Promedio)": reportData.reduce((sum, item) => sum + item.totalPaginasEjemplares, 0), // Suma de promedios para el total, como en el PDF
      "Total Ejemplares": reportData.reduce((sum, item) => sum + item.totalEjemplares, 0),
      "Pág. Ejemplar (Promedio)": reportData.reduce((sum, item) => sum + item.promedioPaginasPorEjemplar, 0), // Suma de promedios para el total
    };
    dataToExport.push(totales);

    const ws = XLSX.utils.json_to_sheet(dataToExport);
    const headers = Object.keys(dataToExport[0] || {});
    ws['!cols'] = headers.map(h => {
      const maxLen = Math.max(...dataToExport.map(row => (row as any)[h]?.toString().length ?? 0), h.length);
      return { wch: maxLen + 2 };
    });
    ws['!freeze'] = { xSplit: 0, ySplit: 1 };

    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "TiradasSecciones");

    let fileName = "ReporteTiradasSecciones";
    if (currentParams) {
      fileName += `_${currentParams.nombrePublicacion?.replace(/\s+/g, '') ?? `Pub${currentParams.idPublicacion}`}`;
      if (!currentParams.consolidado && currentParams.idPlanta) fileName += `_Planta${currentParams.idPlanta}`;
      else if (currentParams.consolidado) fileName += "_Consolidado";
      fileName += `_${currentParams.mesAnioParaNombreArchivo?.replace('/', '-')}`;
    }
    fileName += ".xlsx";
    XLSX.writeFile(wb, fileName);
  }, [reportData, currentParams]);

  const handleGenerarYAbrirPdf = useCallback(async () => {
    if (!currentParams) {
      setError("Primero debe generar el reporte en pantalla o seleccionar parámetros.");
      return;
    }
    setLoadingPdf(true);
    setError(null);
    try {
      const blob = await reportesService.getTiradasPublicacionesSeccionesPdf(currentParams);
      if (blob.type === "application/json") {
        const text = await blob.text();
        const msg = JSON.parse(text).message ?? "Error inesperado al generar PDF.";
        setError(msg);
      } else {
        const url = URL.createObjectURL(blob);
        const w = window.open(url, '_blank');
        if (!w) alert("Permite popups para ver el PDF.");
      }
    } catch {
      setError('Ocurrió un error al generar el PDF.');
    } finally {
      setLoadingPdf(false);
    }
  }, [currentParams]);

  const columns: GridColDef<TiradasPublicacionesSeccionesDataGridDto>[] = [
    { field: 'nombreSeccion', headerName: 'Nombre', width: 250, flex: 1.5 },
    { field: 'totalPaginasImpresas', headerName: 'Páginas Impresas', type: 'number', width: 150, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'cantidadTiradas', headerName: 'Total Ediciones', type: 'number', width: 130, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'totalPaginasEjemplares', headerName: 'Pág. Por Edición (Promedio)', type: 'number', width: 180, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'totalEjemplares', headerName: 'Total Ejemplares', type: 'number', width: 150, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'promedioPaginasPorEjemplar', headerName: 'Pág. Ejemplar (Promedio)', type: 'number', width: 180, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
  ];

  const rows = useMemo(() => reportData, [reportData]);

  const totalesGenerales = useMemo(() => {
    if (reportData.length === 0) return null;
    return {
      totalPaginasImpresas: reportData.reduce((sum, item) => sum + item.totalPaginasImpresas, 0),
      cantidadTiradas: reportData.reduce((sum, item) => sum + item.cantidadTiradas, 0),
      totalPaginasEjemplares: reportData.reduce((sum, item) => sum + item.totalPaginasEjemplares, 0), // Suma de promedios para el total, como en el PDF
      totalEjemplares: reportData.reduce((sum, item) => sum + item.totalEjemplares, 0),
      promedioPaginasPorEjemplar: reportData.reduce((sum, item) => sum + item.promedioPaginasPorEjemplar, 0), // Suma de promedios para el total
    };
  }, [reportData]);

  // eslint-disable-next-line react/display-name
  const CustomFooter = () => {
    if (!totalesGenerales) return null;

    const getCellStyle = (field: (typeof columns)[number]['field'] | 'label', isLabel: boolean = false) => {
      const colConfig = columns.find(c => c.field === field);
      let targetWidth: number | string = 'auto';
      let targetMinWidth: number | string = 'auto';

      if (isLabel) {
        targetWidth = colConfig?.width ? Math.max(100, colConfig.width * 0.6) : 150;
        targetMinWidth = 100;
      } else if (colConfig) {
        targetWidth = colConfig.width ? Math.max(80, colConfig.width * 0.8) : 100;
        targetMinWidth = 80;
      }

      return {
        minWidth: targetMinWidth,
        width: targetWidth,
        textAlign: isLabel ? 'left' : (colConfig?.align || 'right') as 'left' | 'right' | 'center',
        pr: isLabel ? 1 : (field === 'promedioPaginasPorEjemplar' ? 0 : 1),
        fontWeight: 'bold',
        whiteSpace: 'nowrap',
      };
    };

    return (
      <GridFooterContainer sx={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        width: '100%', borderTop: (theme) => `1px solid ${theme.palette.divider}`, minHeight: '52px',
      }}>
        <Box sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, overflow: 'hidden', px: 1 }}>
          <GridFooter
            sx={{
              borderTop: 'none', width: 'auto',
              '& .MuiToolbar-root': { paddingLeft: 0, paddingRight: 0, },
              '& .MuiDataGrid-selectedRowCount': { display: 'none' },
            }}
          />
        </Box>
        <Box sx={{
          display: 'flex', alignItems: 'center', fontWeight: 'bold',
          whiteSpace: 'nowrap', overflowX: 'auto', px: 1, flexShrink: 1,
        }}>
          <Typography variant="subtitle2" sx={getCellStyle('label', true)}>Totales</Typography> {/* Cambiado de TOTALES: a Totales */}
          <Typography variant="subtitle2" sx={getCellStyle('totalPaginasImpresas')}>{numberLocaleFormatter(totalesGenerales.totalPaginasImpresas)}</Typography>
          <Typography variant="subtitle2" sx={getCellStyle('cantidadTiradas')}>{numberLocaleFormatter(totalesGenerales.cantidadTiradas)}</Typography>
          <Typography variant="subtitle2" sx={getCellStyle('totalPaginasEjemplares')}>{numberLocaleFormatter(totalesGenerales.totalPaginasEjemplares)}</Typography>
          <Typography variant="subtitle2" sx={getCellStyle('totalEjemplares')}>{numberLocaleFormatter(totalesGenerales.totalEjemplares)}</Typography>
          <Typography variant="subtitle2" sx={getCellStyle('promedioPaginasPorEjemplar')}>{numberLocaleFormatter(totalesGenerales.promedioPaginasPorEjemplar)}</Typography>
        </Box>
      </GridFooterContainer>
    );
  };

  if (showParamSelector) {
    if (!loading && !puedeVerReporte) {
      return <Alert severity="error" sx={{ m: 2 }}>No tiene permiso para acceder a este reporte.</Alert>;
    }
    return (
      <Box sx={{ p: 2, display: 'flex', justifyContent: 'center', mt: 2 }}>
        <Paper sx={{ width: '100%', maxWidth: 600 }} elevation={3}>
          <SeleccionaReporteTiradasPublicacionesSecciones
            onGenerarReporte={handleGenerarReporte}
            onCancel={handleVolverAParametros}
            isLoading={loading}
            apiErrorMessage={apiErrorParams}
          />
        </Paper>
      </Box>
    );
  }

  return (
    <Box sx={{ p: 2 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2, flexWrap: 'wrap', gap: 1 }}>
        <Typography variant="h5">Reporte: Tiradas por Publicación Mensual</Typography> {/* Título ajustado al PDF */}
        <Box sx={{ display: 'flex', gap: 1 }}>
          <Button onClick={handleGenerarYAbrirPdf} variant="contained" disabled={loadingPdf || reportData.length === 0 || !!error} size="small">
            {loadingPdf ? <CircularProgress size={20} color="inherit" /> : "Abrir PDF"}
          </Button>
          <Button onClick={handleExportToExcel} variant="outlined" disabled={reportData.length === 0 || !!error} size="small">
            Exportar a Excel
          </Button>
          <Button onClick={handleVolverAParametros} variant="outlined" color="secondary" size="small">
            Nuevos Parámetros
          </Button>
        </Box>
      </Box>
      <Typography variant="subtitle1" gutterBottom>
        Publicación: {currentParams?.nombrePublicacion} |
        Planta: {currentParams?.nombrePlanta} |
        Mes Consultado: {currentParams?.mesAnioParaNombreArchivo}
      </Typography>

      {loading && <Box sx={{ textAlign: 'center', my: 2 }}><CircularProgress /></Box>}
      {error && !loading && <Alert severity="info" sx={{ my: 2 }}>{error}</Alert>}

      {!loading && !error && reportData.length > 0 && (
        <Paper sx={{ width: '100%', mt: 2 }}>
          <DataGrid
            rows={rows}
            columns={columns}
            localeText={esES.components.MuiDataGrid.defaultProps.localeText}
            slots={{ footer: CustomFooter }}
            density="compact"
            sx={{ height: 'calc(100vh - 320px)' }} // Ajustar altura según sea necesario
            initialState={{
              pagination: {
                paginationModel: { pageSize: 100, page: 0 },
              },
            }}
            pageSizeOptions={[25, 50, 100]}
            disableRowSelectionOnClick
          />
        </Paper>
      )}
      {!loading && !error && reportData.length === 0 && currentParams && (<Typography sx={{ mt: 2, fontStyle: 'italic' }}>No se encontraron datos para los criterios seleccionados.</Typography>)}
    </Box>
  );
};

export default ReporteTiradasPublicacionesSeccionesPage;