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

// Para el tipo del footer en DataGridSectionProps
type FooterPropsOverrides = {};
type CustomFooterType = JSXElementConstructor<HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> } & FooterPropsOverrides>;


interface TotalesComunes {
  totalCantSalida: number;
  totalCantEntrada: number;
  vendidos: number;
  totalRendir: number;
}

interface DataGridSectionProps {
  title: string;
  data: Array<any>;
  columns: GridColDef[];
  isLoading?: boolean;
  footerComponent?: CustomFooterType; // Tipo más específico para el footer
  height?: number | string;
}

const DataGridSection: React.FC<DataGridSectionProps> = ({ title, data, columns, isLoading, footerComponent, height = 300 }) => {
  const rows = useMemo(() => data.map((r, i) => ({ ...r, _internalId: i })), [data]);

  if (isLoading) {
    return <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />;
  }

  if (!rows || rows.length === 0) {
    return <Typography sx={{ mt: 1, fontStyle: 'italic', mb: 2 }}>No hay datos para {title.toLowerCase()}.</Typography>;
  }

  const slotsProp: Partial<GridSlotsComponent> = {};
  if (footerComponent) {
    slotsProp.footer = footerComponent;
  }

  return (
    <>
      <Typography variant="subtitle1" gutterBottom sx={{ mt: 2, fontWeight: 'bold' }}>{title}</Typography>
      <Paper sx={{ height: footerComponent ? 'auto' : height, width: '100%', mb: 2, '& .MuiDataGrid-footerContainer': { minHeight: footerComponent ? '52px' : undefined } }}>
        <DataGrid
          rows={rows}
          columns={columns}
          localeText={esES.components.MuiDataGrid.defaultProps.localeText}
          density="compact"
          getRowId={(row) => row.id || row._internalId}
          slots={slotsProp} // Usar el objeto slotsProp
          hideFooterSelectedRowCount={!!footerComponent}
          autoHeight={!!footerComponent}
          sx={!footerComponent ? {} : {
            '& .MuiTablePagination-root': { display: 'none' },
            '& .MuiDataGrid-selectedRowCount': { display: 'none' },
          }}
        />
      </Paper>
    </>
  );
};


const ReporteDetalleDistribucionCanillasPage: React.FC = () => {
  const [reportData, setReportData] = useState<ReporteDistribucionCanillasResponseDto | null>(null);
  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<{
    fecha: string;
    idEmpresa: number;
    esAccionista: boolean;
    nombreEmpresa?: string;
  } | null>(null);
  const [pdfSoloTotales, setPdfSoloTotales] = useState(false);
  const { tienePermiso, isSuperAdmin } = usePermissions();
  const puedeVerReporte = isSuperAdmin || tienePermiso("MC005");

  const initialTotals: TotalesComunes = { totalCantSalida: 0, totalCantEntrada: 0, vendidos: 0, totalRendir: 0 };
  const [totalesCanillas, setTotalesCanillas] = useState<TotalesComunes>(initialTotals);
  const [totalesAccionistas, setTotalesAccionistas] = useState<TotalesComunes>(initialTotals);
  const [totalesCanillasOtraFecha, setTotalesCanillasOtraFecha] = useState<TotalesComunes>(initialTotals);
  const [totalesAccionistasOtraFecha, setTotalesAccionistasOtraFecha] = useState<TotalesComunes>(initialTotals);
  const [totalesResumen, setTotalesResumen] = useState<TotalesComunes>(initialTotals);

  const currencyFormatter = (value: number | null | undefined) =>
    value != null ? value.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' }) : '';
  const numberFormatter = (value: number | null | undefined) =>
    value != null ? Number(value).toLocaleString('es-AR') : '';

  const calculateAndSetTotals = (dataArray: Array<any> | undefined, setTotalsFunc: React.Dispatch<React.SetStateAction<TotalesComunes>>) => {
    if (dataArray && dataArray.length > 0) {
      const totals = dataArray.reduce((acc, item) => {
        acc.totalCantSalida += Number(item.totalCantSalida) || 0;
        acc.totalCantEntrada += Number(item.totalCantEntrada) || 0;
        acc.totalRendir += Number(item.totalRendir) || 0;
        return acc;
      }, { totalCantSalida: 0, totalCantEntrada: 0, totalRendir: 0 });
      totals.vendidos = totals.totalCantSalida - totals.totalCantEntrada;
      setTotalsFunc(totals);
    } else {
      setTotalsFunc(initialTotals);
    }
  };

  const handleGenerarReporte = useCallback(async (params: {
    fecha: string;
    idEmpresa: number;
    esAccionista: boolean;
  }) => {
    if (!puedeVerReporte) {
      setError("No tiene permiso para generar este reporte.");
      setLoading(false);
      return;
    }

    setLoading(true);
    setError(null);
    setApiErrorParams(null);

    let nombreEmpresa = `Empresa ID ${params.idEmpresa}`;
    if (params.idEmpresa !== 0) {
      const empresaService = (await import('../../services/Distribucion/empresaService')).default;
      const empData = await empresaService.getEmpresaById(params.idEmpresa);
      nombreEmpresa = empData?.nombre ?? nombreEmpresa;
    } else {
      nombreEmpresa = "TODAS";
    }

    setCurrentParams({ ...params, nombreEmpresa });
    setReportData(null);
    setTotalesCanillas(initialTotals);
    setTotalesAccionistas(initialTotals);
    setTotalesCanillasOtraFecha(initialTotals);
    setTotalesAccionistasOtraFecha(initialTotals);
    setTotalesResumen(initialTotals);

    try {
      const data = await reportesService.getReporteDistribucionCanillas(params);

      const addIds = <T extends Record<string, any>>(arr: T[] | undefined, prefix: string): Array<T & { id: string }> =>
        (arr || []).map((item, index) => ({ ...item, id: `${prefix}-${item.publicacion || item.tipoVendedor || item.remito || item.devueltos || 'item'}-${index}-${Math.random().toString(36).substring(7)}` }));

      const processedData = {
        canillas: addIds(data.canillas, 'can'),
        canillasAccionistas: addIds(data.canillasAccionistas, 'acc'),
        canillasTodos: addIds(data.canillasTodos, 'all'),
        canillasLiquidadasOtraFecha: addIds(data.canillasLiquidadasOtraFecha, 'canliq'),
        canillasAccionistasLiquidadasOtraFecha: addIds(data.canillasAccionistasLiquidadasOtraFecha, 'accliq'),
        controlDevolucionesDetalle: addIds(data.controlDevolucionesDetalle, 'cdd'),
        controlDevolucionesRemitos: addIds(data.controlDevolucionesRemitos, 'cdr'),
        controlDevolucionesOtrosDias: addIds(data.controlDevolucionesOtrosDias, 'cdo')
      };
      setReportData(processedData);

      calculateAndSetTotals(processedData.canillas, setTotalesCanillas);
      calculateAndSetTotals(processedData.canillasAccionistas, setTotalesAccionistas);
      calculateAndSetTotals(processedData.canillasLiquidadasOtraFecha, setTotalesCanillasOtraFecha);
      calculateAndSetTotals(processedData.canillasAccionistasLiquidadasOtraFecha, setTotalesAccionistasOtraFecha);
      calculateAndSetTotals(processedData.canillasTodos, setTotalesResumen);

      const noDataFound = Object.values(processedData).every(arr => !arr || arr.length === 0);
      if (noDataFound) {
        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);
      setReportData(null);
    } finally {
      setLoading(false);
    }
  }, [puedeVerReporte]);

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

  const handleExportToExcel = useCallback(() => {
    if (!reportData) {
      alert("No hay datos para exportar.");
      return;
    }
    const wb = XLSX.utils.book_new();

    const formatAndSheet = (data: any[], sheetName: string, fields: Record<string, string>) => {
      if (data && data.length > 0) {
        const exportedData = data.map(item => {
          const row: Record<string, any> = {};
          const { id, ...itemData } = item;
          Object.keys(fields).forEach(key => {
            row[fields[key]] = (itemData as any)[key];
            if (key === 'fecha' && (itemData as any)[key]) {
              row[fields[key]] = new Date((itemData as any)[key]).toLocaleDateString('es-AR', { timeZone: 'UTC' });
            }
            if ((key === 'totalRendir') && (itemData as any)[key] != null) {
              row[fields[key]] = parseFloat((itemData as any)[key]).toFixed(2);
            }
            if (key === 'vendidos' && itemData.totalCantSalida != null && itemData.totalCantEntrada != null) {
              row[fields[key]] = itemData.totalCantSalida - itemData.totalCantEntrada;
            }
          });
          return row;
        });
        const ws = XLSX.utils.json_to_sheet(exportedData);
        const headers = Object.values(fields);
        ws['!cols'] = headers.map(h => {
          const maxLen = Math.max(...exportedData.map(row => (row[h]?.toString() ?? '').length), h.length);
          return { wch: maxLen + 2 };
        });
        ws['!freeze'] = { xSplit: 0, ySplit: 1 };
        XLSX.utils.book_append_sheet(wb, ws, sheetName);
      }
    };

    const fieldsCanillaAccionista = { publicacion: "Publicación", canilla: "Canilla", totalCantSalida: "Llevados", totalCantEntrada: "Devueltos", vendidos: "Vendidos", totalRendir: "A Rendir" };
    const fieldsCanillaAccionistaFechaLiq = { publicacion: "Publicación", canilla: "Canilla", fecha: "Fecha Mov.", totalCantSalida: "Llevados", totalCantEntrada: "Devueltos", vendidos: "Vendidos", totalRendir: "A Rendir" };
    const fieldsTodos = { publicacion: "Publicación", tipoVendedor: "Tipo", totalCantSalida: "Llevados", totalCantEntrada: "Devueltos", vendidos: "Vendidos", totalRendir: "A Rendir" };

    formatAndSheet(reportData.canillas, "Canillitas_Dia", fieldsCanillaAccionista);
    formatAndSheet(reportData.canillasAccionistas, "Accionistas_Dia", fieldsCanillaAccionista);
    if (currentParams?.idEmpresa !== 0) {
      formatAndSheet(reportData.canillasTodos, "Resumen_Dia", fieldsTodos);
    }
    formatAndSheet(reportData.canillasLiquidadasOtraFecha, "Canillitas_OtrasFechas", fieldsCanillaAccionistaFechaLiq);
    formatAndSheet(reportData.canillasAccionistasLiquidadasOtraFecha, "Accionistas_OtrasFechas", fieldsCanillaAccionistaFechaLiq);

    let fileName = "ReporteDetalleDistribucionCanillitas";
    if (currentParams) {
      fileName += `_${currentParams.nombreEmpresa?.replace(/\s+/g, '') ?? `Emp${currentParams.idEmpresa}`}`;
      fileName += `_${currentParams.fecha}`;
    }
    fileName += ".xlsx";
    XLSX.writeFile(wb, fileName);
  }, [reportData, currentParams]);

  const handleGenerarYAbrirPdf = useCallback(async (soloTotales: boolean) => {
    if (!currentParams) {
      setError("Primero debe generar el reporte en pantalla o seleccionar parámetros.");
      return;
    }
    setLoadingPdf(true);
    setError(null);
    setPdfSoloTotales(soloTotales);
    try {
      const blob = await reportesService.getReporteDistribucionCanillasPdf({
        ...currentParams,
        soloTotales
      });
      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 commonColumns: GridColDef[] = [
    { field: 'publicacion', headerName: 'Publicación', width: 200, flex: 1.2 },
    { field: 'canilla', headerName: 'Canillita', width: 220, flex: 1.3 },
    { field: 'totalCantSalida', headerName: 'Llevados', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberFormatter(Number(value)) },
    { field: 'totalCantEntrada', headerName: 'Devueltos', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberFormatter(Number(value)) },
    { field: 'vendidos', headerName: 'Vendidos', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueGetter: (_value, row) => (row.totalCantSalida || 0) - (row.totalCantEntrada || 0), valueFormatter: (value) => numberFormatter(Number(value)) },
    { field: 'totalRendir', headerName: 'A Rendir', type: 'number', width: 150, align: 'right', headerAlign: 'right', valueFormatter: (value) => currencyFormatter(Number(value)) },
  ];

  const commonColumnsWithFecha: GridColDef[] = [
    { field: 'publicacion', headerName: 'Publicación', width: 200, flex: 1 },
    { field: 'canilla', headerName: 'Canillita', width: 220, flex: 1.1 },
    { field: 'fecha', headerName: 'Fecha Mov.', width: 120, flex: 0.7, valueFormatter: (value) => value ? new Date(value as string).toLocaleDateString('es-AR', { timeZone: 'UTC' }) : '-' },
    { field: 'totalCantSalida', headerName: 'Llevados', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberFormatter(Number(value)) },
    { field: 'totalCantEntrada', headerName: 'Devueltos', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberFormatter(Number(value)) },
    { field: 'vendidos', headerName: 'Vendidos', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueGetter: (_value, row) => (row.totalCantSalida || 0) - (row.totalCantEntrada || 0), valueFormatter: (value) => numberFormatter(Number(value)) },
    { field: 'totalRendir', headerName: 'A Rendir', type: 'number', width: 150, align: 'right', headerAlign: 'right', valueFormatter: (value) => currencyFormatter(Number(value)) },
  ];

  const columnsTodos: GridColDef[] = [
    { field: 'publicacion', headerName: 'Publicación', width: 200, flex: 1.2 },
    { field: 'tipoVendedor', headerName: 'Tipo Vendedor', width: 150, flex: 0.8 },
    { field: 'totalCantSalida', headerName: 'Llevados', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberFormatter(Number(value)) },
    { field: 'totalCantEntrada', headerName: 'Devueltos', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberFormatter(Number(value)) },
    { field: 'vendidos', headerName: 'Vendidos', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueGetter: (_value, row) => (row.totalCantSalida || 0) - (row.totalCantEntrada || 0), valueFormatter: (value) => numberFormatter(Number(value)) },
    { field: 'totalRendir', headerName: 'A Rendir', type: 'number', width: 150, align: 'right', headerAlign: 'right', valueFormatter: (value) => currencyFormatter(Number(value)) },
  ];

  const createCustomFooterComponent = (totals: TotalesComunes, columnsDef: GridColDef[]): CustomFooterType => {
    const getCellStyle = (colConfig: GridColDef | undefined, isPlaceholder: boolean = false) => {
      if (!colConfig) return { width: 100, textAlign: 'right' as const, pr: isPlaceholder ? 0 : 1, fontWeight: 'bold' };
      const defaultWidth = colConfig.field === 'publicacion' ? 200 : (colConfig.field === 'canilla' || colConfig.field === 'tipoVendedor' ? 150 : 100);
      return {
        width: colConfig.width || defaultWidth,
        flex: colConfig.flex || undefined,
        minWidth: colConfig.minWidth || colConfig.width || defaultWidth,
        textAlign: (colConfig.align || 'right') as 'right' | 'left' | 'center',
        pr: isPlaceholder || colConfig.field === columnsDef[columnsDef.length - 1].field ? 0 : 1,
        fontWeight: 'bold',
      };
    };

    const FooterComponent: CustomFooterType = (props) => (
      <GridFooterContainer {...props} sx={{
        ...(props.sx as any),
        justifyContent: 'space-between', alignItems: 'center', width: '100%',
        borderTop: (theme) => `1px solid ${theme.palette.divider}`, minHeight: '52px',
      }}>
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <GridFooter sx={{ borderTop: 'none', '& .MuiTablePagination-root, & .MuiDataGrid-selectedRowCount': { display: 'none' } }} />
        </Box>
        <Box sx={{
          p: theme => theme.spacing(0, 1), display: 'flex', alignItems: 'center',
          fontWeight: 'bold', marginLeft: 'auto', whiteSpace: 'nowrap', overflowX: 'auto',
        }}>
          <Typography variant="subtitle2" sx={{ ...getCellStyle(columnsDef.find(c => c.field === 'publicacion' || c.field === columnsDef[0].field)), textAlign: 'right' }}>TOTALES:</Typography>
          <Typography variant="subtitle2" sx={{ ...getCellStyle(columnsDef.find(c => c.field === 'canilla' || c.field === 'tipoVendedor' || c.field === columnsDef[1].field), true) }}></Typography>
          {columnsDef.some(c => c.field === 'fecha') &&
            <Typography variant="subtitle2" sx={{ ...getCellStyle(columnsDef.find(c => c.field === 'fecha'), true) }}></Typography>
          }
          <Typography variant="subtitle2" sx={getCellStyle(columnsDef.find(c => c.field === 'totalCantSalida'))}>{numberFormatter(totals.totalCantSalida)}</Typography>
          <Typography variant="subtitle2" sx={getCellStyle(columnsDef.find(c => c.field === 'totalCantEntrada'))}>{numberFormatter(totals.totalCantEntrada)}</Typography>
          <Typography variant="subtitle2" sx={getCellStyle(columnsDef.find(c => c.field === 'vendidos'))}>{numberFormatter(totals.vendidos)}</Typography>
          <Typography variant="subtitle2" sx={{ ...getCellStyle(columnsDef.find(c => c.field === 'totalRendir')), pr: 0 }}>{currencyFormatter(totals.totalRendir)}</Typography>
        </Box>
      </GridFooterContainer>
    );
    return FooterComponent;
  };

  // Usar los componentes creados con useMemo
  const FooterCanillas = useMemo(() => createCustomFooterComponent(totalesCanillas, commonColumns), [totalesCanillas]);
  const FooterAccionistas = useMemo(() => createCustomFooterComponent(totalesAccionistas, commonColumns), [totalesAccionistas]);
  const FooterCanillasOtraFecha = useMemo(() => createCustomFooterComponent(totalesCanillasOtraFecha, commonColumnsWithFecha), [totalesCanillasOtraFecha]);
  const FooterAccionistasOtraFecha = useMemo(() => createCustomFooterComponent(totalesAccionistasOtraFecha, commonColumnsWithFecha), [totalesAccionistasOtraFecha]);
  const FooterResumen = useMemo(() => createCustomFooterComponent(totalesResumen, columnsTodos), [totalesResumen, columnsTodos]);

  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}>
          <SeleccionaReporteDetalleDistribucionCanillas
            onGenerarReporte={handleGenerarReporte}
            onCancel={handleVolverAParametros}
            isLoading={loading}
            apiErrorMessage={apiErrorParams}
          />
        </Paper>
      </Box>
    );
  }

  const renderContent = () => {
    if (loading) return <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>;
    if (error && !loading) return <Alert severity="info" sx={{ my: 2 }}>{error}</Alert>;
    if (!reportData) return <Typography sx={{ mt: 2, fontStyle: 'italic' }}>No se encontraron datos.</Typography>;

    if (currentParams?.idEmpresa === 0) {
      if (currentParams.esAccionista) {
        return <DataGridSection title="Accionistas (Todas las Empresas)" data={reportData.canillasAccionistas || []} columns={commonColumns} footerComponent={FooterAccionistas} />;
      }
      return <DataGridSection title="Canillitas (Todas las Empresas)" data={reportData.canillas || []} columns={commonColumns} footerComponent={FooterCanillas} />;
    }

    return (
      <>
        <DataGridSection title="Canillitas" data={reportData.canillas || []} columns={commonColumns} footerComponent={FooterCanillas} />
        <DataGridSection title="Accionistas" data={reportData.canillasAccionistas || []} columns={commonColumns} footerComponent={FooterAccionistas} />
        <DataGridSection title="Resumen por Tipo de Vendedor" data={reportData.canillasTodos || []} columns={columnsTodos} footerComponent={FooterResumen} />
        {reportData.canillasLiquidadasOtraFecha && reportData.canillasLiquidadasOtraFecha.length > 0 &&
          <DataGridSection title="Canillitas (Liquidados de Otras Fechas)" data={reportData.canillasLiquidadasOtraFecha} columns={commonColumnsWithFecha} footerComponent={FooterCanillasOtraFecha} />}
        {reportData.canillasAccionistasLiquidadasOtraFecha && reportData.canillasAccionistasLiquidadasOtraFecha.length > 0 &&
          <DataGridSection title="Accionistas (Liquidados de Otras Fechas)" data={reportData.canillasAccionistasLiquidadasOtraFecha} columns={commonColumnsWithFecha} footerComponent={FooterAccionistasOtraFecha} />}
      </>
    );
  };


  return (
    <Box sx={{ p: 2 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2, flexWrap: 'wrap', gap: 1 }}>
        <Typography variant="h5">Reporte: Detalle Distribución ({currentParams?.nombreEmpresa}) - {currentParams?.fecha ? new Date(currentParams.fecha + 'T00:00:00').toLocaleDateString('es-AR', { timeZone: 'UTC' }) : ''}</Typography>
        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
          {currentParams?.idEmpresa !== 0 && (
            <Button onClick={() => handleGenerarYAbrirPdf(true)} variant="contained" color="secondary" disabled={loadingPdf || !reportData || !!error} size="small">
              {loadingPdf && pdfSoloTotales ? <CircularProgress size={20} color="inherit" /> : "PDF Totales"}
            </Button>
          )}
          <Button onClick={() => handleGenerarYAbrirPdf(false)} variant="contained" disabled={loadingPdf || !reportData || !!error} size="small">
            {loadingPdf && !pdfSoloTotales ? <CircularProgress size={20} color="inherit" /> : "PDF Detalle"}
          </Button>
          <Button onClick={handleExportToExcel} variant="outlined" disabled={!reportData || !!error} size="small">
            Exportar a Excel
          </Button>
          <Button onClick={handleVolverAParametros} variant="outlined" color="secondary" size="small">
            Nuevos Parámetros
          </Button>
        </Box>
      </Box>
      {renderContent()}
    </Box>
  );
};

export default ReporteDetalleDistribucionCanillasPage;