// AuthScreen — tela pública de login/cadastro/reset com a marca Solu.
const { useState: useStateAuth, useEffect: useEffectAuth } = React;

// Códigos de erro do callback do Google (texto livre não é refletido — só código).
const CODS_AUTH = ['cancelado', 'google', 'expirado', 'nao_verificado', 'outra_conta', 'sem_convite', 'convite', 'criar', 'externo'];

function AuthScreen({ onAutenticado, idioma, onTrocarIdioma }) {
  const [modo, setModo] = useStateAuth('entrar'); // 'entrar' | 'criar' | 'esqueci' | 'nova-senha'
  const [nome, setNome] = useStateAuth('');
  const [email, setEmail] = useStateAuth('');
  const [senha, setSenha] = useStateAuth('');
  const [senha2, setSenha2] = useStateAuth('');
  const [token, setToken] = useStateAuth('');
  const [resetToken, setResetToken] = useStateAuth('');
  const [resetEnviado, setResetEnviado] = useStateAuth(false);
  const [erro, setErro] = useStateAuth(null);
  const [ocupado, setOcupado] = useStateAuth(false);

  const criar = modo === 'criar';
  const Seletor = window.SeletorIdioma;

  // Na carga: token de reset (do #fragmento, capturado pelo script inline) abre a tela de
  // nova senha; ?auth_erro=<código> mostra erro do Google.
  useEffectAuth(() => {
    try {
      let rt = window.__soluReset || null;
      if (!rt) { const h = (window.location.hash || '').match(/reset=([^&]+)/); if (h) rt = decodeURIComponent(h[1]); }
      const params = new URLSearchParams(window.location.search);
      const cod = params.get('auth_erro');
      const convite = params.get('convite');
      if (rt) {
        try { delete window.__soluReset; } catch (_) {}
        setResetToken(rt);
        setModo('nova-senha');
        window.history.replaceState({}, '', window.location.pathname);
      } else if (convite) {
        // Link mágico: ?convite=CÓDIGO → abre "Criar conta" com o código já preenchido (zero digitação)
        setToken(convite.trim().toUpperCase());
        setModo('criar');
        window.history.replaceState({}, '', window.location.pathname);
      } else if (cod) {
        setErro(window.t('auth.erro.' + (CODS_AUTH.indexOf(cod) >= 0 ? cod : 'fallback')));
        if (cod === 'sem_convite' || cod === 'convite') setModo('criar');
        window.history.replaceState({}, '', window.location.pathname);
      }
    } catch (_) {}
  }, []);

  const trocarModo = (novo) => {
    setModo(novo);
    setErro(null);
    setResetEnviado(false);
  };

  const entrarComGoogle = () => {
    if (criar && !token.trim()) {
      setErro(window.t('auth.googleSemToken'));
      return;
    }
    const base = '/api/auth/google';
    window.location.href = criar ? `${base}?token=${encodeURIComponent(token.trim())}` : base;
  };

  const enviar = async (e) => {
    e.preventDefault();
    if (ocupado) return;
    setErro(null);
    const api = window.SoluApi;

    if (modo === 'nova-senha') {
      if (senha.length < 8) { setErro(window.t('auth.senhaCurta')); return; }
      if (senha !== senha2) { setErro(window.t('auth.senhasNaoConferem')); return; }
    }

    setOcupado(true);
    try {
      if (modo === 'esqueci') {
        await api.resetSolicitar(email.trim());
        setResetEnviado(true);
        setOcupado(false);
        return;
      }
      if (modo === 'nova-senha') {
        const u = await api.resetConfirmar(resetToken, senha);
        onAutenticado(u);
        return;
      }
      const u = criar
        ? await api.cadastro(nome.trim(), email.trim(), senha, token.trim())
        : await api.login(email.trim(), senha);
      onAutenticado(u);
    } catch (err) {
      // login/cadastro retornam CÓDIGO em err.message (ex.: 'credenciais'); reset ainda manda texto pt.
      const cod = err.message;
      const srv = ['credenciais', 'campos', 'rate', 'nome', 'email_invalido', 'senha_curta', 'token_faltando', 'email_existe', 'convite', 'criar_falhou'];
      setErro(srv.indexOf(cod) >= 0 ? window.t('auth.srv.' + cod, { min: err.min }) : (cod || window.t('auth.erroGenerico')));
      setOcupado(false);
    }
  };

  const seletorEl = Seletor ? <Seletor idioma={idioma} onTrocar={onTrocarIdioma} className="seletor-auth" /> : null;

  // --- Modo: esqueci a senha (pedir link) ---
  if (modo === 'esqueci') {
    return (
      <div className="auth-bg">
        <div className="auth-card">
          {seletorEl}
          <div className="auth-marca"><SoluLogo /><div className="auth-tagline">{window.t('tagline')}</div></div>
          <h2 className="auth-titulo">{window.t('auth.esqueciTitulo')}</h2>
          {resetEnviado ? (
            <>
              <div className="auth-convite-aviso">{window.t('auth.esqueciEnviado')}</div>
              <button type="button" className="auth-enviar" onClick={() => trocarModo('entrar')}>{window.t('auth.voltarEntrar')}</button>
            </>
          ) : (
            <form className="auth-form" onSubmit={enviar}>
              <p className="auth-sub">{window.t('auth.esqueciSub')}</p>
              <label className="auth-campo">
                <span>{window.t('auth.email')}</span>
                <input type="email" value={email} autoComplete="email" inputMode="email"
                       onChange={(e) => setEmail(e.target.value)} placeholder="voce@email.com" />
              </label>
              {erro && <div className="auth-erro">{erro}</div>}
              <button type="submit" className="auth-enviar" disabled={ocupado}>
                {ocupado ? window.t('auth.enviando') : window.t('auth.enviarLink')}
              </button>
              <div className="auth-rodape">
                <button type="button" onClick={() => trocarModo('entrar')}>{window.t('auth.voltarEntrarMin')}</button>
              </div>
            </form>
          )}
        </div>
      </div>
    );
  }

  // --- Modo: criar nova senha (veio do link do email) ---
  if (modo === 'nova-senha') {
    return (
      <div className="auth-bg">
        <div className="auth-card">
          {seletorEl}
          <div className="auth-marca"><SoluLogo /><div className="auth-tagline">{window.t('tagline')}</div></div>
          <h2 className="auth-titulo">{window.t('auth.novaSenhaTitulo')}</h2>
          <form className="auth-form" onSubmit={enviar}>
            <label className="auth-campo">
              <span>{window.t('auth.novaSenha')}</span>
              <input type="password" value={senha} autoComplete="new-password"
                     onChange={(e) => setSenha(e.target.value)} placeholder={window.t('auth.senhaPhCriar')} />
            </label>
            <label className="auth-campo">
              <span>{window.t('auth.repitaSenha')}</span>
              <input type="password" value={senha2} autoComplete="new-password"
                     onChange={(e) => setSenha2(e.target.value)} placeholder={window.t('auth.repitaPlaceholder')} />
            </label>
            {erro && <div className="auth-erro">{erro}</div>}
            <button type="submit" className="auth-enviar" disabled={ocupado}>
              {ocupado ? window.t('auth.salvando') : window.t('auth.salvarNovaSenha')}
            </button>
          </form>
        </div>
      </div>
    );
  }

  // --- Modos entrar / criar ---
  return (
    <div className="auth-bg">
      <div className="auth-card">
        {seletorEl}
        <div className="auth-marca">
          <SoluLogo />
          <div className="auth-tagline">{window.t('tagline')}</div>
        </div>

        <div className="auth-tabs">
          <button type="button" className={!criar ? 'on' : ''} onClick={() => trocarModo('entrar')}>{window.t('auth.entrar')}</button>
          <button type="button" className={criar ? 'on' : ''} onClick={() => trocarModo('criar')}>{window.t('auth.criarConta')}</button>
        </div>

        {criar && (
          <div className="auth-convite-aviso">{window.t('auth.conviteAviso')}</div>
        )}

        <form className="auth-form" onSubmit={enviar}>
          {criar && (
            <label className="auth-campo">
              <span>{window.t('auth.seuNome')}</span>
              <input type="text" value={nome} autoComplete="name"
                     onChange={(e) => setNome(e.target.value)} placeholder={window.t('auth.nomePlaceholder')} />
            </label>
          )}

          <label className="auth-campo">
            <span>{window.t('auth.email')}</span>
            <input type="email" value={email} autoComplete="email" inputMode="email"
                   onChange={(e) => setEmail(e.target.value)} placeholder="voce@email.com" />
          </label>

          <label className="auth-campo">
            <span>{window.t('auth.senha')}</span>
            <input type="password" value={senha}
                   autoComplete={criar ? 'new-password' : 'current-password'}
                   onChange={(e) => setSenha(e.target.value)}
                   placeholder={criar ? window.t('auth.senhaPhCriar') : window.t('auth.senhaPhEntrar')} />
          </label>

          {criar && (
            <label className="auth-campo">
              <span>{window.t('auth.codigoConvite')}</span>
              <input type="text" value={token} autoCapitalize="characters" autoComplete="off"
                     onChange={(e) => setToken(e.target.value.toUpperCase())}
                     placeholder="SOLU-XXXX-XXXX" className="auth-token" />
            </label>
          )}

          {erro && <div className="auth-erro">{erro}</div>}

          <button type="submit" className="auth-enviar" disabled={ocupado}>
            {ocupado ? window.t('auth.instante') : (criar ? window.t('auth.botaoCriar') : window.t('auth.botaoEntrar'))}
          </button>
        </form>

        {!criar && (
          <div className="auth-esqueci">
            <button type="button" onClick={() => trocarModo('esqueci')}>{window.t('auth.esqueci')}</button>
          </div>
        )}

        <div className="auth-ou"><span>{window.t('auth.ou')}</span></div>
        <button type="button" className="auth-google" onClick={entrarComGoogle}>
          <span className="auth-google-g">G</span> {criar ? window.t('auth.googleCriar') : window.t('auth.googleEntrar')}
        </button>

        {!criar && (
          <div className="auth-rodape">
            {window.t('auth.semConta')} <button type="button" onClick={() => trocarModo('criar')}>{window.t('auth.criarComConvite')}</button>
          </div>
        )}
      </div>
    </div>
  );
}

window.AuthScreen = AuthScreen;