"use client";

import Modal from "@/components/Modal";
import Lottie from "lottie-react";
import emailInvitationAnimation from "@/public/images/email-invitation.json";
import { useTranslations } from "next-intl";

interface SendScreeningInvitationModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSendNow?: () => void;
  onSendLater?: () => void;
  isLoading?: boolean;
  loadingButton?: "sendNow" | "sendLater" | null;
}

export default function SendScreeningInvitationModal({
  isOpen,
  onClose,
  onSendNow,
  onSendLater,
  isLoading = false,
  loadingButton = null,
}: SendScreeningInvitationModalProps) {
  const t = useTranslations("practiceManager");

  const handleSendNow = () => {
    if (onSendNow && !isLoading) {
      onSendNow();
    }
  };

  const handleSendLater = () => {
    if (onSendLater && !isLoading) {
      onSendLater();
    }
  };

  const isSendLaterLoading = isLoading && loadingButton === "sendLater";
  const isSendNowLoading = isLoading && loadingButton === "sendNow";

  return (
    <Modal isOpen={isOpen} onClose={isLoading ? () => {} : onClose} size="md">
      <div className="p-8 flex flex-col items-center text-center">
        {/* Animated Email Icon */}
        <div className="mb-6">
          <Lottie
            animationData={emailInvitationAnimation}
            loop={true}
            className="w-36 h-36"
          />
        </div>

        {/* Title */}
        <h2 className="text-2xl font-bold text-gray-900 mb-4">
          {t("modals.sendInvitation.title")}
        </h2>

        {/* Description */}
        <p className="text-gray-500 text-lg mb-8 max-w-md">
          {t("modals.sendInvitation.description")}
        </p>

        {/* Buttons */}
        <div className="flex items-center gap-4">
          <button
            type="button"
            onClick={handleSendLater}
            disabled={isLoading}
            className="px-10 py-3.5 text-base font-medium text-[#3B9EC9] bg-white border border-[#3B9EC9] rounded-full hover:bg-[#3B9EC9]/5 transition cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 min-w-[140px]"
          >
            {isSendLaterLoading ? (
              <>
                <svg className="animate-spin h-5 w-5 text-[#3B9EC9]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span>{t("modals.sendInvitation.loading")}</span>
              </>
            ) : (
              t("modals.sendInvitation.sendLater")
            )}
          </button>
          <button
            type="button"
            onClick={handleSendNow}
            disabled={isLoading}
            className="px-10 py-3.5 text-base font-medium text-white bg-[#3B9EC9] rounded-full hover:bg-[#2D8AB5] transition cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 min-w-[140px]"
          >
            {isSendNowLoading ? (
              <>
                <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span>{t("modals.sendInvitation.loading")}</span>
              </>
            ) : (
              t("modals.sendInvitation.sendNow")
            )}
          </button>
        </div>
      </div>
    </Modal>
  );
}