/* Top navigation bar — primary destinations across the workspace */

const TOP_NAV_ITEMS = [
  { key: 'my-work',     label: 'My Work',     glyph: '◉', match: (v) => v === 'my-work' || ['my-day','important','my-tasks','mentions','planned','all','snoozed','archived','views'].includes(v) || v === 'list' },
  { key: 'queues',      label: 'Queues',      glyph: '☰', match: (v) => v === 'queues' || v.startsWith('queue:') },
  { key: 'workspace',   label: 'Workspace',   glyph: '◐', match: (v) => v === 'workspace' },
  { key: 'dashboards',  label: 'Dashboards',  glyph: '◇', match: (v) => v === 'dashboards' || v === 'reports' || ['dashboard','workload','time','audit'].includes(v) },
];

function TopBar({ activeView, onView, onOpenPalette, onOpenInbox, onOpenTweaks, onOpenPulse, unread = 0 }) {
  const matchedSection = TOP_NAV_ITEMS.find(item => item.match(activeView))?.key
    || (activeView === 'settings' ? null : null);

  return (
    <header style={{
      height: 52, flexShrink: 0,
      display: 'flex', alignItems: 'center', gap: 16,
      padding: '0 20px',
      background: 'rgb(var(--surface))',
      borderBottom: '1px solid rgb(var(--rule))',
      zIndex: 30,
    }}>
      {/* Brand mark */}
      <button onClick={() => onView('my-work')} style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '4px 8px', borderRadius: 8,
      }}
        onMouseEnter={e => e.currentTarget.style.background = 'rgb(var(--paper-2) / 0.6)'}
        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
        <svg width="32" height="32" viewBox="0 0 32 32" style={{ flexShrink: 0, filter: 'drop-shadow(0 2px 4px rgba(99,102,241,0.4))' }}>
          <defs>
            <linearGradient id="cairoh-front" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stopColor="rgb(var(--accent))" />
              <stop offset="100%" stopColor="rgb(var(--accent-2))" />
            </linearGradient>
            <linearGradient id="cairoh-right" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="rgb(var(--berry))" />
              <stop offset="100%" stopColor="rgb(var(--accent-2))" />
            </linearGradient>
            <linearGradient id="cairoh-base" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stopColor="rgb(var(--accent-2))" />
              <stop offset="100%" stopColor="rgb(var(--ink-2))" />
            </linearGradient>
          </defs>
          {/* Right face — darker */}
          <polygon points="16,3 28,26 16,22" fill="url(#cairoh-right)" />
          {/* Left/front face — lighter */}
          <polygon points="16,3 4,26 16,22" fill="url(#cairoh-front)" />
          {/* Base shadow band */}
          <polygon points="4,26 28,26 24,29 8,29" fill="url(#cairoh-base)" opacity="0.55" />
          {/* Highlight edge */}
          <line x1="16" y1="3" x2="16" y2="22" stroke="white" strokeOpacity="0.35" strokeWidth="0.6" />
          {/* Apex spark */}
          <circle cx="16" cy="3" r="1.4" fill="white" />
        </svg>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', lineHeight: 1 }}>
          <span style={{ fontSize: 15.5, fontWeight: 800, letterSpacing: '-0.025em', color: 'rgb(var(--ink))' }}>
            Cairoh
            <span style={{ fontWeight: 500, color: 'rgb(var(--muted))', marginLeft: 5 }}>Taskhub</span>
          </span>
        </div>
      </button>

      <span style={{ width: 1, height: 22, background: 'rgb(var(--rule))', margin: '0 2px' }} />

      {/* Nav tabs */}
      <nav style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        {TOP_NAV_ITEMS.filter(i => ['my-work','queues'].includes(i.key)).map(item => {
          const active = matchedSection === item.key;
          return (
            <button key={item.key} onClick={() => onView(item.key)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 7,
              padding: '8px 13px',
              fontSize: 13, fontWeight: active ? 700 : 500,
              color: active ? 'rgb(var(--ink))' : 'rgb(var(--muted))',
              background: active ? 'rgb(var(--paper-2))' : 'transparent',
              borderRadius: 8,
              position: 'relative',
              transition: 'background-color .12s, color .12s',
            }}
              onMouseEnter={e => { if (!active) { e.currentTarget.style.background = 'rgb(var(--paper-2) / 0.6)'; e.currentTarget.style.color = 'rgb(var(--ink-2))'; }}}
              onMouseLeave={e => { if (!active) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'rgb(var(--muted))'; }}}>
              <span style={{ fontSize: 13, color: active ? 'rgb(var(--accent))' : 'rgb(var(--muted))' }}>{item.glyph}</span>
              {item.label}
              {active && (
                <span style={{
                  position: 'absolute', bottom: -1, left: 12, right: 12, height: 2,
                  background: 'rgb(var(--accent))', borderRadius: 2,
                }} />
              )}
            </button>
          );
        })}

        <span style={{ width: 1, height: 18, background: 'rgb(var(--rule))', margin: '0 8px' }} />

        {TOP_NAV_ITEMS.filter(i => ['workspace','dashboards'].includes(i.key)).map(item => {
          const active = matchedSection === item.key;
          return (
            <button key={item.key} onClick={() => onView(item.key)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 7,
              padding: '6px 12px',
              fontSize: 12.5, fontWeight: 600,
              color: active ? 'rgb(var(--accent-2))' : 'rgb(var(--ink-2))',
              background: active ? 'rgb(var(--accent-soft))' : 'rgb(var(--surface))',
              border: '1px solid ' + (active ? 'rgb(var(--accent) / 0.4)' : 'rgb(var(--rule))'),
              borderRadius: 8,
              marginRight: 4,
              transition: 'all .12s',
            }}
              onMouseEnter={e => { if (!active) { e.currentTarget.style.background = 'rgb(var(--paper-2))'; e.currentTarget.style.borderColor = 'rgb(var(--rule-2))'; }}}
              onMouseLeave={e => { if (!active) { e.currentTarget.style.background = 'rgb(var(--surface))'; e.currentTarget.style.borderColor = 'rgb(var(--rule))'; }}}>
              <span style={{ fontSize: 12, color: active ? 'rgb(var(--accent))' : 'rgb(var(--muted))' }}>{item.glyph}</span>
              {item.label}
            </button>
          );
        })}
      </nav>

      <span style={{ flex: 1 }} />

      {/* Search + actions */}
      <button onClick={onOpenPalette} className="btn btn-secondary" style={{
        fontSize: 12, padding: '6px 12px',
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }} title="Quick jump (⌘K)">
        <span style={{ color: 'rgb(var(--muted))' }}>⌕</span>
        <span style={{ color: 'rgb(var(--muted))' }}>Jump to anything</span>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, padding: '1px 5px', background: 'rgb(var(--paper-2))', borderRadius: 4, color: 'rgb(var(--muted))' }}>⌘K</span>
      </button>

      <button onClick={onOpenPulse} className="btn btn-secondary" style={{
        fontSize: 12.5, padding: '6px 12px',
        display: 'inline-flex', alignItems: 'center', gap: 6,
        background: 'linear-gradient(135deg, rgb(var(--accent-soft)), rgb(var(--surface)))',
        borderColor: 'rgb(var(--accent) / 0.3)',
        color: 'rgb(var(--accent-2))', fontWeight: 700,
      }} title="Pulse · ⌘J">
        <span style={{
          width: 16, height: 16, borderRadius: 4,
          background: 'linear-gradient(135deg, rgb(var(--accent)), rgb(var(--berry)))',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: 'white', fontSize: 9, fontWeight: 700,
        }}>✦</span>
        Pulse
      </button>

      <button onClick={onOpenInbox} className="btn btn-secondary" style={{
        fontSize: 14, padding: '6px 10px', position: 'relative',
      }} title="Notifications">
        🔔
        {unread > 0 && (
          <span style={{
            position: 'absolute', top: -3, right: -3,
            background: 'rgb(var(--accent))', color: 'white',
            fontSize: 9, padding: '1px 5px', fontWeight: 700,
            borderRadius: 999, lineHeight: 1.4,
          }}>{unread}</span>
        )}
      </button>

      <button onClick={onOpenTweaks} className="btn btn-secondary" style={{
        fontSize: 14, padding: '6px 10px',
      }} title="Tweaks (,)">⚙</button>

      <span style={{ width: 1, height: 22, background: 'rgb(var(--rule))', margin: '0 2px' }} />

      <button onClick={() => onView('settings')} style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '4px 8px 4px 4px', borderRadius: 999,
        transition: 'background-color .12s',
      }}
        onMouseEnter={e => e.currentTarget.style.background = 'rgb(var(--paper-2))'}
        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
        title="Profile & settings">
        <Avatar user={userById(1)} size={26} />
        <span style={{ fontSize: 12, color: 'rgb(var(--muted))' }}>▾</span>
      </button>
    </header>
  );
}

window.TopBar = TopBar;
window.TOP_NAV_ITEMS = TOP_NAV_ITEMS;