import { AlertTriangle, ExternalLink } from "lucide-react"
import Link from "next/link"

export default async function FailedPage(props: any) {
  const sp = (await props?.searchParams) || props?.searchParams || {}
  const invoiceIdRaw = (sp?.invoice_id ?? sp?.invoiceId) as string | string[] | undefined
  const invoiceId = Array.isArray(invoiceIdRaw) ? invoiceIdRaw[0] : invoiceIdRaw
  const reasonRaw = sp?.reason as string | string[] | undefined
  const reason = Array.isArray(reasonRaw) ? reasonRaw[0] : reasonRaw

  return (
    <main className="mx-auto max-w-3xl px-4 py-12">
      <div className="mb-6 flex items-center gap-3">
        <AlertTriangle className="h-8 w-8 text-red-600" />
        <div>
          <h1 className="text-2xl font-semibold">Payment Failed</h1>
          <p className="text-muted-foreground">We could not confirm your payment.</p>
        </div>
      </div>

      <section className="rounded-lg border p-4 sm:p-6 bg-white">
        <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
          <div>
            <dt className="text-sm text-muted-foreground">Invoice ID</dt>
            <dd className="font-medium break-all">{invoiceId || "—"}</dd>
          </div>
          <div>
            <dt className="text-sm text-muted-foreground">Reason</dt>
            <dd className="font-medium break-all">{reason || "Unknown"}</dd>
          </div>
        </dl>

        <div className="mt-8 flex flex-wrap items-center gap-3">
          <Link href="/" className="inline-flex items-center gap-2 rounded-md bg-black text-white px-4 py-2 text-sm">
            Try again <ExternalLink className="h-4 w-4" />
          </Link>
          {invoiceId ? (
            <a
              href={`https://pay.neonecy.com/api/payment-failed?invoice_id=${encodeURIComponent(invoiceId)}`}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm"
            >
              View raw JSON <ExternalLink className="h-4 w-4" />
            </a>
          ) : null}
        </div>
      </section>
    </main>
  )
}