"use client"

import { placeOrder } from "@lib/data/cart"
import { useParams, useRouter } from "next/navigation"
import { useEffect, useState } from "react"

export default function PaymentSuccess() {
  const [status, setStatus] = useState<"processing" | "error">("processing")
  const [error, setError] = useState("")
  const router = useRouter()
  const params = useParams()
  const countryCode = params.countryCode as string

  useEffect(() => {
    async function completeOrder() {
      try {
        await placeOrder()
      } catch (err: any) {
        setStatus("error")
        setError(err.message || "Failed to complete order")
      }
    }
    completeOrder()
  }, [])

  if (status === "error") {
    return (
      <div className="flex flex-col items-center justify-center min-h-[60vh] px-4">
        <div className="bg-red-50 border border-red-200 rounded-xl p-6 max-w-md text-center">
          <p className="text-red-700 font-semibold mb-2">Payment completed but order failed</p>
          <p className="text-red-600 text-sm mb-4">{error}</p>
          <button
            onClick={() => router.push(`/${countryCode}/checkout?step=payment`)}
            className="text-sm text-blue-600 hover:underline"
          >
            Return to checkout
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh]">
      <div className="animate-pulse text-gray-500 text-sm">Processing your payment...</div>
    </div>
  )
}