"use client";
import Script from "next/script";
import { useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";

declare global { interface Window { KLAP_FLEX?: { init: (options: Record<string, unknown>) => void } } }

function Checkout() {
  const query = useSearchParams();
  const orderId = query.get("order_id") || "";
  const production = query.get("ambiente") === "produccion";
  const [ready, setReady] = useState(false);
  const [error, setError] = useState("");
  const script = production
    ? "https://klap.cl/pagos/checkout-flex/v1/main.min.js"
    : "https://sandbox.mcdesaqa.cl/pagos/checkout-flex/v1/main.min.js";
  useEffect(() => {
    if (!ready || !orderId || !window.KLAP_FLEX) return;
    try { window.KLAP_FLEX.init({ orderId, useModal: false, debug: false }); }
    catch { setError("No fue posible abrir el formulario seguro de Klap."); }
  }, [ready, orderId]);
  return <main className="payment-page"><section className="payment-card">
    <span className="section-kicker">PAGO SEGURO KLAP</span>
    <h1>Completa tu pago</h1>
    {error ? <p>{error}</p> : <p>El resultado será confirmado directamente con Klap.</p>}
    <div id="klapSection" style={{minHeight: 520}} />
    <Script src={script} strategy="afterInteractive" onLoad={() => setReady(true)}
      onError={() => setError("No fue posible cargar Klap Checkout.")} />
  </section></main>;
}

export default function KlapPaymentPage() {
  return <Suspense fallback={<main className="payment-page">Cargando pago seguro…</main>}><Checkout /></Suspense>;
}