// src/pages/Reportes/ReporteDetalleDistribucionCanillasPage.tsx
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 { ReporteDistribucionCanillasResponseDto } from '../../models/dtos/Reportes/ReporteDistribucionCanillasResponseDto';
import SeleccionaReporteDetalleDistribucionCanillas from './SeleccionaReporteDetalleDistribucionCanillas';
import * as XLSX from 'xlsx';
import axios from 'axios';

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

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;
    nombreEmpresa?: string;
  } | null>(null);
  const [pdfSoloTotales, setPdfSoloTotales] = useState(false);

  // Estados para los totales de cada sección
  const initialTotals: TotalesComunes = { totalCantSalida: 0, totalCantEntrada: 0, vendidos: 0, totalRendir: 0 };
  const [totalesCanillas, setTotalesCanillas] = useState<TotalesComunes>(initialTotals);
  const [totalesAccionistas, setTotalesAccionistas] = useState<TotalesComunes>(initialTotals);
  const [totalesTodos, setTotalesTodos] = useState<TotalesComunes>(initialTotals);
  const [totalesCanillasOtraFecha, setTotalesCanillasOtraFecha] = useState<TotalesComunes>(initialTotals);
  const [totalesAccionistasOtraFecha, setTotalesAccionistasOtraFecha] = useState<TotalesComunes>(initialTotals);

  // --- Formateadores ---
  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;
  }) => {
    setLoading(true);
    setError(null);
    setApiErrorParams(null);

    const empresaService = (await import('../../services/Distribucion/empresaService')).default;
    const empData = await empresaService.getEmpresaById(params.idEmpresa);

    setCurrentParams({ ...params, nombreEmpresa: empData?.nombre });
    setReportData(null); // Limpiar datos antiguos

    // Resetear totales
    setTotalesCanillas(initialTotals);
    setTotalesAccionistas(initialTotals);
    setTotalesTodos(initialTotals);
    setTotalesCanillasOtraFecha(initialTotals);
    setTotalesAccionistasOtraFecha(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'}-${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);

      // Calcular y setear totales para cada sección
      calculateAndSetTotals(processedData.canillas, setTotalesCanillas);
      calculateAndSetTotals(processedData.canillasAccionistas, setTotalesAccionistas);
      calculateAndSetTotals(processedData.canillasTodos, setTotalesTodos);
      calculateAndSetTotals(processedData.canillasLiquidadasOtraFecha, setTotalesCanillasOtraFecha);
      calculateAndSetTotals(processedData.canillasAccionistasLiquidadasOtraFecha, setTotalesAccionistasOtraFecha);

      const noData = (!data.canillas || data.canillas.length === 0) &&
                     (!data.canillasAccionistas || data.canillasAccionistas.length === 0) &&
                     (!data.canillasTodos || data.canillasTodos.length === 0); // Podrías añadir más chequeos si es necesario
      if (noData) {
        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);
    }
  }, []);

  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>, 
        totals?: TotalesComunes
    ) => {
        if (data && data.length > 0) {
            let exportedData = data.map(item => {
                const row: Record<string, any> = {};
                const { id, ...itemData } = item; // Excluir el 'id' generado
                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]); // Mantener como número para suma en Excel
                    }
                    if (key === 'vendidos' && itemData.totalCantSalida != null && itemData.totalCantEntrada != null) {
                        row[fields[key]] = itemData.totalCantSalida - itemData.totalCantEntrada;
                    }
                });
                return row;
            });

            if (totals) {
                const totalRow: Record<string, any> = {};
                const fieldKeys = Object.keys(fields);
                totalRow[fields[fieldKeys[0]]] = "TOTALES"; // Título en la primera columna
                if (fields.totalCantSalida) totalRow[fields.totalCantSalida] = totals.totalCantSalida;
                if (fields.totalCantEntrada) totalRow[fields.totalCantEntrada] = totals.totalCantEntrada;
                if (fields.vendidos) totalRow[fields.vendidos] = totals.vendidos;
                if (fields.totalRendir) totalRow[fields.totalRendir] = totals.totalRendir;
                exportedData.push(totalRow);
            }

            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 }; // Congelar primera fila
            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" };
    const fieldsCtrlDevDetalle = { ingresados: "Ingresados", sobrantes: "Sobrantes", sinCargo: "Sin Cargo", publicacion: "Publicación", llevados: "Llevados", devueltos: "Devueltos", tipo: "Tipo" };
    const fieldsCtrlDevRemitos = { remito: "Remito Ingresado" };
    const fieldsCtrlDevOtrosDias = { devueltos: "Devueltos Otros Días" };

    formatAndSheet(reportData.canillas, "Canillitas_Dia", fieldsCanillaAccionista, totalesCanillas);
    formatAndSheet(reportData.canillasAccionistas, "Accionistas_Dia", fieldsCanillaAccionista, totalesAccionistas);
    formatAndSheet(reportData.canillasTodos, "Resumen_Dia", fieldsTodos, totalesTodos);
    formatAndSheet(reportData.canillasLiquidadasOtraFecha, "Canillitas_OtrasFechas", fieldsCanillaAccionistaFechaLiq, totalesCanillasOtraFecha);
    formatAndSheet(reportData.canillasAccionistasLiquidadasOtraFecha, "Accionistas_OtrasFechas", fieldsCanillaAccionistaFechaLiq, totalesAccionistasOtraFecha);
    formatAndSheet(reportData.controlDevolucionesDetalle, "CtrlDev_Detalle", fieldsCtrlDevDetalle); // Sin totales para estos
    formatAndSheet(reportData.controlDevolucionesRemitos, "CtrlDev_Remitos", fieldsCtrlDevRemitos);
    formatAndSheet(reportData.controlDevolucionesOtrosDias, "CtrlDev_OtrosDias", fieldsCtrlDevOtrosDias);

    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, totalesCanillas, totalesAccionistas, totalesTodos, totalesCanillasOtraFecha, totalesAccionistasOtraFecha]);

  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]);

  // Definiciones de columnas
  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 columnsCtrlDevDetalle: GridColDef[] = [
    { field: 'publicacion', headerName: 'Publicación', width: 200, flex: 1.5 },
    { field: 'tipo', headerName: 'Tipo', width: 100, flex: 0.8 },
    { field: 'ingresados', headerName: 'Ingresados', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (v) => numberFormatter(Number(v))},
    { field: 'sobrantes', headerName: 'Sobrantes', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (v) => numberFormatter(Number(v))},
    { field: 'sinCargo', headerName: 'Sin Cargo', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (v) => numberFormatter(Number(v))},
    { field: 'llevados', headerName: 'Llevados', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (v) => numberFormatter(Number(v))},
    { field: 'devueltos', headerName: 'Devueltos', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (v) => numberFormatter(Number(v))},
  ];

  const columnsCtrlDevRemitos: GridColDef[] = [
    { field: 'remito', headerName: 'Remito Ingresado', flex: 1 },
  ];

  const columnsCtrlDevOtrosDias: GridColDef[] = [
    { field: 'devueltos', headerName: 'Devueltos Otros Días', flex: 1 },
  ];

  // Memoizar filas (los IDs ya se añaden en handleGenerarReporte)
  const rowsCanillas = useMemo(() => reportData?.canillas ?? [], [reportData]);
  const rowsAccionistas = useMemo(() => reportData?.canillasAccionistas ?? [], [reportData]);
  const rowsTodos = useMemo(() => reportData?.canillasTodos ?? [], [reportData]);
  const rowsCanillasOtraFecha = useMemo(() => reportData?.canillasLiquidadasOtraFecha ?? [], [reportData]);
  const rowsAccionistasOtraFecha = useMemo(() => reportData?.canillasAccionistasLiquidadasOtraFecha ?? [], [reportData]);
  const rowsCtrlDevDetalle = useMemo(() => reportData?.controlDevolucionesDetalle ?? [], [reportData]);
  const rowsCtrlDevRemitos = useMemo(() => reportData?.controlDevolucionesRemitos ?? [], [reportData]);
  const rowsCtrlDevOtrosDias = useMemo(() => reportData?.controlDevolucionesOtrosDias ?? [], [reportData]);

  // --- Custom Footers ---
  // eslint-disable-next-line react/display-name
  const createCustomFooter = (totals: TotalesComunes, columns: GridColDef[]) => () => (
    <GridFooterContainer sx={{ justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
      <Box sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, minWidth: '300px' }}>
        <GridFooter sx={{ borderTop: 'none' }} />
      </Box>
      <Box sx={{ p: 1, display: 'flex', alignItems: 'center', fontWeight: 'bold', marginLeft: 'auto', whiteSpace: 'nowrap', overflowX: 'auto' }}>
        <Typography variant="subtitle2" sx={{ flex: columns[0].flex, width: columns[0].width, textAlign: 'right', fontWeight: 'bold' }}>TOTALES:</Typography>
        {columns[1].field !== 'tipoVendedor' && <Typography variant="subtitle2" sx={{ flex: columns[1].flex, width: columns[1].width, textAlign: 'right', fontWeight: 'bold', pr:1 }}></Typography> /* Placeholder for Canilla/Tipo */ }
        {columns[1].field === 'tipoVendedor' && <Typography variant="subtitle2" sx={{ flex: columns[1].flex, width: columns[1].width, textAlign: 'right', fontWeight: 'bold', pr:1 }}></Typography> /* Placeholder for Canilla/Tipo */ }
        
        {columns.find(c => c.field === 'fecha') && <Typography variant="subtitle2" sx={{ flex: columns.find(c=>c.field === 'fecha')?.flex, width: columns.find(c=>c.field === 'fecha')?.width, textAlign: 'right', fontWeight: 'bold', pr:1 }}></Typography> /* Placeholder for Fecha */}
        
        <Typography variant="subtitle2" sx={{ width: columns.find(c=>c.field === 'totalCantSalida')?.width, textAlign: 'right', fontWeight: 'bold', pr:1 }}>{numberFormatter(totals.totalCantSalida)}</Typography>
        <Typography variant="subtitle2" sx={{ width: columns.find(c=>c.field === 'totalCantEntrada')?.width, textAlign: 'right', fontWeight: 'bold', pr:1 }}>{numberFormatter(totals.totalCantEntrada)}</Typography>
        <Typography variant="subtitle2" sx={{ width: columns.find(c=>c.field === 'vendidos')?.width, textAlign: 'right', fontWeight: 'bold', pr:1 }}>{numberFormatter(totals.vendidos)}</Typography>
        <Typography variant="subtitle2" sx={{ width: columns.find(c=>c.field === 'totalRendir')?.width, textAlign: 'right', fontWeight: 'bold' }}>{currencyFormatter(totals.totalRendir)}</Typography>
      </Box>
    </GridFooterContainer>
  );

  const CustomFooterCanillas = useMemo(() => createCustomFooter(totalesCanillas, commonColumns), [totalesCanillas]);
  const CustomFooterAccionistas = useMemo(() => createCustomFooter(totalesAccionistas, commonColumns), [totalesAccionistas]);
  const CustomFooterTodos = useMemo(() => createCustomFooter(totalesTodos, columnsTodos), [totalesTodos]);
  const CustomFooterCanillasOtraFecha = useMemo(() => createCustomFooter(totalesCanillasOtraFecha, commonColumnsWithFecha), [totalesCanillasOtraFecha]);
  const CustomFooterAccionistasOtraFecha = useMemo(() => createCustomFooter(totalesAccionistasOtraFecha, commonColumnsWithFecha), [totalesAccionistasOtraFecha]);


  if (showParamSelector) {
    return (
      <Box sx={{ p: 2, display: 'flex', justifyContent: 'center', mt: 2 }}>
        <Paper sx={{ width: '100%', maxWidth: 600 }} elevation={3}>
          <SeleccionaReporteDetalleDistribucionCanillas
            onGenerarReporte={handleGenerarReporte}
            onCancel={handleVolverAParametros} // Asumo que no se usa, ya que el selector no tiene botón de cancelar
            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: Detalle Distribución Canillitas ({currentParams?.nombreEmpresa}) - {currentParams?.fecha}</Typography>
        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
          <Button onClick={() => handleGenerarYAbrirPdf(false)} variant="contained" disabled={loadingPdf || !reportData || !!error} size="small">
            {loadingPdf && !pdfSoloTotales ? <CircularProgress size={20} color="inherit" /> : "PDF Detalle"}
          </Button>
          <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={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>

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

      {!loading && !error && reportData && (
        <>
          {/* Canillitas (del día) */}
          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>Canillitas (del día)</Typography>
          {rowsCanillas.length > 0 ? (
            <Paper sx={{ height: 400, width: '100%', mb: 3, '& .MuiDataGrid-footerContainer': { minHeight: '52px' } }}>
              <DataGrid
                rows={rowsCanillas}
                columns={commonColumns}
                localeText={esES.components.MuiDataGrid.defaultProps.localeText}
                density="compact"
                slots={{ footer: CustomFooterCanillas }}
                hideFooterSelectedRowCount
              />
            </Paper>
          ) : (<Typography sx={{ fontStyle: 'italic', mb:2 }}>No hay datos para canillitas (del día).</Typography>)}

          {/* Accionistas (del día) */}
          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>Accionistas (del día)</Typography>
          {rowsAccionistas.length > 0 ? (
            <Paper sx={{ height: 400, width: '100%', mb: 3, '& .MuiDataGrid-footerContainer': { minHeight: '52px' } }}>
              <DataGrid
                rows={rowsAccionistas}
                columns={commonColumns}
                localeText={esES.components.MuiDataGrid.defaultProps.localeText}
                density="compact"
                slots={{ footer: CustomFooterAccionistas }}
                hideFooterSelectedRowCount
              />
            </Paper>
          ) : (<Typography sx={{ fontStyle: 'italic', mb:2 }}>No hay datos para accionistas (del día).</Typography>)}
          
          {/* Resumen por Tipo de Vendedor (del día) */}
          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>Resumen por Tipo de Vendedor (del día)</Typography>
          {rowsTodos.length > 0 ? (
            <Paper sx={{ height: 300, width: '100%', mb: 3, '& .MuiDataGrid-footerContainer': { minHeight: '52px' } }}>
              <DataGrid
                rows={rowsTodos}
                columns={columnsTodos}
                localeText={esES.components.MuiDataGrid.defaultProps.localeText}
                density="compact"
                slots={{ footer: CustomFooterTodos }}
                hideFooterSelectedRowCount
              />
            </Paper>
          ) : (<Typography sx={{ fontStyle: 'italic', mb:2 }}>No hay datos para resumen por tipo de vendedor (del día).</Typography>)}

          {/* Canillitas (Liquidados de Otras Fechas) */}
          {rowsCanillasOtraFecha.length > 0 && (
            <>
              <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>Canillitas (Liquidados de Otras Fechas)</Typography>
              <Paper sx={{ height: 300, width: '100%', mb: 3, '& .MuiDataGrid-footerContainer': { minHeight: '52px' } }}>
                <DataGrid
                  rows={rowsCanillasOtraFecha}
                  columns={commonColumnsWithFecha}
                  localeText={esES.components.MuiDataGrid.defaultProps.localeText}
                  density="compact"
                  slots={{ footer: CustomFooterCanillasOtraFecha }}
                  hideFooterSelectedRowCount
                />
              </Paper>
            </>
          )}
          
          {/* Accionistas (Liquidados de Otras Fechas) */}
          {rowsAccionistasOtraFecha.length > 0 && (
            <>
              <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>Accionistas (Liquidados de Otras Fechas)</Typography>
              <Paper sx={{ height: 300, width: '100%', mb: 3, '& .MuiDataGrid-footerContainer': { minHeight: '52px' } }}>
                <DataGrid
                  rows={rowsAccionistasOtraFecha}
                  columns={commonColumnsWithFecha}
                  localeText={esES.components.MuiDataGrid.defaultProps.localeText}
                  density="compact"
                  slots={{ footer: CustomFooterAccionistasOtraFecha }}
                  hideFooterSelectedRowCount
                />
              </Paper>
            </>
          )}

        {/* Control Devoluciones - Detalle */}
        {rowsCtrlDevDetalle.length > 0 && (
            <>
              <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>Control Devoluciones - Detalle</Typography>
              <Paper sx={{ height: 300, width: '100%', mb: 3 }}>
                <DataGrid
                  rows={rowsCtrlDevDetalle}
                  columns={columnsCtrlDevDetalle}
                  localeText={esES.components.MuiDataGrid.defaultProps.localeText}
                  density="compact"
                  hideFooterSelectedRowCount // Sin footer personalizado para estos
                />
              </Paper>
            </>
          )}

          {/* Control Devoluciones - Remitos */}
          {rowsCtrlDevRemitos.length > 0 && (
            <>
              <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>Control Devoluciones - Remitos Ingresados</Typography>
              <Paper sx={{ height: 200, width: '100%', mb: 3 }}>
                <DataGrid
                  rows={rowsCtrlDevRemitos}
                  columns={columnsCtrlDevRemitos}
                  localeText={esES.components.MuiDataGrid.defaultProps.localeText}
                  density="compact"
                  autoHeight
                  hideFooterSelectedRowCount
                />
              </Paper>
            </>
          )}

          {/* Control Devoluciones - Otros Días */}
          {rowsCtrlDevOtrosDias.length > 0 && (
            <>
              <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>Control Devoluciones - Otros Días</Typography>
              <Paper sx={{ height: 200, width: '100%', mb: 3 }}>
                <DataGrid
                  rows={rowsCtrlDevOtrosDias}
                  columns={columnsCtrlDevOtrosDias}
                  localeText={esES.components.MuiDataGrid.defaultProps.localeText}
                  density="compact"
                  autoHeight
                  hideFooterSelectedRowCount
                />
              </Paper>
            </>
          )}

        </>
      )}
      {!loading && !error && (!reportData || 
        (rowsCanillas.length === 0 && rowsAccionistas.length === 0 && rowsTodos.length === 0 &&
         rowsCanillasOtraFecha.length === 0 && rowsAccionistasOtraFecha.length === 0 &&
         rowsCtrlDevDetalle.length === 0 && rowsCtrlDevRemitos.length === 0 && rowsCtrlDevOtrosDias.length === 0
        )) &&
        (<Typography>No se encontraron datos para los criterios seleccionados.</Typography>)
      }
    </Box>
  );
};

export default ReporteDetalleDistribucionCanillasPage;