window.LoginPage = ({ onLogin }) => {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPw, setShowPw] = React.useState(false);
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault(); setError(''); setLoading(true);
    try {
      const res = await API.get('users', { limit:100 });
      const users = res.data || [];
      const user = users.find(u => u.username===username && u.password===password && u.status==='active');
      if (!user) { setError('Tên đăng nhập hoặc mật khẩu không đúng.'); setLoading(false); return; }
      await API.patch('users', user.id, { last_login: Date.now() });
      onLogin(user);
    } catch(e) { setError('Có lỗi kết nối. Vui lòng thử lại.'); }
    setLoading(false);
  };

  return (
    <div className="login-wrap">
      <div className="login-card">
        <div className="login-logo">
          <div className="l-icon"><i className="fas fa-chart-line"/></div>
          <h1>SEO <em>SOP</em> System</h1>
          <p>Hệ thống quy trình SEO tiêu chuẩn</p>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="lf-group">
            <label className="lf-label"><i className="fas fa-user"/>Tên đăng nhập</label>
            <input className="lf-input" value={username} onChange={e=>setUsername(e.target.value)} placeholder="Nhập username..." autoComplete="username" required/>
          </div>
          <div className="lf-group">
            <label className="lf-label"><i className="fas fa-lock"/>Mật khẩu</label>
            <div className="pw-wrap">
              <input className="lf-input" type={showPw?'text':'password'} value={password} onChange={e=>setPassword(e.target.value)} placeholder="Nhập mật khẩu..." autoComplete="current-password" required/>
              <button type="button" className="pw-eye" onClick={()=>setShowPw(!showPw)}>
                <i className={`fas ${showPw?'fa-eye-slash':'fa-eye'}`}/>
              </button>
            </div>
          </div>
          {error && <div className="lf-error"><i className="fas fa-exclamation-circle" style={{marginRight:6}}/>{error}</div>}
          <button type="submit" className="btn-login" disabled={loading}>
            {loading?<><i className="fas fa-circle-notch fa-spin"/> Đang đăng nhập...</>:<><i className="fas fa-sign-in-alt"/> Đăng nhập</>}
          </button>
        </form>
        <div className="demo-area">
          <p>Tài khoản demo:</p>
          <span className="demo-tag" onClick={()=>{setUsername('admin');setPassword('admin123');}}><i className="fas fa-shield-alt"/>Admin</span>
          <span className="demo-tag" onClick={()=>{setUsername('member1');setPassword('member123');}}><i className="fas fa-user"/>Member</span>
        </div>
      </div>
    </div>
  );
};