import { useTrains, useDeleteTrain } from '@/hooks/useTrains';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Eye, Trash2 } from 'lucide-react';
import { Link } from 'react-router-dom';

export function TrainsTable() {
  const { data: trains, isLoading } = useTrains();
  const deleteTrain = useDeleteTrain();

  if (isLoading) return <div>Loading trains...</div>;

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Number</TableHead>
          <TableHead>Name</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Capacity (tons)</TableHead>
          <TableHead>Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {trains?.map(train => (
          <TableRow key={train.id}>
            <TableCell>{train.trainNumber || train.code}</TableCell>
            <TableCell>{train.trainName || '-'}</TableCell>
            <TableCell><Badge variant="outline">{train.status}</Badge></TableCell>
            <TableCell>{train.capacityTons}</TableCell>
            <TableCell className="flex space-x-2">
              <Link to={`/trains/${train.id}`}>
                <Button variant="ghost" size="icon"><Eye className="h-4 w-4" /></Button>
              </Link>
              <Button variant="ghost" size="icon" onClick={() => deleteTrain.mutate(train.id)}>
                <Trash2 className="h-4 w-4" />
              </Button>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}