/* ============================================================
   LUMFELL — Embedded Stripe Checkout page
   Uses vanilla stripe.initEmbeddedCheckout() (no bundler needed).
   ============================================================ */

const I = window.LumIcons;

/* Load Stripe.js once. */
function loadStripeJs() {
  if (window.Stripe) return Promise.resolve(window.Stripe);
  if (window.__stripeJsPromise) return window.__stripeJsPromise;
  window.__stripeJsPromise = new Promise((resolve, reject) => {
    const s = document.createElement("script");
    s.src = "https://js.stripe.com/v3/";
    s.async = true;
    s.onload = () => resolve(window.Stripe);
    s.onerror = () => reject(new Error("Could not load Stripe.js"));
    document.head.appendChild(s);
  });
  return window.__stripeJsPromise;
}

const SHIP_FREE_OVER = 200;
const FLAT_SHIP = 12;

function CheckoutPage({ items, onBack, onHome }) {
  const mountRef = useRef(null);
  const checkoutRef = useRef(null);
  // status: 'init' | 'loading' | 'ready' | 'unavailable' | 'error'
  const [status, setStatus] = useState("init");
  const [errMsg, setErrMsg] = useState("");

  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  const shipping = subtotal >= SHIP_FREE_OVER ? 0 : FLAT_SHIP;
  const total = subtotal + shipping;

  useEffect(() => {
    let cancelled = false;

    async function boot() {
      if (items.length === 0) return;
      setStatus("loading");
      try {
        // 1) Publishable key from the server (kept in a Vercel env var).
        let publishableKey = "";
        try {
          const cfg = await fetch("/api/config", { headers: { Accept: "application/json" } });
          if (cfg.ok) publishableKey = (await cfg.json()).publishableKey || "";
        } catch (_) { /* no backend in preview */ }

        if (!publishableKey) {
          if (!cancelled) setStatus("unavailable");
          return;
        }

        // 2) Boot Stripe.js + embedded checkout.
        const Stripe = await loadStripeJs();
        if (cancelled) return;
        const stripe = Stripe(publishableKey);

        const fetchClientSecret = async () => {
          const r = await fetch("/api/create-checkout-session", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ items: items.map((i) => ({ id: i.id, qty: i.qty })) }),
          });
          const data = await r.json().catch(() => ({}));
          if (!r.ok) throw new Error(data.error || "Could not start checkout.");
          return data.clientSecret;
        };

        const checkout = await stripe.initEmbeddedCheckout({ fetchClientSecret });
        if (cancelled) { checkout.destroy(); return; }
        checkoutRef.current = checkout;
        checkout.mount(mountRef.current);
        setStatus("ready");
      } catch (e) {
        if (!cancelled) { setErrMsg(e.message || String(e)); setStatus("error"); }
      }
    }

    boot();
    return () => {
      cancelled = true;
      if (checkoutRef.current) { try { checkoutRef.current.destroy(); } catch (_) {} checkoutRef.current = null; }
    };
  }, []);

  return (
    <main className="co">
      <div className="co__wrap u-wrap">
        <button className="link-u co__back" onClick={onBack}>
          <I.IcoArrow size={15} style={{ transform: "rotate(180deg)" }} />
          <span>Back to bag</span>
        </button>

        <div className="co__grid">
          {/* ---- Payment column ---- */}
          <section className="co__pay">
            <span className="u-eyebrow co__eyebrow">Secure checkout</span>
            <h1 className="co__title u-serif">Complete your order</h1>

            {items.length === 0 && (
              <div className="co__note">
                <p className="co__note-h u-serif">Your bag is empty.</p>
                <button className="btn" onClick={onHome}><span>Continue shopping</span></button>
              </div>
            )}

            {items.length > 0 && (status === "loading" || status === "init") && (
              <div className="co__loading">
                <span className="co__spin" />
                <span>Preparing secure checkout…</span>
              </div>
            )}

            {status === "unavailable" && (
              <div className="co__note co__note--info">
                <p className="co__note-h u-serif">Checkout activates on deploy.</p>
                <p className="co__note-p">
                  The embedded Stripe card form appears here once this site is deployed to Vercel
                  with your test keys (<code>STRIPE_SECRET_KEY</code> and <code>STRIPE_PUBLISHABLE_KEY</code>)
                  set as Environment Variables. In test mode, pay with card <code>4242&nbsp;4242&nbsp;4242&nbsp;4242</code>,
                  any future date, any CVC.
                </p>
                <button className="btn btn--ghost" onClick={onBack}><span>Back to bag</span></button>
              </div>
            )}

            {status === "error" && (
              <div className="co__note co__note--err">
                <p className="co__note-h u-serif">We couldn’t start checkout.</p>
                <p className="co__note-p">{errMsg}</p>
                <button className="btn btn--ghost" onClick={onBack}><span>Back to bag</span></button>
              </div>
            )}

            {/* Stripe mounts its embedded form here */}
            <div ref={mountRef} className="co__stripe" style={{ display: status === "ready" ? "block" : "none" }} />
          </section>

          {/* ---- Order summary column ---- */}
          <aside className="co__summary">
            <span className="u-eyebrow">Order summary</span>
            <ul className="co__lines">
              {items.map((it) => (
                <li className="co__line" key={it.id}>
                  <Placeholder tag="" tone={it.tone} className="co__line-ph" />
                  <div className="co__line-body">
                    <span className="co__line-name">{it.name}</span>
                    <span className="co__line-meta">{it.color} · Qty {it.qty}</span>
                  </div>
                  <span className="co__line-price">{money(it.price * it.qty)}</span>
                </li>
              ))}
            </ul>
            {items.length > 0 && (
              <div className="co__totals">
                <div className="co__trow"><span>Subtotal</span><span>{money(subtotal)}</span></div>
                <div className="co__trow"><span>Shipping</span><span>{shipping === 0 ? "Free" : money(shipping)}</span></div>
                <div className="co__trow co__trow--grand"><span>Total</span><span>{money(total)}</span></div>
                {shipping > 0 && (
                  <p className="co__ship-note">Free shipping on orders over {money(SHIP_FREE_OVER)}.</p>
                )}
              </div>
            )}
          </aside>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { CheckoutPage });