// src/components/LogsViewer.tsx
import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import { DataGrid, type GridColDef } from '@mui/x-data-grid';
import { Box, Typography, Alert } from '@mui/material';
import apiClient from '../api/apiClient';

interface ConversacionLog {
  id: number;
  usuarioMensaje: string;
  botRespuesta: string;
  fecha: string;
}

interface LogsViewerProps {
  onAuthError: () => void; // Función para desloguear si el token es inválido
}

const LogsViewer: React.FC<LogsViewerProps> = ({ onAuthError }) => {
  const [logs, setLogs] = useState<ConversacionLog[]>([]);
  const [error, setError] = useState<string | null>(null);

  const fetchLogs = useCallback(async () => {
    try {
      const response = await apiClient.get('/api/admin/logs');
      setLogs(response.data);
    } catch (err) {
      setError('No se pudieron cargar los logs.');
      if (axios.isAxiosError(err) && err.response?.status === 401) {
        onAuthError(); // Llamamos a la función de logout si hay un error de autenticación
      }
    }
  }, [onAuthError]);

  useEffect(() => {
    fetchLogs();
  }, [fetchLogs]);

  const columns: GridColDef[] = [
    {
      field: 'fecha',
      headerName: 'Fecha',
      width: 200,
      valueGetter: (value) => new Date(value).toLocaleString(),
    },
    { field: 'usuarioMensaje', headerName: 'Mensaje del Usuario', flex: 1 },
    { field: 'botRespuesta', headerName: 'Respuesta del Bot', flex: 1 },
  ];

  return (
    <Box sx={{ p: 4 }}>
      <Typography variant="h4" gutterBottom>
        Historial de Conversaciones
      </Typography>
      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
      <Box sx={{ height: 700, width: '100%' }}>
        <DataGrid
          rows={logs}
          columns={columns}
          pageSizeOptions={[25, 50, 100]}
          initialState={{
            sorting: {
              sortModel: [{ field: 'fecha', sort: 'desc' }],
            },
          }}
        />
      </Box>
    </Box>
  );
};

export default LogsViewer;