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

window.LoginScreen = function LoginScreen({ onLogin }) {
  const [badge, setBadge] = useStateLogin('');
  const [error, setError] = useStateLogin('');
  const [loading, setLoading] = useStateLogin(false);

  const ERROR_MESSAGES = {
    cracha_nao_encontrado: 'Crachá não encontrado. Tente novamente.',
    perfil_nao_reconhecido: 'Perfil não reconhecido para este crachá.',
    organograma_indisponivel: 'Serviço temporariamente indisponível. Tente em instantes.',
  };

  const submit = async (e) => {
    e.preventDefault();
    const b = badge.trim();
    if (!b) { setError('Bipe ou digite o seu crachá para continuar.'); return; }
    setError('');
    setLoading(true);
    try {
      const session = await window.IntradayAPI.login(b);
      onLogin(session);
    } catch (err) {
      setError(ERROR_MESSAGES[err.message] || 'Erro ao autenticar. Tente novamente.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-page">
      <form className="login-card" onSubmit={submit}>
        <img src="assets/logos/logo-shopper.png" alt="Shopper" className="login-logo" />
        <h1 className="login-title">Intraday<br />Performance Operacional</h1>
        <p className="login-subtitle">
          Bipe seu crachá para acessar os resultados.
        </p>
        <div className="login-input-wrap">
          <input
            className="login-input"
            placeholder="Ex: 9MpISmUQtp"
            value={badge}
            onChange={(e) => setBadge(e.target.value)}
            autoFocus
            spellCheck="false"
            autoComplete="off"
            disabled={loading}
          />
        </div>
        <button type="submit" className="login-cta" disabled={loading}>
          {loading ? 'Verificando...' : 'Acessar'}
        </button>
        {error && <div className="login-error">{error}</div>}
      </form>
    </div>
  );
};