/* global React, Icon, supa */

function Login({ onLogin }) {
  const [email, setEmail] = React.useState('mariana@btmsigma.com');
  const [senha, setSenha] = React.useState('');
  const [showSenha, setShowSenha] = React.useState(false);
  const [lembrar, setLembrar] = React.useState(true);
  const [erro, setErro] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e?.preventDefault();
    if (!email || !senha) {
      setErro('Preencha e-mail e senha');
      return;
    }
    setErro(null);
    setLoading(true);
    try {
      const { data, error } = await window.supa.auth.signInWithPassword({
        email: email.trim(),
        password: senha,
      });
      if (error) {
        const msg = error.message || '';
        if (/invalid login credentials/i.test(msg)) {
          setErro('E-mail ou senha incorretos. Verifique se o usuário foi criado em Authentication → Users no Supabase.');
        } else if (/email not confirmed/i.test(msg)) {
          setErro('E-mail ainda não confirmado. Confirme no painel Supabase ou desative "Confirm email" em Auth → Providers.');
        } else {
          setErro(msg || 'Erro ao entrar');
        }
        return;
      }
      onLogin({ email: data.user.email, lembrar, user: data.user, session: data.session });
    } catch (err) {
      setErro(err?.message || 'Falha de conexão com o servidor.');
    } finally {
      setLoading(false);
    }
  };

  const onKey = (e) => { if (e.key === 'Enter') submit(); };

  return (
    <div className="login-wrap">
      {/* Esquerda — Branding com imagem */}
      <div className="login-left">
        <div className="login-brand">
          <img className="sigma-logo" src="assets/sigma-logo.jpeg" alt="Sigma Soluções" />
          <div className="text">
            <div className="name">SGL</div>
            <div className="org">Sistema de Gestão de Licitações</div>
          </div>
        </div>

        <div className="login-hero">
          <div className="eyebrow-lime">Plataforma BTM Sigma · v2.4.0</div>
          <h2>
            Gestão completa de <strong>licitações públicas</strong> em uma única plataforma.
          </h2>
          <p className="tagline">
            Da prospecção automática ao pagamento — captura, OCR, precificação blindada com regra do INNER, disputa ao vivo, empenhos e auditoria com trilha imutável. Tudo conectado por IA.
          </p>
        </div>

        <div className="login-footer">
          <span className="dot"></span>
          <span>PNCP · Comprasnet · LICITANET · AMMLICITA · LICITAR — todos online</span>
        </div>
      </div>

      {/* Direita — Formulário */}
      <div className="login-right">
        <form className="login-card" onSubmit={submit}>
          <h1>Bem-vinda de volta</h1>
          <div className="sub">Acesse o painel SGL · BTM Serviços e Comércio LTDA</div>

          {erro && (
            <div className="login-error">
              <Icon name="warn" size={13} />
              <span>{erro}</span>
            </div>
          )}

          <div className="field">
            <div className="field-label">E-MAIL CORPORATIVO</div>
            <div className="input-wrap">
              <span className="ico"><Icon name="mail" size={14} /></span>
              <input
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                onKeyDown={onKey}
                placeholder="seu@btmsigma.com"
                autoComplete="email"
                autoFocus
              />
            </div>
          </div>

          <div className="field">
            <div className="field-label">SENHA</div>
            <div className="input-wrap">
              <span className="ico"><Icon name="shield" size={14} /></span>
              <input
                type={showSenha ? 'text' : 'password'}
                value={senha}
                onChange={e => setSenha(e.target.value)}
                onKeyDown={onKey}
                placeholder="••••••••••••"
                autoComplete="current-password"
              />
              <button type="button" className="toggle-eye" onClick={() => setShowSenha(v => !v)} title={showSenha ? 'Ocultar' : 'Mostrar'}>
                <Icon name="eye" size={13} />
              </button>
            </div>
          </div>

          <div className="login-row">
            <label className="remember">
              <input type="checkbox" checked={lembrar} onChange={e => setLembrar(e.target.checked)} />
              <span>Lembrar-me</span>
            </label>
            <a href="#" onClick={e => { e.preventDefault(); alert('Envie e-mail para suporte@btmsigma.com para redefinir sua senha.'); }}>Esqueci a senha</a>
          </div>

          <button className="login-submit" type="submit" disabled={loading}>
            {loading ? <><span className="spinner"></span> Entrando...</> : <><Icon name="bolt" size={14} /> Entrar no painel</>}
          </button>

          <div className="login-divider">ou</div>

          <div className="login-alt">
            <button type="button" className="login-alt-btn" onClick={() => alert('SSO Google Workspace — disponível após habilitar a integração no M13 Configurações.')}>
              <Icon name="cloud" size={14} /> Continuar com Google Workspace
            </button>
            <button type="button" className="login-alt-btn" onClick={() => alert('Login por Certificado Digital ICP-Brasil A1/A3 — disponível após configurar o certificado no M13.')}>
              <Icon name="shield" size={14} /> Certificado Digital ICP-Brasil
            </button>
          </div>

          <div className="login-bottom">
            SGL v2.4.0 · <span>● ONLINE</span>
            <div className="login-credit">
              Desenvolvido por <strong>JuFlow Digital</strong>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}

window.Login = Login;