import React, { useMemo } from 'react';
import { DataGrid, type GridColDef } from '@mui/x-data-grid';
import { Button, Box, Typography, Paper, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { useAuth } from '../../contexts/AuthContext';
import { esES } from '@mui/x-data-grid/locales';
import type { AlertaGenericaDto } from '../../services/Anomalia/alertaService';

const getTipoAlertaLabel = (tipoAlerta: string): string => {
    switch (tipoAlerta) {
        case 'DevolucionAnomala': return 'Devoluciones Anómalas';
        case 'ConsumoBobinaExcesivo': return 'Consumo de Bobinas Anómalo';
        case 'ComportamientoSistema': return 'Anomalías Generales del Sistema';
        case 'FaltaDeDatos': return 'Falta de Registros Críticos';
        default: return tipoAlerta;
    }
};

const AlertasPage: React.FC = () => {
  const { alertas, marcarAlertaComoLeida, marcarGrupoDeAlertasLeido, isLoading } = useAuth();

  const gruposPorTipo = useMemo(() => {
    if (!Array.isArray(alertas)) return [];
    return alertas.reduce((acc, alerta) => {
        (acc[alerta.tipoAlerta] = acc[alerta.tipoAlerta] || []).push(alerta);
        return acc;
    }, {} as Record<string, AlertaGenericaDto[]>);
  }, [alertas]);
  
  const getColumnsForType = (tipoAlerta: string): GridColDef[] => {
    const baseColumns: GridColDef[] = [
        { field: 'fechaAnomalia', headerName: 'Fecha Evento', width: 150, valueFormatter: (value) => new Date(value as string).toLocaleDateString('es-AR') },
        { field: 'mensaje', headerName: 'Descripción', flex: 1 }
    ];
    
    // Columnas específicas para 'DevolucionAnomala'
    if (tipoAlerta === 'DevolucionAnomala') {
        baseColumns.push(
            { field: 'cantidadEnviada', headerName: 'Llevados', width: 120 },
            { field: 'cantidadDevuelta', headerName: 'Devueltos', width: 120 },
            { field: 'porcentajeDevolucion', headerName: '% Dev.', width: 120, valueFormatter: (value) => `${Number(value).toFixed(2)}%` }
        );
    }
    
    baseColumns.push({
      field: 'actions',
      headerName: 'Acciones',
      width: 150,
      sortable: false,
      renderCell: (params) => (
        <Button
          variant="contained"
          size="small"
          // Llamamos a la función del contexto para marcar una SOLA alerta
          onClick={() => marcarAlertaComoLeida(params.row.idAlerta)} 
        >
          Marcar Leída
        </Button>
      ),
    });

    return baseColumns;
  };

  return (
    <Box sx={{ p: 2 }}>
      <Typography variant="h5" gutterBottom>Centro de Alertas del Sistema</Typography>
      
      {Object.entries(gruposPorTipo).map(([tipoAlerta, alertasDelGrupo]) => {
          const gruposPorEntidad = alertasDelGrupo.reduce((acc, alerta) => {
              (acc[alerta.idEntidad] = acc[alerta.idEntidad] || []).push(alerta);
              return acc;
          }, {} as Record<number, AlertaGenericaDto[]>);

          return (
            <Accordion key={tipoAlerta} defaultExpanded>
              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
                <Typography variant="h6">{getTipoAlertaLabel(tipoAlerta)} ({alertasDelGrupo.length})</Typography>
              </AccordionSummary>
              <AccordionDetails sx={{display: 'flex', flexDirection: 'column', gap: 2}}>
                {Object.entries(gruposPorEntidad).map(([idEntidad, alertasDeEntidad]) => {
                  const primeraAlerta = alertasDeEntidad[0];
                  // Para obtener un nombre de canillita legible en el título del grupo
                  const nombreEntidad = primeraAlerta.entidad === 'Canillita' 
                    ? primeraAlerta.mensaje.match(/'([^']+)'/)?.[1] || `ID ${idEntidad}`
                    : `ID ${idEntidad}`;
                  
                  const tituloGrupo = primeraAlerta.entidad === 'Sistema' 
                    ? 'Alertas Generales del Sistema' 
                    : `${primeraAlerta.entidad}: ${nombreEntidad}`;

                  const rows = alertasDeEntidad.map(a => ({ ...a, id: a.idAlerta }));
                  
                  return (
                    <Paper key={idEntidad} variant="outlined" sx={{ p: 2 }}>
                       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1, flexWrap: 'wrap', gap: 1 }}>
                           <Typography variant="subtitle1" sx={{fontWeight: 'bold'}}>{tituloGrupo} ({alertasDeEntidad.length} alertas)</Typography>
                           <Button 
                                size="small" 
                                variant="outlined" 
                                onClick={() => marcarGrupoDeAlertasLeido(tipoAlerta, Number(idEntidad))}>
                                Marcar todas como leídas
                           </Button>
                       </Box>
                       <Box sx={{ height: 300, width: '100%' }}>
                            <DataGrid
                                rows={rows}
                                columns={getColumnsForType(tipoAlerta)}
                                loading={isLoading}
                                localeText={esES.components.MuiDataGrid.defaultProps.localeText}
                                density="compact"
                            />
                       </Box>
                    </Paper>
                  );
                })}
              </AccordionDetails>
            </Accordion>
          );
      })}

      {alertas.length === 0 && !isLoading && (
        <Typography sx={{mt: 3, textAlign: 'center', fontStyle: 'italic'}}>No hay alertas pendientes.</Typography>
      )}
    </Box>
  );
};

export default AlertasPage;