/* ===== Primeiro acesso: criar a própria senha (14/11) ===============
   Decisão dele: ele cria o usuário com uma senha temporária e entrega
   à pessoa na reunião; no primeiro acesso o app obriga a trocar.

   POR QUE NÃO O CONVITE POR E-MAIL (que ele também pensou)
   Sem servidor de e-mail próprio, o Supabase recusa mandar mensagem
   para endereço que não seja da equipe do projeto ("Email address not
   authorized"). Convite e "esqueci minha senha" não sairiam.
   Fonte: https://supabase.com/docs/guides/auth/auth-smtp
   Quando houver SMTP próprio, o convite entra e esta tela continua
   valendo como rede de segurança.

   O QUE ESTA TELA PROTEGE E O QUE NÃO PROTEGE
   Protege: a senha temporária, que passou por WhatsApp ou papel, deixa
   de valer no primeiro uso.
   Não protege: enquanto ela não for usada, quem tiver aquela senha
   entra. Por isso a senha temporária deve ser entregue na hora e ser
   diferente para cada pessoa.
   ================================================================== */

const SN_MINIMO = 8;

/* Recusa o óbvio. Não é medidor de força: é só barrar o que a pessoa
   digitaria com pressa na frente de todo mundo na reunião. */
function snCritica(nova, repetida, email){
  if(nova.length < SN_MINIMO) return 'A senha precisa de pelo menos ' + SN_MINIMO + ' caracteres.';
  if(nova !== repetida) return 'As duas senhas não são iguais.';
  if(!/[a-zA-Z]/.test(nova) || !/[0-9]/.test(nova)) return 'Misture letras e números.';
  const usuario = String(email||'').split('@')[0].toLowerCase();
  if(usuario && usuario.length > 2 && nova.toLowerCase().indexOf(usuario) >= 0)
    return 'A senha não pode conter o seu e-mail.';
  const obvias = ['12345678','senha123','iunes123','password','11111111','abcd1234'];
  if(obvias.indexOf(nova.toLowerCase()) >= 0) return 'Essa senha é fácil demais de adivinhar.';
  return '';
}

function TrocarSenha({email, nome, onPronto, onSair}){
  const [nova,setNova] = useState('');
  const [rep,setRep] = useState('');
  const [indo,setIndo] = useState(false);
  const [erro,setErro] = useState('');

  const gravar = async () => {
    const critica = snCritica(nova, rep, email);
    if(critica){ setErro(critica); return; }
    setIndo(true); setErro('');
    try{ await bancoDefinirSenha(nova); onPronto(); }
    catch(e){ setErro(e.message || 'Não deu para gravar a senha.'); setIndo(false); }
  };

  return <div className="en-wrap en-so-login">
    <header className="en-top"><span className="en-tag">Primeiro acesso</span></header>
    <div className="en-hero">
      <div className="en-hero-txt">
        <div className="en-brand en-marca-grande">
          <span className="brand-mark">V</span>
          <div><strong>Transportadora Iunes</strong><small>Distribuição de combustíveis</small></div>
        </div>
      </div>
      <section className="en-login">
        <h2>Crie a sua senha</h2>
        <p className="sn-quem">{nome ? nome + ' · ' : ''}{email}</p>
        <p className="en-login-nota sn-topo">A senha que você recebeu era temporária e serve só para esta primeira vez.
          Escolha agora uma que só você saiba.</p>
        <label>Nova senha<input id="sn-1" type="password" value={nova} onChange={e=>setNova(e.target.value)}
          placeholder="pelo menos 8 caracteres" autoComplete="new-password"/></label>
        <label>Repita a nova senha<input id="sn-2" type="password" value={rep} onChange={e=>setRep(e.target.value)}
          placeholder="a mesma de cima" autoComplete="new-password"/></label>
        <button className="primary" onClick={gravar} disabled={indo||!nova||!rep}>{indo?'Gravando...':'Gravar e entrar'}</button>
        {erro && <p className="rs bad en-erro">{erro}</p>}
        <p className="en-login-nota">Letras e números, no mínimo 8 caracteres. Ninguém mais vê esta senha: nem o
          Guilherme, nem o sistema. Se esquecer, ele cria outra temporária e você faz isto de novo.</p>
        <button className="secondary en-demo" onClick={onSair} disabled={indo}>Sair</button>
      </section>
    </div>
    <footer className="en-foot">Sistema de gestão da distribuição · acesso restrito · {new Date().getFullYear()}</footer>
  </div>;
}