/* ============================================================
   AuthView — Tela de login / cadastro / recuperação de senha
   Renderizada pelo Root quando não há sessão ativa.
   Visual: institucional Anchieta (azul + dourado), casa com
   o restante do app (tokens já definidos em styles.css).
   ============================================================ */

const { useState, useEffect } = React;

function AuthView({ onAuthenticated }) {
  // mode: 'signin' | 'signup' | 'reset'
  const [mode, setMode]         = useState('signin');
  const [email, setEmail]       = useState('');
  const [password, setPassword] = useState('');
  const [fullName, setFullName] = useState('');
  const [loading, setLoading]   = useState(false);
  const [error, setError]       = useState(null);
  const [info, setInfo]         = useState(null);

  // Limpa mensagens ao trocar de modo
  useEffect(() => { setError(null); setInfo(null); }, [mode]);

  function clientOrFail() {
    const client = window.supabaseClient;
    if (!client) {
      setError('Cliente Supabase não disponível. Recarregue a página.');
      return null;
    }
    return client;
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setError(null);
    setInfo(null);

    const client = clientOrFail();
    if (!client) return;

    setLoading(true);

    if (mode === 'reset') {
      const result = await client.auth.sendPasswordReset(email);
      setLoading(false);
      if (result.error) { setError(result.error.message); return; }
      setInfo('Enviamos um link de redefinição para o seu e-mail.');
      return;
    }

    const result = mode === 'signin'
      ? await client.auth.signIn({ email, password })
      : await client.auth.signUp({ email, password, fullName });

    setLoading(false);

    if (result.error) {
      setError(translateError(result.error.message));
      return;
    }

    // Cadastro com "Confirm email" ligado: não vem session, só user.
    if (mode === 'signup' && !result.session) {
      setInfo('Cadastro criado! Verifique seu e-mail para confirmar a conta antes de entrar.');
      return;
    }

    // Sucesso: deixa o Root reagir (ele também escuta onAuthChange)
    onAuthenticated && onAuthenticated(result.session);
  }

  async function handleGoogle() {
    setError(null);
    setInfo(null);
    const client = clientOrFail();
    if (!client) return;
    const result = await client.auth.signInWithGoogle();
    if (result.error) setError(result.error.message);
    // Em OAuth o retorno é via redirect — nada mais a fazer aqui.
  }

  const title =
    mode === 'signin' ? 'Entrar na sua conta' :
    mode === 'signup' ? 'Criar nova conta' :
                        'Recuperar senha';

  const subtitle =
    mode === 'signin' ? 'Use seu e-mail e senha para acessar o cadastro de POPs.' :
    mode === 'signup' ? 'Preencha os dados abaixo para começar a usar o sistema.' :
                        'Informe seu e-mail e enviaremos um link de redefinição.';

  return (
    <div className="auth-view">
      <div className="auth-bg" aria-hidden="true" />

      <div className="auth-card">
        <div className="auth-card__head">
          <div className="auth-card__brand">
            <span className="auth-card__dot" />
            <span className="auth-card__brand-text">Cadastro de POP</span>
          </div>
          <h1 className="auth-card__title">{title}</h1>
          <p className="auth-card__subtitle">{subtitle}</p>
        </div>

        <form onSubmit={handleSubmit} className="auth-form" noValidate>
          {mode === 'signup' && (
            <label className="auth-field">
              <span className="auth-field__label">Nome completo</span>
              <input
                className="input"
                type="text"
                value={fullName}
                onChange={e => setFullName(e.target.value)}
                placeholder="Ex.: Maria Silva"
                required
                autoComplete="name"
              />
            </label>
          )}

          <label className="auth-field">
            <span className="auth-field__label">E-mail</span>
            <input
              className="input"
              type="email"
              value={email}
              onChange={e => setEmail(e.target.value)}
              placeholder="voce@anchieta.br"
              required
              autoComplete="email"
            />
          </label>

          {mode !== 'reset' && (
            <label className="auth-field">
              <span className="auth-field__label-row">
                <span className="auth-field__label">Senha</span>
                {mode === 'signin' && (
                  <button
                    type="button"
                    className="auth-link"
                    onClick={() => setMode('reset')}
                  >
                    Esqueci minha senha
                  </button>
                )}
              </span>
              <input
                className="input"
                type="password"
                value={password}
                onChange={e => setPassword(e.target.value)}
                placeholder={mode === 'signup' ? 'Mínimo 6 caracteres' : '••••••••'}
                required
                minLength={6}
                autoComplete={mode === 'signin' ? 'current-password' : 'new-password'}
              />
            </label>
          )}

          {error && <div className="auth-alert auth-alert--error">{error}</div>}
          {info  && <div className="auth-alert auth-alert--info">{info}</div>}

          <button
            type="submit"
            className="btn btn--primary auth-submit"
            disabled={loading}
          >
            {loading ? 'Aguarde…' :
              mode === 'signin' ? 'Entrar' :
              mode === 'signup' ? 'Criar conta' :
                                  'Enviar link de redefinição'}
          </button>
        </form>

        {mode !== 'reset' && (
          <>
            <div className="auth-divider"><span>ou</span></div>

            <button
              type="button"
              className="btn btn--ghost auth-google"
              onClick={handleGoogle}
              disabled={loading}
            >
              <GoogleIcon />
              Entrar com Google
            </button>
          </>
        )}

        <div className="auth-switch">
          {mode === 'signin' && (
            <>Não tem conta?{' '}
              <button type="button" className="auth-link" onClick={() => setMode('signup')}>
                Criar agora
              </button>
            </>
          )}
          {mode === 'signup' && (
            <>Já tem conta?{' '}
              <button type="button" className="auth-link" onClick={() => setMode('signin')}>
                Entrar
              </button>
            </>
          )}
          {mode === 'reset' && (
            <button type="button" className="auth-link" onClick={() => setMode('signin')}>
              ← Voltar para login
            </button>
          )}
        </div>
      </div>

      <p className="auth-foot">
        © UniAnchieta — Cadastro de POPs
      </p>
    </div>
  );
}

// Traduz mensagens comuns do Supabase pra PT-BR.
function translateError(msg) {
  if (!msg) return 'Algo deu errado. Tente novamente.';
  const m = msg.toLowerCase();
  if (m.includes('invalid login credentials')) return 'E-mail ou senha incorretos.';
  if (m.includes('email not confirmed'))       return 'Confirme seu e-mail antes de entrar. Verifique sua caixa de entrada.';
  if (m.includes('user already registered'))   return 'Este e-mail já está cadastrado. Tente entrar.';
  if (m.includes('password should be at least')) return 'Senha muito curta (mínimo 6 caracteres).';
  if (m.includes('unable to validate email'))  return 'E-mail inválido.';
  if (m.includes('rate limit'))                return 'Muitas tentativas. Aguarde alguns minutos e tente novamente.';
  return msg;
}

// SVG inline do logo do Google
function GoogleIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
      <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.91c1.7-1.57 2.69-3.88 2.69-6.62z"/>
      <path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.91-2.26c-.81.54-1.84.86-3.05.86-2.34 0-4.32-1.58-5.03-3.71H.96v2.33A9 9 0 0 0 9 18z"/>
      <path fill="#FBBC05" d="M3.97 10.71A5.41 5.41 0 0 1 3.68 9c0-.59.1-1.17.29-1.71V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.82.96 4.04l3.01-2.33z"/>
      <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.46.89 11.43 0 9 0A9 9 0 0 0 .96 4.96l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58z"/>
    </svg>
  );
}

window.AuthView = AuthView;