// Login screen — username + password (API-backed)
const { useState: useStateL } = React;

function LoginScreen({ onLogin }) {
  const [username, setUsername] = useStateL('');
  const [password, setPassword] = useStateL('');
  const [showPass, setShowPass] = useStateL(false);
  const [error, setError] = useStateL(null);
  const [shake, setShake] = useStateL(false);
  const [busy, setBusy] = useStateL(false);

  const submit = async () => {
    if (busy) return;
    setBusy(true);
    setError(null);
    try {
      await onLogin(username.trim(), password);
    } catch (e) {
      const code = e?.error;
      setError(
        code === 'locked'
          ? 'Tài khoản đã bị tạm khóa. Liên hệ quản lý.'
          : 'Sai tên đăng nhập hoặc mật khẩu'
      );
      setShake(true);
      setTimeout(() => setShake(false), 400);
    } finally {
      setBusy(false);
    }
  };

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

  return (
    <div className="screen login">
      <div className="login-brand">
        <div className="brand-mark">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="9" />
            <path d="M12 7v5l3 2" />
          </svg>
        </div>
        <div className="brand-name">AiiCafe</div>
        <div className="brand-tag">Hệ thống chấm công nội bộ</div>
      </div>

      <div className="login-body">
        <h2 className="login-title">Đăng nhập</h2>
        <div className="dim" style={{ fontSize: 13, marginTop: -8 }}>Sử dụng tài khoản do quản lý cấp.</div>

        <div className={'login-form ' + (shake ? 'shake' : '')}>
          <label className="field">
            <span className="field-label">Tên đăng nhập</span>
            <input
              type="text"
              autoCapitalize="off"
              autoCorrect="off"
              value={username}
              placeholder="vd: thuha"
              onChange={(e) => { setUsername(e.target.value); setError(null); }}
              onKeyDown={onKey}
            />
          </label>

          <label className="field">
            <span className="field-label">Mật khẩu</span>
            <div className="pwd-wrap">
              <input
                type={showPass ? 'text' : 'password'}
                value={password}
                placeholder="••••••"
                onChange={(e) => { setPassword(e.target.value); setError(null); }}
                onKeyDown={onKey}
              />
              <button
                type="button"
                className="pwd-toggle"
                onClick={() => setShowPass(!showPass)}
                tabIndex={-1}
              >{showPass ? 'Ẩn' : 'Hiện'}</button>
            </div>
          </label>

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

        <button className="big-btn primary" onClick={submit} disabled={busy}>
          {busy ? 'Đang đăng nhập…' : 'Đăng nhập'}
        </button>

        <div className="login-helper-hint">
          Lần đầu? Đăng nhập bằng tài khoản <strong>admin</strong> được cấp.
        </div>

        <div className="login-foot">Phiên bản 2.4.1 · AiiCafe HCM</div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;