"use client";
import { useSearchParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import axios from "axios";
import { useLocale } from "next-intl";

export default function PaymentStatus() {
  const locale = useLocale();
  const searchParams = useSearchParams();
  const router = useRouter();
  const checkoutId = searchParams.get("checkoutId");
  const [status, setStatus] = useState<"pending" | "success" | "failed">("pending");

  useEffect(() => {
    if (checkoutId) {
      axios
        .post("https://backend.outletplus.sa/verify-payment", { checkoutId })
        .then((res) => {
          if (res.data.success) {
            setStatus("success");
            setTimeout(() => router.push(`/${locale}/orders`), 3000); // Redirect to orders
          } else {
            setStatus("failed");
          }
        })
        .catch(() => setStatus("failed"));
    }
  }, [checkoutId, router]);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      {status === "pending" && <p>Checking payment status...</p>}
      {status === "success" && <p className="text-green-600">Payment successful! Redirecting...</p>}
      {status === "failed" && <p className="text-red-600">Payment failed. Try again.</p>}
    </div>
  );
}