edr-platform/apps/edr-freight-web/backoffice/src/components/wagons/WagonsTable.tsx

import { useWagonsByTrain, useUnassignWagon, useReorderWagons } from '@/hooks/useWagons';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Trash2, GripVertical } from 'lucide-react';
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';

export function WagonsTable({ trainId }: { trainId: string }) {
  const { data: wagons, refetch } = useWagonsByTrain(trainId);
  const unassign = useUnassignWagon();
  const reorder = useReorderWagons();

  const onDragEnd = (result: any) => {
    if (!result.destination) return;
    const items = Array.from(wagons || []);
    const [removed] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, removed);
    reorder.mutate({ trainId, wagonIds: items.map(w => w.id) });
  };

  if (!wagons?.length) return <div className="text-muted-foreground">No wagons assigned.</div>;

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="wagons">
        {(provided) => (
          <Table {...provided.droppableProps} ref={provided.innerRef}>
            <TableHeader>
              <TableRow>
                <TableHead className="w-10"></TableHead>
                <TableHead>Number</TableHead>
                <TableHead>Type</TableHead>
                <TableHead>Sequence</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {wagons.map((wagon, idx) => (
                <Draggable key={wagon.id} draggableId={wagon.id} index={idx}>
                  {(provided) => (
                    <TableRow ref={provided.innerRef} {...provided.draggableProps}>
                      <TableCell {...provided.dragHandleProps}><GripVertical className="h-4 w-4 cursor-grab" /></TableCell>
                      <TableCell>{wagon.wagonNumber}</TableCell>
                      <TableCell>{wagon.wagonTypeId}</TableCell>
                      <TableCell>{wagon.sequenceNumber}</TableCell>
                      <TableCell>{wagon.status}</TableCell>
                      <TableCell>
                        <Button variant="ghost" size="icon" onClick={() => unassign.mutateAsync(wagon.id).then(() => refetch())}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </TableBody>
          </Table>
        )}
      </Droppable>
    </DragDropContext>
  );
}