import Link from "next/link";
import { XCircle } from "lucide-react";

export default async function CheckoutErrorPage({
  searchParams,
}: {
  searchParams: Promise<{
    orderId?: string;
    reason?: string;
    code?: string;
  }>;
}) {
  const params = await searchParams;
  const reason = params?.reason;

  const message =
    reason === "aborted"
      ? "Cancelaste el pago. Puedes intentar de nuevo cuando quieras."
      : reason === "rejected"
        ? "La transacción fue rechazada por el medio de pago. Revisa los datos de la tarjeta o prueba con otra."
        : reason === "missing_token" || reason === "order_not_found"
          ? "No pudimos identificar la transacción. Si el cobro se realizó, contáctanos con tu correo de compra."
          : "No se pudo completar el pago. Puedes volver a intentar desde la tienda.";

  return (
    <main className="min-h-[60vh] flex items-center justify-center bg-brand-soft px-4 py-16">
      <div className="max-w-md w-full text-center">
        <div className="inline-flex p-4 rounded-full bg-red-50 text-red-500 mb-6">
          <XCircle className="w-16 h-16" />
        </div>
        <h1 className="text-2xl md:text-3xl font-extrabold text-brand-ink mb-4">Pago no completado</h1>
        <p className="text-brand-muted mb-8">{message}</p>
        {params?.orderId && (
          <p className="text-xs text-slate-400 font-mono mb-6">Orden: {params.orderId}</p>
        )}
        <Link
          href="/#tienda"
          className="inline-flex items-center gap-2 px-7 py-3 rounded-full bg-brand-gradient text-white font-bold hover:opacity-90 transition"
        >
          Volver a la tienda
        </Link>
        <div className="mt-8">
          <Link href="/" className="text-brand-muted hover:text-brand-purple text-sm transition-colors">
            Ir al inicio
          </Link>
        </div>
      </div>
    </main>
  );
}