/* ============================================================
   EDUCARE — Primeiro acesso: trocar a senha provisória

   Quem compra pela página de vendas nunca passou pelo cadastro: a conta
   nasce do aviso de pagamento e a senha inicial é o CPF informado no
   checkout. Isso é conveniência de entrada, não credencial: CPF é
   semipúblico no Brasil e esta conta guarda prontuário de criança.

   Por isso a troca é obrigatória, e não um lembrete. Enquanto
   user_metadata.senha_provisoria for verdadeiro, esta tela fica no
   lugar do app inteiro. Não existe "depois eu troco": bastaria adiar
   uma vez para o CPF virar senha permanente de um prontuário.

   A conta JÁ ESTÁ ativa quando chega aqui, e o pagamento já foi
   aplicado. Esta tela não decide nada de cobrança.
   ============================================================ */
(function () {
  const { useState } = React;
  const Icon = window.Icon;
  const Logo = window.Logo;

  const MINIMO = 8;

  /* As regras ficam separadas da tela porque são o que precisa de
     teste: recusar a senha igual ao CPF é o ponto inteiro daqui. */
  function conferir(nova, repetida, documento) {
    if (nova.length < MINIMO) return `A senha precisa ter pelo menos ${MINIMO} caracteres.`;
    if (nova !== repetida) return "As duas senhas precisam ser iguais.";

    const digitos = String(documento || "").replace(/\D/g, "");
    if (digitos && nova.replace(/\D/g, "") === digitos) {
      return "Escolha uma senha diferente do seu CPF. Ele foi só a chave de entrada.";
    }
    return "";
  }

  function PrimeiroAcesso({ user, onSair, recuperacao }) {
    const [nova, setNova] = useState("");
    const [repetida, setRepetida] = useState("");
    const [ver, setVer] = useState(false);
    const [erro, setErro] = useState("");
    const [salvando, setSalvando] = useState(false);

    const meta = (user && user.user_metadata) || {};
    const primeiroNome = String(meta.name || "").trim().split(/\s+/)[0];

    async function salvar(e) {
      e.preventDefault();
      const problema = conferir(nova, repetida, meta.documento);
      if (problema) { setErro(problema); return; }

      setErro(""); setSalvando(true);
      try {
        /* A senha e a marca caem juntas, na mesma chamada. Separadas,
           uma falha no meio deixaria a conta com senha nova e a tela
           ainda exigindo troca, ou pior, o contrário. */
        const { error } = await window.sb.auth.updateUser({
          password: nova,
          /* documento: null tira o CPF do cadastro (ele viaja no token de
             sessão); só servia para recusar a senha igual a ele, aqui. */
          data: { senha_provisoria: false, documento: null },
        });
        if (error) throw error;
        /* onAuthStateChange recebe o usuário atualizado e o app segue
           sozinho para o painel. */
      } catch (e2) {
        console.error("[PrimeiroAcesso] falha ao trocar a senha:", e2);
        setErro((e2 && e2.message) || "Não foi possível salvar a senha agora. Tente de novo.");
        setSalvando(false);
      }
    }

    return (
      <div className="auth-split">
        <main className="auth-pane" style={{ gridColumn: "1 / -1" }}>
          <div className="auth-card">
            <div className="auth-head">
              <Logo size={50} />
              <h1 className="login-title">
                {recuperacao ? "Crie uma nova senha" : (primeiroNome ? `Bem-vinda, ${primeiroNome}` : "Sua conta está pronta")}
              </h1>
              <p className="login-sub">
                {recuperacao
                  ? "Você pediu para redefinir a senha. Escolha uma nova para entrar no Educare."
                  : "Seu plano já está ativo. Antes de abrir o prontuário, crie uma senha só sua: você entrou com o CPF, e ele não serve como senha de quem guarda dado de saúde."}
              </p>
            </div>

            <form onSubmit={salvar}>
              <div className="field">
                <label>Nova senha</label>
                <div className="input-shell">
                  <Icon name="lock" size={19} />
                  <input
                    type={ver ? "text" : "password"}
                    placeholder="pelo menos 8 caracteres"
                    value={nova}
                    onChange={(e) => setNova(e.target.value)}
                    autoComplete="new-password"
                    autoFocus
                  />
                  <button type="button" className="icon-btn-plain" onClick={() => setVer(!ver)} aria-label="Mostrar senha">
                    <Icon name={ver ? "eyeOff" : "eye"} size={19} />
                  </button>
                </div>
              </div>

              <div className="field">
                <label>Repita a nova senha</label>
                <div className="input-shell">
                  <Icon name="lock" size={19} />
                  <input
                    type={ver ? "text" : "password"}
                    placeholder="••••••••"
                    value={repetida}
                    onChange={(e) => setRepetida(e.target.value)}
                    autoComplete="new-password"
                  />
                </div>
              </div>

              {erro && (
                <p className="form-err" role="alert" style={{ display: "flex", alignItems: "center", gap: 7, color: "#EF4444", fontWeight: 700, fontSize: 13.5, margin: "2px 0 8px" }}>
                  <Icon name="x" size={15} /> {erro}
                </p>
              )}

              <button type="submit" className="btn btn-primary btn-block" style={{ marginTop: 6 }} disabled={salvando}>
                {salvando ? "Salvando…" : "Salvar e entrar"} <Icon name="arrowRight" size={18} />
              </button>
            </form>

            {/* Saída, para ninguém ficar preso numa conta que não é dela. */}
            <button className="btn btn-ghost btn-block" type="button" style={{ marginTop: 10 }} onClick={onSair}>
              Sair da conta
            </button>

            <p className="login-foot" style={{ display: "flex", gap: 7, justifyContent: "center", alignItems: "center", marginTop: 14 }}>
              <Icon name="lock" size={14} style={{ color: "var(--text-3)" }} />
              <span style={{ fontSize: 12.5, color: "var(--text-3)" }}>Dados de saúde protegidos conforme a LGPD</span>
            </p>
          </div>
        </main>
      </div>
    );
  }

  /* Verdadeiro só quando a conta nasceu de um pagamento e ainda está
     com a senha de entrada. Qualquer outra conta passa direto. */
  const precisaTrocarSenha = (user) =>
    !!(user && user.user_metadata && user.user_metadata.senha_provisoria === true);

  window.PrimeiroAcesso = PrimeiroAcesso;
  window.EducarePrimeiroAcesso = { conferir, precisaTrocarSenha, MINIMO };
})();