SweetHome/app/components/LoginComponent/OtpComponent.js

"use client";

import { CheckCircle, KeyRound, Loader2, Shield } from "lucide-react";
import { useTranslation } from "react-i18next";
import { motion } from "framer-motion";
import { sendEmailOTP, sendPhoneOTP, verifyEmail, verifyPhone, getOwnerByUserId, getCustomerByUserId } from "@/app/utils/api";
import AuthService from "@/app/services/AuthService";
import { useState } from "react";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";

export default function OtpComponent({ isLoading, setIsLoading, isSuccess, setIsSuccess, loginMethod, formData, setStep }) {
  const { t } = useTranslation();
  const router = useRouter();
  const [otpCode, setOtpCode] = useState("");
  const [otpError, setOtpError] = useState("");
  const handleVerifyOTP = async (e) => {
    e.preventDefault();
    if (!otpCode || otpCode.length < 4) {
      setOtpError(t("otpRequired"));
      return;
    }
    setIsLoading(true);
    setOtpError("");
    try {
      const verifyFn = loginMethod === "email" ? verifyEmail : verifyPhone;
      const result = await verifyFn(otpCode);
      if (result?.ok) {
        try {
          await AuthService.cacheCurrentUser(getOwnerByUserId, getCustomerByUserId);
          console.log("Decoded:", AuthService.decodeToken());
          console.log("User:", AuthService.getUser());
        } catch (err) {
          console.warn("Failed to cache user", err);
        }
      }
      setIsSuccess(true);
      toast.success(t("verifySuccess"));
      setTimeout(() => {
        router.push("/");
      }, 1500);
    } catch (err) {
      console.error("[OTP] Error:", err);
      setOtpError(err.message || t("verifyError"));
    } finally {
      setIsLoading(false);
    }
  };

  const resendOTP = async () => {
    try {
      if (loginMethod === "email") {
        await sendEmailOTP();
      } else {
        await sendPhoneOTP();
      }
      toast.success(t("resendSuccess"), {
        style: { background: "#dcfce7", color: "#166534" },
      });
    } catch (err) {
      console.error("[OTP] Resend failed:", err);
      toast.error(t("resendFailed"));
    }
  };

  return (
    <motion.form key="otp" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} onSubmit={handleVerifyOTP} className="space-y-6">
      <div className="text-center mb-4">
        <Shield className="w-12 h-12 text-amber-500 mx-auto mb-3" />
        <p className="text-amber-300 text-sm">
          {t("sendOTPTo")}{" "}
          <span className="text-amber-50 font-medium" dir="ltr">
            {formData?.credential}
          </span>
        </p>
      </div>
      <div>
        <label className="block text-sm font-medium text-gray-300 mb-2">{t("otpLabel")}</label>
        <input
          type="text"
          value={otpCode}
          onChange={(e) => {
            setOtpCode(e.target.value);
            if (otpError) setOtpError("");
          }}
          className={`w-full px-4 py-4 bg-gray-800 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white text-center text-2xl tracking-[0.5em] placeholder-gray-500 transition-all ${
            otpError ? "border-red-500" : "border-gray-700"
          }`}
          placeholder="______"
          maxLength={6}
          dir="ltr"
        />
        {otpError && (
          <motion.p initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-red-500 text-sm mt-1 text-center">
            {otpError}
          </motion.p>
        )}
      </div>

      <motion.button
        type="submit"
        disabled={isLoading || isSuccess}
        className="relative w-full bg-gradient-to-r from-amber-500 to-amber-600 text-white py-4 rounded-xl font-bold text-lg disabled:opacity-50 disabled:cursor-not-allowed"
        whileHover={{ scale: 1.02 }}
        whileTap={{ scale: 0.98 }}
      >
        <span className="flex items-center justify-center gap-2">
          {isLoading ? (
            <>
              <Loader2 className="w-5 h-5 animate-spin" />
              {t("verifying")}
            </>
          ) : isSuccess ? (
            <>
              <CheckCircle className="w-5 h-5" />
              {t("success")}
            </>
          ) : (
            <>
              <KeyRound className="w-5 h-5" />
              {t("verify")}
            </>
          )}
        </span>
      </motion.button>

      <div className="flex items-center justify-between text-sm">
        <button
          type="button"
          onClick={() => {
            setStep("login");
            setOtpCode("");
            setOtpError("");
          }}
          className="text-gray-400 hover:text-white transition-colors"
        >
          ← {t("back")}
        </button>
        <button type="button" onClick={resendOTP} className="text-amber-400 hover:text-amber-300 transition-colors">
          {t("resendCode")}
        </button>
      </div>
    </motion.form>
  );
}