import { useParams } from 'react-router-dom';
import { useTrain } from '@/hooks/useTrains';
// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
// import { Skeleton } from '@/components/ui/skeleton';
// import { AssignWagonDialog } from '@/components/AssignWagonDialog';
// import { WagonsTable } from '@/components/WagonsTable';
import { Card, CardContent, CardHeader, CardTitle, Skeleton } from '@edr/ui-common';
import { AssignWagonDialog } from '@/components/wagons/AssignWagonDialog';
import { WagonsTable } from '@/components/wagons/WagonsTable';

export default function TrainDetailPage() {
  const { id } = useParams<{ id: string }>();
  const { data: train, isLoading } = useTrain(id!);

  if (isLoading) return <Skeleton className="h-96 w-full" />;
  if (!train) return <div>Train not found</div>;

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader><CardTitle>{train.trainNumber || train.code} - {train.trainName || 'Unnamed'}</CardTitle></CardHeader>
        <CardContent className="grid md:grid-cols-2 gap-4">
          <div><span className="font-medium">Status:</span> {train.status}</div>
          <div><span className="font-medium">Capacity:</span> {train.capacityTons} tons</div>
          <div><span className="font-medium">Origin Station:</span> {train.originStationId || '-'}</div>
          <div><span className="font-medium">Destination:</span> {train.destinationStationId || '-'}</div>
        </CardContent>
      </Card>
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">Wagons</h2>
        <AssignWagonDialog trainId={train.id} />
      </div>
      <WagonsTable trainId={train.id} />
    </div>
  );
}