"use client";

import { Suspense, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";

import { useLocaleRouter } from "@/app/lib/useLocaleRouter";
import Link from "@/app/components/LocaleLink";
import Image from "next/image";
import toast from "react-hot-toast";

import OtpInputBox from "@/app/components/OtpInputBox";
import {
  verifyAstrologerMobileOtp,
  resendAstrologerOtp,
  friendlyErrorMessage,
} from "@/app/lib/astrologer";
import { maskMobileNumber } from "@/app/lib/mask";
import { useLanguage } from "@/app/context/LanguageContext";

function VerifyMobileContent() {
  const router = useLocaleRouter();
  const params = useSearchParams();
  const { t } = useLanguage();

  const mobile = params.get("mobile") || "";
  const email = params.get("email") || "";
  const countryCode = params.get("countryCode") || "91";
  const astrologerId = params.get("astrologerId") || "";

  const [otp, setOtp] = useState("");
  const [loading, setLoading] = useState(false);
  const [resending, setResending] = useState(false);
  const [timer, setTimer] = useState(30);

  useEffect(() => {
    if (timer === 0) return;

    const interval = setInterval(() => {
      setTimer((prev) => prev - 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [timer]);

  const verify = async () => {
    if (otp.length !== 6) {
      toast.error(t("astrologerAuth.verifyMobile.toastInvalidOtpCode", "Enter the 6 digit code"));
      return;
    }

    try {
      setLoading(true);

      const response = await verifyAstrologerMobileOtp(mobile, otp);

      if (response.success) {
        toast.success(t("astrologerAuth.verifyMobile.toastMobileVerified", "Mobile number verified"));

        router.push(
          `/astrologer/verify-email?mobile=${encodeURIComponent(
            mobile
          )}&email=${encodeURIComponent(
            email
          )}&countryCode=${countryCode}&astrologerId=${astrologerId}`
        );
      } else {
        toast.error(friendlyErrorMessage(response.message, t("astrologerAuth.verifyMobile.toastInvalidOtpFallback", "Invalid OTP")));
      }
    } catch (error: any) {
      toast.error(
        error.response?.data?.message ?? t("astrologerAuth.verifyMobile.toastVerifyOtpErrorFallback", "Unable to verify OTP.")
      );
    } finally {
      setLoading(false);
    }
  };

  const resend = async () => {
    try {
      setResending(true);

      const response = await resendAstrologerOtp(mobile, "mobile");

      if (response.success) {
        toast.success(t("astrologerAuth.verifyMobile.toastOtpResent", "OTP resent"));
        setTimer(30);
        setOtp("");
      } else {
        toast.error(friendlyErrorMessage(response.message, t("astrologerAuth.verifyMobile.toastResendOtpFailedFallback", "Unable to resend OTP")));
      }
    } catch (error: any) {
      toast.error(
        error.response?.data?.message ?? t("astrologerAuth.verifyMobile.toastResendOtpErrorFallback", "Unable to resend OTP.")
      );
    } finally {
      setResending(false);
    }
  };

  return (
    <section className="py-5 d-flex align-items-center min-vh-100">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-5">
            <div className="text-center mb-4">
              <Link href="/astrologer">
                <Image
                  src="/images/logo-astro.svg"
                  alt="AstroEye"
                  width={140}
                  height={119}
                  priority
                />
              </Link>
            </div>

            <div className="card card-bg-primary border-0 shadow rounded-4">
              <div className="card-body p-3 p-md-5 text-white text-center">
                <h4 className="mb-2">{t("astrologerAuth.verifyMobile.heading", "Verify your number")}</h4>

                <p className="terms-text-color">
                  {t("astrologerAuth.verifyMobile.subtitle", "We sent you a 6 digit code to verify your mobile number")}
                  <br />
                  <strong>+{countryCode} {maskMobileNumber(mobile)}</strong>
                </p>

                <div className="d-flex justify-content-center my-4">
                  <OtpInputBox value={otp} onChange={setOtp} />
                </div>

                <p className="terms-text-color mb-4">
                  {t("astrologerAuth.verifyMobile.resendPrompt", "Didn't receive code?")}{" "}
                  {timer > 0 ? (
                    <span>{t("astrologerAuth.verifyMobile.resendCountdownPrefix", "Resend OTP (")}{timer}{t("astrologerAuth.verifyMobile.resendCountdownSuffix", "s)")}</span>
                  ) : (
                    <button
                      type="button"
                      className="btn btn-link p-0 text-danger fw-semibold text-decoration-none"
                      onClick={resend}
                      disabled={resending}
                    >
                      {resending ? t("astrologerAuth.verifyMobile.resendingButton", "Resending...") : t("astrologerAuth.verifyMobile.resendButton", "Resend OTP")}
                    </button>
                  )}
                </p>

                <button
                  className="btn btn-primary w-100 py-3"
                  onClick={verify}
                  disabled={loading}
                >
                  {loading ? t("astrologerAuth.verifyMobile.verifyingButton", "Verifying...") : t("astrologerAuth.verifyMobile.submitButton", "Submit")}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default function AstrologerVerifyMobilePage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <VerifyMobileContent />
    </Suspense>
  );
}