GestionIntegralWeb/Frontend/src/pages/Reportes/ReporteMovimientoBobinasPage.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'; // Importaciones para DataGrid
import { esES } from '@mui/x-data-grid/locales'; // Para localización
import reportesService from '../../services/Reportes/reportesService';
import type { MovimientoBobinasDto } from '../../models/dtos/Reportes/MovimientoBobinasDto';
import SeleccionaReporteMovimientoBobinas from './SeleccionaReporteMovimientoBobinas';
import * as XLSX from 'xlsx';
import axios from 'axios';

// Definición de la interfaz extendida para DataGrid (con 'id')
interface MovimientoBobinasDataGridDto extends MovimientoBobinasDto {
  id: string;
}

const ReporteMovimientoBobinasPage: React.FC = () => {
  const [reportData, setReportData] = useState<MovimientoBobinasDataGridDto[]>([]); // Usar el tipo extendido
  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<{
    fechaDesde: string;
    fechaHasta: string;
    idPlanta: number;
    nombrePlanta?: string;
  } | null>(null);

  const numberLocaleFormatter = (value: number | null | undefined) =>
    value != null ? Number(value).toLocaleString('es-AR') : '';

  const handleGenerarReporte = useCallback(async (params: {
    fechaDesde: string;
    fechaHasta: string;
    idPlanta: number;
  }) => {
    setLoading(true);
    setError(null);
    setApiErrorParams(null);
    // Opcional: Obtener nombre de la planta
    // const plantaService = (await import('../../services/Maestros/plantaService')).default;
    // const plantaData = await plantaService.getPlantaById(params.idPlanta);
    // setCurrentParams({...params, nombrePlanta: plantaData?.nombre});
    setCurrentParams(params);
    try {
      const data = await reportesService.getMovimientoBobinas(params);
      // Añadir 'id' único a cada fila para DataGrid
      const dataWithIds = data.map((item, index) => ({
        ...item,
        id: `${item.tipoBobina}-${index}` // Asumiendo que tipoBobina es único por reporte o combinar con 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(item => ({
      "Tipo Bobina": item.tipoBobina,
      "Cant. Inicial": item.bobinasIniciales,
      "Kg Iniciales": item.kilosIniciales,
      "Compradas": item.bobinasCompradas,
      "Kg Comprados": item.kilosComprados,
      "Consumidas": item.bobinasConsumidas,
      "Kg Consumidos": item.kilosConsumidos,
      "Dañadas": item.bobinasDaniadas,
      "Kg Dañados": item.kilosDaniados,
      "Cant. Final": item.bobinasFinales,
      "Kg Finales": item.kilosFinales,
    }));

    // Añadir fila de totales
    const totalesRow = {
      "Tipo Bobina": "Totales",
      "Cant. Inicial": reportData.reduce((sum, item) => sum + item.bobinasIniciales, 0),
      "Kg Iniciales": reportData.reduce((sum, item) => sum + item.kilosIniciales, 0),
      "Compradas": reportData.reduce((sum, item) => sum + item.bobinasCompradas, 0),
      "Kg Comprados": reportData.reduce((sum, item) => sum + item.kilosComprados, 0),
      "Consumidas": reportData.reduce((sum, item) => sum + item.bobinasConsumidas, 0),
      "Kg Consumidos": reportData.reduce((sum, item) => sum + item.kilosConsumidos, 0),
      "Dañadas": reportData.reduce((sum, item) => sum + item.bobinasDaniadas, 0),
      "Kg Dañados": reportData.reduce((sum, item) => sum + item.kilosDaniados, 0),
      "Cant. Final": reportData.reduce((sum, item) => sum + item.bobinasFinales, 0),
      "Kg Finales": reportData.reduce((sum, item) => sum + item.kilosFinales, 0),
    };
    dataToExport.push(totalesRow);


    const ws = XLSX.utils.json_to_sheet(dataToExport);
    const headers = Object.keys(dataToExport[0]);
    ws['!cols'] = headers.map(h => {
      const maxLen = dataToExport.reduce((prev, row) => {
        const cell = (row as any)[h]?.toString() ?? '';
        return Math.max(prev, cell.length);
      }, 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, "MovimientoBobinas");
    let fileName = "ReporteMovimientoBobinas";
    if (currentParams) {
      // Asumiendo que currentParams.nombrePlanta está disponible o se usa idPlanta
      fileName += `_${currentParams.nombrePlanta || `Planta${currentParams.idPlanta}`}`;
      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.getMovimientoBobinasPdf(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]);

  // Definiciones de Columnas para DataGrid
  const columns: GridColDef[] = [
    { field: 'tipoBobina', headerName: 'Tipo Bobina', width: 200, flex: 1.5 },
    { field: 'bobinasIniciales', headerName: 'Cant. Ini.', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'kilosIniciales', headerName: 'Kg Ini.', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'bobinasCompradas', headerName: 'Compradas', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'kilosComprados', headerName: 'Kg Compr.', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'bobinasConsumidas', headerName: 'Consum.', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'kilosConsumidos', headerName: 'Kg Consum.', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'bobinasDaniadas', headerName: 'Dañadas', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'kilosDaniados', headerName: 'Kg Dañ.', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'bobinasFinales', headerName: 'Cant. Fin.', type: 'number', width: 100, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
    { field: 'kilosFinales', headerName: 'Kg Finales', type: 'number', width: 110, align: 'right', headerAlign: 'right', valueFormatter: (value) => numberLocaleFormatter(Number(value)) },
  ];

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

  // Calcular totales para el footer
  const totales = useMemo(() => {
    if (reportData.length === 0) return null;
    return {
      bobinasIniciales: reportData.reduce((sum, item) => sum + item.bobinasIniciales, 0),
      kilosIniciales: reportData.reduce((sum, item) => sum + item.kilosIniciales, 0),
      bobinasCompradas: reportData.reduce((sum, item) => sum + item.bobinasCompradas, 0),
      kilosComprados: reportData.reduce((sum, item) => sum + item.kilosComprados, 0),
      bobinasConsumidas: reportData.reduce((sum, item) => sum + item.bobinasConsumidas, 0),
      kilosConsumidos: reportData.reduce((sum, item) => sum + item.kilosConsumidos, 0),
      bobinasDaniadas: reportData.reduce((sum, item) => sum + item.bobinasDaniadas, 0),
      kilosDaniados: reportData.reduce((sum, item) => sum + item.kilosDaniados, 0),
      bobinasFinales: reportData.reduce((sum, item) => sum + item.bobinasFinales, 0),
      kilosFinales: reportData.reduce((sum, item) => sum + item.kilosFinales, 0),
    };
  }, [reportData]);

  // eslint-disable-next-line react/display-name
  const CustomFooter = () => {
    if (!totales) 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'; // Por defecto, dejar que el contenido decida
        let targetMinWidth: number | string = 'auto';

        if (isLabel) {
            // Para la etiqueta "TOTALES:", un ancho más ajustado.
            // Podrías basarlo en el ancho de la primera columna si es consistentemente la de "Tipo Bobina"
            // o un valor fijo que sepas que funciona.
            targetWidth = colConfig?.width ? Math.max(80, colConfig.width * 0.6) : 120; // Ej: 60% del ancho de la columna o 120px
            targetMinWidth = 80; // Un mínimo razonable para "TOTALES:"
        } else if (colConfig) {
            // Para los valores numéricos, podemos ser un poco más conservadores que el ancho de la columna.
            // O usar el ancho de la columna si es pequeño.
            targetWidth = colConfig.width ? Math.max(70, colConfig.width * 0.85) : 90; // Ej: 85% del ancho de la columna o 90px
            targetMinWidth = 70; // Un mínimo para números
        }
        
        return {
            minWidth: targetMinWidth,
            width: targetWidth,
            textAlign: isLabel ? 'left' : (colConfig?.align || 'right') as 'right' | 'left' | 'center',
            pr: isLabel ? 1 : (field === 'kilosFinales' ? 0 : 1), // padding-right
            fontWeight: 'bold',
            // Añadimos overflow y textOverflow para manejar texto largo en la etiqueta si fuera necesario
            overflow: isLabel ? 'hidden' : undefined,
            textOverflow: isLabel ? 'ellipsis' : undefined,
            whiteSpace: 'nowrap', // Asegurar que no haya saltos de línea en los totales
        };
    };

    return (
        <GridFooterContainer sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: '100%',
            borderTop: (theme) => `1px solid ${theme.palette.divider}`,
            minHeight: '52px',
        }}>
            {/* Box para la paginación estándar */}
            <Box sx={{ 
                display: 'flex', 
                alignItems: 'center',
                flexShrink: 0, 
                overflow: 'hidden', 
                px:1,
                // Para asegurar que la paginación no se coma todo el espacio si es muy ancha:
                // Podríamos darle un flex-basis o un maxWidth si los totales necesitan más espacio garantizado.
                // Por ejemplo:
                // flexBasis: '50%', // Ocupa el 50% del espacio disponible si no hay otros factores
                // maxWidth: '600px', // Un máximo absoluto
            }}>
                <GridFooter 
                    sx={{ 
                        borderTop: 'none',
                        width: '100%',
                        '& .MuiToolbar-root': { 
                            paddingLeft: 0,
                            paddingRight: 0,
                        },
                         '& .MuiDataGrid-selectedRowCount': { display: 'none' }, 
                    }} 
                />
            </Box>

            {/* Box para los totales personalizados */}
            <Box sx={{
                display: 'flex',
                alignItems: 'center',
                fontWeight: 'bold',
                whiteSpace: 'nowrap', // Ya estaba, es importante
                overflowX: 'auto', 
                px:1, 
                flexShrink: 1, // Permitir que este contenedor se encoja si es necesario
                // maxWidth: 'calc(100% - ANCHO_PAGINACION_ESTIMADO)' // Si quieres ser muy preciso
            }}>
                <Typography variant="subtitle2" sx={getCellStyle('label', true)}>TOTALES:</Typography>
                <Typography variant="subtitle2" sx={getCellStyle('bobinasIniciales')}>{numberLocaleFormatter(totales.bobinasIniciales)}</Typography>
                <Typography variant="subtitle2" sx={getCellStyle('kilosIniciales')}>{numberLocaleFormatter(totales.kilosIniciales)}</Typography>
                <Typography variant="subtitle2" sx={getCellStyle('bobinasCompradas')}>{numberLocaleFormatter(totales.bobinasCompradas)}</Typography>
                <Typography variant="subtitle2" sx={getCellStyle('kilosComprados')}>{numberLocaleFormatter(totales.kilosComprados)}</Typography>
                <Typography variant="subtitle2" sx={getCellStyle('bobinasConsumidas')}>{numberLocaleFormatter(totales.bobinasConsumidas)}</Typography>
                <Typography variant="subtitle2" sx={getCellStyle('kilosConsumidos')}>{numberLocaleFormatter(totales.kilosConsumidos)}</Typography>
                <Typography variant="subtitle2" sx={getCellStyle('bobinasDaniadas')}>{numberLocaleFormatter(totales.bobinasDaniadas)}</Typography>
                <Typography variant="subtitle2" sx={getCellStyle('kilosDaniados')}>{numberLocaleFormatter(totales.kilosDaniados)}</Typography>
                <Typography variant="subtitle2" sx={getCellStyle('bobinasFinales')}>{numberLocaleFormatter(totales.bobinasFinales)}</Typography>
                <Typography variant="subtitle2" sx={getCellStyle('kilosFinales')}>{numberLocaleFormatter(totales.kilosFinales)}</Typography>
            </Box>
        </GridFooterContainer>
    );
  };

  if (showParamSelector) {
    return (
      <Box sx={{ p: 2, display: 'flex', justifyContent: 'center', mt: 2 }}>
        <Paper sx={{ width: '100%', maxWidth: 600 }} elevation={3}>
          <SeleccionaReporteMovimientoBobinas
            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: Movimiento de Bobinas {currentParams?.nombrePlanta ? `(${currentParams.nombrePlanta})` : ''}</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="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"
            autoHeight // Para que se ajuste al contenido y al footer
            hideFooterSelectedRowCount
            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 ReporteMovimientoBobinasPage;