TitularesApp/frontend/src/components/TablaTitulares.tsx

// frontend/src/components/TablaTitulares.tsx

import {
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Chip, IconButton, Typography
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import DragHandleIcon from '@mui/icons-material/DragHandle'; // Importar el ícono
import { DndContext, closestCenter, PointerSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import type { Titular } from '../types';
import EditIcon from '@mui/icons-material/Edit';

// La prop `onDelete` se añade para comunicar el evento al componente padre
interface SortableRowProps {
  titular: Titular;
  onDelete: (id: number) => void;
  onEdit: (titular: Titular) => void;
}

const SortableRow = ({ titular, onDelete, onEdit }: SortableRowProps) => {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: titular.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  const getChipColor = (tipo: Titular['tipo']) => {
    if (tipo === 'Edited') return 'warning';
    if (tipo === 'Manual') return 'info';
    return 'success';
  };

  return (
    <TableRow ref={setNodeRef} style={style} {...attributes} >
      {/* El handle de arrastre ahora es un ícono */}
      <TableCell sx={{ cursor: 'grab' }} {...listeners}>
        <DragHandleIcon />
      </TableCell>
      <TableCell>{titular.texto}</TableCell>
      <TableCell>
        <Chip label={titular.tipo || 'Scraped'} color={getChipColor(titular.tipo)} size="small" />
      </TableCell>
      <TableCell>{titular.fuente}</TableCell>
      <TableCell>
        <IconButton size="small" onClick={(e) => { e.stopPropagation(); onEdit(titular); }}>
          <EditIcon fontSize="small" />
        </IconButton>
        <IconButton size="small" onClick={(e) => { e.stopPropagation(); onDelete(titular.id); }}>
          <DeleteIcon />
        </IconButton>
      </TableCell>
    </TableRow>
  );
};

interface TablaTitularesProps {
  titulares: Titular[];
  onReorder: (titulares: Titular[]) => void;
  onDelete: (id: number) => void;
  onEdit: (titular: Titular) => void;
}

const TablaTitulares = ({ titulares, onReorder, onDelete, onEdit }: TablaTitularesProps) => {
  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } })); // Evita activar el drag con un simple clic

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      const oldIndex = titulares.findIndex((item) => item.id === active.id);
      const newIndex = titulares.findIndex((item) => item.id === over.id);
      const newArray = arrayMove(titulares, oldIndex, newIndex);
      onReorder(newArray); // Pasamos el nuevo array al padre para que gestione el estado y la llamada a la API
    }
  };

  if (titulares.length === 0) {
    return (
      <Paper elevation={3} sx={{ padding: 3, textAlign: 'center' }}>
        <Typography>No hay titulares para mostrar.</Typography>
      </Paper>
    );
  }

  return (
    <Paper elevation={3}>
      <TableContainer>
        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
          <SortableContext items={titulares.map(t => t.id)} strategy={verticalListSortingStrategy}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell style={{ width: 50 }}></TableCell>
                  <TableCell>Texto del Titular</TableCell>
                  <TableCell>Tipo</TableCell>
                  <TableCell>Fuente</TableCell>
                  <TableCell>Acciones</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {titulares.map((titular) => (
                  <SortableRow key={titular.id} titular={titular} onDelete={onDelete} onEdit={onEdit} />
                ))}
              </TableBody>
            </Table>
          </SortableContext>
        </DndContext>
      </TableContainer>
    </Paper>
  );
};

export default TablaTitulares;