import { useMemo, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import {
  ActionIcon,
  Box,
  Button,
  Card,
  Group,
  Menu,
  Paper,
  Select,
  SimpleGrid,
  Stack,
  Text,
  TextInput,
  ThemeIcon,
  Title,
} from "@mantine/core";
import type { LucideIcon } from "lucide-react";
import {
  ArrowRight,
  CheckCircle2,
  FileEdit,
  LayoutList,
  MoreVertical,
  Package,
  Plus,
  Search,
  Train,
  Wallet,
  X,
} from "lucide-react";

import { ShipmentTrackingModal } from "./tracking/ShipmentTrackingModal";
import { PayNowButton } from "./payments/PayNowButton";
import useAuth from "@/hooks/useAuth";
import { PROFILE_TYPE_LABELS } from "@/constants/profileMode";
import {
  BookingTypeBadge,
  CargoModeCell,
  PaymentBadge,
  SchedulingCell,
} from "./booking-display";

// Bookings that have left (or are leaving) the yard can be tracked live.
const TRACKABLE_STATUSES = new Set([
  "PAID",
  "IN_TRANSIT",
  "COMPLETED",
  "DELIVERED",
]);

import { api } from "@/services/api";
import type { BookingListFilter } from "@/services/bookings.service";
import { STATUS_CONFIG } from "@/pages/MyPortalPage/constants";
import type { Freight } from "@edr/types";
import {
  DataTable,
  DataTableFooter,
  type ColumnDef,
  usePagination,
} from "@edr/ui-common";

// ── Status filter options (grouped by lifecycle) ──────────────────────────────

const STATUS_FILTERS = [
  { key: "all", label: "All bookings", statuses: undefined as string | undefined },
  {
    key: "active",
    label: "In progress",
    statuses:
      "SUBMITTED,CHANGES_REQUESTED,PENDING_APPROVAL,APPROVED_PENDING_SIGNATURE,APPROVED,CONTRACT_READY,SIGNED_CUSTOMER,FULLY_EXECUTED,PENDING_CONSOLIDATION,CONSOLIDATED",
  },
  { key: "draft", label: "Drafts", statuses: "DRAFT" },
  {
    key: "payment",
    label: "Awaiting payment",
    statuses:
      "SELECTED_FOR_BATCH,PNR_GENERATED,PAYMENT_VERIFICATION_IN_PROGRESS,EXPIRED",
  },
  { key: "transit", label: "In transit", statuses: "PAID,IN_TRANSIT" },
  { key: "done", label: "Completed", statuses: "COMPLETED,DELIVERED" },
  { key: "closed", label: "Cancelled / rejected", statuses: "CANCELLED,REJECTED" },
] as const;

type StatusFilterKey = (typeof STATUS_FILTERS)[number]["key"];

const SELECT_DATA = STATUS_FILTERS.map((f) => ({ value: f.key, label: f.label }));

// ── Summary stat cards (clickable lifecycle filters) ──────────────────────────

const STAT_CARDS: Array<{
  key: StatusFilterKey;
  label: string;
  icon: LucideIcon;
  iconBg: string;
  iconColor: string;
}> = [
  {
    key: "all",
    label: "All bookings",
    icon: LayoutList,
    iconBg: "#ECF6F1",
    iconColor: "#0A8A5F",
  },
  {
    key: "active",
    label: "In progress",
    icon: Package,
    iconBg: "#FDF3E0",
    iconColor: "#C77F09",
  },
  {
    key: "payment",
    label: "Awaiting payment",
    icon: Wallet,
    iconBg: "#FEF6E6",
    iconColor: "#F2A516",
  },
  {
    key: "draft",
    label: "Drafts",
    icon: FileEdit,
    iconBg: "#F1F4F7",
    iconColor: "#475569",
  },
  {
    key: "done",
    label: "Completed",
    icon: CheckCircle2,
    iconBg: "#ECF6F1",
    iconColor: "#0A8A5F",
  },
];

// ── Status badge (reuses the shared portal status config) ─────────────────────

function StatusBadge({ status }: { status: string }) {
  const cfg = STATUS_CONFIG[status];
  const label = cfg?.badgeLabel ?? status.replace(/_/g, " ");
  const bg = cfg ? `var(--mantine-color-${cfg.badgeBg}-0, #F1F4F7)` : "#F1F4F7";
  const text = cfg ? `var(--mantine-color-${cfg.badgeText}-7, #475569)` : "#475569";
  const dot = cfg ? `var(--mantine-color-${cfg.badgeDot}-6, #94A3B8)` : "#94A3B8";
  return (
    <Group
      gap={6}
      align="center"
      wrap="nowrap"
      style={{
        display: "inline-flex",
        borderRadius: 999,
        backgroundColor: bg,
        padding: "5px 11px",
      }}
    >
      <Box
        style={{
          width: 6,
          height: 6,
          borderRadius: "50%",
          backgroundColor: dot,
          flexShrink: 0,
        }}
      />
      <Text fz={11} fw={700} style={{ color: text, whiteSpace: "nowrap" }}>
        {label}
      </Text>
    </Group>
  );
}

// ── Context-sensitive action button ───────────────────────────────────────────

function PrimaryAction({
  booking,
  onNavigate,
}: {
  booking: Freight.IBooking;
  onNavigate: (path: string) => void;
}) {
  const { status, id } = booking;
  const go = () => onNavigate(`/bookings/${id}`);
  // A general contract is payable as soon as it's FULLY_EXECUTED (signed); a
  // one-time booking only after it's SELECTED_FOR_BATCH.
  const isGeneralContract = booking.bookingType === "GENERAL_CONTRACT";
  if (status === "DRAFT") {
    return (
      <Button
        size="xs"
        radius="md"
        fw={700}
        fz={13}
        rightSection={<ArrowRight size={14} />}
        style={{ backgroundColor: "var(--mantine-color-edr-ink-0)", color: "#fff" }}
        onClick={go}
      >
        Continue
      </Button>
    );
  }
  if (status === "CHANGES_REQUESTED") {
    return (
      <Button
        size="xs"
        radius="md"
        fw={700}
        fz={13}
        color="orange"
        rightSection={<ArrowRight size={14} />}
        onClick={() => onNavigate(`/bookings/${id}/edit?section=documents`)}
      >
        Review changes
      </Button>
    );
  }
  const payableStatus = isGeneralContract
    ? "FULLY_EXECUTED"
    : "SELECTED_FOR_BATCH";
  if (status === payableStatus && booking.paymentStatus !== "PAID") {
    return <PayNowButton booking={booking} />;
  }
  return (
    <Button size="xs" radius="md" variant="default" fw={600} fz={13} onClick={go}>
      View
    </Button>
  );
}

function ColHeader({ label }: { label: string }) {
  return (
    <Text
      fz={11}
      fw={700}
      c="edr-muted"
      style={{ letterSpacing: "0.6px", textTransform: "uppercase", whiteSpace: "nowrap" }}
    >
      {label}
    </Text>
  );
}

const hMeta = { headerClassName: "bg-[#F4F7FA]" };

function fmtDate(iso?: string | null): string {
  if (!iso) return "";
  const d = new Date(iso);
  return Number.isNaN(d.getTime())
    ? ""
    : d.toLocaleDateString(undefined, {
        year: "numeric",
        month: "short",
        day: "numeric",
      });
}

// ── Main component ────────────────────────────────────────────────────────────

// Lightweight count query for a single lifecycle filter (reads only `total`).
function useStatusCount(
  statuses: string | undefined,
  companyProfileId?: string,
): number | undefined {
  const { data } = useQuery(
    api.bookings.list.queryOptions({
      input: { statuses, companyProfileId, page: 1, pageSize: 1 },
      staleTime: 30_000,
    }),
  );
  return data?.meta?.total;
}

function StatCard({
  card,
  active,
  count,
  onSelect,
}: {
  card: (typeof STAT_CARDS)[number];
  active: boolean;
  count: number | undefined;
  onSelect: () => void;
}) {
  const Icon = card.icon;
  return (
    <Paper
      role="button"
      tabIndex={0}
      onClick={onSelect}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onSelect();
        }
      }}
      p="md"
      radius="lg"
      withBorder
      style={{
        cursor: "pointer",
        transition: "box-shadow 140ms ease, border-color 140ms ease",
        borderColor: active ? "#F2A516" : "var(--mantine-color-edr-border-0)",
        boxShadow: active ? "0 0 0 1px #F2A516" : "none",
      }}
    >
      <Group gap={12} wrap="nowrap" align="center">
        <Box
          style={{
            width: 42,
            height: 42,
            borderRadius: 11,
            flexShrink: 0,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: card.iconBg,
            color: card.iconColor,
          }}
        >
          <Icon size={20} strokeWidth={2} />
        </Box>
        <Box style={{ minWidth: 0 }}>
          <Text fz={24} fw={800} lh={1.05} c="edr-text">
            {count ?? "—"}
          </Text>
          <Text fz={12} fw={600} c="edr-muted" truncate>
            {card.label}
          </Text>
        </Box>
      </Group>
    </Paper>
  );
}

export default function MyBookings() {
  const navigate = useNavigate();
  const { pagination, setPagination } = usePagination({ pageSize: 10 });
  const [statusFilter, setStatusFilter] = useState<StatusFilterKey>("all");
  const [query, setQuery] = useState("");
  const [typeFilter, setTypeFilter] = useState<string | null>(null);
  const [freightFilter, setFreightFilter] = useState<string | null>(null);
  const [serviceFilter, setServiceFilter] = useState<string | null>(null);
  const [createdFrom, setCreatedFrom] = useState<string>("");
  const [createdTo, setCreatedTo] = useState<string>("");

  // Operational-service options (importer / exporter / freight forwarder) for
  // the per-page filter. Empty for non-customer companies.
  const { company } = useAuth();
  const companyProfiles = company?.company?.companyProfiles ?? [];
  const serviceOptions = companyProfiles.map((p) => ({
    value: p.id,
    label: `${PROFILE_TYPE_LABELS[p.type] ?? p.type} · ${p.reference}`,
  }));
  const [trackingBooking, setTrackingBooking] = useState<Freight.IBooking | null>(
    null,
  );

  const statuses = STATUS_FILTERS.find((t) => t.key === statusFilter)?.statuses;

  const resetPage = () =>
    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });

  const selectFilter = (key: StatusFilterKey) => {
    setStatusFilter(key);
    resetPage();
  };

  const hasExtraFilters =
    !!typeFilter ||
    !!freightFilter ||
    !!serviceFilter ||
    !!createdFrom ||
    !!createdTo;
  const clearExtraFilters = () => {
    setTypeFilter(null);
    setFreightFilter(null);
    setServiceFilter(null);
    setCreatedFrom("");
    setCreatedTo("");
    resetPage();
  };

  const filter: BookingListFilter = useMemo(
    () => ({
      statuses,
      bookingType: typeFilter ?? undefined,
      freightType: freightFilter ?? undefined,
      companyProfileId: serviceFilter ?? undefined,
      createdFrom: createdFrom || undefined,
      // include the whole selected end day
      createdTo: createdTo ? `${createdTo}T23:59:59.999Z` : undefined,
      page: pagination.pageIndex + 1,
      pageSize: pagination.pageSize,
    }),
    [
      statuses,
      typeFilter,
      freightFilter,
      serviceFilter,
      createdFrom,
      createdTo,
      pagination.pageIndex,
      pagination.pageSize,
    ],
  );

  const { data, isLoading, isError } = useQuery(
    api.bookings.list.queryOptions({ input: filter }),
  );

  // Per-card lifecycle counts (one cheap query each, total-only). Scoped to the
  // selected service so the cards match the filtered table.
  const svc = serviceFilter ?? undefined;
  const allCount = useStatusCount(undefined, svc);
  const activeCount = useStatusCount(
    STATUS_FILTERS.find((f) => f.key === "active")!.statuses,
    svc,
  );
  const paymentCount = useStatusCount(
    STATUS_FILTERS.find((f) => f.key === "payment")!.statuses,
    svc,
  );
  const draftCount = useStatusCount(
    STATUS_FILTERS.find((f) => f.key === "draft")!.statuses,
    svc,
  );
  const doneCount = useStatusCount(
    STATUS_FILTERS.find((f) => f.key === "done")!.statuses,
    svc,
  );
  const transitCount = useStatusCount(
    STATUS_FILTERS.find((f) => f.key === "transit")!.statuses,
    svc,
  );
  const closedCount = useStatusCount(
    STATUS_FILTERS.find((f) => f.key === "closed")!.statuses,
    svc,
  );
  const cardCounts: Record<StatusFilterKey, number | undefined> = {
    all: allCount,
    active: activeCount,
    payment: paymentCount,
    draft: draftCount,
    done: doneCount,
    transit: transitCount,
    closed: closedCount,
  };

  const allItems = data?.items ?? [];
  const total = data?.meta?.total ?? allItems.length;

  // Server handles status + pagination; reference search is applied on the page.
  const rows = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return allItems;
    return allItems.filter((b) =>
      [b.reference, b.originYard?.label, b.destinationYard?.label]
        .filter(Boolean)
        .some((v) => String(v).toLowerCase().includes(q)),
    );
  }, [allItems, query]);

  const pageCount = Math.max(1, Math.ceil(total / pagination.pageSize));
  const dataTableStatus = isLoading ? "loading" : isError ? "error" : "success";
  const showEmpty =
    !isLoading && !isError && rows.length === 0;

  const columns: ColumnDef<Freight.IBooking>[] = [
    {
      id: "booking",
      size: 244,
      meta: hMeta,
      header: () => <ColHeader label="Booking" />,
      cell: ({ row }) => {
        const b = row.original;
        const cargoLabel = b.freightType === "BULK" ? "Bulk cargo" : "Container";
        return (
          <Group gap={12} wrap="nowrap" align="center">
            <Box
              style={{
                width: 36,
                height: 36,
                borderRadius: 9,
                flexShrink: 0,
                backgroundColor: "var(--mantine-color-edr-soft-0)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Package size={18} color="var(--mantine-color-edr-green-7)" strokeWidth={2} />
            </Box>
            <Box style={{ minWidth: 0 }}>
              <Text fz={14} fw={700} c="edr-text" truncate>
                {b.reference}
              </Text>
              <Text fz={12} c="edr-muted">
                {cargoLabel}
              </Text>
            </Box>
          </Group>
        );
      },
    },
    {
      id: "type",
      size: 150,
      meta: hMeta,
      header: () => <ColHeader label="Type" />,
      cell: ({ row }) => <BookingTypeBadge booking={row.original} />,
    },
    {
      id: "cargo",
      size: 168,
      meta: hMeta,
      header: () => <ColHeader label="Cargo" />,
      cell: ({ row }) => <CargoModeCell booking={row.original} />,
    },
    {
      id: "route",
      size: 196,
      meta: hMeta,
      header: () => <ColHeader label="Route" />,
      cell: ({ row }) => {
        const b = row.original;
        const origin = b.originYard?.label ?? b.originYard?.code ?? "—";
        const dest = b.destinationYard?.label ?? b.destinationYard?.code ?? "—";
        const sub = fmtDate(b.scheduledDate ?? b.createdAt);
        return (
          <Box>
            <Text fz={13} fw={600} c="edr-text">
              {origin} → {dest}
            </Text>
            {sub && (
              <Text fz={12} c="edr-muted">
                {sub}
              </Text>
            )}
          </Box>
        );
      },
    },
    {
      id: "payment",
      size: 130,
      meta: hMeta,
      header: () => <ColHeader label="Payment" />,
      cell: ({ row }) => <PaymentBadge status={row.original.paymentStatus} />,
    },
    {
      id: "scheduling",
      size: 140,
      meta: hMeta,
      header: () => <ColHeader label="Train" />,
      cell: ({ row }) => <SchedulingCell booking={row.original} />,
    },
    {
      id: "status",
      size: 190,
      meta: hMeta,
      header: () => <ColHeader label="Status" />,
      cell: ({ row }) => <StatusBadge status={row.original.status} />,
    },
    {
      id: "amount",
      size: 140,
      meta: hMeta,
      header: () => <ColHeader label="Amount" />,
      cell: ({ row }) => {
        const b = row.original as Freight.IBooking & {
          totalAmount?: number;
          amount?: number;
        };
        const amount = b.totalAmount ?? b.amount ?? null;
        if (!amount) {
          return (
            <Text fz={14} fw={700} style={{ color: "#94A3B8" }}>
              —
            </Text>
          );
        }
        return (
          <Text fz={14} fw={700} c="edr-text">
            ETB {amount.toLocaleString()}
          </Text>
        );
      },
    },
    {
      id: "actions",
      meta: hMeta,
      header: () => null,
      cell: ({ row }) => {
        const booking = row.original;
        const trackable = TRACKABLE_STATUSES.has(booking.status);
        return (
          <Group justify="flex-end" gap={8} wrap="nowrap" onClick={(e) => e.stopPropagation()}>
            {trackable && (
              <Button
                size="xs"
                radius="md"
                variant="light"
                color="edr-green"
                fw={700}
                fz={13}
                leftSection={<Train size={14} />}
                onClick={() => setTrackingBooking(booking)}
              >
                Track
              </Button>
            )}
            <PrimaryAction booking={booking} onNavigate={navigate} />
            <Menu position="bottom-end" withinPortal shadow="md" radius="md">
              <Menu.Target>
                <ActionIcon variant="transparent" size={30} radius="md" aria-label="More options">
                  <MoreVertical size={16} color="#9AA8B5" />
                </ActionIcon>
              </Menu.Target>
              <Menu.Dropdown>
                <Menu.Item onClick={() => navigate(`/bookings/${booking.id}`)}>
                  View details
                </Menu.Item>
                {trackable && (
                  <Menu.Item
                    leftSection={<Train size={15} />}
                    onClick={() => setTrackingBooking(booking)}
                  >
                    Track shipment
                  </Menu.Item>
                )}
              </Menu.Dropdown>
            </Menu>
          </Group>
        );
      },
    },
  ];

  return (
    <Box style={{ padding: "28px 32px 32px" }}>
      <Stack gap="lg">
        {/* ── Page header ─────────────────────────────────────────────── */}
        <Group justify="space-between" align="flex-end" wrap="wrap" gap="md">
          <Box>
            <Group gap={10} align="center">
              <Title order={1} fw={800} fz={26} style={{ letterSpacing: "-0.01em" }}>
                Bookings
              </Title>
            </Group>
            <Text size="sm" c="edr-muted" mt={4}>
              Track every cargo booking — from draft to delivery.
            </Text>
          </Box>
          <Button
            component={Link}
            to="/bookings/new"
            color="edr-green"
            radius="md"
            leftSection={<Plus size={16} />}
          >
            New booking
          </Button>
        </Group>

        {/* ── Summary stat cards ──────────────────────────────────────── */}
        <SimpleGrid cols={{ base: 2, sm: 3, lg: 5 }} spacing="md">
          {STAT_CARDS.map((card) => (
            <StatCard
              key={card.key}
              card={card}
              active={statusFilter === card.key}
              count={cardCounts[card.key]}
              onSelect={() => selectFilter(card.key)}
            />
          ))}
        </SimpleGrid>

        {/* ── Bookings table card ──────────────────────────────────────── */}
        <Card p={0} style={{ overflow: "hidden" }}>
          <Group
            justify="space-between"
            gap={12}
            px={20}
            py={14}
            wrap="wrap"
            style={{ borderBottom: "1px solid var(--mantine-color-edr-border-0)" }}
          >
            <Group gap={10} wrap="wrap" style={{ flex: 1, minWidth: 260 }}>
              <TextInput
                placeholder="Search reference or route…"
                leftSection={<Search size={16} />}
                value={query}
                onChange={(e) => setQuery(e.currentTarget.value)}
                rightSection={
                  query ? (
                    <ActionIcon
                      size="sm"
                      variant="transparent"
                      color="gray"
                      onClick={() => setQuery("")}
                    >
                      <X size={14} />
                    </ActionIcon>
                  ) : null
                }
                radius="md"
                style={{ flex: 1, minWidth: 200, maxWidth: 340 }}
              />
              <Select
                data={SELECT_DATA}
                value={statusFilter}
                onChange={(value) => selectFilter((value as StatusFilterKey) ?? "all")}
                allowDeselect={false}
                radius="md"
                checkIconPosition="right"
                comboboxProps={{ withinPortal: true }}
                style={{ width: 190 }}
                aria-label="Filter by status"
              />
              <Select
                placeholder="Any type"
                data={[
                  { value: "ONE_TIME", label: "One-time" },
                  { value: "GENERAL_CONTRACT", label: "General contract" },
                ]}
                value={typeFilter}
                onChange={(v) => {
                  setTypeFilter(v);
                  resetPage();
                }}
                clearable
                radius="md"
                comboboxProps={{ withinPortal: true }}
                style={{ width: 170 }}
                aria-label="Filter by booking type"
              />
              <Select
                placeholder="Any cargo"
                data={[
                  { value: "CONTAINER", label: "Container" },
                  { value: "BULK", label: "Bulk" },
                ]}
                value={freightFilter}
                onChange={(v) => {
                  setFreightFilter(v);
                  resetPage();
                }}
                clearable
                radius="md"
                comboboxProps={{ withinPortal: true }}
                style={{ width: 150 }}
                aria-label="Filter by cargo type"
              />
              {serviceOptions.length > 1 && (
                <Select
                  placeholder="All services"
                  data={serviceOptions}
                  value={serviceFilter}
                  onChange={(v) => {
                    setServiceFilter(v);
                    resetPage();
                  }}
                  clearable
                  radius="md"
                  comboboxProps={{ withinPortal: true }}
                  style={{ width: 200 }}
                  aria-label="Filter by service"
                />
              )}
              <TextInput
                type="date"
                value={createdFrom}
                onChange={(e) => {
                  setCreatedFrom(e.currentTarget.value);
                  resetPage();
                }}
                radius="md"
                style={{ width: 150 }}
                aria-label="Created from"
                placeholder="From"
              />
              <TextInput
                type="date"
                value={createdTo}
                onChange={(e) => {
                  setCreatedTo(e.currentTarget.value);
                  resetPage();
                }}
                radius="md"
                style={{ width: 150 }}
                aria-label="Created to"
                placeholder="To"
              />
              {hasExtraFilters && (
                <Button
                  variant="subtle"
                  color="gray"
                  radius="md"
                  size="sm"
                  leftSection={<X size={14} />}
                  onClick={clearExtraFilters}
                >
                  Clear
                </Button>
              )}
            </Group>
            <Text fz={12} c="edr-muted">
              {total} booking{total !== 1 ? "s" : ""}
            </Text>
          </Group>

          {showEmpty ? (
            <Stack align="center" gap={4} px="lg" py={64} ta="center">
              <ThemeIcon size={56} radius="lg" color="edr-green" variant="light" mb="xs">
                <Package size={28} />
              </ThemeIcon>
              <Text size="sm" fw={600} c="edr-text">
                {query ? "No bookings match your search" : "No bookings here yet"}
              </Text>
              <Text size="xs" c="edr-muted" maw={320}>
                {query
                  ? "Try a different reference or clear the search."
                  : "Create your first booking to get started."}
              </Text>
              {!query && (
                <Button
                  component={Link}
                  to="/bookings/new"
                  size="sm"
                  color="edr-green"
                  radius="md"
                  mt="md"
                  leftSection={<Plus size={15} />}
                >
                  Create first booking
                </Button>
              )}
            </Stack>
          ) : (
            <DataTable
              columns={columns}
              data={rows}
              status={dataTableStatus}
              onRowClick={(row) => navigate(`/bookings/${(row as Freight.IBooking).id}`)}
              pagination={{
                pageIndex: pagination.pageIndex,
                pageSize: pagination.pageSize,
                pageCount,
                totalCount: total,
              }}
              tableOptions={{
                state: { pagination },
                onPaginationChange: setPagination,
                manualPagination: true,
                pageCount,
              }}
              containerClassName="border-0 shadow-none rounded-none"
              footer={DataTableFooter}
            />
          )}
        </Card>
      </Stack>

      <ShipmentTrackingModal
        opened={trackingBooking !== null}
        onClose={() => setTrackingBooking(null)}
        bookingId={trackingBooking?.id ?? ""}
        bookingReference={trackingBooking?.reference ?? ""}
        originLabel={
          trackingBooking?.originYard?.label ?? trackingBooking?.originYard?.code
        }
        destinationLabel={
          trackingBooking?.destinationYard?.label ??
          trackingBooking?.destinationYard?.code
        }
      />
    </Box>
  );
}
