// Top navigation bar with account menu, view tabs.
const { useState: useStateNV, useEffect: useEffectNV, useRef: useRefNV } = React;

function TopNav({ view, setView, onSignIn }) {
  const store = useStore();
  const user = store.getCurrentUser();
  const isAdmin = store.isAdmin();
  const [menuOpen, setMenuOpen] = useStateNV(false);
  const ref = useRefNV(null);
  const [aiMode, setAiMode] = useStateNV(window.claudeClient.mode());

  useEffectNV(() => {
    const h = () => setAiMode(window.claudeClient.mode());
    window.addEventListener('claude-config-changed', h);
    return () => window.removeEventListener('claude-config-changed', h);
  }, []);

  useEffectNV(() => {
    if (!menuOpen) return;
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setMenuOpen(false); };
    setTimeout(() => document.addEventListener('click', h), 0);
    return () => document.removeEventListener('click', h);
  }, [menuOpen]);

  const initials = user ? (user.name || user.email).slice(0, 2).toUpperCase() : '';
  const aiColor = aiMode === 'host' || aiMode === 'direct' ? '#7fc99a' : '#d99a8c';
  const aiLabel = aiMode === 'host' ? 'AI · sandbox host' : aiMode === 'direct' ? 'AI · connected' : 'AI · not connected';

  return (
    <div className="topnav">
      <button className="topnav-brand" onClick={() => setView('map')} title="Home — back to map">
        <span className="topnav-mark">◉</span>
        <span className="topnav-name">EXPAT·HUB</span>
        <span className="topnav-home-hint">HOME</span>
      </button>
      <div className="topnav-tabs">
        <button className={`topnav-tab ${view === 'map' ? 'on' : ''}`} onClick={() => setView('map')} title="Home — the map">
          <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3" style={{ marginRight: 4, verticalAlign: -2 }}>
            <circle cx="8" cy="8" r="6.5"/>
            <ellipse cx="8" cy="8" rx="3" ry="6.5"/>
            <line x1="1.5" y1="8" x2="14.5" y2="8"/>
          </svg>
          Map
        </button>
        <button className={`topnav-tab ${view === 'playbooks' ? 'on' : ''}`} onClick={() => setView('playbooks')}>
          Playbooks {user && store.getPlaybooks().length > 0 && <span className="tab-count">{store.getPlaybooks().length}</span>}
        </button>
        {isAdmin && (
          <button className={`topnav-tab admin ${view === 'admin' ? 'on' : ''}`} onClick={() => setView('admin')}>Admin</button>
        )}
      </div>
      <div className="topnav-right">
        <button className={`topnav-concierge ${view === 'map' ? '' : 'hidden'}`} onClick={() => window.openConcierge && window.openConcierge()} title="Concierge — let Claude narrow your filters">
          <span className="cfab-dot"/>
          <span>Concierge</span>
        </button>
        <button className="topnav-feedback" onClick={() => setView('feedback')} title="Send feedback">
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3">
            <path d="M3 4h10v6H8l-3 3v-3H3z"/>
          </svg>
          Feedback
        </button>
        {user ? (
          <div className="topnav-account" ref={ref}>
            <button className="topnav-hamburger" onClick={() => setMenuOpen(o => !o)} title="Menu">
              <span className="ham-line"></span><span className="ham-line"></span><span className="ham-line"></span>
              {isAdmin && <span className="avatar-admin-dot" title="Admin"></span>}
            </button>
            {menuOpen && (
              <div className="account-menu">
                <div className="account-menu-head">
                  <div className="account-menu-avatar">{initials}</div>
                  <div>
                    <div className="account-menu-name">{user.name}</div>
                    <div className="account-menu-email">{user.email}</div>
                    <div className="account-menu-provider">{user.provider} · {user.role}</div>
                  </div>
                </div>
                <button onClick={() => { setView('profile'); setMenuOpen(false); }}>Profile & bio</button>
                <button onClick={() => { setView('playbooks'); setMenuOpen(false); }}>My playbooks</button>
                <button onClick={() => { setView('feedback'); setMenuOpen(false); }}>Send feedback</button>
                <div className="account-menu-sep"/>
                <button className="ai-settings-row" onClick={() => { setMenuOpen(false); window.openSettings(); }}>
                  <span className="ai-status-dot" style={{ background: aiColor }}></span>
                  <span className="ai-settings-text">
                    <span className="ai-settings-title">AI settings</span>
                    <span className="ai-settings-sub">{aiLabel}</span>
                  </span>
                  <span className="ai-settings-gear">⚙</span>
                </button>
                <div className="account-menu-sep"/>
                <button onClick={() => { store.signOut(); setMenuOpen(false); setView('map'); }}>Sign out</button>
              </div>
            )}
          </div>
        ) : (
          <div className="topnav-account" ref={ref}>
            <button className="topnav-hamburger" onClick={() => setMenuOpen(o => !o)} title="Menu">
              <span className="ham-line"></span><span className="ham-line"></span><span className="ham-line"></span>
            </button>
            {menuOpen && (
              <div className="account-menu">
                <div className="account-menu-head">
                  <div className="account-menu-name">Not signed in</div>
                  <div className="account-menu-email">Save playbooks, snips & favorites by signing in.</div>
                </div>
                <button onClick={() => { setMenuOpen(false); onSignIn(); }}>Sign in / create account</button>
                <button onClick={() => { setView('feedback'); setMenuOpen(false); }}>Send feedback</button>
                <div className="account-menu-sep"/>
                <button className="ai-settings-row" onClick={() => { setMenuOpen(false); window.openSettings(); }}>
                  <span className="ai-status-dot" style={{ background: aiColor }}></span>
                  <span className="ai-settings-text">
                    <span className="ai-settings-title">AI settings</span>
                    <span className="ai-settings-sub">{aiLabel}</span>
                  </span>
                  <span className="ai-settings-gear">⚙</span>
                </button>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

window.TopNav = TopNav;