/* ============================================================
   Login ekrani
   ============================================================ */
function Login({ onLogin }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [err, setErr] = useState('');
  const [busy, setBusy] = useState(false);

  async function doLogin(uname, pwd) {
    if (busy) return;
    setBusy(true); setErr('');
    try {
      const data = await API.login(uname.trim().toLowerCase(), pwd);
      await onLogin(data); // {token, user, perms}
    } catch (ex) {
      setErr(ex.message || 'Login yoki parol noto\u02bcg\u02bcri');
      setBusy(false);
    }
  }

  function submit(e) {
    e && e.preventDefault();
    doLogin(username, password);
  }

  return (
    <div className="lg-wrap">
      <div className="glass-bg" aria-hidden="true" />
      {/* Chap — brend matni (fon ustida) */}
      <div className="lg-brand">
        <div className="lg-chip glass"><Logo compact /><span>Million Moxito</span></div>
        <div>
          <h1>Savdo, zakaz va jamoa —<br/>bitta shisha panelda.</h1>
          <p>Distributsiyani real vaqtda kuzating: reja-fakt, zakazlar doskasi, vazifalar va AI tahlil.</p>
          <div className="lg-stats">
            {[['5', 'bosqichli pipeline'], ['24/7', 'jonli monitoring'], ['AI', 'distributsiya tahlili']].map(([a, b], i) => (
              <div key={i} className="lg-stat glass">
                <div className="tnum">{a}</div>
                <span>{b}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="lg-foot">© 2026 Million Moxito · Toshkent</div>
      </div>

      {/* O'ng — shisha forma */}
      <div className="lg-side">
        <div className="lg-card glass">
          <div className="lg-orb" />
          <h2>Tizimga kirish</h2>
          <p className="lg-sub">Hisobingiz bilan tizimga kiring.</p>

          <form onSubmit={submit}>
            <div style={{ marginBottom: 14 }}>
              <label className="field-label">Login</label>
              <input className="input lg-input" value={username} placeholder="masalan: boshliq" autoComplete="username"
                     onChange={e => { setUsername(e.target.value); setErr(''); }} autoFocus />
            </div>
            <div style={{ marginBottom: 8 }}>
              <label className="field-label">Parol</label>
              <input className="input lg-input" type="password" value={password} placeholder="••••" autoComplete="current-password"
                     onChange={e => { setPassword(e.target.value); setErr(''); }} />
            </div>
            <div className="lg-err">
              {err && <span><Icon name="info" size={14} style={{ verticalAlign: '-2px', marginRight: 5 }} />{err}</span>}
            </div>
            <button type="submit" className="btn btn--primary" disabled={busy}
                    style={{ width: '100%', justifyContent: 'center', height: 46, fontSize: 14.5 }}>
              {busy ? 'Kirilmoqda…' : <>Kirish <Icon name="arrowR" size={16} stroke={2.2} /></>}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

window.Login = Login;