import React, { useState, useCallback, useMemo } from 'react';
import {
  Box, Typography, Paper, CircularProgress, Alert, Button, Tooltip
} 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 { NovedadesCanillasReporteDto } from '../../models/dtos/Reportes/NovedadesCanillasReporteDto';
import type { CanillaGananciaReporteDto } from '../../models/dtos/Reportes/CanillaGananciaReporteDto';
import SeleccionaReporteNovedadesCanillas from './SeleccionaReporteNovedadesCanillas';
import { usePermissions } from '../../hooks/usePermissions';
import * as XLSX from 'xlsx';
import axios from 'axios';

interface NovedadesCanillasReporteGridItem extends NovedadesCanillasReporteDto {
  id: string;
}
interface CanillaGananciaGridItem extends CanillaGananciaReporteDto {
  id: string;
}

const ReporteNovedadesCanillasPage: React.FC = () => {
  const [novedadesData, setNovedadesData] = useState<NovedadesCanillasReporteGridItem[]>([]);
  const [gananciasData, setGananciasData] = useState<CanillaGananciaGridItem[]>([]);
  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<{
    idEmpresa: number;
    fechaDesde: string;
    fechaHasta: string;
    nombreEmpresa?: string;
  } | null>(null);

  const { tienePermiso, isSuperAdmin } = usePermissions();
  const puedeVerReporte = isSuperAdmin || tienePermiso("RR004");

  const currencyFormatter = (value: number | null | undefined) => // Helper para formato moneda
    value != null ? value.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' }) : '';


  const handleGenerarReporte = useCallback(async (params: {
    idEmpresa: number;
    fechaDesde: string;
    fechaHasta: string;
  }) => {
    if (!puedeVerReporte) {
      setError("No tiene permiso para generar este reporte.");
      setLoading(false);
      return;
    }
    setLoading(true);
    setError(null);
    setApiErrorParams(null);
    setNovedadesData([]);
    setGananciasData([]); // Limpiar datos de ganancias

    let empresaNombre = `Empresa ${params.idEmpresa}`;
    try {
        const empresaService = (await import('../../services/Distribucion/empresaService')).default;
        const empData = await empresaService.getEmpresaLookupById(params.idEmpresa);
        if (empData) empresaNombre = empData.nombre;
    } catch (e) { console.warn("No se pudo obtener nombre de empresa para el reporte", e); }
    
    setCurrentParams({ ...params, nombreEmpresa: empresaNombre });
    
    try {
      // Llamadas concurrentes para ambos conjuntos de datos
      const [novedadesResult, gananciasResult] = await Promise.all([
        reportesService.getNovedadesCanillasReporte(params),
        reportesService.getCanillasGananciasReporte(params) // << LLAMAR AL NUEVO SERVICIO
      ]);

      const novedadesConIds = novedadesResult.map((item, index) => ({
        ...item,
        id: `nov-${item.nomApe || 'sinnom'}-${item.fecha || 'sinfec'}-${index}`
      }));
      setNovedadesData(novedadesConIds);

      const gananciasConIds = gananciasResult.map((item, index) => ({
        ...item,
        id: `gan-${item.canilla || 'sincan'}-${index}`
      }));
      setGananciasData(gananciasConIds);

      if (novedadesConIds.length === 0 && gananciasConIds.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);
    }
  }, [puedeVerReporte]);

  const handleVolverAParametros = useCallback(() => {
    setShowParamSelector(true);
    setNovedadesData([]);
    setGananciasData([]); // Limpiar también
    setError(null);
    setApiErrorParams(null);
    setCurrentParams(null);
  }, []);

  const handleExportToExcel = useCallback(() => {
    if (novedadesData.length === 0 && gananciasData.length === 0) { // Chequear ambos
      alert("No hay datos para exportar.");
      return;
    }
    const wb = XLSX.utils.book_new();

    // Hoja de Ganancias
    if (gananciasData.length > 0) {
        const gananciasToExport = gananciasData.map(({ id, ...rest }) => ({
            "Canilla": rest.canilla,
            "Legajo": rest.legajo ?? '-',
            "Faltas": rest.faltas ?? 0,
            "Francos": rest.francos ?? 0,
            "Comisiones": rest.totalRendir ?? 0,
        }));
         const totalComisiones = gananciasData.reduce((sum, item) => sum + (item.totalRendir ?? 0), 0);
         gananciasToExport.push({
            "Canilla": "Total", "Legajo": "", "Faltas": 0, "Francos": 0,
            "Comisiones": totalComisiones
         });
        const wsGanancias = XLSX.utils.json_to_sheet(gananciasToExport);
        const headersGan = Object.keys(gananciasToExport[0] || {});
        wsGanancias['!cols'] = headersGan.map(h => {
            const maxLen = Math.max(...gananciasToExport.map(row => (row as any)[h]?.toString().length ?? 0), h.length);
            return { wch: maxLen + 2 };
        });
        XLSX.utils.book_append_sheet(wb, wsGanancias, "ResumenCanillas");
    }

    // Hoja de Novedades
    if (novedadesData.length > 0) {
        const novedadesToExport = novedadesData.map(({ id, ...rest }) => ({
            "Canillita": rest.nomApe,
            "Fecha": rest.fecha ? new Date(rest.fecha).toLocaleDateString('es-AR', {timeZone: 'UTC'}) : '-',
            "Detalle": rest.detalle,
        }));
        const wsNovedades = XLSX.utils.json_to_sheet(novedadesToExport);
        const headersNov = Object.keys(novedadesToExport[0] || {});
        wsNovedades['!cols'] = headersNov.map(h => {
            const maxLen = Math.max(...novedadesToExport.map(row => (row as any)[h]?.toString().length ?? 0), h.length);
             if (h === "Detalle") return { wch: Math.max(maxLen + 2, 50) };
            return { wch: maxLen + 2 };
        });
        XLSX.utils.book_append_sheet(wb, wsNovedades, "DetalleNovedades");
    }
    
    let fileName = "ReporteNovedadesCanillas";
    if (currentParams) {
      fileName += `_${currentParams.nombreEmpresa?.replace(/\s+/g, '') || `Emp${currentParams.idEmpresa}`}`;
      fileName += `_${currentParams.fechaDesde}_a_${currentParams.fechaHasta}`;
    }
    fileName += ".xlsx";
    XLSX.writeFile(wb, fileName);
  }, [novedadesData, gananciasData, currentParams]);

  const handleGenerarYAbrirPdf = useCallback(async () => {
    // ... (sin cambios, ya que el PDF del backend ya debería estar manejando ambos DataSets)
    if (!currentParams) {
      setError("Primero debe generar el reporte en pantalla.");
      return;
    }
    if (!puedeVerReporte) {
        setError("No tiene permiso para generar este PDF.");
        return;
    }
    setLoadingPdf(true);
    setError(null);
    try {
      const blob = await reportesService.getNovedadesCanillasReportePdf(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("Permita popups para ver el PDF.");
      }
    } catch (err: any){
        const message = axios.isAxiosError(err) && err.response?.data?.message
        ? err.response.data.message
        : 'Ocurrió un error al generar el PDF.';
      setError(message);
    } finally {
      setLoadingPdf(false);
    }
  }, [currentParams, puedeVerReporte]);

  // Columnas para la tabla de Resumen/Ganancias
  const columnsGanancias: GridColDef<CanillaGananciaGridItem>[] = [
    { field: 'canilla', headerName: 'Canilla', width: 250, flex: 1.5 },
    { field: 'legajo', headerName: 'Legajo', width: 100, type: 'number' },
    { field: 'faltas', headerName: 'Faltas', width: 100, type: 'number', align: 'right', headerAlign: 'right' },
    { field: 'francos', headerName: 'Francos', width: 100, type: 'number', align: 'right', headerAlign: 'right' },
    { field: 'totalRendir', headerName: 'Comisiones', width: 150, type: 'number', align: 'right', headerAlign: 'right', valueFormatter: (value) => currencyFormatter(Number(value)) },
  ];

  // Columnas para la tabla de Detalles de Novedades (ya existentes)
  const columnsNovedades: GridColDef<NovedadesCanillasReporteGridItem>[] = [
    { field: 'nomApe', headerName: 'Canillita', width: 250, flex: 1.5 },
    { 
      field: 'fecha', 
      headerName: 'Fecha', 
      width: 120, 
      type: 'date',
      valueGetter: (value) => value ? new Date(value as string) : null,
      valueFormatter: (value) => value ? new Date(value as string).toLocaleDateString('es-AR', {timeZone: 'UTC'}) : '-',
    },
    { field: 'detalle', headerName: 'Detalle Novedad', flex: 2, minWidth: 350,
        renderCell: (params) => (
            <Tooltip title={params.value || ''} arrow placement="top">
                <Typography variant="body2" sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%' }}>
                    {params.value || '-'}
                </Typography>
            </Tooltip>
        )
    },
  ];

  const rowsGanancias = useMemo(() => gananciasData, [gananciasData]);
  const rowsNovedades = useMemo(() => novedadesData, [novedadesData]);
  
  const totalComisionesGanancias = useMemo(() => 
    gananciasData.reduce((sum, item) => sum + (item.totalRendir ?? 0), 0), 
  [gananciasData]);

  // eslint-disable-next-line react/display-name
  const FooterGanancias = () => (
    <GridFooterContainer sx={{ justifyContent: 'flex-end', borderTop: (theme) => `1px solid ${theme.palette.divider}` }}>
        <GridFooter />
        <Box sx={{ p: 1, display: 'flex', alignItems: 'center', fontWeight: 'bold' }}>
            <Typography variant="subtitle1" sx={{ mr: 2 }}>Total Comisiones:</Typography>
            <Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>{currencyFormatter(totalComisionesGanancias)}</Typography>
        </Box>         
    </GridFooterContainer>
  );
  const FooterNovedades = () => ( <GridFooterContainer sx={{ justifyContent: 'flex-end', borderTop: (theme) => `1px solid ${theme.palette.divider}` }}><GridFooter /></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}>
          <SeleccionaReporteNovedadesCanillas
            onGenerarReporte={handleGenerarReporte}
            isLoading={loading}
            apiErrorMessage={apiErrorParams}
          />
        </Paper>
      </Box>
    );
  }

  if (!loading && !puedeVerReporte && !showParamSelector) {
      // ... (renderizado de "sin permiso" sin cambios)
      return (
          <Box sx={{ p: 2 }}>
              <Alert severity="error" sx={{ m: 2 }}>No tiene permiso para ver este reporte.</Alert>
              <Button onClick={handleVolverAParametros} variant="outlined" color="secondary" size="small">
                  Volver
              </Button>
          </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: Listado de Novedades Canillitas</Typography> {/* Título más genérico */}
        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
          <Button onClick={handleGenerarYAbrirPdf} variant="contained" disabled={loadingPdf || (novedadesData.length === 0 && gananciasData.length === 0) || !!error} size="small">
            {loadingPdf ? <CircularProgress size={20} color="inherit" /> : "Abrir PDF"}
          </Button>
          <Button onClick={handleExportToExcel} variant="outlined" disabled={(novedadesData.length === 0 && gananciasData.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>
        Empresa: {currentParams?.nombreEmpresa || '-'} | 
        Período: {currentParams?.fechaDesde ? new Date(currentParams.fechaDesde + 'T00:00:00').toLocaleDateString('es-AR') : ''} al {currentParams?.fechaHasta ? new Date(currentParams.fechaHasta + 'T00:00:00').toLocaleDateString('es-AR') : ''}
      </Typography>

      {loading && <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>}
      {(error && !loading) && <Alert severity="info" sx={{ my: 2 }}>{error}</Alert>}

      {/* Sección de Ganancias/Resumen */}
      {!loading && !error && currentParams && (
        <>
          <Typography variant="h6" sx={{ mt: 3, mb: 1 }}>Resumen de Actividad</Typography>
          {gananciasData.length > 0 ? (
            <Paper sx={{ height: 250, width: '100%', mb: 3 }}>
              <DataGrid
                rows={rowsGanancias}
                columns={columnsGanancias}
                localeText={esES.components.MuiDataGrid.defaultProps.localeText}
                slots={{ footer: FooterGanancias }}
                density="compact"
                initialState={{ pagination: { paginationModel: { pageSize: 25 } } }}
                pageSizeOptions={[25, 50, 100]}
                disableRowSelectionOnClick
                rowHeight={48}
                sx={{
                    '& .MuiDataGrid-cell': { overflow: 'hidden', textOverflow: 'ellipsis' },
                    '& .MuiDataGrid-columnHeaderTitleContainer': { overflow: 'hidden' },
                }}
              />
            </Paper>
          ) : (
             <Typography sx={{mt:1, mb:3, fontStyle:'italic'}}>No hay datos de resumen de actividad para mostrar.</Typography>
          )}

          {/* Sección de Detalle de Novedades */}
          <Typography variant="h6" sx={{ mt: 3, mb: 1 }}>Otras Novedades (Detalle)</Typography>
          {novedadesData.length > 0 ? (
            <Paper sx={{ height: 250, width: '100%', mb: 3 }}> {/* Ajustar altura si es necesario */}
              <DataGrid
                rows={rowsNovedades}
                columns={columnsNovedades}
                localeText={esES.components.MuiDataGrid.defaultProps.localeText}
                slots={{ footer: FooterNovedades }}
                density="compact"
                initialState={{ pagination: { paginationModel: { pageSize: 25 } } }}
                pageSizeOptions={[25, 50, 100]}
                disableRowSelectionOnClick
                rowHeight={48}
                sx={{
                    '& .MuiDataGrid-cell': { overflow: 'hidden', textOverflow: 'ellipsis' },
                    '& .MuiDataGrid-columnHeaderTitleContainer': { overflow: 'hidden' },
                }}
              />
            </Paper>
          ) : (
             <Typography sx={{mt:1, fontStyle:'italic'}}>No hay detalles de otras novedades para mostrar.</Typography>
          )}
        </>
      )}
      
      {!loading && !error && novedadesData.length === 0 && gananciasData.length === 0 && currentParams && (
          <Typography sx={{mt:2, fontStyle:'italic'}}>No se encontraron datos para los criterios seleccionados.</Typography>
      )}
    </Box>
  );
};

export default ReporteNovedadesCanillasPage;