// Chrome — Sidebar + TopBar

function Sidebar({ active, onNavigate, rtl, t, collapsed, onToggleCollapse }) {
  const items = [
    { id: 'home', icon: 'home', label: t('home', 'בית', 'Home') },
    { id: 'student', icon: 'users', label: t('student', 'מודל הסטודנט', 'Student Model') },
    { id: 'map', icon: 'map', label: t('map', 'מפת הידע', 'Knowledge Map') },
    { id: 'weak', icon: 'activity', label: t('weak', 'נקודות חולשה', 'Weak Spots') },
    { id: 'chat', icon: 'chat', label: t('chat', 'שיחה עם מורה', 'Tutor Chat') },
    { id: 'pomodoro', icon: 'timer', label: t('pomodoro', 'סשן פומודורו', 'Pomodoro') },
    { id: 'readiness', icon: 'pie', label: t('readiness', 'מוכנות לבחינה', 'Readiness') },
    { id: 'lecture', icon: 'video', label: t('lecture', 'הרצאות', 'Lectures') },
    { id: 'conductor', icon: 'sparkle', label: t('conductor', 'המנצח', 'Conductor') },
  ];
  const sidebarWidth = collapsed ? 64 : 240;
  return (
    <aside style={{
      width: sidebarWidth, flexShrink: 0, padding: collapsed ? '20px 8px' : '20px 14px',
      borderRight: rtl ? 'none' : '1px solid var(--border)',
      borderLeft:  rtl ? '1px solid var(--border)' : 'none',
      display: 'flex', flexDirection: 'column', gap: 24,
      background: 'var(--bg)',
      transition: 'width 320ms cubic-bezier(.2,.8,.2,1), padding 320ms cubic-bezier(.2,.8,.2,1)',
      overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 6px', minHeight: 28 }}>
        <img src="../../assets/mark.svg" width="28" height="28" alt="" style={{ flexShrink: 0 }} />
        {!collapsed && <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--fg-1)', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>Binah</span>}
        {!collapsed && <Badge variant="accent" style={{ marginInlineStart: 'auto', fontSize: 10 }}>v10</Badge>}
      </div>
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {items.map(it => {
          const isActive = active === it.id;
          return (
            <button key={it.id} onClick={() => onNavigate(it.id)} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: collapsed ? '10px 0' : '10px 12px', borderRadius: 10, border: 'none',
              background: isActive ? 'var(--accent-soft)' : 'transparent',
              color: isActive ? 'var(--accent)' : 'var(--fg-2)',
              fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)',
              fontSize: 14, fontWeight: isActive ? 600 : 500,
              cursor: 'pointer', textAlign: rtl ? 'right' : 'left',
              justifyContent: collapsed ? 'center' : 'flex-start',
              transition: 'all 200ms cubic-bezier(.2,.8,.2,1)',
            }}>
              <Icon name={it.icon} size={18} style={{ flexShrink: 0 }} />
              {!collapsed && <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.label}</span>}
            </button>
          );
        })}
      </nav>
      <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: collapsed ? '10px 8px' : '10px 12px', borderRadius: 10, background: 'var(--surface)',
          boxShadow: 'var(--elev-1)', justifyContent: collapsed ? 'center' : 'flex-start',
        }}>
          <div style={{
            width: 30, height: 30, borderRadius: 999, background: 'var(--grad-positive)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13,
          }}>ס</div>
          {!collapsed && <div style={{ lineHeight: 1.2, overflow: 'hidden' }}>
            <div style={{ fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--fg-1)', whiteSpace: 'nowrap' }}>
              {rtl ? 'סתיו א.' : 'Stav A.'}
            </div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', whiteSpace: 'nowrap' }}>
              {rtl ? 'ראיית חשבון · שנה ג' : 'CPA · Y3'}
            </div>
          </div>}
          {!collapsed && <Icon name="settings" size={16} style={{ marginInlineStart: 'auto', color: 'var(--fg-3)' }} />}
        </div>
        <button onClick={onToggleCollapse} title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          padding: '8px 12px', borderRadius: 10, border: '1px solid var(--border)',
          background: 'var(--surface)', color: 'var(--fg-3)',
          cursor: 'pointer', transition: 'all 200ms cubic-bezier(.2,.8,.2,1)',
          fontSize: 12, fontFamily: 'var(--font-body)', fontWeight: 500,
        }}>
          <Icon name={collapsed ? (rtl ? 'chevron-left' : 'chevron-right') : (rtl ? 'chevron-right' : 'chevron-left')} size={16} style={{ flexShrink: 0, transition: 'transform 320ms cubic-bezier(.2,.8,.2,1)' }} />
          {!collapsed && <span style={{ whiteSpace: 'nowrap' }}>{rtl ? 'צמצם תפריט' : 'Collapse'}</span>}
        </button>
      </div>
    </aside>
  );
}

function TopBar({ rtl, theme, onToggleRTL, onToggleTheme, t, title, showFullscreenBtn, onFullscreen }) {
  return (
    <header style={{
      display: 'flex', alignItems: 'center', gap: 16,
      padding: '14px 32px', borderBottom: '1px solid var(--border)',
      background: 'var(--bg)', position: 'sticky', top: 0, zIndex: 5,
    }}>
      <div style={{
        fontFamily: rtl ? 'var(--font-he)' : 'var(--font-display)',
        fontWeight: 600, fontSize: 18, color: 'var(--fg-1)', letterSpacing: '-0.01em',
      }}>{title}</div>

      <div style={{
        flex: 1, maxWidth: 420, marginInline: 24,
        position: 'relative',
      }}>
        <Icon name="search" size={16} style={{
          position: 'absolute', top: '50%', transform: 'translateY(-50%)',
          [rtl ? 'right' : 'left']: 12, color: 'var(--fg-3)',
        }} />
        <input placeholder={t('search', 'חפש נושא, שאלה, הסבר…', 'Search a topic, question, explanation…')} style={{
          width: '100%', boxSizing: 'border-box',
          padding: rtl ? '9px 36px 9px 12px' : '9px 12px 9px 36px',
          borderRadius: 10, border: '1px solid var(--border)',
          background: 'var(--surface)', color: 'var(--fg-1)',
          fontFamily: rtl ? 'var(--font-he)' : 'var(--font-body)', fontSize: 13,
          outline: 'none',
        }} />
      </div>

      <div style={{ marginInlineStart: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
        <button onClick={onToggleRTL} title="Toggle language" style={chipBtn()}>
          <Icon name="globe" size={16} /> {rtl ? 'עב' : 'EN'}
        </button>
        <button onClick={onToggleTheme} title="Toggle theme" style={chipBtn()}>
          <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={16} />
        </button>
        {showFullscreenBtn && <button onClick={onFullscreen} title="Fullscreen" style={chipBtn()}>
          <Icon name="maximize-2" size={16} />
        </button>}
        <button style={chipBtn()}><Icon name="bell" size={16} /></button>
      </div>
    </header>
  );
}

function chipBtn() {
  return {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '8px 10px', borderRadius: 10, border: '1px solid var(--border)',
    background: 'var(--surface)', color: 'var(--fg-2)',
    fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 500,
    cursor: 'pointer', transition: 'all 200ms cubic-bezier(.2,.8,.2,1)',
  };
}

Object.assign(window, { Sidebar, TopBar });