SweetHome/app/components/OwnerComponents/OtpDialog.js

import { KeyRound, Loader2, Shield } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { motion } from "framer-motion";
import toast, { Toaster } from "react-hot-toast";
import { sendEmailOTP, verifyEmail } from "@/app/utils/api";
import AuthService from "@/app/services/AuthService";
import { useRouter } from "next/navigation";
export default function OtpDialog({ formData, setShowOtpModal, type }) {
  const { t } = useTranslation();
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const [otpCode, setOtpCode] = useState("");
  const handleVerifyOTP = async () => {
    if (!otpCode || otpCode.length < 4) {
      toast.error(t("register.otpRequired"));
      return;
    }
    setIsLoading(true);
    try {
      const res = await verifyEmail(otpCode);
      if (res.status === 200) {
        AuthService.deleteToken();
        toast.success(res.message || t("register.emailVerified"));
        setShowOtpModal(false);
        setTimeout(() => router.push("/login"), 1500);
      } else {
        toast.error(res.message || res.data?.message || t("accountVerification.otpInvalid"));
      }
    } catch (err) {
      toast.error(err.message || t("register.verificationError"));
    } finally {
      setIsLoading(false);
    }
  };

  const handleResendOTP = async () => {
    setIsLoading(true);
    try {
      await sendEmailOTP();
      toast.success(t("register.newOtpSent"));
    } catch (err) {
      toast.error(t("register.resendOtpFailed"));
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50">
        <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }} className="bg-gray-900 border border-white/10 rounded-2xl w-full max-w-md p-6 shadow-2xl">
          <div className="text-center mb-6">
            <div className="w-16 h-16 bg-amber-500/20 rounded-full flex items-center justify-center mx-auto mb-3">
              <Shield className={`w-8 h-8 ${type === "owner" ? "text-amber-500" : "text-blue-500"} `} />
            </div>
            <h2 className="text-xl font-bold text-white">{t("register.otpTitle")}</h2>
            <p className="text-gray-400 text-sm mt-1">{t("register.otpSentTo")}</p>
            <p className={`${type === "owner" ? "text-amber-500" : "text-blue-500"} font-medium text-sm`}>{formData.email}</p>
          </div>
          <div className="mb-6">
            <label className="block text-sm font-medium text-gray-300 mb-2">{t("register.otpLabel")}</label>
            <div className="relative">
              <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                <KeyRound className="w-5 h-5 text-gray-400" />
              </div>
              <input
                type="text"
                value={otpCode}
                maxLength={6}
                onChange={(e) => setOtpCode(e.target.value)}
                className="w-full pr-12 pl-4 py-3 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 text-white text-center tracking-[0.5em] text-xl"
                placeholder="------"
              />
            </div>
          </div>
          <div className="flex gap-3">
            <button
              onClick={handleVerifyOTP}
              disabled={isLoading || !otpCode}
              className={`flex-1 bg-gradient-to-r ${type === "owner" ? "from-amber-500 to-amber-600" : "from-blue-500 to-blue-600"} text-white py-3 rounded-xl font-medium ${type === "owner" ? "hover:from-amber-600 hover:to-amber-700" : "hover:from-blue-600 hover:to-blue-700"} disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2`}
            >
              {isLoading ? (
                <>
                  <Loader2 className="w-5 h-5 animate-spin" />
                  <span>{t("register.verifying")}</span>
                </>
              ) : (
                t("register.verify")
              )}
            </button>
          </div>
          <button
            onClick={handleResendOTP}
            disabled={isLoading}
            className={`w-full text-center ${type === "owner" ? "text-amber-400 hover:text-amber-300" : "text-blue-400 hover:text-blue-300"}  text-sm mt-3 disabled:opacity-50`}
          >
            {t("register.resendOtp")}
          </button>
        </motion.div>
      </motion.div>
    </>
  );
}