// assets/screen_login.jsx
function ScreenLogin({ onLogin }) {
  const [email, setEmail] = React.useState('huy@shopquantum.io');
  const [password, setPassword] = React.useState('•••••••••••');
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  const submit = (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    setTimeout(() => {
      if (!email.endsWith('@shopquantum.io')) {
        setError('Admin access requires a @shopquantum.io email.');
        setLoading(false);
      } else {
        onLogin();
      }
    }, 700);
  };

  return (
    <div className="login-wrap">
      <div className="login-card">
        <h1>
          <span className="sidebar-logo" style={{ width: 32, height: 32, borderRadius: 8, fontSize: 14 }}>SQ</span>
          ShopQuantum
        </h1>
        <div className="sub">Admin console · sign in to continue</div>

        <form onSubmit={submit}>
          <label>Email</label>
          <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} autoFocus required />

          <label>Password</label>
          <input className="input" type="password" value={password} onChange={e => setPassword(e.target.value)} required />

          {error && (
            <div style={{ marginTop: 14, padding: '8px 12px', background: 'var(--danger-muted)', border: '1px solid var(--danger)', borderRadius: 'var(--radius)', color: 'var(--danger)', fontSize: 12, display: 'flex', gap: 8, alignItems: 'center' }}>
              <Icon name="alert" size={13} />
              {error}
            </div>
          )}

          <button type="submit" className="btn primary" style={{ width: '100%', marginTop: 18, padding: '8px 14px', justifyContent: 'center' }} disabled={loading}>
            {loading ? <><Icon name="spinner" size={13} className="spin" /> Signing in…</> : 'Sign in'}
          </button>
        </form>

        <div style={{ marginTop: 22, paddingTop: 16, borderTop: '1px solid var(--border-subtle)', fontSize: 11, color: 'var(--text-tertiary)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)' }}>
          <span>v 2.18.4</span>
          <span>POST /admin/auth/login</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenLogin });