/* login.jsx — экран входа */

const LoginView = ({ onSuccess, error: externalError, loading }) => {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPass, setShowPass] = React.useState(false);
  const [error, setError] = React.useState('');
  const [submitting, setSubmitting] = React.useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setSubmitting(true);
    try {
      await window.KB.login(email.trim(), password);
      onSuccess?.();
    } catch (err) {
      setError(err.message || 'Не удалось войти');
    } finally {
      setSubmitting(false);
    }
  };

  const errMsg = error || externalError;

  return (
    <div className="login-page">
      <div className="login-card">
        <div className="login-brand">
          <div className="login-logo">W</div>
          <div>
            <div className="login-brand-name">База знаний</div>
            <div className="login-brand-sub">WYSH</div>
          </div>
        </div>

        <h1 className="login-title">Вход в систему</h1>
        <p className="login-desc">Используйте корпоративный e-mail и пароль, выданный администратором</p>

        <form className="login-form" onSubmit={handleSubmit}>
          <label className="settings-field">
            <span>E-mail</span>
            <input
              type="email"
              autoComplete="username"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="name@company.com"
              required
              disabled={submitting || loading}
            />
          </label>
          <label className="settings-field">
            <span>Пароль</span>
            <div className="login-pass-wrap">
              <input
                type={showPass ? 'text' : 'password'}
                autoComplete="current-password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                required
                disabled={submitting || loading}
              />
              <button
                type="button"
                className="login-pass-toggle"
                onClick={() => setShowPass((v) => !v)}
                tabIndex={-1}
              >
                <Icon name={showPass ? 'x' : 'eye'} size={16} />
              </button>
            </div>
          </label>

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

          <button type="submit" className="btn btn-primary login-submit" disabled={submitting || loading}>
            {submitting || loading ? 'Вход…' : 'Войти'}
          </button>
        </form>
      </div>
    </div>
  );
};

window.LoginView = LoginView;