// ─────────────────────────────────────────────────────────────
// ACCESS UI — Modal de resgate de código + botão "inserir código"
// Usado quando uma seção está bloqueada. Sem login: a pessoa cola
// o código que recebeu na Hotmart e a seção abre pra sempre.
// ─────────────────────────────────────────────────────────────

const { useState: _useStateAx } = React;

// Modal central de resgate de acesso
function AccessModal({ module, t, onClose, onRedeemed }) {
  const [code, setCode] = _useStateAx("");
  const [error, setError] = _useStateAx("");

  const generic = !module || module.generic;
  const sectionName = generic ? "Inserir código" : module.name;
  const buyUrl = (!generic)
    ? buyLink(module.id, module.name)
    : waLink("Olá, quero adquirir acesso à Clínica Digital.");

  const tryRedeem = () => {
    const res = redeemAccessCode(code);
    if (res.ok) {
      setError("");
      onRedeemed?.(res.scope);
    } else {
      setError("Código não reconhecido. Confira o código que você recebeu.");
    }
  };

  return (
    <div
      onClick={onClose}
      style={{
        position: "absolute", inset: 0, zIndex: 200,
        background: t.overlay || "rgba(0,0,0,0.65)",
        backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: "0 22px",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "100%", maxWidth: 340,
          background: t.bg1, border: `1px solid ${t.borderStrong}`,
          borderRadius: RADIUS.lg, padding: "26px 24px 24px",
          boxShadow: "0 30px 80px rgba(0,0,0,0.6)",
          fontFamily: TYPE.sans,
        }}
      >
        {/* topo */}
        <div style={{
          display: "flex", alignItems: "center", gap: 10, marginBottom: 18,
        }}>
          <span style={{
            flexShrink: 0, width: 36, height: 36, borderRadius: 999,
            border: `1px solid ${t.border}`, background: t.bg0,
            display: "flex", alignItems: "center", justifyContent: "center",
            color: t.ink1,
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <rect x="4" y="11" width="16" height="9" rx="2"></rect>
              <path d="M8 11V8a4 4 0 0 1 8 0v3"></path>
            </svg>
          </span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontSize: 10, color: t.ink3, letterSpacing: "0.18em",
              textTransform: "uppercase", fontWeight: 700,
            }}>{generic ? "Código de acesso" : "Liberar acesso"}</div>
            <div style={{
              fontFamily: TYPE.display, fontSize: 19, color: t.ink1,
              textTransform: "uppercase", lineHeight: 1.05, letterSpacing: "-0.005em",
            }}>{sectionName}</div>
          </div>
          <button onClick={onClose} aria-label="Fechar" style={{
            flexShrink: 0, background: "transparent", border: "none",
            color: t.ink3, cursor: "pointer", padding: 4,
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M6 6l12 12M18 6 6 18"></path>
            </svg>
          </button>
        </div>

        <p style={{
          fontSize: 12.5, lineHeight: 1.6, color: t.ink2, margin: "0 0 16px",
        }}>
          Cole o código de acesso que você recebeu. Ele libera o conteúdo
          neste aparelho e você não precisa digitar de novo.
        </p>

        {/* input do código */}
        <input
          type="text"
          value={code}
          onChange={(e) => { setCode(e.target.value); setError(""); }}
          onKeyDown={(e) => { if (e.key === "Enter") tryRedeem(); }}
          placeholder="Digite seu código"
          autoFocus
          style={{
            width: "100%", padding: "13px 14px",
            background: t.bg0, border: `1px solid ${error ? t.danger : t.border}`,
            borderRadius: RADIUS.md, color: t.ink1,
            fontFamily: TYPE.mono, fontSize: 15, letterSpacing: "0.04em",
            outline: "none", textTransform: "uppercase",
          }}
        />
        {error && (
          <div style={{
            fontSize: 11.5, color: t.danger, marginTop: 8, lineHeight: 1.5,
          }}>{error}</div>
        )}

        {/* desbloquear */}
        <button onClick={tryRedeem} style={{
          width: "100%", marginTop: 14, padding: "13px 16px",
          background: t.ink1, color: t.bg0, border: "none",
          borderRadius: RADIUS.md, cursor: "pointer",
          fontFamily: TYPE.sans, fontSize: 13, fontWeight: 800,
          letterSpacing: "0.10em", textTransform: "uppercase",
        }}>Desbloquear</button>

        {/* separador + comprar — só quando vem de uma seção específica */}
        {!generic && (
          <>
            <div style={{
              display: "flex", alignItems: "center", gap: 12, margin: "18px 0 14px",
            }}>
              <div style={{ flex: 1, height: 1, background: t.border }}></div>
              <span style={{
                fontSize: 10, color: t.ink4, letterSpacing: "0.14em",
                textTransform: "uppercase", fontWeight: 700,
              }}>Ainda não tem</span>
              <div style={{ flex: 1, height: 1, background: t.border }}></div>
            </div>

            <a href={buyUrl} target="_blank" rel="noreferrer" style={{
              display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
              width: "100%", padding: "13px 16px",
              background: "transparent", color: t.ink1,
              border: `1px solid ${t.ink1}`,
              borderRadius: RADIUS.md, cursor: "pointer", boxSizing: "border-box",
              fontFamily: TYPE.sans, fontSize: 13, fontWeight: 800,
              letterSpacing: "0.10em", textTransform: "uppercase",
              textDecoration: "none",
            }}>
              Comprar
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="m5 12h14M13 6l6 6-6 6"></path>
              </svg>
            </a>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { AccessModal });