// src/pages/Reportes/ReporteListadoDistribucionCanillasImportePage.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 { ListadoDistribucionCanillasImporteDto } from '../../models/dtos/Reportes/ListadoDistribucionCanillasImporteDto';
import SeleccionaReporteListadoDistribucionCanillasImporte from './SeleccionaReporteListadoDistribucionCanillasImporte';
import * as XLSX from 'xlsx';
import axios from 'axios';

const ReporteListadoDistribucionCanillasImportePage: React.FC = () => {
  const [reportData, setReportData] = useState<ListadoDistribucionCanillasImporteDto[]>([]);
  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;
    esAccionista: boolean;
    nombrePublicacion?: string;
  } | null>(null);

  const handleGenerarReporte = useCallback(async (params: {
    idPublicacion: number;
    fechaDesde: string;
    fechaHasta: string;
    esAccionista: boolean;
  }) => {
    setLoading(true);
    setError(null);
    setApiErrorParams(null);
    
    const pubService = (await import('../../services/Distribucion/publicacionService')).default;
    const pubData = await pubService.getPublicacionById(params.idPublicacion);

    setCurrentParams({...params, nombrePublicacion: pubData?.nombre}); // Acceder a publicacion.nombre
    try {
      const data = await reportesService.getListadoDistribucionCanillasImporte(params);
      // DataGrid necesita un 'id' único por fila. La fecha puede no ser suficiente si hay múltiples registros por fecha (aunque el SP agrupa por fecha)
      const dataWithIds = data.map((item, index) => ({ ...item, id: `${item.fecha}-${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);
      setReportData([]);
    } 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(({ ...rest }) => ({ // Excluir 'id'
      "Fecha": rest.fecha,
      "Llevados": rest.llevados,
      "Devueltos": rest.devueltos,
      "Vendidos": rest.vendidos,
      "Importe Publicación": rest.totalRendirPublicacion,
      "A Rendir": rest.totalRendirGeneral,
    }));

    const totales = {
        "Fecha": "TOTALES",
        "Llevados": reportData.reduce((sum, r) => sum + r.llevados, 0),
        "Devueltos": reportData.reduce((sum, r) => sum + r.devueltos, 0),
        "Vendidos": reportData.reduce((sum, r) => sum + r.vendidos, 0),
        "Importe Publicación": reportData.reduce((sum, r) => sum + r.totalRendirPublicacion, 0),
        "A Rendir": reportData.reduce((sum, r) => sum + r.totalRendirGeneral, 0),
    };
    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, "DistribucionCanillasImporte");
    let fileName = "ListadoDistribucionCanillasImporte";
    if (currentParams) {
      fileName += `_${currentParams.nombrePublicacion?.replace(/\s+/g, '') ?? `Pub${currentParams.idPublicacion}`}`;
      fileName += `_${currentParams.esAccionista ? 'Accionistas' : 'Canillitas'}`;
      fileName += `_${currentParams.fechaDesde}_a_${currentParams.fechaHasta}`;
    }
    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.getListadoDistribucionCanillasImportePdf(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 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 columns: GridColDef[] = [
    { field: 'fecha', headerName: 'Fecha', width: 120, flex: 0.7 },
    { field: 'llevados', headerName: 'Llevados', type: 'number', width: 110, align: 'right', headerAlign: 'right', valueFormatter: numberFormatter, flex:0.6 },
    { field: 'devueltos', headerName: 'Devueltos', type: 'number', width: 110, align: 'right', headerAlign: 'right', valueFormatter: numberFormatter, flex:0.6 },
    { field: 'vendidos', headerName: 'Vendidos', type: 'number', width: 110, align: 'right', headerAlign: 'right', valueFormatter: numberFormatter, flex:0.6 },
    { field: 'totalRendirPublicacion', headerName: 'Importe Publicación', type: 'number', width: 180, align: 'right', headerAlign: 'right', valueFormatter: currencyFormatter, flex:1 },
    { field: 'totalRendirGeneral', headerName: 'A Rendir', type: 'number', width: 180, align: 'right', headerAlign: 'right', valueFormatter: currencyFormatter, flex:1 },
  ];

  const rows = useMemo(() => reportData, [reportData]);
  
  const totalLlevados = useMemo(() => reportData.reduce((sum, item) => sum + item.llevados, 0), [reportData]);
  const totalDevueltos = useMemo(() => reportData.reduce((sum, item) => sum + item.devueltos, 0), [reportData]);
  const totalVendidos = useMemo(() => reportData.reduce((sum, item) => sum + item.vendidos, 0), [reportData]);
  const totalImpPub = useMemo(() => reportData.reduce((sum, item) => sum + item.totalRendirPublicacion, 0), [reportData]);
  const totalARendir = useMemo(() => reportData.reduce((sum, item) => sum + item.totalRendirGeneral, 0), [reportData]);


  const CustomFooter = () => (
    <GridFooterContainer sx={{
        display: 'flex', // Usar flexbox directamente en el contenedor principal
        justifyContent: 'space-between', // Mantiene la parte izquierda a la izquierda y la derecha a la derecha
        alignItems: 'center',
        width: '100%',
        borderTop: (theme) => `1px solid ${theme.palette.divider}`,
        minHeight: '52px',
        p: theme => theme.spacing(0, 1), // Padding general para el footer container
    }}>
      {/* Parte izquierda (donde irían los controles estándar del footer) */}
      <Box sx={{ display: 'flex', alignItems: 'center', flexShrink: 0 /* Evita que este box se encoja si los totales son anchos */ }}>
        <GridFooter sx={{ 
            borderTop: 'none',
        }} />
      </Box>
      
      {/* Parte derecha (totales) */}
      <Box sx={{ 
          display: 'flex', 
          alignItems: 'center', 
          fontWeight: 'bold', 
          // marginLeft: 'auto', // Ya no es necesario si GridFooterContainer es flex y justifyContent: 'space-between'
          whiteSpace: 'nowrap', 
          overflowX: 'auto', // Scroll DENTRO de este Box si los totales son muy anchos
          maxWidth: 'calc(100% - 50px)', // Ejemplo: Limitar el ancho máximo para dejar espacio a la izquierda (ajustar el valor 50px según sea necesario)
                                        // Esto es una medida adicional si la parte izquierda tuviera contenido visible que no queremos que se solape.
                                        // Si la parte izquierda realmente no muestra nada, esto podría no ser necesario.
        }}>
        <Typography variant="subtitle2" sx={{ fontWeight: 'bold', width: columns[0].width, textAlign: 'right', pr: 1 }}>TOTALES:</Typography>
        <Typography variant="subtitle2" sx={{ fontWeight: 'bold', minWidth: columns[1].width, width: columns[1].width, textAlign: 'right', pr: 1 }}>{numberFormatter(totalLlevados)}</Typography>
        <Typography variant="subtitle2" sx={{ fontWeight: 'bold', minWidth: columns[2].width, width: columns[2].width, textAlign: 'right', pr: 1 }}>{numberFormatter(totalDevueltos)}</Typography>
        <Typography variant="subtitle2" sx={{ fontWeight: 'bold', minWidth: columns[3].width, width: columns[3].width, textAlign: 'right', pr: 1 }}>{numberFormatter(totalVendidos)}</Typography>
        <Typography variant="subtitle2" sx={{ fontWeight: 'bold', minWidth: columns[4].width, width: columns[4].width, textAlign: 'right', pr: 1 }}>{currencyFormatter(totalImpPub)}</Typography>
        <Typography variant="subtitle2" sx={{ fontWeight: 'bold', minWidth: columns[5].width, width: columns[5].width, textAlign: 'right', pr: 0 }}>{currencyFormatter(totalARendir)}</Typography>
      </Box>
    </GridFooterContainer>
  );

  if (showParamSelector) {
    return (
      <Box sx={{ p: 2, display: 'flex', justifyContent: 'center', mt: 2 }}>
        <Paper sx={{ width: '100%', maxWidth: 600 }} elevation={3}>
          <SeleccionaReporteListadoDistribucionCanillasImporte
            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: Distribución Canillitas con Importe ({currentParams?.esAccionista ? "Accionistas" : "Canillitas"})</Typography>
        <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>

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

      {!loading && !error && reportData.length > 0 && (
        <Paper sx={{ 
            height: 'calc(100vh - 280px)', // Ajusta esta altura para el footer
            width: '100%', 
            mt: 2,
             '& .MuiDataGrid-footerContainer': {
                 minHeight: '52px', // O el alto que necesite tu CustomFooter
            }
        }}>
          <DataGrid
            rows={rows}
            columns={columns}
            localeText={esES.components.MuiDataGrid.defaultProps.localeText}
            slots={{ footer: CustomFooter }}
            density="compact"
            // pageSizeOptions={[10, 25, 50]} // Descomentar si deseas paginación
            // initialState={{
            //   pagination: {
            //     paginationModel: { pageSize: 25, page: 0 },
            //   },
            // }}
          />
        </Paper>
      )}
      {!loading && !error && reportData.length === 0 && (<Typography>No se encontraron datos para los criterios seleccionados.</Typography>)}
    </Box>
  );
};

export default ReporteListadoDistribucionCanillasImportePage;