"use client";

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

const BACKEND_URL = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL;
const API_KEY = process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY;

function StripeReturnBody() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const calledRef = useRef(false);

  useEffect(() => {
    if (calledRef.current) return;
    calledRef.current = true;

    const redirectStatus = searchParams.get("redirect_status");
    const cartId = searchParams.get("cart_id");

    async function completeOrder() {
      if (redirectStatus !== "succeeded") {
        router.replace(`/checkout?error=payment_failed&cartId=${cartId ?? ""}`);
        return;
      }
      if (!cartId) {
        router.replace("/checkout?error=missing_cart");
        return;
      }

      const headers: Record<string, string> = {
        "Content-Type": "application/json",
        "x-publishable-api-key": API_KEY ?? "",
      };
      try {
        const raw = typeof window !== "undefined" ? localStorage.getItem("currentUser") : null;
        const user = raw ? JSON.parse(raw) : null;
        const token = String(user?.token ?? user?.access_token ?? "").trim();
        if (token) headers.Authorization = `Bearer ${token}`;
      } catch {}

      try {
        const res = await fetch(`${BACKEND_URL}/store/checkout/${cartId}/complete`, {
          method: "POST",
          headers,
          body: JSON.stringify({}),
        });
        const data = await res.json() as { order?: { id: string }; message?: string };

        if (!res.ok || !data.order?.id) {
          router.replace(`/checkout?error=order_failed&cartId=${cartId}`);
          return;
        }

        localStorage.removeItem("biomket_cart_id");
        router.push(`/payment?orderId=${data.order.id}`);
      } catch (err) {
        router.replace(`/checkout?error=network_error&cartId=${cartId}`);
      }
    }

    void completeOrder();
  }, [searchParams, router]);

  return (
    <main className="min-h-screen flex items-center justify-center bg-white">
      <div className="text-center">
        <div className="w-12 h-12 border-4 border-green-600 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
        <p className="text-gray-600 text-lg">Completing your order...</p>
      </div>
    </main>
  );
}

export default function StripeReturnPage() {
  return (
    <Suspense fallback={
      <main className="min-h-screen flex items-center justify-center bg-white">
        <div className="w-12 h-12 border-4 border-green-600 border-t-transparent rounded-full animate-spin" />
      </main>
    }>
      <StripeReturnBody />
    </Suspense>
  );
}