"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
import { useCart } from "@/context/CartContext";

type PaymentStatus = {
  reference?: string;
  status?: "pending" | "approved" | "declined" | "error";
  orderId?: string | null;
  wompiTransactionId?: string | null;
};

function ResultInner() {
  const params = useSearchParams();
  const { clear } = useCart();
  const reference = params.get("reference") || "";
  const transactionId =
    params.get("id") || params.get("transaction_id") || params.get("transactionId") || "";
  const [status, setStatus] = useState<PaymentStatus | null>(null);
  const [polling, setPolling] = useState(true);

  useEffect(() => {
    if (!reference && !transactionId) {
      setPolling(false);
      return;
    }

    // Evitar reutilizar un carrito ya pagado al seguir comprando
    void clear();

    let cancelled = false;
    let attempts = 0;

    const poll = async () => {
      attempts += 1;
      const qs = new URLSearchParams();
      if (reference) qs.set("reference", reference);
      if (transactionId) qs.set("transactionId", transactionId);

      try {
        const res = await fetch(`/api/wompi/status?${qs.toString()}`, {
          cache: "no-store",
        });
        if (res.ok) {
          const data = (await res.json()) as PaymentStatus;
          if (!cancelled) setStatus(data);
          if (data.status === "approved" && data.orderId) {
            setPolling(false);
            return;
          }
          if (data.status === "declined" || data.status === "error") {
            setPolling(false);
            return;
          }
        }
      } catch {
        /* retry */
      }

      if (!cancelled && attempts < 24) {
        window.setTimeout(poll, 2500);
      } else {
        setPolling(false);
      }
    };

    poll();
    return () => {
      cancelled = true;
    };
  }, [reference, transactionId, clear]);

  const approved = status?.status === "approved" && status.orderId;
  const declined = status?.status === "declined" || status?.status === "error";

  return (
    <div className="ot-container py-20 text-center max-w-2xl mx-auto">
      <p className="ot-eyebrow">Pago Wompi</p>
      {approved ? (
        <>
          <h1 className="font-serif text-5xl mt-3">¡Pago confirmado!</h1>
          <p className="mt-4 text-ot-muted leading-relaxed">
            Tu pedido fue registrado. Te enviaremos el comprobante y avisaremos cuando esté
            listo para despacho.
          </p>
          {status.orderId ? (
            <p className="mt-4 text-xs tracking-wide text-ot-muted uppercase">
              Pedido: {status.orderId}
            </p>
          ) : null}
        </>
      ) : declined ? (
        <>
          <h1 className="font-serif text-5xl mt-3">Pago no completado</h1>
          <p className="mt-4 text-ot-muted leading-relaxed">
            El pago fue rechazado o cancelado. Puedes volver al checkout e intentar de nuevo.
          </p>
        </>
      ) : (
        <>
          <h1 className="font-serif text-5xl mt-3">
            {polling ? "Estamos confirmando tu pago" : "Pago en revisión"}
          </h1>
          <p className="mt-4 text-ot-muted leading-relaxed">
            Si completaste el pago, Wompi nos avisará en unos segundos. También recibirás
            comprobante por correo cuando quede aprobado.
          </p>
        </>
      )}

      {reference || transactionId ? (
        <p className="mt-4 text-xs tracking-wide text-ot-muted uppercase">
          Referencia: {reference || transactionId}
        </p>
      ) : null}

      <div className="mt-10 flex flex-wrap gap-3 justify-center">
        {declined ? (
          <Link href="/checkout" className="ot-btn inline-flex">
            Volver al checkout
          </Link>
        ) : null}
        <Link href="/shop" className="ot-btn inline-flex">
          Seguir comprando
        </Link>
        <Link href="/" className="ot-btn-ghost ot-btn inline-flex">
          Ir al inicio
        </Link>
      </div>
    </div>
  );
}

export default function CheckoutResultPage() {
  return (
    <Suspense
      fallback={
        <div className="ot-container py-20 text-center">
          <p className="text-ot-muted">Cargando resultado…</p>
        </div>
      }
    >
      <ResultInner />
    </Suspense>
  );
}