/* The Upper Room — top navigation bar. */
const { useState: useNavState, useEffect: useNavEffect, useRef: useNavRef, useContext: useNavContext } = React;

function MeMenu({ active, onNav, onClose }) {
  const room = useNavContext(window.RoomContext);
  const items = [
    { label: 'My profile', icon: 'user', go: () => onNav('me') },
    { label: 'Saved words', icon: 'bookmark', go: () => onNav('saved') },
    { label: 'Prayer wall', icon: 'hand-heart', go: () => onNav('prayer') },
    { label: 'Settings', icon: 'settings', go: () => onNav('settings') },
  ];
  return (
    <div className="ur-me-menu" onClick={(e) => e.stopPropagation()}>
      <div className="ur-me-menu-head">
        <Avatar name={CURRENT_USER.name} style={{ width: 40, height: 40, fontSize: '0.9rem' }} />
        <div><div className="name">{CURRENT_USER.name}</div><div className="meta">{CURRENT_USER.church}</div></div>
      </div>
      {items.map((it) => (
        <button key={it.label} className="ur-me-item" onClick={() => { it.go(); onClose(); }}><Icon name={it.icon} size={16} />{it.label}</button>
      ))}
      <div className="ur-me-divider"></div>
      <button className="ur-me-item danger" onClick={() => { onClose(); room.signOut(); }}><Icon name="log-out" size={16} />Sign out</button>
    </div>
  );
}

function TopNav({ active, onNav, query, onSearch }) {
  const [q, setQ] = useNavState(query || '');
  const [menuOpen, setMenuOpen] = useNavState(false);
  const wrapRef = useNavRef(null);

  useNavEffect(() => { setQ(query || ''); }, [query]);

  // close the Me menu on any outside click
  useNavEffect(() => {
    if (!menuOpen) return;
    const h = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setMenuOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, [menuOpen]);

  const submit = (e) => { e.preventDefault(); if (onSearch) onSearch(q); };

  const items = [
    { id: 'home', icon: 'house', label: 'Home' },
    { id: 'circle', icon: 'users', label: 'Circle' },
    { id: 'gatherings', icon: 'calendar-heart', label: 'Gatherings' },
    { id: 'messages', icon: 'message-circle', label: 'Messages', badge: '3' },
    { id: 'alerts', icon: 'bell', label: 'Alerts', badge: '9' },
  ];
  return (
    <header className="ur-topnav">
      <div className="ur-topnav-inner">
        <button className="ur-logo" onClick={() => onNav('home')} style={{ background: 'none', border: 'none' }}><RoomBrand /></button>
        <form className="ur-search" onSubmit={submit}>
          <button type="submit" className="ur-search-ic" aria-label="Search"><Icon name="search" size={16} /></button>
          <input
            placeholder="Search the Upper Room"
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />
          {q && <button type="button" className="ur-search-clear" aria-label="Clear" onClick={() => { setQ(''); if (onSearch) onSearch(''); }}><Icon name="x" size={14} /></button>}
        </form>
        <nav className="ur-nav-items">
          {items.map((it) => (
            <button key={it.id} className={'ur-nav-item' + (active === it.id ? ' active' : '')} onClick={() => onNav(it.id)}>
              {it.badge && <span className="ur-nav-badge">{it.badge}</span>}
              <Icon name={it.icon} size={20} />
              <span>{it.label}</span>
            </button>
          ))}
          <div className="ur-me" ref={wrapRef}>
            <button className={'ur-nav-item' + (['me', 'saved', 'prayer', 'settings'].indexOf(active) !== -1 ? ' active' : '')} onClick={() => setMenuOpen(!menuOpen)}>
              <Avatar name={CURRENT_USER.name} style={{ width: 24, height: 24, fontSize: '0.62rem' }} />
              <span>Me ▾</span>
            </button>
            {menuOpen && <MeMenu active={active} onNav={onNav} onClose={() => setMenuOpen(false)} />}
          </div>
        </nav>
      </div>
    </header>
  );
}

Object.assign(window, { TopNav });