"use client";

import { useSearchParams } from "next/navigation";
import { useState } from "react";
import { Loader2 } from "lucide-react";
import { useRouter } from "next/navigation";

export default function PaymentClient() {
  const searchParams = useSearchParams();

  const status = searchParams.get("status");
  const orderNumber = searchParams.get("orderNumber");

  const router = useRouter();

  if (status == 'success') {
    router.push(`/checkout/place-order/${orderNumber}`)

  }

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);


  const getStatusStyle = (status: string | null) => {
    switch (status?.toLowerCase()) {
      case "success":
        return "text-green-600 bg-green-100 border-green-200";
      case "failed":
      case "cancel":
        return "text-red-600 bg-red-100 border-red-200";
      case "pending":
        return "text-yellow-600 bg-yellow-100 border-yellow-200";
      default:
        return "text-gray-600 bg-gray-100 border-gray-200";
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-white px-4">
      <div
        className={`max-w-md w-full p-6 border rounded-xl shadow-sm ${getStatusStyle(
          status
        )}`}
      >
        {loading ? (
          <div className="flex items-center justify-center">
            <Loader2 className="animate-spin w-6 h-6 mr-2" />
            <span>Processing payment...</span>
          </div>
        ) : error ? (
          <div>
            <h2 className="text-xl font-semibold mb-2">Error</h2>
            <p className="text-sm text-gray-700">{error}</p>
          </div>
        ) : (
          <div>
            <h2 className="text-2xl font-bold capitalize mb-2">
              Payment {status}
            </h2>
          </div>
        )}
      </div>
    </div>
  );
}