"use client";

import { useEffect, useState, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { verifyPaymentAction } from "@/features/fixed-packages/actions/booking-actions";
import { Loader2 } from "lucide-react";
import { SuccessView } from "./success-view";
import { FailureView } from "./failure-view";

function PaymentCallbackContent() {
  const searchParams = useSearchParams();
  const [status, setStatus] = useState<"verifying" | "success" | "error">(
    "verifying"
  );
  const [message, setMessage] = useState("Verifying your payment details...");
  const [moduleType, setModuleType] = useState<string | undefined>();

  useEffect(() => {
    const verify = async () => {
      try {
        const params: Record<string, string> = {};
        searchParams.forEach((value, key) => {
          params[key] = value;
        });

        if (Object.keys(params).length === 0) {
          setStatus("error");
          setMessage("No payment details found.");
          return;
        }

        const result = await verifyPaymentAction(params);

        if (result.success) {
          const data = result.data?.data ?? result.data;
          setModuleType(
            typeof data?.module_type === "string" ? data.module_type : undefined
          );
          setStatus("success");
        } else {
          setStatus("error");
          setMessage(result.error || "Payment verification failed.");
        }
      } catch {
        setStatus("error");
        setMessage("An unexpected error occurred.");
      }
    };

    verify();
  }, [searchParams]);

  if (status === "verifying") {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-4">
        <div className="relative">
          <div className="h-24 w-24 rounded-full border-t-4 border-b-4 border-purple-500 animate-spin" />
          <Loader2 className="h-12 w-12 text-purple-600 animate-pulse absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
        </div>
        <h2 className="mt-8 text-2xl font-bold text-gray-900">
          Verifying Payment
        </h2>
        <p className="mt-2 text-gray-500">{message}</p>
      </div>
    );
  }

  if (status === "success") {
    return (
      <SuccessView
        paymentId={searchParams.get("razorpay_payment_id") || undefined}
        referenceId={
          searchParams.get("razorpay_payment_link_reference_id") || undefined
        }
        moduleType={moduleType}
      />
    );
  }

  return <FailureView message={message} />;
}

export default function PaymentCallbackPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center bg-gray-50">
          <Loader2 className="h-8 w-8 text-purple-600 animate-spin" />
        </div>
      }
    >
      <PaymentCallbackContent />
    </Suspense>
  );
}