// ─── Topbar.jsx ───────────────────────────────────────────────
// Sticky white bar above the workspace. Breadcrumb + icon cluster.
// In RTL: breadcrumb flush right, actions flush left.

function TopIcon({ name }) {
  const P = {
    search: <g><circle cx="7" cy="7" r="4.5"></circle><line x1="10.5" y1="10.5" x2="14" y2="14"></line></g>,
    book:   <g><path d="M8 4 C6.5 3 3.8 3 2.6 3.5 V12.6 C3.8 12.1 6.5 12.1 8 13"></path><path d="M8 4 C9.5 3 12.2 3 13.4 3.5 V12.6 C12.2 12.1 9.5 12.1 8 13"></path><line x1="8" y1="4" x2="8" y2="13"></line></g>,
    sun:    <g><circle cx="8" cy="8" r="3.2"></circle><path d="M8 1.5 V3 M8 13 V14.5 M14.5 8 H13 M3 8 H1.5 M12.6 3.4 L11.5 4.5 M4.5 11.5 L3.4 12.6 M12.6 12.6 L11.5 11.5 M4.5 4.5 L3.4 3.4"></path></g>,
    moon:   <path d="M13 9.3 A5.5 5.5 0 1 1 6.7 3 A4.3 4.3 0 0 0 13 9.3 Z"></path>,
  };
  return (
    <svg width="17" height="17" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{P[name] || null}</svg>
  );
}

function Topbar({ crumb, theme, onToggleTheme, mode, onToggleMode }) {
  const btn = (icon, title) => (
    <button className="le-topbar-btn" title={title} key={title}>{icon}</button>
  );
  return (
    <header className="le-topbar">
      <div className="le-topbar-breadcrumb">
        <b>{crumb || 'שיחה חדשה'}</b>
        <span style={{ color: 'var(--fg-3)', margin: '0 8px' }}>·</span>
        <span>מחקר משפטי</span>
      </div>
      <div className="le-topbar-actions">
        <button
          className={`le-topbar-mode ${mode === 'opposing' ? 'is-active' : ''}`}
          onClick={onToggleMode}
          title="Opposing Counsel — ניתוח דו-צדדי"
        >
          Opposing Counsel
        </button>
        {btn(<TopIcon name="search" />, 'חיפוש (⌘K)')}
        {btn(<TopIcon name="book" />, 'מצב קריאה')}
        <button
          className="le-topbar-btn"
          title={theme === 'midnight' ? 'מצב יום' : 'Midnight chambers'}
          onClick={onToggleTheme}
        >
          <TopIcon name={theme === 'midnight' ? 'sun' : 'moon'} />
        </button>
        <button className="le-topbar-auth" title="חשבון">
          <span className="le-topbar-auth-avatar">YD</span>
        </button>
      </div>
    </header>
  );
}

window.Topbar = Topbar;