/* MStheory website — Stripe checkout modal */
const { Button, Badge } = window.MStheoryDesignSystem_61eb29;

function CheckoutModal({ t, open, onClose, onSuccess, user }) {
  const [stage, setStage] = React.useState("form"); // form | processing | success | error
  const [errMsg, setErrMsg] = React.useState("");
  React.useEffect(() => { if (open) { setStage("form"); setErrMsg(""); } }, [open]);
  if (!open) return null;

  const isDemo = window.MSStore && window.MSStore.mode() === "demo";

  const pay = async () => {
    setStage("processing");
    try {
      // Delegate to app.jsx -> onPaid(): LIVE redirects to Stripe Checkout,
      // DEMO unlocks locally and navigates into the quiz. Either way the page
      // leaves; if it throws we stay and show the error inline.
      await onSuccess();
    } catch (e) {
      setErrMsg(e.message || "Betaling kon niet worden gestart.");
      setStage("error");
    }
  };

  const field = {
    width: "100%", padding: "13px 15px", background: "var(--surface-sunken)",
    border: "1px solid var(--border-default)", borderRadius: "var(--radius-sm)",
    color: "var(--text-primary)", fontSize: "var(--text-sm)", fontFamily: "var(--font-mono)",
    outline: "none",
  };

  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center", padding: "20px", background: "color-mix(in oklab, var(--ink-950) 72%, transparent)", backdropFilter: "blur(8px)" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "100%", maxWidth: "440px", background: "var(--grad-card)", border: "1px solid var(--border-gold)", borderRadius: "var(--radius-xl)", boxShadow: "var(--glow-gold-lg)", overflow: "hidden" }}>
        {/* header */}
        <div style={{ padding: "22px 24px", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <img src="../../assets/logo-wordmark.svg" alt="MStheory" height="28" />
          <button onClick={onClose} style={{ background: "none", border: "none", color: "var(--text-muted)", fontSize: "22px", cursor: "pointer", lineHeight: 1 }}>×</button>
        </div>

        {stage === "success" ? (
          <div style={{ padding: "40px 24px", textAlign: "center" }}>
            <div style={{ width: "64px", height: "64px", margin: "0 auto 18px", borderRadius: "50%", background: "color-mix(in oklab, var(--success-400) 18%, transparent)", border: "1px solid var(--success-400)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "30px", color: "var(--success-400)" }}>✓</div>
            <h3 style={{ fontSize: "var(--text-xl)", marginBottom: "8px" }}>Toegang ontgrendeld</h3>
            <p style={{ color: "var(--text-secondary)", fontSize: "var(--text-sm)", marginBottom: "22px" }}>Je hebt nu levenslang toegang tot alle vragen.</p>
            <Button variant="primary" size="lg" fullWidth onClick={onSuccess}>Start met oefenen →</Button>
          </div>
        ) : (
          <div style={{ padding: "24px" }}>
            {isDemo && (
              <div style={{ marginBottom: "16px", padding: "10px 14px", background: "color-mix(in oklab, var(--gold-400) 10%, transparent)", border: "1px solid var(--border-gold)", borderRadius: "var(--radius-sm)", fontSize: "var(--text-xs)", color: "var(--text-gold)", fontFamily: "var(--font-mono)", letterSpacing: "0.05em" }}>
                DEMO MODE — geen echte betaling · gebruik ?demo=1 of voeg Firebase-keys toe voor live
              </div>
            )}
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: "20px" }}>
              <div>
                <p className="ms-eyebrow" style={{ margin: 0 }}>{t.pricing.title}</p>
                <p style={{ margin: "4px 0 0", color: "var(--text-muted)", fontSize: "var(--text-xs)" }}>{t.pricing.period}</p>
              </div>
              <span className="ms-gold-text" style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-2xl)", fontWeight: 700 }}>{t.pricing.price}</span>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: "12px", marginBottom: "22px", textAlign: "center", color: "var(--text-secondary)", fontSize: "var(--text-sm)", lineHeight: "1.6" }}>
              {isDemo
                ? "Demo-modus: aankoop wordt gesimuleerd zonder echte betaling."
                : "Je staat op het punt om levenslange toegang te kopen. Je wordt doorgestuurd naar de beveiligde betaalomgeving van Stripe."}
            </div>

            {stage === "error" && (
              <div style={{ marginBottom: "16px", padding: "10px 14px", background: "color-mix(in oklab, var(--danger-400) 12%, transparent)", border: "1px solid color-mix(in oklab, var(--danger-400) 50%, transparent)", borderRadius: "var(--radius-sm)", fontSize: "var(--text-xs)", color: "var(--danger-400)" }}>
                {errMsg}
              </div>
            )}

            <Button variant="primary" size="lg" fullWidth disabled={stage === "processing"} onClick={pay}>
              {stage === "processing"
                ? (isDemo ? "Simuleren…" : "Doorsturen naar Stripe…")
                : (isDemo ? `Demo afrekenen · ${t.pricing.price}` : `Afrekenen via Stripe · ${t.pricing.price}`)}
            </Button>
            <p style={{ textAlign: "center", marginTop: "14px", fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>
              {isDemo ? "✦ Geen creditcard nodig in demo-modus" : `🔒 ${t.pricing.secure}`}
            </p>
            <p style={{ textAlign: "center", marginTop: "6px", fontSize: "10px", color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>
              {isDemo ? "DEMO MODE · GEEN ECHTE TRANSACTIE" : "LIVE MODE · STRIPE CHECKOUT INTEGRATION"}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}
window.CheckoutModal = CheckoutModal;