"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import Modal from "@/components/Modal";
import { useVerifyEmailControllerResendVerificationEmailV1 } from "@/api/user/user-authentication/user-authentication";

interface EmailVerificationModalProps {
  isOpen: boolean;
  onClose: () => void;
  email: string;
  showEmailNotice?: boolean;
}

export default function EmailVerificationModal({
  isOpen,
  onClose,
  email,
  showEmailNotice,
}: EmailVerificationModalProps) {
  const t = useTranslations();
  const tAuth = useTranslations("auth");
  const [resendSuccess, setResendSuccess] = useState(false);
  const [emailNotice, setEmailNotice] = useState(!!showEmailNotice);

  const resendMutation = useVerifyEmailControllerResendVerificationEmailV1({
    mutation: {
      onSuccess: (data: any) => {
        setResendSuccess(true);
        if (data?.email_notice) setEmailNotice(true);
        setTimeout(() => setResendSuccess(false), 3000);
      },
    },
  });

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="md">
      <div className="flex flex-col items-center text-center px-8 py-12">
        {/* Envelope with Checkmark Icon */}
        <div className="mb-8">
          <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
            {/* Envelope body */}
            <rect x="15" y="50" width="90" height="55" rx="4" stroke="#1F2937" strokeWidth="3" fill="white"/>
            {/* Envelope flap (open) */}
            <path d="M15 54L60 30L105 54" stroke="#1F2937" strokeWidth="3" fill="none"/>
            {/* Document */}
            <rect x="35" y="20" width="50" height="60" rx="3" fill="white" stroke="#1F2937" strokeWidth="2"/>
            {/* Checkmark circle */}
            <circle cx="75" cy="75" r="18" fill="#3B9EC9"/>
            {/* Checkmark */}
            <path d="M66 75L72 81L84 69" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>

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

        {/* Description */}
        <p className="text-gray-500 text-base leading-relaxed max-w-sm mb-2">
          {t("emailVerification.description")}{" "}
          <span className="font-medium text-gray-700">{email}</span>.
          {t("emailVerification.instructions")}
        </p>

        {/* Email notice warning */}
        {(showEmailNotice || emailNotice) && (
          <p className="text-xs text-amber-600 mb-6 max-w-sm">
            <strong>{tAuth("note")}</strong> {tAuth("email_notice")}
          </p>
        )}

        {/* Resend Success Message */}
        {resendSuccess && (
          <p className="text-sm text-green-600 mb-4">{t("emailVerification.resendSuccess")}</p>
        )}

        {/* Resend Button */}
        <button
          type="button"
          onClick={() => resendMutation.mutate({ data: { email } })}
          disabled={resendMutation.isPending}
          className="px-8 py-3 bg-[#3B9EC9] text-white font-medium rounded-full hover:bg-[#2D8AB5] transition disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer flex items-center justify-center gap-2"
        >
          {resendMutation.isPending ? (
            <>
              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
              {t("emailVerification.sending")}
            </>
          ) : (
            t("emailVerification.resendButton")
          )}
        </button>
      </div>
    </Modal>
  );
}