const { useState: useAuthState, useEffect: useAuthEffect } = React;

function AdminBar() {
  const session = useStoreSlice(() => Store.session);
  const [showLogin, setShowLogin] = useAuthState(false);
  const [username, setUsername] = useAuthState('');
  const [password, setPassword] = useAuthState('');
  const [error, setError] = useAuthState('');

  const submit = (e) => {
    e.preventDefault();
    const r = Store.login(username, password);
    if (!r.ok) setError(r.error);
    else { setShowLogin(false); setUsername(''); setPassword(''); setError(''); }
  };

  return (
    <>
      {/* Top admin strip when signed in */}
      {session && (
        <div className="admin-bar">
          <div className="admin-bar-inner">
            <span className="mono">
              ● SIGNED IN · <b>{session.name}</b> · ROLE: {session.role.toUpperCase()}
            </span>
            <div className="admin-actions">
              <a href="#events" className="admin-link">Post event</a>
              <a href="#blog" className="admin-link">Post news</a>
              {session.role === 'admin' && (
                <button
                  className="admin-link danger"
                  onClick={() => { if (confirm('Clear all custom content?')) Store.clearAll(); }}
                >Clear custom</button>
              )}
              <button className="admin-link" onClick={() => Store.logout()}>Sign out →</button>
            </div>
          </div>
        </div>
      )}

      {/* Floating login pill when not signed in */}
      {!session && (
        <button className="login-pill" onClick={() => setShowLogin(true)} aria-label="Board login">
          <span className="dot" /> Board login
        </button>
      )}

      {showLogin && !session && (
        <div className="modal-back" onClick={() => setShowLogin(false)}>
          <form className="modal" onClick={e => e.stopPropagation()} onSubmit={submit}>
            <div className="modal-head">
              <span className="mono">UMBMP · SECURE LOGIN</span>
              <button type="button" className="modal-x" onClick={() => setShowLogin(false)}>×</button>
            </div>
            <h3>Board & admin sign-in</h3>
            <p className="modal-sub">Board members and the club president only. Forgot your password? Ping Dora on Discord.</p>

            <div className="field">
              <label>Username</label>
              <input
                autoFocus
                type="text"
                value={username}
                onChange={e => setUsername(e.target.value)}
                placeholder="admin or board"
              />
            </div>
            <div className="field">
              <label>Password</label>
              <input
                type="password"
                value={password}
                onChange={e => setPassword(e.target.value)}
                placeholder="••••••••"
              />
            </div>
            {error && <div className="modal-error mono">✕ {error}</div>}

            <button type="submit" className="btn primary" style={{ width: '100%', justifyContent: 'center', marginTop: 6 }}>
              Sign in →
            </button>

            <div className="modal-hint mono">
              DEMO CREDS · admin / umb-admin-2026 · board / board-2026
            </div>
          </form>
        </div>
      )}
    </>
  );
}

window.AdminBar = AdminBar;