edr-platform/apps/edr-freight-web/backoffice/src/components/contracts/ContractActionsToolbar.tsx

import { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import {
  Anchor,
  Button,
  Modal,
  Select,
  Stack,
  Text,
  Textarea,
} from "@mantine/core";
import {
  Check,
  FileSignature,
  MessageSquareWarning,
  ShieldCheck,
  Sparkles,
  XCircle,
  Zap,
} from "lucide-react";
import type { Freight } from "@edr/types";

import { api } from "@/services/api";
import { SectionCard } from "@/components/bookings/detail/SectionCard";
import type { useContractMutations } from "@/hooks/contracts/useContracts";

/** Dropdown-settings code holding the admin-configured contract validity days. */
const CONTRACT_VALIDITY_PERIODS_CODE = "contract_validity_periods";

type Mutations = ReturnType<typeof useContractMutations>;

interface ContractActionsToolbarProps {
  contract: Freight.IContract;
  mutations: Mutations;
  /** Switch the detail page to its Clearance Review tab. */
  onReviewClearance?: () => void;
}

// Contract is in the pre-booking clearance phase — staff can review the
// customer's uploaded documents.
const CLEARANCE_REVIEW_STATUSES = [
  "AWAITING_CLEARANCE_DOCUMENTS",
  "CLEARANCE_UNDER_REVIEW",
  "CLEARANCE_READY_FOR_BOOKING",
];

/** Detail-page staff actions: accept / request changes / reject / generate / sign. */
export function ContractActionsToolbar({
  contract,
  mutations,
  onReviewClearance,
}: ContractActionsToolbarProps) {
  const navigate = useNavigate();
  const { status } = contract;

  const [acceptOpen, setAcceptOpen] = useState(false);
  const [validityDays, setValidityDays] = useState<string | null>(null);
  const [changesOpen, setChangesOpen] = useState(false);
  const [changesNote, setChangesNote] = useState("");
  const [rejectOpen, setRejectOpen] = useState(false);
  const [rejectReason, setRejectReason] = useState("");

  // Admin-configured validity durations (days) for the accept dialog. Staff can
  // only pick one of these — no free-typing. Read-only setting, fetched once.
  const { data: validitySetting, isLoading: validityLoading } = useQuery({
    ...api.dropdownSettings.getByCode.queryOptions({
      input: { code: CONTRACT_VALIDITY_PERIODS_CODE },
    }),
    retry: false,
  });
  const validityOptions = useMemo(
    () =>
      [...(validitySetting?.children ?? [])]
        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
        .map((o) => ({ value: String(o.value), label: o.label })),
    [validitySetting],
  );
  // Default the selection to the first configured option when the dialog opens.
  useEffect(() => {
    if (acceptOpen && !validityDays && validityOptions.length > 0) {
      setValidityDays(validityOptions[0].value);
    }
  }, [acceptOpen, validityDays, validityOptions]);

  if (["REJECTED", "CANCELLED", "EXPIRED", "CONTRACT_CLOSED"].includes(status)) {
    return null;
  }

  if (status === "CHANGES_REQUESTED") {
    return (
      <SectionCard icon={Zap} title="Awaiting customer">
        <Text size="sm" c="dimmed">
          No staff actions until the customer resubmits the contract.
        </Text>
      </SectionCard>
    );
  }

  const canAccept = status === "SUBMITTED";
  // Generation only becomes available once EVERY approval step is complete and
  // the contract reaches APPROVED. While any step is still pending the contract
  // stays in PENDING_APPROVAL, so this button does not appear after only the
  // first (line-staff) approval — the director step must land first.
  const needsManualGenerate =
    status === "APPROVED" && !contract.contractGeneratedAt;
  // Signing now happens on the contract VIEW page (staff must open and read the
  // generated contract before signing) — no sign button in this toolbar.
  const canViewContract =
    ["CONTRACT_READY", "SIGNED_CUSTOMER"].includes(status) &&
    Boolean(contract.contractGeneratedAt);
  // Show "Review clearance" while the contract is in the document-review phase.
  // Reviewer = GL (Path B / customs) or Operations (Path A / no customs).
  const canReviewClearance =
    Boolean(onReviewClearance) &&
    CLEARANCE_REVIEW_STATUSES.includes(status);
  const clearanceReviewer = contract.customsClearingEnabled
    ? "Review clearance (GL)"
    : "Review clearance (Ops)";

  return (
    <SectionCard icon={Zap} title="Staff actions">
      <Stack gap="sm">
        <Text size="xs" c="dimmed">
          Confirm each step before it is applied.
        </Text>

        {canAccept && (
          <>
            <Button
              fullWidth
              color="edr-green"
              leftSection={<Check size={16} />}
              onClick={() => setAcceptOpen(true)}
            >
              Accept for approval
            </Button>
            <Button
              fullWidth
              variant="light"
              color="orange"
              leftSection={<MessageSquareWarning size={16} />}
              onClick={() => setChangesOpen(true)}
            >
              Request changes
            </Button>
            <Button
              fullWidth
              variant="light"
              color="red"
              leftSection={<XCircle size={16} />}
              onClick={() => setRejectOpen(true)}
            >
              Reject contract
            </Button>
          </>
        )}

        {needsManualGenerate && (
          <Button
            fullWidth
            variant="light"
            color="orange"
            leftSection={<Sparkles size={16} />}
            loading={mutations.generateContract.isPending}
            onClick={() => mutations.generateContract.mutate()}
          >
            Generate contract
          </Button>
        )}

        {canViewContract && (
          <Button
            fullWidth
            color="edr-green"
            leftSection={<FileSignature size={16} />}
            onClick={() =>
              navigate(`/dashboard/contract-requests/${contract.id}/view`)
            }
          >
            View &amp; sign contract
          </Button>
        )}

        {canReviewClearance && (
          <Button
            fullWidth
            color="edr-green"
            variant="light"
            leftSection={<ShieldCheck size={16} />}
            onClick={onReviewClearance}
          >
            {clearanceReviewer}
          </Button>
        )}

        {/* GL "Create booking" removed for now — clearance ends at finalize and
            the customer creates the booking in the portal. */}

        {!canAccept &&
          !needsManualGenerate &&
          !canViewContract &&
          !canReviewClearance && (
            <Text size="sm" c="dimmed">
              No staff actions available for this status. Monitor until the
              workflow advances.
            </Text>
          )}
      </Stack>

      {/* Accept — sets the contract validity window */}
      <Modal
        opened={acceptOpen}
        onClose={() => setAcceptOpen(false)}
        title="Accept contract for approval"
        centered
      >
        <Stack gap="md">
          <Text size="sm" c="dimmed">
            Pick the contract validity window, then start the approval chain.
          </Text>
          {validityOptions.length > 0 ? (
            <Select
              label="Validity"
              placeholder="Select a validity period"
              data={validityOptions}
              value={validityDays}
              onChange={setValidityDays}
              allowDeselect={false}
              comboboxProps={{ withinPortal: true }}
            />
          ) : (
            <Text size="sm" c="orange.7">
              {validityLoading
                ? "Loading validity periods…"
                : "No validity periods are configured yet. Add them under "}
              {!validityLoading && (
                <Anchor
                  href="/dashboard/dropdown-settings"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/dashboard/dropdown-settings");
                  }}
                >
                  Dropdown Settings
                </Anchor>
              )}
              {!validityLoading && "."}
            </Text>
          )}
          <Button
            color="edr-green"
            loading={mutations.staffAccept.isPending}
            disabled={!validityDays}
            onClick={() => {
              const days = Number(validityDays);
              if (!days) return;
              mutations.staffAccept.mutate(days, {
                onSuccess: () => setAcceptOpen(false),
              });
            }}
          >
            Accept
          </Button>
        </Stack>
      </Modal>

      {/* Request changes */}
      <Modal
        opened={changesOpen}
        onClose={() => setChangesOpen(false)}
        title="Request changes"
        centered
      >
        <Stack gap="md">
          <Textarea
            label="What needs to change?"
            placeholder="Describe the changes the customer must make…"
            autosize
            minRows={3}
            value={changesNote}
            onChange={(e) => setChangesNote(e.currentTarget.value)}
          />
          <Button
            color="orange"
            disabled={!changesNote.trim()}
            loading={mutations.requestChanges.isPending}
            onClick={() =>
              mutations.requestChanges.mutate(changesNote, {
                onSuccess: () => {
                  setChangesOpen(false);
                  setChangesNote("");
                },
              })
            }
          >
            Send to customer
          </Button>
        </Stack>
      </Modal>

      {/* Reject */}
      <Modal
        opened={rejectOpen}
        onClose={() => setRejectOpen(false)}
        title="Reject contract"
        centered
      >
        <Stack gap="md">
          <Textarea
            label="Reason for rejection"
            placeholder="Explain why this contract is rejected…"
            autosize
            minRows={3}
            value={rejectReason}
            onChange={(e) => setRejectReason(e.currentTarget.value)}
          />
          <Button
            color="red"
            disabled={!rejectReason.trim()}
            loading={mutations.reject.isPending}
            onClick={() =>
              mutations.reject.mutate(rejectReason, {
                onSuccess: () => {
                  setRejectOpen(false);
                  setRejectReason("");
                },
              })
            }
          >
            Reject
          </Button>
        </Stack>
      </Modal>
    </SectionCard>
  );
}