import { useCargoes } from '@/hooks/useCargoes';
// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { LoadCargoDialog } from '@/components/cargoes/LoadCargoDialog';
import { Card, CardContent, CardHeader, CardTitle } from '@edr/ui-common';

export default function CargoesPage() {
  const { data: cargoes, refetch, isLoading } = useCargoes();
  if (isLoading) return <div>Loading cargoes...</div>;
  return (
    <Card>
      <CardHeader><CardTitle>All Cargoes</CardTitle></CardHeader>
      <CardContent>
        <Table>
          <TableHeader><TableRow><TableHead>Reference</TableHead><TableHead>Description</TableHead><TableHead>Quantity</TableHead><TableHead>Weight</TableHead><TableHead>Status</TableHead><TableHead>Actions</TableHead></TableRow></TableHeader>
          <TableBody>
            {cargoes?.map((c:any) => (
              <TableRow key={c.id}>
                <TableCell>{c.cargoReference}</TableCell>
                <TableCell>{c.description || '-'}</TableCell>
                <TableCell>{c.quantity}</TableCell>
                <TableCell>{c.weight} kg</TableCell>
                <TableCell><Badge variant="outline">{c.status}</Badge></TableCell>
                <TableCell>
                  {c.status === 'PENDING' && <LoadCargoDialog cargoId={c.id} onSuccess={() => refetch()} />}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}