/* ═══════════════════════════════════════════════════════════════════
   ASSINATURA — FlowZ  ·  Plano único R$100/mês
   ═══════════════════════════════════════════════════════════════════ */
const { useState: cuseState, useEffect: cuseEffect } = React;
const CIcon = window.Icon;

window.haptic = window.haptic || function (pattern = "light") {
  if (!navigator.vibrate) return;
  const p = { light: 8, medium: 14, heavy: [10, 30, 10], success: [12, 40, 12], error: [40, 60, 40] }[pattern] || 8;
  try { navigator.vibrate(p); } catch (e) {}
};

const PRICE = 97.90;

const FN_URL = "https://edbhjvzrrozsbbqorgfu.supabase.co/functions/v1/create-checkout";

const FEATS = [
  "Shows ilimitados",
  "Agenda + Roteiro completo",
  "Logística da van",
  "Analytics avançado",
  "Suporte prioritário",
  "Gestão de hotel",
  "Gestão de aéreas",
  "Gestão de contatos",
  "Gestão de equipe",
  "Integração WhatsApp",
  "Integração Waze",
  "Integração Google Maps",
  "Integração previsão do tempo e mais",
];

const PIX_ICO = (
  <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
    <path d="M5.28 17.4 3.6 15.7c-.4-.4-.4-1.05 0-1.45l1.7-1.7-1.7-1.7c-.4-.4-.4-1.05 0-1.45l1.7-1.7 1.05 1.05L4.7 10.8l1.65 1.65-1.65 1.65 1.65 1.65-1.07 1.07ZM12 7l1.7 1.7c.4.4 1.05.4 1.45 0L17 6.85l1.05 1.05-2.85 2.85c-.4.4-1.05.4-1.45 0L12 8.85l-1.7 1.7c-.4.4-1.05.4-1.45 0L6 7.65 7.05 6.6l2.85 2.85c.4.4 1.05.4 1.45 0L13 7Zm-1.45 9.7c.4.4 1.05.4 1.45 0L17 11.7l1.05 1.05-5 5c-.4.4-1.05.4-1.45 0l-5-5L7.7 11.7l2.85 5Z"/>
  </svg>
);

function CheckoutPage() {
  const [loading, setLoading] = cuseState(false);
  const [toast, setToast]     = cuseState(null);

  cuseEffect(() => {
    if (!toast) return;
    const id = setTimeout(() => setToast(null), 2600);
    return () => clearTimeout(id);
  }, [toast]);

  const submit = async () => {
    window.haptic("heavy");
    setLoading(true);
    try {
      const res  = await fetch(FN_URL, { method: "POST" });
      const data = await res.json();
      if (!res.ok || !data.url) throw new Error(data.error || "Erro ao iniciar pagamento");
      window.haptic("success");
      window.location.href = data.url;
    } catch (err) {
      setLoading(false);
      window.haptic("error");
      setToast({ title: "Erro", msg: err.message || "Tente novamente", kind: "err" });
    }
  };

  return (
    <>
      {/* ── toast ────────────────────────────────────────────────── */}
      <div className="toast-host">
        <div className={"toast" + (toast ? " is-show" : "")}>
          <div className={"toast-icon is-" + (toast?.kind || "info")}>
            <CIcon.Check s={16} />
          </div>
          <div className="toast-body">
            <div className="toast-title">{toast?.title || ""}</div>
            {toast?.msg && <div className="toast-msg">{toast.msg}</div>}
          </div>
        </div>
      </div>

      <div className="check">
        <div className="auth-bg" aria-hidden="true">
          {window.LoopStage && window.BgLoginScene
            ? <window.LoopStage><window.BgLoginScene /></window.LoopStage>
            : null}
        </div>

        <a className="back-btn" href="/login/" aria-label="Voltar">
          <CIcon.Back s={20} />
        </a>

        {/* ── header ───────────────────────────────────────────────── */}
        <header className="check-hero enter">
          <div className="as-brand">
            <img src="src/flowz-icon.png" alt="FlowZ" className="as-icon" />
            <div className="as-brand-name">FLOWZ</div>
            <div className="as-brand-sub">
              <span className="as-brand-by">um app da</span>
              <img src="src/voltz-logo.png" alt="VoltZ" className="as-brand-voltz" />
            </div>
          </div>

          <div className="as-headline">
            <div className="auth-eyebrow">ASSINATURA</div>
            <h1 className="auth-h1">
              Tudo que você <br />
              <span className="accent">precisa no palco</span>
            </h1>
            <p className="auth-sub">7 dias grátis · Sem fidelidade · Cancele com 1 toque.</p>
          </div>
        </header>

        {/* ── plan card ────────────────────────────────────────────── */}
        <div className="as-card enter">
          <div className="as-price-row">
            <div className="as-price">
              <span className="as-cur">R$</span>
              <span className="as-amt">97</span>
              <span className="as-cents">,90</span>
              <span className="as-per">/mês</span>
            </div>
            <div className="as-trial">
              <svg width="7" height="7" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>
              7 dias grátis
            </div>
          </div>

          <div className="as-divider" />

          <ul className="as-feats">
            {FEATS.map((f, i) => (
              <li key={i} className="as-feat">
                <span className="as-feat-ico"><CIcon.Check s={13} /></span>
                {f}
              </li>
            ))}
          </ul>
        </div>

        {/* ── payment methods ──────────────────────────────────────── */}
        <div className="pay-strip enter">
          <span className="pay-method pix">{PIX_ICO} PIX</span>
          <span className="pay-method"><CIcon.Doc s={12} /> Cartão</span>
          <span className="pay-method"><CIcon.Doc s={12} /> Boleto</span>
        </div>
      </div>

      {/* ── sticky CTA bar ───────────────────────────────────────── */}
      <div className="check-bar">
        <div className="check-bar-row">
          <div className="check-bar-l">
            <span className="check-bar-tag">ASSINATURA FLOWZ · MENSAL</span>
            <span className="check-bar-amt">R$97,90<span>/mês</span></span>
          </div>
        </div>
        <button className={"cta cta-checkout" + (loading ? " is-loading" : "")} onClick={submit} disabled={loading}>
          {loading ? (
            <><span className="cta-spinner"></span> Iniciando…</>
          ) : (
            <span className="cta-stack">
              <span className="cta-stack-main">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                </svg>
                Assinar agora · R$97,90/mês
              </span>
              <span className="cta-stack-sub">
                <svg width="6" height="6" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>
                7 dias grátis · cancele quando quiser
              </span>
            </span>
          )}
        </button>
      </div>
    </>
  );
}

window.CheckoutPage = CheckoutPage;