/* ============================================================
   auth.jsx — Tela de login / cadastro (modo Supabase)
   ============================================================ */
function AuthScreen({ onAuthed }) {
  const [mode, setMode] = React.useState('signin'); // 'signin' | 'signup'
  const [email, setEmail] = React.useState('');
  const [senha, setSenha] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [msg, setMsg] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    setErr(''); setMsg(''); setBusy(true);
    try {
      if (mode === 'signin') {
        await window.crmStore.signIn(email.trim(), senha);
        onAuthed();
      } else {
        const res = await window.crmStore.signUp(email.trim(), senha);
        if (res && res.session) { onAuthed(); }
        else { setMsg('Conta criada! Verifique seu e-mail para confirmar e depois entre.'); setMode('signin'); }
      }
    } catch (e2) {
      const m = (e2 && e2.message) || 'Não foi possível concluir.';
      setErr(/invalid login/i.test(m) ? 'E-mail ou senha incorretos.' : m);
    } finally { setBusy(false); }
  };

  return (
    <div className="auth-screen app-bg">
      <div className="auth-card fade-up">
        <div className="auth-brand"><LogoImg height={40} /></div>
        <h1 className="auth-title">{mode === 'signin' ? 'Entrar' : 'Criar conta'}</h1>
        <p className="auth-sub">
          {mode === 'signin'
            ? 'Acesse o painel comercial da ' + window.brandName() + '.'
            : 'Crie seu acesso para gerenciar o pipeline.'}
        </p>

        <form className="auth-form" onSubmit={submit}>
          <Field label="E-mail" icon="mail" type="email" placeholder="voce@empresa.com"
            value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" required full />
          <Field label="Senha" icon="lock" type="password" placeholder="••••••••"
            value={senha} onChange={(e) => setSenha(e.target.value)} autoComplete={mode === 'signin' ? 'current-password' : 'new-password'} required full />

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

          <Button type="submit" full size="lg" disabled={busy}
            style={busy ? { opacity: .6, pointerEvents: 'none' } : {}}>
            {busy ? 'Aguarde…' : (mode === 'signin' ? 'Entrar' : 'Criar conta')}
          </Button>
        </form>

        <div className="auth-switch">
          <span className="auth-restrito"><Icon name="lock" size={13} /> Acesso restrito — fale com o administrador.</span>
        </div>
      </div>
      <div className="auth-foot">Dados sincronizados com segurança · {window.brandName()}</div>
    </div>
  );
}

Object.assign(window, { AuthScreen });