"use client";

import { Suspense, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { usePaymentControllerVerifyPaymentV1 } from "@/api/user/individual-payment/individual-payment";
import { toast } from "react-hot-toast";

function VerifyPaymentContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const sessionId = searchParams.get("session_id");
  const t = useTranslations();

  const {
    data: verificationData,
    isLoading,
    error,
  } = usePaymentControllerVerifyPaymentV1(
    { session_id: sessionId || "" },
    {
      query: {
        enabled: !!sessionId,
        retry: 8,
        retryDelay: 3000,
      },
    }
  );

  useEffect(() => {
    const data = verificationData as any;
    if (data?.data?.verified && data?.data?.screening_uuid) {
      const screeningUuid = data.data.screening_uuid;
      router.push(`/individual/screening/${screeningUuid}/questions?session_id=${sessionId}`);
    } else if (error) {
      toast.error(t("individual.payment.verificationFailed"));
      router.push("/individual/screening/payment");
    }
  }, [verificationData, error, sessionId, router, t]);

  return (
    <main className="pt-20 pb-8">
      <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-[#3B9EC9] mb-4"></div>
          <h2 className="text-xl font-semibold text-gray-900 mb-2">
            {isLoading ? t("individual.payment.verifying") : t("individual.payment.processing")}
          </h2>
          <p className="text-gray-600">
            {t("individual.payment.pleaseWait")}
          </p>
        </div>
      </div>
    </main>
  );
}

export default function VerifyPaymentPage() {
  const t = useTranslations();
  return (
    <Suspense fallback={
      <main className="pt-20 pb-8">
        <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 text-center">
            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-[#3B9EC9] mb-4"></div>
            <h2 className="text-xl font-semibold text-gray-900 mb-2">{t("individual.payment.loading")}</h2>
          </div>
        </div>
      </main>
    }>
      <VerifyPaymentContent />
    </Suspense>
  );
}