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:any) => w.id) });
  };

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

  return (
    <div></div>
    // <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>
  );
}