// src/components/AdminPanel.tsx
import React, { useState } from 'react';
import { Box, Typography, AppBar, Toolbar, IconButton, Tabs, Tab } from '@mui/material';
import LogoutIcon from '@mui/icons-material/Logout';

// Importamos los dos componentes que mostraremos en las pestañas
import ContextManager from './ContextManager'; // Renombraremos el AdminPanel original
import LogsViewer from './LogsViewer';

interface AdminPanelProps {
  onLogout: () => void;
}

// El componente se convierte en un contenedor con pestañas
const AdminPanel: React.FC<AdminPanelProps> = ({ onLogout }) => {
  const [currentTab, setCurrentTab] = useState(0);

  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
    setCurrentTab(newValue);
  };

  return (
    <Box>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            Panel de Administración del Chatbot
          </Typography>
          <IconButton color="inherit" onClick={onLogout} aria-label="Cerrar sesión">
            <LogoutIcon />
          </IconButton>
        </Toolbar>
        <Tabs value={currentTab} onChange={handleTabChange} textColor="inherit" indicatorColor="secondary">
          <Tab label="Gestor de Contexto" />
          <Tab label="Historial de Conversaciones" />
        </Tabs>
      </AppBar>
      
      {/* Mostramos el componente correspondiente a la pestaña activa */}
      {currentTab === 0 && <ContextManager onAuthError={onLogout} />}
      {currentTab === 1 && <LogsViewer onAuthError={onLogout} />}
    </Box>
  );
};

export default AdminPanel;