TitularesApp/frontend/src/components/Dashboard.tsx

// frontend/src/components/Dashboard.tsx

import { useEffect, useState, useCallback } from 'react';
import { Box, Button, Typography, Stack, Chip } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import SyncIcon from '@mui/icons-material/Sync';

import type { Titular } from '../types';
import * as api from '../services/apiService';
import { useSignalR } from '../hooks/useSignalR';
import FormularioConfiguracion from './FormularioConfiguracion';
import TablaTitulares from './TablaTitulares';
import AddTitularModal from './AddTitularModal';

const Dashboard = () => {
  const [titulares, setTitulares] = useState<Titular[]>([]);
  const [modalOpen, setModalOpen] = useState(false);

  // Usamos useCallback para que la función de callback no se recree en cada render,
  // evitando que el useEffect del hook se ejecute innecesariamente.
  const onTitularesActualizados = useCallback((titularesActualizados: Titular[]) => {
    console.log("Datos recibidos desde SignalR:", titularesActualizados);
    setTitulares(titularesActualizados);
  }, []); // El array vacío significa que esta función nunca cambiará

  // Usamos nuestro hook y le pasamos el evento que nos interesa escuchar
  const { connectionStatus } = useSignalR([
    { eventName: 'TitularesActualizados', callback: onTitularesActualizados }
  ]);

  // La carga inicial de datos sigue siendo necesaria por si el componente se monta
  // antes de que llegue la primera notificación de SignalR.
  useEffect(() => {
    api.obtenerTitulares()
      .then(setTitulares)
      .catch(error => console.error("Error al cargar titulares:", error));
  }, []);

  const handleReorder = async (titularesReordenados: Titular[]) => {
    setTitulares(titularesReordenados);
    const payload = titularesReordenados.map((item, index) => ({ id: item.id, nuevoOrden: index }));
    try {
      await api.actualizarOrdenTitulares(payload);
      // Ya no necesitamos hacer nada más, SignalR notificará a todos los clientes.
    } catch (err) {
      console.error("Error al reordenar:", err);
      // En caso de error, volvemos a pedir los datos para no tener un estado inconsistente.
      api.obtenerTitulares().then(setTitulares);
    }
  };

  const handleDelete = async (id: number) => {
    if (window.confirm('¿Estás seguro de que quieres eliminar este titular?')) {
      try {
        await api.eliminarTitular(id);
        // SignalR se encargará de actualizar el estado.
      } catch (err) {
        console.error("Error al eliminar:", err);
      }
    }
  };

  const handleAdd = async (texto: string) => {
    try {
      await api.crearTitularManual(texto);
      // SignalR se encargará de actualizar el estado.
    } catch (err) {
      console.error("Error al añadir titular:", err);
    }
  };

  const getStatusChip = () => {
    switch (connectionStatus) {
      case 'Connected':
        return <Chip label="Conectado" color="success" size="small" />;
      case 'Reconnecting':
      case 'Connecting':
        return <Chip label="Conectando..." color="warning" size="small" />;
      default:
        return <Chip label="Desconectado" color="error" size="small" />;
    }
  }

  return (
    <>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
        <Stack direction="row" spacing={2} alignItems="center">
          <Typography variant="h4" component="h1">
            Titulares Dashboard
          </Typography>
          {getStatusChip()}
        </Stack>
        <Stack direction="row" spacing={2}>
          <Button variant="outlined" startIcon={<SyncIcon />}>
            Generate CSV
          </Button>
          <Button variant="contained" startIcon={<AddIcon />} onClick={() => setModalOpen(true)}>
            Add Manual
          </Button>
        </Stack>
      </Box>

      <FormularioConfiguracion />
      <TablaTitulares titulares={titulares} onReorder={handleReorder} onDelete={handleDelete} />
      <AddTitularModal open={modalOpen} onClose={() => setModalOpen(false)} onAdd={handleAdd} />
    </>
  );
};

export default Dashboard;