/* global React */
const { useState: _u } = React;

// Maps common Supabase auth errors to pt-BR.
const friendlyError = (err) => {
  const msg = err?.message || String(err || "");
  if (/invalid login credentials/i.test(msg)) return "Email ou senha incorretos.";
  if (/user already registered/i.test(msg)) return "Esse email já tem conta. Entre ao invés de criar.";
  if (/password should be at least/i.test(msg)) return "A senha precisa ter no mínimo 6 caracteres.";
  if (/email not confirmed/i.test(msg)) return "Confirme seu email antes de entrar (cheque sua caixa).";
  if (/rate limit/i.test(msg)) return "Muitas tentativas. Tente novamente em alguns minutos.";
  if (/unable to validate email address/i.test(msg)) return "Email inválido.";
  if (/signups not allowed/i.test(msg)) return "Cadastros estão desabilitados no momento.";
  return msg || "Algo deu errado.";
};

// ============ SETUP HINT (config.js missing) ============
const SetupHint = () => (
  <div className="login-shell">
    <div className="login-card">
      <div className="login-brand">
        <div className="login-mark">T</div>
        <h1 className="login-title">Configuração faltando</h1>
        <p className="login-sub">
          Não encontrei as credenciais do Supabase.
        </p>
      </div>
      <ol style={{ margin: 0, paddingLeft: 18, color: "var(--text-secondary)", fontSize: 13, lineHeight: 1.6 }}>
        <li>Copie <code>frontend/config.example.js</code> para <code>frontend/config.js</code></li>
        <li>Cole sua <strong>Project URL</strong> e <strong>anon key</strong> (do painel Supabase → Project Settings → API)</li>
        <li>Recarregue esta página</li>
      </ol>
      <p className="login-footnote">
        <code>config.js</code> é gitignored — suas chaves ficam só na sua máquina.
      </p>
    </div>
  </div>
);

// ============ LOGIN / SIGNUP SCREEN ============
const LoginScreen = ({ sb }) => {
  const [mode, setMode] = _u("signin"); // "signin" | "signup"
  const [name, setName] = _u("");
  const [email, setEmail] = _u("");
  const [password, setPassword] = _u("");
  const [loading, setLoading] = _u(false);
  const [error, setError] = _u("");
  const [info, setInfo] = _u("");

  if (!sb) return <SetupHint />;

  const flipMode = () => {
    setMode(mode === "signin" ? "signup" : "signin");
    setError("");
    setInfo("");
  };

  const submit = async (e) => {
    e?.preventDefault?.();
    setError("");
    setInfo("");
    const cleanEmail = email.trim().toLowerCase();
    if (!cleanEmail || !password) {
      setError("Email e senha são obrigatórios.");
      return;
    }
    if (mode === "signup" && !name.trim()) {
      setError("Digite seu nome.");
      return;
    }

    setLoading(true);
    try {
      if (mode === "signup") {
        const { data, error } = await sb.auth.signUp({
          email: cleanEmail,
          password,
          options: {
            data: { full_name: name.trim() },
            emailRedirectTo: window.location.origin,
          },
        });
        if (error) throw error;
        if (data.session) {
          // Auto-login (email confirmation disabled in project settings)
          return; // App will gate on session via the global listener
        }
        // Confirmation required
        setInfo("Conta criada. Cheque seu email pra confirmar e depois faça login.");
        setMode("signin");
        setPassword("");
      } else {
        const { error } = await sb.auth.signInWithPassword({
          email: cleanEmail,
          password,
        });
        if (error) throw error;
        // App will gate on session via the global listener
      }
    } catch (err) {
      setError(friendlyError(err));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-shell">
      <form className="login-card" onSubmit={submit} noValidate>
        <div className="login-brand">
          <div className="login-mark">T</div>
          <h1 className="login-title">Tarefas</h1>
          <p className="login-sub">
            {mode === "signin" ? "Entre pra continuar." : "Crie sua conta."}
          </p>
        </div>

        <div className="login-fields">
          {mode === "signup" && (
            <label className="login-label">
              <span>Nome completo</span>
              <input
                className="login-input"
                type="text"
                autoFocus
                autoComplete="name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="João Pereira"
              />
            </label>
          )}

          <label className="login-label">
            <span>Email</span>
            <input
              className="login-input"
              type="email"
              autoComplete="email"
              autoFocus={mode === "signin"}
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="voce@empresa.com"
            />
          </label>

          <label className="login-label">
            <span>Senha {mode === "signup" && <em>(mín. 6 caracteres)</em>}</span>
            <input
              className="login-input"
              type="password"
              autoComplete={mode === "signup" ? "new-password" : "current-password"}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </label>

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

          <button
            className="btn"
            data-variant="primary"
            type="submit"
            disabled={loading}
            style={{ width: "100%", height: 36, justifyContent: "center" }}
          >
            {loading ? (mode === "signup" ? "Criando…" : "Entrando…") : mode === "signin" ? "Entrar" : "Criar conta"}
          </button>

          <button type="button" className="login-toggle" onClick={flipMode}>
            {mode === "signin" ? "Não tem conta? Criar uma" : "Já tem conta? Entrar"}
          </button>
        </div>
      </form>
    </div>
  );
};

Object.assign(window, { LoginScreen });