// Shared shell primitives for WhatsTeam v2 demos.
// Exposes:
//   window.WT.Rail({ activeNav })          — 60px dark nav rail (col 1)
//   window.WT.Sidebar({ title, children })  — 240px light sidebar (col 2)
// Each view composes its own grid (different number of columns).

(function () {
  var T = window.WT.makeT(null) // core-only T for rail tooltips

  var NAV_ITEMS = [
    { key: 'dashboard', icon: 'fa-home' },
    { key: 'chats', icon: 'fa-comments' },
    { key: 'campaigns', icon: 'fa-bullhorn' },
    { key: 'contacts', icon: 'fa-address-book' },
    { key: 'flows', icon: 'fa-project-diagram' },
    { key: 'analytics', icon: 'fa-chart-bar' },
    { key: 'files', icon: 'fa-folder-open' },
    { key: 'developers', icon: 'fa-code' },
    { key: 'settings', icon: 'fa-cog' },
    { key: 'help', icon: 'fa-question-circle' }
  ]

  function Rail (props) {
    var active = props.activeNav
    return (
      <aside className='v2-rail'>
        <div className='ws-av'>AM<span className='status-dot' /></div>
        {NAV_ITEMS.map(function (it) {
          var cls = 'v2-rail-btn' + (active === it.key ? ' active' : '')
          return (
            <button key={it.key} className={cls} title={T(it.key)}>
              <i className={'fas ' + it.icon} />
            </button>
          )
        })}
        <div className='v2-rail-spacer' />
        <button className='v2-rail-btn' title={T('searchTitle')}><i className='fas fa-search' /></button>
        <button className='v2-rail-btn' title={T('activity')}><i className='fas fa-bell' /><span className='badge-red'>3</span></button>
        <button className='v2-rail-btn quick' title={T('quick')}><i className='fas fa-plus-circle' /></button>
      </aside>
    )
  }

  function Sidebar (props) {
    return (
      <aside className='v2-filters'>
        <div className='v2-filters-head'>
          <div className='t'>{props.title}</div>
          {props.action && (
            <button className='new-chat' title={props.action.title} onClick={props.action.onClick}>
              <i className={'fas ' + (props.action.icon || 'fa-plus')} />
            </button>
          )}
        </div>
        <div className='v2-filters-scroll'>
          {props.children}
        </div>
      </aside>
    )
  }

  function Section (props) {
    var open = props.open !== false
    return (
      <div className={'v2-fsec' + (open ? '' : ' collapsed')}>
        <div className='v2-fsec-head' onClick={props.onToggle}>
          <span style={{ flex: 1 }}>{props.title}</span>
          {props.onToggle && <div className='right'><i className='fas fa-chevron-down caret' /></div>}
        </div>
        <div className='v2-fsec-body'>{props.children}</div>
      </div>
    )
  }

  function Item (props) {
    var cls = 'v2-fitem' + (props.active ? ' active' : '') + (props.unread ? ' has-unread' : '')
    return (
      <div className={cls} onClick={props.onClick}>
        {props.dot && <span className='fitem-dot' style={{ background: props.dot }} />}
        {props.icon && <i className={'fas ' + props.icon + ' fitem-ico'} style={props.color ? { color: props.color } : null} />}
        <span className='fitem-label'>{props.label}</span>
        {props.badge != null && <span className='fitem-badge'>{props.badge}</span>}
      </div>
    )
  }

  window.WT.Rail = Rail
  window.WT.Sidebar = Sidebar
  window.WT.Section = Section
  window.WT.Item = Item
})()