// Topbar with search, notifications, language toggle, user
const { useState: useStateTop, useRef, useEffect: useEffectTop } = React;

function Topbar({ t, lang, onLang, breadcrumbs, onCmd }) {
  const [notifOpen, setNotifOpen] = useStateTop(false);
  const [userOpen, setUserOpen] = useStateTop(false);
  const [searchFocused, setSearchFocused] = useStateTop(false);
  const [searchVal, setSearchVal] = useStateTop('');
  const containerRef = useRef(null);

  useEffectTop(() => {
    const onDown = (e) => {
      if (containerRef.current && !containerRef.current.contains(e.target)) {
        setNotifOpen(false);
        setUserOpen(false);
        setSearchFocused(false);
      }
    };
    document.addEventListener('mousedown', onDown);
    return () => document.removeEventListener('mousedown', onDown);
  }, []);

  const notifications = window.MJC_DATA.NOTIFICATIONS;

  const searchResults = [
    { type: 'Booking', icon: 'Calendar', label: 'BK-2851 — Genting Highlands 2D1N', sub: 'Mr. Zhang Wei · 6 pax · 22 May' },
    { type: 'Customer', icon: 'Users', label: 'Sarah Tan', sub: 'Honeymoon Langkawi · RM 6,500' },
    { type: 'Tour', icon: 'Compass', label: 'Penang Heritage Trail 3D2N', sub: '24 active bookings · RM 750/pax' },
    { type: 'Vehicle', icon: 'Bus', label: 'BTM 5821 (Bus 45-seater)', sub: 'On trip — Genting · Hassan Bin Omar' }
  ].filter(r => !searchVal || r.label.toLowerCase().includes(searchVal.toLowerCase()));

  return (
    <header className="topbar" ref={containerRef}>
      <div className="breadcrumb">
        {breadcrumbs.map((b, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep"><Icon.ChevronRight size={12} /></span>}
            <span className={`crumb ${i === breadcrumbs.length - 1 ? 'current' : ''}`}>{b}</span>
          </React.Fragment>
        ))}
      </div>

      <div className="topbar-spacer"></div>

      <div className="search-wrap" onClick={(e) => e.stopPropagation()}>
        <span className="search-icon"><Icon.Search size={15} /></span>
        <input
          className="search-input"
          placeholder={t('search_placeholder')}
          value={searchVal}
          onChange={(e) => setSearchVal(e.target.value)}
          onFocus={() => setSearchFocused(true)}
        />
        <span className="search-kbd">⌘ K</span>
        {searchFocused && (
          <div className="dropdown" style={{ left: 0, right: 0, minWidth: 'auto' }}>
            <div className="dropdown-header">
              <span className="dropdown-title">{searchVal ? `${searchResults.length} results` : 'Quick search'}</span>
              <span className="muted" style={{ fontSize: 11 }}>Press <span className="mono">↵</span> to open</span>
            </div>
            <div className="dropdown-body">
              {searchResults.length === 0 ? (
                <div className="empty-state" style={{ padding: 24 }}>No matches for "{searchVal}"</div>
              ) : searchResults.map((r, i) => {
                const IconComp = Icon[r.icon];
                return (
                  <div key={i} className="dropdown-item" onClick={() => setSearchFocused(false)}>
                    <div className="avatar" style={{ background: 'var(--bg-alt)', color: 'var(--navy)' }}><IconComp size={14} /></div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontWeight: 500, fontSize: 13 }}>{r.label}</div>
                      <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{r.sub}</div>
                    </div>
                    <span className="badge no-dot" style={{ background: 'var(--bg)', color: 'var(--muted)' }}>{r.type}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>

      <div className="lang-toggle">
        <button className={lang === 'en' ? 'active' : ''} onClick={() => onLang('en')}>EN</button>
        <button className={lang === 'zh' ? 'active' : ''} onClick={() => onLang('zh')}>中文</button>
      </div>

      <div style={{ position: 'relative' }}>
        <button className="topbar-icon-btn" onClick={(e) => { e.stopPropagation(); setNotifOpen(!notifOpen); setUserOpen(false); }}>
          <Icon.Bell size={17} />
          <span className="dot"></span>
        </button>
        {notifOpen && (
          <div className="dropdown" onClick={(e) => e.stopPropagation()}>
            <div className="dropdown-header">
              <span className="dropdown-title">{t('notifications')}</span>
              <span className="muted" style={{ fontSize: 11 }}>4 new</span>
            </div>
            <div className="dropdown-body">
              {notifications.map((n, i) => {
                const colorMap = {
                  gold: 'var(--gold)',
                  teal: 'var(--teal)',
                  amber: 'var(--warning)',
                  navy: 'var(--navy)'
                };
                return (
                  <div key={i} className="dropdown-item">
                    <div style={{ width: 6, alignSelf: 'stretch', background: colorMap[n.type], borderRadius: 3, flexShrink: 0 }}></div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{lang === 'zh' ? n.title_zh : n.title_en}</div>
                      <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{lang === 'zh' ? n.text_zh : n.text_en}</div>
                      <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>{n.t} ago</div>
                    </div>
                  </div>
                );
              })}
            </div>
            <div className="dropdown-footer">{t('view_all')} →</div>
          </div>
        )}
      </div>

      <div style={{ position: 'relative' }}>
        <button className="user-chip" onClick={(e) => { e.stopPropagation(); setUserOpen(!userOpen); setNotifOpen(false); }}>
          <div className="user-avatar">YC</div>
          <div className="user-meta">
            <div className="name">{lang === 'zh' ? '陈永康' : 'Y. C. Chen'}</div>
            <div className="role">{lang === 'zh' ? '运营总监' : 'Operations Director'}</div>
          </div>
          <Icon.ChevronDown size={14} stroke={1.8} />
        </button>
        {userOpen && (
          <div className="dropdown" style={{ minWidth: 260 }} onClick={(e) => e.stopPropagation()}>
            <div style={{ padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'center', borderBottom: '1px solid var(--border)' }}>
              <div className="user-avatar" style={{ width: 44, height: 44, fontSize: 14 }}>YC</div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{lang === 'zh' ? '陈永康' : 'Y. C. Chen'}</div>
                <div className="muted" style={{ fontSize: 12 }}>yc.chen@mygoldzip.com</div>
                <span className="badge no-dot" style={{ background: 'rgba(200,146,42,.12)', color: 'var(--gold)', marginTop: 6, fontSize: 10.5 }}>
                  ADMIN · {lang === 'zh' ? '全权限' : 'FULL ACCESS'}
                </span>
              </div>
            </div>
            <div className="dropdown-body">
              {[
                { icon: 'Users', label_en: 'My Profile', label_zh: '个人资料' },
                { icon: 'Settings', label_en: 'Preferences', label_zh: '偏好设置' },
                { icon: 'Briefcase', label_en: 'Roles & Permissions', label_zh: '角色与权限' },
                { icon: 'Doc', label_en: 'Audit Log', label_zh: '操作日志' }
              ].map((m, i) => {
                const IconComp = Icon[m.icon];
                return (
                  <div key={i} className="dropdown-item" style={{ padding: '10px 16px' }}>
                    <IconComp size={15} />
                    <span style={{ fontSize: 13 }}>{lang === 'zh' ? m.label_zh : m.label_en}</span>
                  </div>
                );
              })}
              <div className="dropdown-item" style={{ padding: '10px 16px', color: 'var(--danger)' }}>
                <Icon.Logout size={15} />
                <span style={{ fontSize: 13 }}>{lang === 'zh' ? '退出登录' : 'Sign Out'}</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </header>
  );
}

window.Topbar = Topbar;