"use client";

import { useEffect, useState } from "react";
import {
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  Textarea,
} from "@nextui-org/react";

import Button from "@/components/common/button";

type RejectReasonModalProps = {
  initialReason: string | null;
  isOpen: boolean;
  isSubmitting: boolean;
  onClose: () => void;
  onConfirm: (reason: string) => void;
};

function RejectReasonModal({
  initialReason,
  isOpen,
  isSubmitting,
  onClose,
  onConfirm,
}: RejectReasonModalProps) {
  const [reason, setReason] = useState("");

  useEffect(() => {
    if (isOpen) {
      setReason(initialReason ?? "");
    }
  }, [initialReason, isOpen]);

  const handleConfirm = () => {
    if (isSubmitting) return;
    onConfirm(reason);
  };

  return (
    <Modal
      hideCloseButton={isSubmitting}
      isDismissable={!isSubmitting}
      isOpen={isOpen}
      placement="center"
      size="md"
      onClose={onClose}
    >
      <ModalContent>
        <ModalHeader className="flex flex-col gap-1">
          Reject participant
        </ModalHeader>
        <ModalBody>
          <p className="text-sm text-gray-600 dark:text-gray-300">
            Adding a reason helps the team understand why this participant
            isn&apos;t a fit and may be used to reconsider the decision later.
            This step is optional.
          </p>
          <Textarea
            aria-label="Reason for rejection"
            isDisabled={isSubmitting}
            maxRows={6}
            minRows={3}
            placeholder="Reason for rejection (optional)"
            value={reason}
            onValueChange={setReason}
          />
        </ModalBody>
        <ModalFooter>
          <Button
            btnLabel="Cancel"
            isDisabled={isSubmitting}
            variant="bordered"
            onClick={onClose}
          />
          <Button
            btnLabel="Confirm rejection"
            className="!bg-red-600 hover:!bg-red-700 !text-white"
            isLoading={isSubmitting}
            onClick={handleConfirm}
          />
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

export default RejectReasonModal;