import {
  Alert,
  Button,
  Group,
  Modal,
  Stack,
  Text,
  Textarea,
} from "@mantine/core";
import { useMutation } from "@tanstack/react-query";
import { FilePen } from "lucide-react";
import { useEffect, useState } from "react";

import { api } from "@/services/api";
import type { CustomerDocument } from "@/types/customer";

export interface RequestDocumentChangeModalProps {
  /** The document under review; `null` closes the modal. */
  document: CustomerDocument | null;
  companyId: string;
  onClose: () => void;
}

/**
 * Ask the customer to correct one uploaded document.
 *
 * Deliberately narrower than rejecting a whole role: the customer keeps every
 * other document and only re-uploads this one. The role cannot be approved
 * while the request is open, so the note has to say what is actually wrong —
 * it is shown to the customer verbatim.
 */
export function RequestDocumentChangeModal({
  document,
  companyId,
  onClose,
}: RequestDocumentChangeModalProps) {
  const requestChange = useMutation(
    api.customers.requestDocumentChange.mutationOptions(),
  );
  const [note, setNote] = useState("");

  // Re-opening on a document that already has an open request should show what
  // was asked for, so the reviewer edits the reason rather than retyping it.
  useEffect(() => {
    setNote(document?.reviewNote ?? "");
  }, [document?.id, document?.reviewNote]);

  const submit = () => {
    if (!document) return;
    requestChange.mutate(
      { companyId, fileId: document.id, note: note.trim() },
      { onSuccess: onClose },
    );
  };

  return (
    <Modal
      opened={document !== null}
      onClose={onClose}
      title="Request a change"
      centered
      radius="lg"
    >
      <Stack gap="md">
        <Alert color="orange" variant="light" icon={<FilePen size={18} />}>
          The customer is notified and sees this note verbatim. This role cannot
          be approved until they upload a corrected document.
        </Alert>
        <Text size="sm" c="dimmed">
          Document: <strong>{document?.name}</strong>
        </Text>
        <Textarea
          label="What needs correcting?"
          placeholder="e.g. The trade license scan is cut off — please re-upload the full page."
          autosize
          minRows={3}
          value={note}
          onChange={(e) => setNote(e.currentTarget.value)}
          required
        />
        <Group justify="flex-end" gap="sm">
          <Button
            variant="default"
            onClick={onClose}
            disabled={requestChange.isPending}
          >
            Cancel
          </Button>
          <Button
            color="orange"
            loading={requestChange.isPending}
            disabled={note.trim().length === 0}
            onClick={submit}
          >
            Request change
          </Button>
        </Group>
      </Stack>
    </Modal>
  );
}
