/* global React */
/* =====================================================
   VendusAssinar — tela onde o não-assinante fica preso (paywall Fase 1).
   Mostra o plano + botão que leva ao checkout da Cakto (e-mail prefilled)
   e faz polling do status ("Já paguei — atualizar"). Quando vira ativa, o
   App (gate) troca esta tela pelo app. Só expõe window.VendusAssinar.
===================================================== */
(function () {
  const { useState, useEffect, useRef } = React;
  const PA = window.VendusAtoms || {};
  const I = PA.I || (() => null);
  const Btn = PA.Btn || ((p) => <button {...p}>{p.children}</button>);

  function AssinarScreen({ sub, onCheck }) {
    const [checando, setChecando] = useState(false);
    const [msg, setMsg] = useState(null);
    const timer = useRef(null);
    const email = (sub && sub.email) || "";
    const checkout = sub && sub.checkout_url;
    const cancelado = sub && sub.status === "cancelada"; // acabou o período pago

    async function verificar(auto) {
      if (checando) return;
      setChecando(true);
      if (!auto) setMsg(null);
      try {
        const s = await onCheck(); // App re-busca; se ativou, troca de tela sozinho
        if (s && !s.ativa && !auto) setMsg("Ainda não encontrei sua assinatura ativa. Se você acabou de pagar, aguarde 1 minutinho e tente de novo.");
      } finally {
        setChecando(false);
      }
    }

    // Polling automático a cada 15s (pega a ativação logo após o pagamento).
    useEffect(() => {
      timer.current = setInterval(() => verificar(true), 15000);
      return () => clearInterval(timer.current);
    }, []);

    function irParaCheckout(url) {
      const alvo = url || checkout;
      if (!alvo) { setMsg("O checkout ainda está sendo configurado. Fale com o suporte."); return; }
      window.open(alvo, "_blank", "noopener");
      setMsg("Abrimos o checkout numa nova aba. Depois de pagar, volte aqui e clique em “Já paguei”.");
    }

    return (
      <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 24, background: "var(--bg-app, #0b0d12)" }}>
        <div style={{ width: "100%", maxWidth: 460 }}>
          {window.VendusLogo ? <div style={{ display: "flex", justifyContent: "center", marginBottom: 18 }}><window.VendusLogo size={40} /></div> : null}

          <div style={{ background: "var(--bg-surface, #12151c)", border: "1px solid var(--border)", borderRadius: 16, padding: 24, boxShadow: "var(--shadow-1)" }}>
            <div style={{ fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--fg-3)", fontWeight: 700 }}>Assinatura</div>
            <h1 className="font-display" style={{ fontSize: 24, fontWeight: 800, margin: "6px 0 4px" }}>
              {cancelado ? "Seu período de acesso terminou" : "Assine o Vendus pra continuar"}
            </h1>
            <p className="text-muted" style={{ fontSize: 13.5, lineHeight: 1.6, margin: "0 0 16px" }}>
              Seu copiloto de vendas: lucro real, fluxo de caixa e o que fazer hoje — em todos os seus canais.
            </p>

            {/* Plano */}
            <div style={{ border: "1px solid var(--border)", borderRadius: 12, padding: 16, marginBottom: 12 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
                <span className="font-display" style={{ fontSize: 20, fontWeight: 800 }}>Vendus</span>
                <span className="font-display" style={{ fontSize: 20, fontWeight: 800, background: "var(--logo-gradient)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>R$ 47/mês</span>
              </div>
              <div className="text-muted" style={{ fontSize: 12.5, marginTop: 6, lineHeight: 1.5 }}>
                Tudo incluído: Piloto com IA, calculadora, catálogo, financeiro e ações com aprovação.
              </div>
              <div className="text-faint" style={{ fontSize: 11.5, marginTop: 8 }}>
                <b>30 análises de IA por mês</b> · 1 loja · cancele quando quiser.
              </div>
            </div>

            {/* Âncora de valor */}
            <div className="text-faint" style={{ fontSize: 11.5, marginBottom: 10, lineHeight: 1.5 }}>
              Menos de R$ 1,60 por dia. Se evitar <b>um</b> produto vendido no prejuízo, já se pagou o mês.
            </div>

            <Btn variant="primary" onClick={() => irParaCheckout(checkout)} style={{ width: "100%", justifyContent: "center", height: 44, fontSize: 14 }}>
              Assinar agora <I name="arrow-right" size={16} />
            </Btn>

            {sub && sub.checkout_url_anual && (
              <button onClick={() => irParaCheckout(sub.checkout_url_anual)} style={{ width: "100%", marginTop: 8, background: "none", border: "1px solid var(--border)", borderRadius: 10, color: "var(--fg-1)", cursor: "pointer", fontSize: 12.5, padding: "9px 10px" }}>
                Ou <b>R$ 470/ano</b> — economize R$ 94 (2 meses grátis)
              </button>
            )}

            <div style={{ marginTop: 10 }}>
              <Btn variant="ghost" onClick={() => verificar(false)} disabled={checando} style={{ width: "100%", justifyContent: "center" }}>
                {checando ? "Verificando…" : "Já paguei — atualizar"}
              </Btn>
            </div>

            {msg && <div className="text-muted" style={{ fontSize: 12, marginTop: 12, lineHeight: 1.5, background: "var(--bg-elev)", borderRadius: 8, padding: "8px 10px" }}>{msg}</div>}

            <div className="text-faint" style={{ fontSize: 11.5, marginTop: 14, lineHeight: 1.5 }}>
              Recebemos seu pagamento? Pode levar 1 minutinho pra confirmar — a tela atualiza sozinha.
              {email ? <> Use o e-mail <b>{email}</b> no pagamento pra vincular automático.</> : null}
            </div>

            <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--border)", display: "flex", gap: 8, alignItems: "flex-start" }}>
              <span style={{ color: "var(--fg-3)", display: "inline-flex", marginTop: 1 }}><I name="shield-check" size={14} /></span>
              <span className="text-faint" style={{ fontSize: 11.5, lineHeight: 1.5 }}>
                Garantia de 7 dias — não gostou, devolvemos. Pagamento seguro pela Cakto (Pix ou cartão).
              </span>
            </div>

            <div className="text-faint" style={{ fontSize: 11, marginTop: 10, lineHeight: 1.5 }}>
              Pagou com um e-mail diferente? Fale com o suporte informando o e-mail da compra que a gente vincula sua assinatura.
            </div>
          </div>

          <div style={{ textAlign: "center", marginTop: 16 }}>
            <button onClick={() => window.VendusAuth && window.VendusAuth.signOut()} style={{ background: "none", border: "none", color: "var(--fg-3)", cursor: "pointer", fontSize: 12.5 }}>Sair desta conta</button>
          </div>
        </div>
      </div>
    );
  }

  window.VendusAssinar = { AssinarScreen };
})();
