edr-platform/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx

import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import toast from "react-hot-toast";
import {
  ArrowLeft,
  FileSignature,
  FileText,
  FolderOpen,
  Layers,
  LayoutGrid,
  Milestone,
  Package,
  Truck,
} from "lucide-react";
import {
  Container,
  Stack,
  Grid,
  Center,
  Loader,
  Tabs,
  Text,
  Paper,
  Button,
  Box,
  SegmentedControl,
} from "@mantine/core";

import { PageContainer } from "@/components/page";
import Breadcrumbs from "@/components/ui/Breadcrumbs";
import { BookingActionsToolbar } from "@/components/bookings/BookingActionsToolbar";
import { BookingPricingSummary } from "@/components/bookings/BookingPricingSummary";
import { BookingWorkflowStepper } from "@/components/bookings/BookingWorkflowStepper";
import { ConsolidationWaitingBanner } from "@/components/bookings/detail/ConsolidationWaitingBanner";
import {
  detailStyles,
  BookingRequestHero,
  BookingRouteServiceCard,
  BookingMileServicesCard,
  BookingCargoCard,
  BookingCompanyCard,
  BookingContractSummaryCard,
  BookingContainerUnitsCard,
  BookingSchedulingWindowCard,
  BookingDocumentsPanel,
  BookingTrucksPanel,
  ContractOrdersPanel,
} from "@/components/bookings/detail";
import { WarehouseInfoCard } from "@/components/warehouses";
import { getStatusMeta } from "@/features/bookings/booking-status.config";
import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
import type { BookingDetail } from "@/types/booking";
import {
  useBookingDetail,
  useBookingMutations,
} from "@/hooks/bookings/useBookings";
import { useScrollToHash } from "@/hooks/useScrollToHash";
import { bookingsService } from "@/services/bookings.service";

export default function BookingRequestDetailPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  // Deep-link from a warehouse fee invoice → this booking's warehouse section.
  useScrollToHash();
  const {
    data: booking,
    isLoading,
    isError,
    refetch,
    isFetching,
  } = useBookingDetail(id);
  const mutations = useBookingMutations(id ?? "");

  if (isLoading) {
    return (
      <PageContainer>
        <Center mih="60vh">
          <Stack align="center" gap="md">
            <Loader color="gray" />
            <Text size="sm" c="dimmed" fw={500}>
              Loading booking…
            </Text>
          </Stack>
        </Center>
      </PageContainer>
    );
  }

  if (isError || !booking) {
    return (
      <PageContainer>
        <Container size="sm" py="xl">
          <Paper
            radius="md"
            withBorder
            p="xl"
            ta="center"
            style={detailStyles.card}
          >
            <Center>
              <Box
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  width: 64,
                  height: 64,
                  borderRadius: 16,
                  background: "var(--mantine-color-gray-1)",
                  color: "var(--mantine-color-gray-6)",
                }}
              >
                <Package size={32} />
              </Box>
            </Center>
            <Text fw={700} size="lg" mt="lg">
              Booking not found
            </Text>
            <Text size="sm" c="dimmed" mt={4}>
              This request may have been removed or the link is invalid.
            </Text>
            <Button
              variant="default"
              mt="lg"
              leftSection={<ArrowLeft size={16} />}
              onClick={() => navigate("/dashboard/booking-requests")}
            >
              Back to booking requests
            </Button>
          </Paper>
        </Container>
      </PageContainer>
    );
  }

  const row = toBookingListRow(booking);
  const statusMeta = getStatusMeta(booking.status);
  // Clearance review + finalize now lives solely on the Operations "Clearance
  // Documents" hub (/dashboard/contracts/clearance-documents → detail page), so
  // no clearance tab is embedded here anymore.
  // A general contract drives an "Orders" tab: each drawdown order spawns a
  // child booking that staff manage (clearance/approval) independently.
  const isGeneralContract = booking.bookingType === "GENERAL_CONTRACT";
  // The Documents tab is always available — every booking can accrue clearance,
  // customs-workflow, invoice or notice files — so the tab bar always renders.
  const requestedTab = searchParams.get("tab");
  const activeTab =
    requestedTab === "orders" && isGeneralContract
      ? "orders"
      : requestedTab === "documents"
        ? "documents"
        : requestedTab === "trucks"
          ? "trucks"
          : "overview";
  const setActiveTab = (tab: string | null) => {
    const next = new URLSearchParams(searchParams);
    if (tab && tab !== "overview") next.set("tab", tab);
    else next.delete("tab");
    setSearchParams(next, { replace: true });
  };

  return (
    <PageContainer>
      <Breadcrumbs
        items={[
          { label: "Booking requests", href: "/dashboard/booking-requests" },
          { label: booking.reference },
        ]}
      />

      <Stack gap="lg">
        <BookingRequestHero
          booking={booking}
          customerLabel={row.customerLabel}
          onBack={() => navigate("/dashboard/booking-requests")}
          onRefresh={() => refetch()}
          isFetching={isFetching}
        />

        <BookingWorkflowStepper
          status={booking.status}
          title={statusMeta.title}
          description={statusMeta.description}
          titleColor={statusMeta.color}
        />

        {booking.status === "PENDING_CONSOLIDATION" && (
          <ConsolidationWaitingBanner bookingId={booking.id} />
        )}

        <Grid gap="lg">
          {/* LEFT — primary content, split into tabs to keep each view focused.
              The Documents tab is always present, so the tab bar always renders. */}
          <Grid.Col span={{ base: 12, lg: 8 }}>
            <Tabs
                value={activeTab}
                onChange={setActiveTab}
                variant="pills"
                color="edr-blue"
                keepMounted={false}
              >
                <Tabs.List mb="lg">
                  <Tabs.Tab
                    value="overview"
                    leftSection={<LayoutGrid size={16} />}
                  >
                    Overview
                  </Tabs.Tab>
                  {isGeneralContract && (
                    <Tabs.Tab value="orders" leftSection={<Layers size={16} />}>
                      Orders
                    </Tabs.Tab>
                  )}
                  <Tabs.Tab
                    value="documents"
                    leftSection={<FolderOpen size={16} />}
                  >
                    Documents
                  </Tabs.Tab>
                  <Tabs.Tab value="trucks" leftSection={<Truck size={16} />}>
                    Trucks
                  </Tabs.Tab>
                </Tabs.List>

                <Tabs.Panel value="overview">
                  <OverviewPanel booking={booking} row={row} />
                </Tabs.Panel>
                {isGeneralContract && (
                  <Tabs.Panel value="orders">
                    <ContractOrdersPanel
                      contractBookingId={booking.id}
                      isContainer={booking.freightType === "CONTAINER"}
                    />
                  </Tabs.Panel>
                )}
                <Tabs.Panel value="documents">
                  <BookingDocumentsPanel bookingId={booking.id} />
                </Tabs.Panel>
                <Tabs.Panel value="trucks">
                  <BookingTrucksPanel bookingId={booking.id} />
                </Tabs.Panel>
              </Tabs>
          </Grid.Col>

          {/* RIGHT — sticky action / summary rail */}
          <Grid.Col span={{ base: 12, lg: 4 }}>
            <Box style={{ position: "sticky", top: 24 }}>
              <Stack gap="lg">
                <BookingCompanyCard booking={booking} />
                <BookingSchedulingWindowCard booking={booking} />
                <BookingPricingSummary booking={booking} />
                <Box id="warehouse-payments">
                  <WarehouseInfoCard
                    bookingId={booking.id}
                    bookingReference={booking.reference}
                    paymentStatus={booking.paymentStatus}
                    tradeDirection={booking.tradeDirection}
                  />
                </Box>
                <BookingActionsToolbar
                  booking={booking}
                  mutations={mutations}
                />
                {booking.tradeDirection === "EXPORT" && (
                  <Paper withBorder radius="md" p="sm">
                    <Stack gap={6}>
                      <Text size="sm" fw={600}>
                        How the cargo reaches the train
                      </Text>
                      <SegmentedControl
                        fullWidth
                        size="xs"
                        value={booking.exportHandoverMode ?? "WAREHOUSE"}
                        data={[
                          { value: "WAREHOUSE", label: "Warehouse then train" },
                          { value: "DIRECT_TO_TRAIN", label: "Direct truck to train" },
                        ]}
                        onChange={async (value) => {
                          try {
                            await bookingsService.setExportHandoverMode(
                              booking.id,
                              value as "DIRECT_TO_TRAIN" | "WAREHOUSE",
                            );
                            await refetch();
                          } catch (error) {
                            toast.error(
                              error instanceof Error
                                ? error.message
                                : "Could not change the handover mode",
                            );
                          }
                        }}
                      />
                      <Text size="xs" c="dimmed">
                        {booking.exportHandoverMode === "DIRECT_TO_TRAIN"
                          ? "No warehouse receipt and no GRN — the carriage acceptance sheet is the handover document."
                          : "Cargo is received at the warehouse and issued a GRN before loading."}
                      </Text>
                    </Stack>
                  </Paper>
                )}
                {booking.isGovernment && booking.contractSummary && (
                  <Button
                    fullWidth
                    variant="default"
                    leftSection={<FileSignature size={16} />}
                    onClick={() =>
                      navigate(
                        `/dashboard/booking-requests/${booking.id}/contract`,
                      )
                    }
                  >
                    View / sign contract
                  </Button>
                )}
                <Button
                  fullWidth
                  variant="default"
                  leftSection={<FileText size={16} />}
                  onClick={async () => {
                    try {
                      const blob =
                        await bookingsService.downloadCarriageAcceptanceSheet(
                          booking.id,
                        );
                      const url = URL.createObjectURL(blob);
                      const a = document.createElement("a");
                      a.href = url;
                      a.download = `carriage-acceptance-${booking.reference}.pdf`;
                      a.click();
                      URL.revokeObjectURL(url);
                    } catch (error) {
                      toast.error(
                        error instanceof Error
                          ? error.message
                          : "Carriage acceptance sheet is not available yet",
                      );
                    }
                  }}
                >
                  Carriage acceptance sheet
                </Button>
                {booking.customsClearingEnabled && (
                  <Button
                    fullWidth
                    variant="default"
                    leftSection={<Milestone size={16} />}
                    onClick={() =>
                      navigate(`/dashboard/bookings/${booking.id}/clearance`)
                    }
                  >
                    View document clearance
                  </Button>
                )}
              </Stack>
            </Box>
          </Grid.Col>
        </Grid>
      </Stack>
    </PageContainer>
  );
}

/** The booking's primary detail cards — route, services, cargo, containers. */
function OverviewPanel({
  booking,
  row,
}: {
  booking: BookingDetail;
  row: ReturnType<typeof toBookingListRow>;
}) {
  return (
    <Stack gap="lg">
      <BookingRouteServiceCard
        booking={booking}
        originLabel={row.originLabel}
        destinationLabel={row.destinationLabel}
      />
      <BookingMileServicesCard booking={booking} />
      <BookingCargoCard booking={booking} />
      <BookingContainerUnitsCard booking={booking} />
      {booking.contractSummary && (
        <BookingContractSummaryCard summary={booking.contractSummary} />
      )}
    </Stack>
  );
}