edr-platform/apps/edr-freight-web/backoffice/src/pages/contracts/ContractViewPage.tsx

import { useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  Box,
  Button,
  Group,
  Image,
  Loader,
  Modal,
  Paper,
  Stack,
  Text,
  TextInput,
} from "@mantine/core";
import { ArrowLeft, FileSignature, Printer } from "lucide-react";
import toast from "react-hot-toast";

import { ContractSignaturePad } from "@/components/bookings/ContractSignaturePad";
import { contractsService } from "@/services/contracts.service";
import { QUERY_KEYS } from "@/constants/QUERY_KEYS";

/**
 * Staff contract preview + sign. Staff must open and read the generated
 * contract here before signing — there is no sign action on the detail page or
 * the list table. Signing as STAFF is only possible once the contract has been
 * generated and is in CONTRACT_READY / SIGNED_CUSTOMER.
 */
export default function ContractViewPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const qc = useQueryClient();
  const iframeRef = useRef<HTMLIFrameElement>(null);

  const [signOpen, setSignOpen] = useState(false);
  const [signerName, setSignerName] = useState("");
  const [signatureData, setSignatureData] = useState<string | null>(null);
  // Offer the staff member's saved signature first; they can draw a fresh one.
  const [drawNew, setDrawNew] = useState(false);

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: [...QUERY_KEYS.CONTRACTS.byId(id ?? ""), "contract-view"],
    queryFn: () => contractsService.getContractView(id!),
    enabled: Boolean(id),
  });

  const savedSignatureImage = data?.savedSignature?.signatureImageUrl ?? null;
  const usingSaved = Boolean(savedSignatureImage) && !drawNew;

  const signMutation = useMutation({
    mutationFn: () =>
      contractsService.signContract(id!, {
        role: "STAFF",
        signatureImageBase64: usingSaved
          ? (savedSignatureImage as string)
          : (signatureData ?? ""),
        signerDisplayName: signerName.trim(),
        consentText: "I confirm this contract on behalf of EDR.",
      }),
    onSuccess: () => {
      toast.success("Contract signed");
      setSignOpen(false);
      void refetch();
      void qc.invalidateQueries({ queryKey: QUERY_KEYS.CONTRACTS.byId(id!) });
      void qc.invalidateQueries({ queryKey: QUERY_KEYS.CONTRACTS.ROOT });
    },
    onError: () => toast.error("Failed to sign contract"),
  });

  const handlePrint = () => iframeRef.current?.contentWindow?.print();

  const openSign = () => {
    setSignerName(data?.savedSignature?.signerDisplayName ?? "");
    setSignatureData(null);
    setDrawNew(false);
    setSignOpen(true);
  };

  const confirmSign = () => {
    if (!signerName.trim()) return;
    const image = usingSaved ? savedSignatureImage : signatureData;
    if (!image) return;
    signMutation.mutate();
  };

  if (isLoading) {
    return (
      <Group justify="center" mih="40vh" align="center">
        <Loader color="edr-green" />
      </Group>
    );
  }

  if (isError || !data) {
    return (
      <Box p="xl">
        <Text c="dimmed">Could not load contract.</Text>
        <Button variant="default" mt="md" onClick={() => navigate(-1)}>
          Go back
        </Button>
      </Box>
    );
  }

  return (
    <Box p={{ base: "md", md: "xl" }}>
      <Box maw={920} mx="auto">
        <Group justify="space-between" wrap="wrap" gap="sm" mb="md">
          <Button
            variant="subtle"
            color="gray"
            leftSection={<ArrowLeft size={16} />}
            onClick={() =>
              navigate(`/dashboard/contract-requests/${data.contractId}`)
            }
          >
            Back to contract
          </Button>
          <Group gap="sm">
            <Button
              variant="default"
              leftSection={<Printer size={16} />}
              onClick={handlePrint}
            >
              Print
            </Button>
            {data.canSignStaff && (
              <Button
                color="edr-green"
                leftSection={<FileSignature size={16} />}
                onClick={openSign}
              >
                {usingSaved ? "Approve & sign" : "Sign as staff"}
              </Button>
            )}
          </Group>
        </Group>

        <Paper withBorder radius="lg" p={0} style={{ overflow: "hidden" }}>
          <iframe
            ref={iframeRef}
            srcDoc={data.html}
            title="Contract document"
            style={{
              width: "100%",
              minHeight: "80vh",
              border: "none",
              background: "white",
            }}
          />
        </Paper>
      </Box>

      <Modal
        opened={signOpen}
        onClose={() => setSignOpen(false)}
        title="Sign contract as staff"
        centered
        radius="lg"
      >
        <Stack gap="md">
          <Text size="sm" c="dimmed">
            {data.reference} — your signature is stored securely on the
            contract.
          </Text>
          <TextInput
            label="Full name"
            value={signerName}
            onChange={(e) => setSignerName(e.currentTarget.value)}
          />
          {usingSaved ? (
            <Stack gap="xs">
              <Paper
                withBorder
                radius="md"
                p="xs"
                style={{ borderStyle: "dashed" }}
              >
                <Image
                  src={savedSignatureImage ?? undefined}
                  alt="Saved signature"
                  fit="contain"
                  h={140}
                />
              </Paper>
              <Button
                variant="subtle"
                size="compact-xs"
                color="edr-green"
                onClick={() => {
                  setDrawNew(true);
                  setSignatureData(null);
                }}
              >
                Draw a new signature instead
              </Button>
            </Stack>
          ) : (
            <ContractSignaturePad onChange={setSignatureData} />
          )}
          <Group justify="flex-end" gap="sm">
            <Button variant="default" onClick={() => setSignOpen(false)}>
              Cancel
            </Button>
            <Button
              color="edr-green"
              loading={signMutation.isPending}
              disabled={
                signMutation.isPending ||
                !signerName.trim() ||
                (!usingSaved && !signatureData)
              }
              onClick={confirmSign}
            >
              {usingSaved ? "Approve & sign" : "Confirm signature"}
            </Button>
          </Group>
        </Stack>
      </Modal>
    </Box>
  );
}