import { directionLabel } from "@/lib/utils";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import {
  AlertTriangle,
  ArrowLeft,
  ArrowRight,
  Box as BoxIcon,
  CalendarClock,
  ClipboardList,
  Download,
  FileSignature,
  FileText,
  Files,
  Flame,
  History,
  Info,
  LayoutGrid,
  Milestone,
  MoreHorizontal,
  Package,
  Receipt,
  RefreshCw,
  Route as RouteIcon,
  Snowflake,
  Wallet,
} from "lucide-react";
import {
  ActionIcon,
  Alert,
  Badge,
  Box,
  Button,
  Center,
  Container,
  Grid,
  Group,
  Loader,
  Menu,
  Paper,
  SimpleGrid,
  Stack,
  Tabs,
  Text,
} from "@mantine/core";

import toast from "react-hot-toast";

import { PageContainer, PageHeader, KpiStrip } from "@/components/page";
import type { KpiItem } from "@/components/page";
import { EntityLink } from "@/components/detail";
import { SectionCard } from "@/components/bookings/detail/SectionCard";
import { detailStyles } from "@/components/bookings/detail/booking-detail.styles";
import { TableCard } from "@/components/customers";
import {
  ContractCourtBadge,
  ContractStatusBadge,
} from "@/components/contracts/ContractStatusBadge";
import { ContractWorkflowStepper } from "@/components/contracts/ContractWorkflowStepper";
import { ContractActionsToolbar } from "@/components/contracts/ContractActionsToolbar";
import { ContractApprovalStepsCard } from "@/components/contracts/ContractApprovalStepsCard";
import { HazardDeclarationPanel } from "@/components/contracts/HazardDeclarationPanel";
import { ClearanceWorkflowFilesPanel } from "@/components/contracts/ClearanceWorkflowFilesPanel";
import { BookingRequestStatusBadge } from "@/components/contracts/BookingRequestStatusBadge";
import { ContractRevisionTimeline } from "@/components/contracts/ContractRevisionTimeline";
import { ContractMilestonesTimeline } from "@/components/contracts/ContractMilestonesTimeline";
import {
  ContractCustomerCard,
  ContractDocumentsCard,
} from "@/components/contracts/detail/ContractDetailTabCards";
import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
import { getContractStatusMeta } from "@/features/contracts/contract-status.config";
import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
import { useFileViewer } from "@/hooks/useFileViewer";
import { useBookingList } from "@/hooks/bookings/useBookings";
import {
  useContractDetail,
  useContractMutations,
} from "@/hooks/contracts/useContracts";
import { contractsService } from "@/services/contracts.service";
import { api } from "@/services/api";
import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
import { formatMoney } from "@/components/customers";
import {
  downloadBookingFile,
  fetchViewableFile,
} from "@/services/files.service";
import type { CustomerDocument } from "@/types/customer";
import type { BookingDetail } from "@/types/booking";
import { DataTable, type ColumnDef } from "@edr/ui-common";
import type { Freight } from "@edr/types";

// Clearance phase — actionable (docs approve / query / finalize on the hub).
const CLEARANCE_ACTIVE_STATUSES = [
  "AWAITING_CLEARANCE_DOCUMENTS",
  "CLEARANCE_UNDER_REVIEW",
  "CLEARANCE_READY_FOR_BOOKING",
];

// Clearance is done — its documents are still worth loading (read-only record).
const CLEARANCE_DONE_STATUSES = [
  "ACTIVE_SHIPMENT_IN_PROGRESS",
  "FULLY_EXECUTED",
  "CONTRACT_ACTIVE",
  "CONTRACT_CLOSED",
  "EXPIRED",
];

// Contract is in (or past) its clearance phase — load the clearance view so the
// Documents tab can show customs workflow files, and surface the "Review
// clearance" deep-link to the Operations hub.
const CLEARANCE_REVIEW_STATUSES = [
  ...CLEARANCE_ACTIVE_STATUSES,
  ...CLEARANCE_DONE_STATUSES,
];

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

/** Same, plus the clock — for values the staff pick to the minute. */
function formatDateTime(value: string | null | undefined): string {
  if (!value) return "—";
  const d = new Date(value);
  return Number.isNaN(d.getTime())
    ? "—"
    : d.toLocaleString(undefined, {
        year: "numeric",
        month: "short",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
      });
}

export default function ContractRequestDetailPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const {
    data: contract,
    isLoading,
    isError,
    refetch,
    isFetching,
  } = useContractDetail(id);
  const mutations = useContractMutations(id ?? "");
  const [searchParams, setSearchParams] = useSearchParams();
  const { view, viewer } = useFileViewer();
  const requestedTab = searchParams.get("tab");
  const setTab = (tab: string | null) =>
    setSearchParams(
      (prev) => {
        const next = new URLSearchParams(prev);
        if (!tab || tab === "details") next.delete("tab");
        else next.set("tab", tab);
        return next;
      },
      { replace: true },
    );

  const handleViewFile = (file: NonNullable<Freight.IContract["files"]>[number]) =>
    view({
      name: file.name,
      url: file.signedUrl ?? file.url,
      mimeType: file.mimeType,
    });

  const handleDownloadFile = async (
    file: NonNullable<Freight.IContract["files"]>[number],
  ) => {
    try {
      await downloadBookingFile(file.id, file.name);
    } catch {
      toast.error("Could not download file.");
    }
  };

  const hasClearancePhase = Boolean(
    contract && CLEARANCE_REVIEW_STATUSES.includes(contract.status),
  );
  const { data: clearanceView } = useQuery({
    queryKey: QUERY_KEYS.CONTRACTS.clearance(id ?? ""),
    queryFn: () => contractsService.getClearance(id!),
    enabled: Boolean(id) && hasClearancePhase,
  });

  // Customer profile documents (national ID, TIN, import/business license) for
  // the company this contract belongs to. Shown as a separate section in the
  // Documents tab, alongside the contract's own attached files.
  const companyId = contract?.companyId ?? "";
  const profileDocumentsQuery = useQuery(
    api.customers.documents.queryOptions({
      input: { id: companyId },
      enabled: Boolean(companyId),
    }),
  );
  const profileDocumentsRaw = Array.isArray(profileDocumentsQuery.data)
    ? profileDocumentsQuery.data
    : [];
  // Reshape to the contract-file shape so we can reuse ContractDocumentsCard.
  const profileDocuments = profileDocumentsRaw.map(
    (doc: CustomerDocument) =>
      ({
        id: doc.id,
        code: doc.code,
        name: doc.name,
        url: doc.url ?? "",
        mimeType: doc.mimeType,
        size: doc.size,
        resourceId: companyId,
        resource: "company",
      }) satisfies NonNullable<Freight.IContract["files"]>[number],
  );

  // Bookings drawn down under this contract, and the customer's raw shipment
  // requests against it — the two halves of "what has this contract produced".
  const { data: contractBookings, isLoading: bookingsLoading } = useBookingList(
    { contractId: id, pageSize: 100 },
    Boolean(id),
  );
  const bookingRequestsQuery = useQuery({
    queryKey: QUERY_KEYS.CONTRACTS.bookingRequests(id ?? ""),
    queryFn: () => contractsService.listBookingRequests(id!),
    enabled: Boolean(id),
  });

  const downloadContractPdf = async () => {
    if (!contract?.id) return;
    try {
      const blob = await contractsService.downloadContractDocument(contract.id);
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      const contractPdf = contract.files?.find((f) => f.code === "contract");
      a.download = contractPdf?.name ?? `contract-${contract.reference}.pdf`;
      a.click();
      URL.revokeObjectURL(url);
    } catch {
      toast.error("Could not download contract PDF.");
    }
  };

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

  if (isError || !contract) {
    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)",
                }}
              >
                <FileText size={32} />
              </Box>
            </Center>
            <Text fw={700} size="lg" mt="lg">
              Contract 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/contract-requests")}
            >
              Back to contract requests
            </Button>
          </Paper>
        </Container>
      </PageContainer>
    );
  }

  const statusMeta = getContractStatusMeta(contract.status);
  const routes = [...(contract.routes ?? [])].sort(
    (a, b) => a.sortOrder - b.sortOrder,
  );
  const showApprovalCard =
    contract.status === "PENDING_APPROVAL" ||
    contract.status === "APPROVED" ||
    contract.status === "APPROVED_PENDING_SIGNATURE" ||
    contract.status === "REJECTED";

  // Clearance review + finalize now lives solely on the Operations "Clearance
  // Documents" hub. The Staff-actions "Review clearance" button deep-links there
  // while the contract is in a clearance-review status — no embedded tab here.
  const inClearanceReview = CLEARANCE_REVIEW_STATUSES.includes(contract.status);
  const files = contract.files ?? [];
  const contractPdf = files.find((f) => f.code === "contract");
  // Signature files (code `signature_<role>`) are baked into the contract PDF —
  // don't list them as standalone documents in the Documents tab.
  const contractDocuments = files.filter(
    (f) => !f.code.startsWith("signature_"),
  );
  const hasContractDocument = Boolean(
    contractPdf || contract.contractGeneratedAt,
  );
  const canViewSign =
    (contract.status === "CONTRACT_READY" ||
      contract.status === "SIGNED_CUSTOMER") &&
    Boolean(contract.contractGeneratedAt);
  // Resolve the active tab from the URL, falling back to details when the
  // requested tab isn't available for this contract.
  const currentTab =
    requestedTab === "shipments"
      ? "shipments"
      : requestedTab === "documents"
        ? "documents"
        : requestedTab === "history"
          ? "history"
          : "details";

  const customerLabel = contract.isGovernment
    ? (contract.governmentInstitution ?? "Government")
    : (contract.company?.name ?? "—");

  const kpis: KpiItem[] = [
    {
      label: "Shipments",
      value: contract.activeBookingCount ?? 0,
      hint: "active",
      icon: Package,
      color: "edr-green",
    },
    {
      label: "Valid until",
      value: contract.contractValidUntil ? formatDate(contract.contractValidUntil) : "—",
      icon: CalendarClock,
      color: "blue",
    },
    {
      label: "Routes",
      value: routes.length,
      icon: RouteIcon,
      color: "teal",
    },
    {
      label: "Currency",
      value: contract.paymentCurrency,
      icon: Wallet,
      color: "orange",
    },
  ];

  return (
    <PageContainer>
      <PageHeader
        breadcrumbs={[
          { label: "Contract requests", href: "/dashboard/contract-requests" },
          { label: contract.reference },
        ]}
        backTo="/dashboard/contract-requests"
        title={contract.reference}
        meta={
          <Group gap={6} wrap="wrap">
            <ContractStatusBadge
              status={contract.status}
              isRenewal={Boolean(contract.renewalOfId)}
            />
            <ContractCourtBadge status={contract.status} />
            <Badge variant="light" color="gray" radius="sm" tt="uppercase">
              {contract.contractKind === "GENERAL" ? "General" : "One-time"}
            </Badge>
          </Group>
        }
        subtitle={
          <Group gap={6} wrap="wrap">
            <EntityLink
              to={
                !contract.isGovernment && contract.companyId
                  ? `/dashboard/customers/${contract.companyId}`
                  : null
              }
              label={customerLabel}
            />
            <Text size="sm" c="dimmed">
              · Created {formatDate(contract.createdAt)}
              {contract.contractValidUntil
                ? ` · Valid until ${formatDateTime(contract.contractValidUntil)}`
                : ""}
            </Text>
          </Group>
        }
        action={
          <Group gap="sm" wrap="nowrap">
            <ActionIcon
              variant="light"
              color="edr-green"
              size="lg"
              radius="md"
              loading={isFetching}
              aria-label="Refresh"
              onClick={() => refetch()}
            >
              <RefreshCw size={16} />
            </ActionIcon>
            {hasContractDocument && (
              <Menu position="bottom-end" width={240} withinPortal>
                <Menu.Target>
                  <ActionIcon
                    variant="default"
                    size="lg"
                    radius="md"
                    aria-label="More actions"
                  >
                    <MoreHorizontal size={16} />
                  </ActionIcon>
                </Menu.Target>
                <Menu.Dropdown>
                  {canViewSign && (
                    <Menu.Item
                      leftSection={<FileSignature size={15} />}
                      onClick={() =>
                        navigate(`/dashboard/contract-requests/${contract.id}/view`)
                      }
                    >
                      View &amp; sign contract
                    </Menu.Item>
                  )}
                  {contractPdf && (
                    <Menu.Item
                      leftSection={<FileText size={15} />}
                      onClick={() =>
                        void fetchViewableFile(contractPdf.id, contractPdf.name).then(
                          view,
                        )
                      }
                    >
                      View contract
                    </Menu.Item>
                  )}
                  <Menu.Item
                    leftSection={<Download size={15} />}
                    onClick={() => void downloadContractPdf()}
                  >
                    Download PDF
                  </Menu.Item>
                </Menu.Dropdown>
              </Menu>
            )}
          </Group>
        }
      />

      <Stack gap="lg">
        <KpiStrip items={kpis} />

        <ContractWorkflowStepper
          status={contract.status}
          title={statusMeta.title}
          description={statusMeta.description}
        />

        {/* A contract resting in APPROVED means the automatic PDF generation on
            final approval failed — on success it moves straight to
            CONTRACT_READY. Offer the manual retry. */}
        {contract.status === "APPROVED" ? (
          <Alert
            color="orange"
            radius="md"
            icon={<AlertTriangle size={18} />}
            title="Contract document was not generated"
          >
            <Stack gap="sm" align="flex-start">
              <Text size="sm">
                All approvals are complete, but generating the contract PDF
                failed. Retry the generation below.
              </Text>
              <Button
                color="edr-green"
                size="compact-sm"
                radius="lg"
                leftSection={<RefreshCw size={15} />}
                loading={mutations.generateContract.isPending}
                onClick={() => mutations.generateContract.mutate()}
              >
                Regenerate contract
              </Button>
            </Stack>
          </Alert>
        ) : null}

        {contract.status === "REJECTED" && contract.latestRejectionNote ? (
          <Alert
            color="red"
            radius="md"
            icon={<AlertTriangle size={18} />}
            title="Rejection reason"
          >
            <Text size="sm" style={{ whiteSpace: "pre-wrap" }}>
              {contract.latestRejectionNote}
            </Text>
          </Alert>
        ) : null}

        {contract.status === "PENDING_APPROVAL" && contract.latestSendBackNote ? (
          <Alert
            color="orange"
            radius="md"
            icon={<AlertTriangle size={18} />}
            title="Sent back in the approval chain"
          >
            <Text size="sm" style={{ whiteSpace: "pre-wrap" }}>
              {contract.latestSendBackNote}
            </Text>
          </Alert>
        ) : null}

        <Grid gap="lg">
          {/* LEFT — primary content */}
          <Grid.Col span={{ base: 12, lg: 8 }}>
            <Tabs
              value={currentTab}
              onChange={setTab}
              variant="pills"
              color="edr-green"
              keepMounted={false}
            >
              <Tabs.List mb="lg">
                <Tabs.Tab value="details" leftSection={<LayoutGrid size={16} />}>
                  Details
                </Tabs.Tab>
                <Tabs.Tab value="shipments" leftSection={<Package size={16} />}>
                  Shipments
                </Tabs.Tab>
                <Tabs.Tab
                  value="documents"
                  leftSection={<Files size={16} />}
                  rightSection={
                    contractDocuments.length + profileDocuments.length > 0 ? (
                      <Badge size="xs" variant="light" color="gray" radius="sm">
                        {contractDocuments.length + profileDocuments.length}
                      </Badge>
                    ) : null
                  }
                >
                  Documents
                </Tabs.Tab>
                <Tabs.Tab value="history" leftSection={<History size={16} />}>
                  History
                </Tabs.Tab>
              </Tabs.List>

              <Tabs.Panel value="details">
                <Stack gap="lg">
                  <SectionCard
                    icon={Info}
                    title="Contract information"
                    subtitle="Full commercial and operational detail for this contract."
                  >
                    <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
                      <InfoRow
                        label="Service type"
                        value={contract.serviceType?.serviceName ?? "—"}
                      />
                      <InfoRow
                        label="Payment currency"
                        value={contract.paymentCurrency ?? "—"}
                      />
                      <InfoRow
                        label="Customs clearing"
                        value={
                          contract.customsClearingEnabled
                            ? "Included automatically"
                            : contract.customsClearingAgent
                              ? `Customer's agent — ${contract.customsClearingAgent}`
                              : "Not included"
                        }
                      />
                      {contract.equipmentReturn ? (
                        <InfoRow
                          label="Equipment return"
                          value={
                            contract.equipmentReturn === "WITH_RETURN"
                              ? "With return"
                              : "Without return"
                          }
                        />
                      ) : null}
                      <InfoRow
                        label="Contract type"
                        value={contract.contractType ?? "Standard"}
                      />
                      {contract.contractValidityDays != null ? (
                        <InfoRow
                          label="Validity period"
                          value={`${contract.contractValidityDays} days`}
                        />
                      ) : null}
                      {contract.estimatedShipmentDate ? (
                        <InfoRow
                          label="Estimated shipment date"
                          value={formatDate(contract.estimatedShipmentDate)}
                        />
                      ) : null}
                      {contract.firstMilePickupAddress ? (
                        <InfoRow
                          label="First-mile pickup"
                          value={contract.firstMilePickupAddress}
                        />
                      ) : null}
                      {contract.lastMileDeliveryAddress ? (
                        <InfoRow
                          label="Last-mile delivery"
                          value={contract.lastMileDeliveryAddress}
                        />
                      ) : null}
                    </SimpleGrid>
                    {contract.financialTerms ? (
                      <Box
                        mt="md"
                        pt="md"
                        style={{ borderTop: "1px solid var(--mantine-color-gray-2)" }}
                      >
                        <Text
                          size="xs"
                          c="dimmed"
                          fw={600}
                          tt="uppercase"
                          mb={4}
                          style={{ letterSpacing: 0.3 }}
                        >
                          Financial terms
                        </Text>
                        <Text size="sm" style={{ whiteSpace: "pre-wrap" }}>
                          {contract.financialTerms}
                        </Text>
                      </Box>
                    ) : null}
                  </SectionCard>

                  <SectionCard icon={RouteIcon} title="Routes">
                    {routes.length === 0 ? (
                      <Text size="sm" c="dimmed">
                        No routes on this contract.
                      </Text>
                    ) : (
                      <Stack gap="sm">
                        {routes.map((r) => (
                          <Group
                            key={r.id}
                            justify="space-between"
                            wrap="nowrap"
                            px="sm"
                            py="xs"
                            style={{
                              borderRadius: 8,
                              border: "1px solid var(--mantine-color-gray-2)",
                            }}
                          >
                            <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
                              <Text size="sm" fw={600} truncate maw={160}>
                                {r.originYard?.label ??
                                  r.originYard?.code ??
                                  "Origin"}
                              </Text>
                              <ArrowRight
                                size={15}
                                className="shrink-0 text-muted-foreground"
                              />
                              <Text size="sm" fw={600} truncate maw={160}>
                                {r.destinationYard?.label ??
                                  r.destinationYard?.code ??
                                  "Destination"}
                              </Text>
                            </Group>
                            {r.km != null ? (
                              <Badge variant="light" color="gray" radius="sm">
                                {r.km} km
                              </Badge>
                            ) : null}
                          </Group>
                        ))}
                      </Stack>
                    )}
                  </SectionCard>

                  <SectionCard icon={Package} title="Cargo scope">
                    <Group gap="sm" mb="md">
                      <Badge variant="light" color="gray" radius="sm" tt="uppercase">
                        {directionLabel(contract.tradeDirection)}
                      </Badge>
                      <Badge variant="light" color="gray" radius="sm" tt="uppercase">
                        {contract.freightType}
                      </Badge>
                      {contract.isHazardous ? (
                        <Badge
                          variant="light"
                          color="orange"
                          radius="sm"
                          leftSection={<Flame size={12} />}
                        >
                          Hazardous
                        </Badge>
                      ) : null}
                      {contract.isReefer ? (
                        <Badge
                          variant="light"
                          color="cyan"
                          radius="sm"
                          leftSection={<Snowflake size={12} />}
                        >
                          Reefer
                        </Badge>
                      ) : null}
                    </Group>
                    {contract.isHazardous ? (
                      <Box mb="md">
                        <HazardDeclarationPanel contract={contract} />
                      </Box>
                    ) : null}
                    {(contract.cargoScope ?? []).length === 0 ? (
                      <Text size="sm" c="dimmed">
                        No cargo scope lines.
                      </Text>
                    ) : (
                      <Stack gap="sm">
                        {(contract.cargoScope ?? []).map((s) => {
                          const isContainer = Boolean(s.containerSize);
                          // Bulk lines carry their commodity detail (name + unit);
                          // container lines carry the size (20ft / 40ft).
                          const title = isContainer
                            ? `${s.containerSize} container`
                            : (s.cargoType?.cargoTypeName ??
                              s.cargoFreeText ??
                              s.cargoType?.code ??
                              "Bulk cargo");
                          // quantityCap unit: containers for a size line, else the
                          // cargo type's unit of measure (tons / items / …), default tons.
                          const capUnit = isContainer
                            ? "containers"
                            : (s.cargoType?.unitOfMeasure?.toLowerCase() ?? "tons");
                          return (
                            <Group key={s.id} gap={8} wrap="nowrap" align="flex-start">
                              <BoxIcon
                                size={15}
                                color="var(--mantine-color-edr-green-6)"
                                style={{ marginTop: 2, flexShrink: 0 }}
                              />
                              <div>
                                <Text size="sm" fw={500}>
                                  {title}
                                </Text>
                                <Group gap={6} mt={2}>
                                  <Badge
                                    variant="light"
                                    color={isContainer ? "blue" : "grape"}
                                    radius="sm"
                                    size="xs"
                                    tt="uppercase"
                                  >
                                    {isContainer ? "Container" : "Bulk"}
                                  </Badge>
                                  {s.cargoType?.code ? (
                                    <Text size="xs" c="dimmed">
                                      Code: {s.cargoType.code}
                                    </Text>
                                  ) : null}
                                  <Text size="xs" c="dimmed">
                                    {s.quantityCap != null
                                      ? `Cap: ${s.quantityCap} ${capUnit}`
                                      : "Cap: uncapped"}
                                  </Text>
                                </Group>
                              </div>
                            </Group>
                          );
                        })}
                      </Stack>
                    )}
                  </SectionCard>

                  {contract.pricingBreakdown?.lineItems?.length ? (
                    <SectionCard icon={Receipt} title="Unit rates">
                      <Stack gap="xs">
                        {contract.pricingBreakdown.lineItems.map((li) => (
                          <Group
                            key={li.code}
                            justify="space-between"
                            wrap="nowrap"
                          >
                            <Text size="sm" truncate>
                              {li.label}
                              {li.containerSize ? ` · ${li.containerSize}` : ""}
                            </Text>
                            <Text size="sm" fw={600}>
                              {contract.pricingBreakdown?.currency} {li.unitPrice} /{" "}
                              {li.unit}
                            </Text>
                          </Group>
                        ))}
                      </Stack>
                    </SectionCard>
                  ) : null}

                  {contract.contractSummary ? (
                    <SectionCard icon={FileText} title="Contract summary">
                      <Text size="sm" style={{ whiteSpace: "pre-wrap" }}>
                        {contract.contractSummary}
                      </Text>
                    </SectionCard>
                  ) : null}
                </Stack>
              </Tabs.Panel>

              <Tabs.Panel value="shipments">
                <Stack gap="lg">
                  <SectionCard
                    icon={Package}
                    title="Bookings"
                    subtitle="Shipments drawn down under this contract."
                  >
                    <TableCard minWidth={760}>
                      <DataTable
                        columns={bookingColumns}
                        data={contractBookings?.items ?? []}
                        status={bookingsLoading ? "loading" : "success"}
                        emptyMessage="No bookings under this contract yet."
                        containerClassName="border-0 shadow-none bg-transparent"
                        onRowClick={(row) =>
                          navigate(`/dashboard/booking-requests/${row.id}`)
                        }
                      />
                    </TableCard>
                  </SectionCard>

                  <SectionCard
                    icon={ClipboardList}
                    title="Shipment requests"
                    subtitle="Customer-submitted requests against this contract, before they become a booking."
                  >
                    <TableCard minWidth={640}>
                      <DataTable
                        columns={requestColumns}
                        data={bookingRequestsQuery.data ?? []}
                        status={bookingRequestsQuery.isLoading ? "loading" : "success"}
                        emptyMessage="No shipment requests on this contract yet."
                        containerClassName="border-0 shadow-none bg-transparent"
                        onRowClick={(row) =>
                          navigate(`/dashboard/shipment-requests/${row.id}`)
                        }
                      />
                    </TableCard>
                  </SectionCard>
                </Stack>
              </Tabs.Panel>

              <Tabs.Panel value="documents">
                <Stack gap="lg">
                  <ContractDocumentsCard
                    files={contractDocuments}
                    onView={handleViewFile}
                    onDownload={handleDownloadFile}
                  />
                  <ContractDocumentsCard
                    files={profileDocuments}
                    title="Customer profile documents"
                    emptyText={
                      profileDocumentsQuery.isLoading
                        ? "Loading customer documents…"
                        : "No profile documents on file for this customer."
                    }
                    onView={handleViewFile}
                    onDownload={handleDownloadFile}
                  />
                  {(clearanceView?.workflowFiles?.length ?? 0) > 0 ? (
                    <ClearanceWorkflowFilesPanel
                      files={clearanceView!.workflowFiles!}
                      title="Customs workflow documents"
                      onView={view}
                      onDownload={(f) => void handleDownloadFile({ id: f.id, name: f.name } as never)}
                    />
                  ) : null}
                </Stack>
              </Tabs.Panel>

              <Tabs.Panel value="history">
                <SectionCard
                  icon={Milestone}
                  title="Key milestones"
                  subtitle="Submission, approval, signatures and validity — the dated record of this contract."
                >
                  <ContractMilestonesTimeline contract={contract} />
                </SectionCard>
                <Box mt="lg">
                  <SectionCard
                    icon={History}
                    title="Change history"
                    subtitle="Every recorded edit to this contract — who changed what, and when."
                  >
                    <ContractRevisionTimeline contractId={contract.id} bare />
                  </SectionCard>
                </Box>
              </Tabs.Panel>
            </Tabs>
          </Grid.Col>

          {/* RIGHT — sticky action rail */}
          <Grid.Col span={{ base: 12, lg: 4 }}>
            <Box style={{ position: "sticky", top: 24 }}>
              <Stack gap="lg">
                <ContractCustomerCard contract={contract} />
                <ContractActionsToolbar
                  contract={contract}
                  mutations={mutations}
                  onReviewClearance={
                    inClearanceReview
                      ? () =>
                          navigate(
                            `/dashboard/contracts/clearance-documents/${contract.id}`,
                          )
                      : undefined
                  }
                />
                {showApprovalCard && (
                  <ContractApprovalStepsCard
                    contract={contract}
                    mutations={mutations}
                  />
                )}
              </Stack>
            </Box>
          </Grid.Col>
        </Grid>
      </Stack>

      {viewer}
    </PageContainer>
  );
}

const bookingColumns: ColumnDef<BookingDetail>[] = [
  {
    id: "reference",
    header: "Booking",
    cell: ({ row }) => (
      <Text size="sm" fw={600} c="edr-text">
        {row.original.reference}
      </Text>
    ),
  },
  {
    id: "route",
    header: "Route",
    cell: ({ row }) => {
      const r = toBookingListRow(row.original);
      return (
        <Group gap={6} wrap="nowrap">
          <Text size="sm" c="edr-text">
            {r.originLabel}
          </Text>
          <ArrowRight size={14} className="shrink-0 text-muted-foreground" />
          <Text size="sm" c="edr-text">
            {r.destinationLabel}
          </Text>
        </Group>
      );
    },
  },
  {
    id: "status",
    header: "Status",
    cell: ({ row }) => <BookingStatusBadge status={row.original.status} />,
  },
  {
    id: "amount",
    header: "Amount",
    meta: { headerClassName: "text-right", cellClassName: "text-right" },
    cell: ({ row }) => (
      <Text size="sm" fw={600} c="edr-text">
        {formatMoney(Number(row.original.totalAmount), row.original.paymentCurrency)}
      </Text>
    ),
  },
  {
    id: "createdAt",
    header: "Created",
    meta: { headerClassName: "text-right", cellClassName: "text-right" },
    cell: ({ row }) => (
      <Text size="sm" c="dimmed">
        {formatDate(row.original.createdAt)}
      </Text>
    ),
  },
];

const requestColumns: ColumnDef<Freight.IBookingRequest>[] = [
  {
    id: "reference",
    header: "Request",
    cell: ({ row }) => (
      <Text size="sm" fw={600} c="edr-text">
        {row.original.reference}
      </Text>
    ),
  },
  {
    id: "status",
    header: "Status",
    cell: ({ row }) => <BookingRequestStatusBadge status={row.original.status} />,
  },
  {
    id: "scheduledDate",
    header: "Requested for",
    cell: ({ row }) => (
      <Text size="sm" c="dimmed">
        {row.original.scheduledDate ? formatDate(row.original.scheduledDate) : "—"}
      </Text>
    ),
  },
  {
    id: "createdAt",
    header: "Submitted",
    meta: { headerClassName: "text-right", cellClassName: "text-right" },
    cell: ({ row }) => (
      <Text size="sm" c="dimmed">
        {formatDate(row.original.createdAt)}
      </Text>
    ),
  },
];

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <Text
        size="xs"
        c="dimmed"
        fw={600}
        tt="uppercase"
        style={{ letterSpacing: 0.3 }}
      >
        {label}
      </Text>
      <Text size="sm" fw={500} mt={2}>
        {value}
      </Text>
    </div>
  );
}