// TopBar.jsx — search + language toggle + notifications + avatar.
const TopBar = () => {
  const [, , t] = useLang();
  const goBack = () => {
    // Prefer real history when we have somewhere to go back to within the app.
    if (window.history.length > 1 && document.referrer && document.referrer !== window.location.href) {
      window.history.back();
    } else {
      // Fallback to dashboard / cases list.
      window.location.href = 'Cases.html';
    }
  };
  return (
    <header className="topbar">
      <button
        type="button"
        className="tb-back"
        onClick={goBack}
        title={t('tb.back')}
        aria-label={t('tb.back')}
      >
        <Icon name="chev_l" size={14} />
        <span>{t('tb.back')}</span>
      </button>
      <div className="tb-search" role="search" tabIndex={0}>
        <Icon name="search" size={14} />
        <span>{t('tb.search')}</span>
        <kbd>⌘K</kbd>
      </div>
      <div className="tb-actions">
        <LanguageToggle />
        <button className="ico" aria-label="Notifications" style={{ position: 'relative' }}>
          <Icon name="bell" size={16}/>
          <span className="dot" />
        </button>
        <span className="tb-avatar">JN</span>
      </div>
    </header>
  );
};

window.TopBar = TopBar;