"use client";

import React, { useState, useEffect, useRef, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { useCart } from "@/context/CartContext";
import { getPaymentOrderResultAction } from "@/actions/order/order.action";
import SuccessScreen from "@/components/checkout/SuccessScreen";
import Navbar from "@/components/shared/Navbar";
import { Loader2, AlertCircle } from "lucide-react";
import Link from "next/link";

function SuccessContent() {
  const searchParams = useSearchParams();
  const { clearCart } = useCart();
  // Stable ref so clearCart never enters useEffect deps (avoids infinite loop)
  const clearCartRef = useRef(clearCart);
  clearCartRef.current = clearCart;

  const orderNumber = searchParams.get("order_number");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [orderSummary, setOrderSummary] = useState<any>(null);

  useEffect(() => {
    if (!orderNumber) {
      setError("No order number found in the URL.");
      setLoading(false);
      return;
    }

    let cancelled = false;

    const fetchOrder = async () => {
      try {
        const result = await getPaymentOrderResultAction(orderNumber);
        if (cancelled) return;

        if (!result.success) {
          setError(result.message || "Failed to load order summary.");
        } else {
          setOrderSummary(result.data);
          // Clear cart exactly once via ref — never re-triggers the effect
          clearCartRef.current();
          if (typeof window !== "undefined") {
            localStorage.removeItem("checkout_mobile");
          }
        }
      } catch (err: unknown) {
        if (!cancelled) {
          const msg = err instanceof Error ? err.message : "An unexpected error occurred.";
          setError(msg);
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    };

    fetchOrder();

    return () => { cancelled = true; };
  }, [orderNumber]);

  if (loading) {
    return (
      <>
        <Navbar />
        <div className="min-h-screen bg-slate-50 dark:bg-zinc-950 flex flex-col items-center justify-center gap-3">
          <Loader2 className="w-10 h-10 text-brand-accent animate-spin" />
          <p className="text-sm font-semibold text-slate-500 dark:text-zinc-400">
            Loading your order details...
          </p>
        </div>
      </>
    );
  }

  if (error || !orderSummary) {
    return (
      <>
        <Navbar />
        <div className="min-h-screen bg-slate-50 dark:bg-zinc-950 flex items-center justify-center p-4">
          <div className="max-w-md w-full bg-white dark:bg-zinc-900 border border-slate-100 dark:border-zinc-800 rounded-3xl p-6 shadow-xl text-center space-y-4">
            <div className="flex justify-center text-rose-500">
              <AlertCircle size={48} />
            </div>
            <h1 className="text-xl font-black text-slate-900 dark:text-zinc-100">
              Something went wrong
            </h1>
            <p className="text-sm text-slate-500 dark:text-zinc-400">
              {error || "We couldn't load your order. Please contact support if your payment was deducted."}
            </p>
            <div className="pt-2">
              <Link
                href="/"
                className="px-6 py-2.5 bg-slate-900 hover:bg-slate-800 text-white rounded-xl text-xs font-black uppercase tracking-wider transition-colors inline-block"
              >
                Go to Home
              </Link>
            </div>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <SuccessScreen orderSummary={orderSummary} />
    </>
  );
}

export default function CheckoutSuccessPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-slate-50 dark:bg-zinc-950 flex flex-col items-center justify-center gap-3">
          <Loader2 className="w-10 h-10 text-brand-accent animate-spin" />
          <p className="text-sm font-semibold text-slate-500 dark:text-zinc-400">
            Loading...
          </p>
        </div>
      }
    >
      <SuccessContent />
    </Suspense>
  );
}