edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/OperationsScheduledBookings.tsx

import { Link } from "react-router-dom";
import { ArrowRight, ExternalLink } from "lucide-react";
import { Badge, Button, Group, Stack, Text } from "@mantine/core";

import { SchedulingStatusBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
import type { BookingListRow } from "@/types/booking";
import { DataTable, type ColumnDef } from "@edr/ui-common";

export function OperationsScheduledBookings({
  bookings,
  isLoading,
}: {
  bookings: BookingListRow[];
  isLoading?: boolean;
}) {
  const columns: ColumnDef<BookingListRow>[] = [
    {
      id: "reference",
      header: "Booking",
      cell: ({ row }) => (
        <Stack gap={2}>
          <Group gap={6}>
            <Text fw={600} size="sm">{row.original.reference}</Text>
            {row.original.isGovernment ? (
              <Badge color="violet" size="xs">Government</Badge>
            ) : null}
          </Group>
          <Text size="xs" c="dimmed">{row.original.customerLabel}</Text>
        </Stack>
      ),
    },
    {
      id: "route",
      header: "Route",
      cell: ({ row }) => (
        <Group gap={6}>
          <Text size="sm">{row.original.originLabel}</Text>
          <ArrowRight size={12} />
          <Text size="sm">{row.original.destinationLabel}</Text>
        </Group>
      ),
    },
    {
      id: "scheduled",
      header: "Scheduled",
      cell: ({ row }) => (
        <Text size="sm">{String(row.original.scheduledDate).slice(0, 16)}</Text>
      ),
    },
    {
      id: "status",
      header: "Scheduling",
      cell: ({ row }) =>
        row.original.schedulingStatus ? (
          <SchedulingStatusBadge status={row.original.schedulingStatus} />
        ) : (
          <Badge variant="light">—</Badge>
        ),
    },
    {
      id: "actions",
      header: "",
      cell: ({ row }) => (
        <Group gap="xs">
          <Button
            component={Link}
            to={`/dashboard/booking-requests/${row.original.id}`}
            variant="light"
            size="compact-sm"
          >
            View booking
          </Button>
          {row.original.trainScheduleId ? (
            <Button
              component={Link}
              to={`/dashboard/operations/train-scheduling-v2/${row.original.trainScheduleId}`}
              variant="subtle"
              size="compact-sm"
              leftSection={<ExternalLink size={14} />}
            >
              Train schedule
            </Button>
          ) : null}
        </Group>
      ),
    },
  ];

  return (
    <DataTable
      columns={columns}
      data={bookings}
      status={isLoading ? "loading" : "success"}
      emptyMessage="No bookings currently assigned to a train schedule"
    />
  );
}