/* global React, Icon */
// Schools.ArtemenkoCRM — Sidebar + Topbar shell

function Sidebar({ active, onNav }) {
  const { NAV } = window.CRM_DATA;
  // Счётчики считаем ВЖИВУЮ из данных (NAV.count статичен и не обновлялся при добавлении записей).
  const liveCount = (id) => {
    const D = window.CRM_DATA;
    if (id === 'leads') return (D.LEADS || []).filter(l => !l.converted).length;
    if (id === 'clients') return (D.CLIENTS || []).filter(c => !c.archived).length;
    if (id === 'staff') return (D.STAFF || []).filter(s => s.status === 'active').length;
    return null;
  };
  return (
    <aside style={{
      width: 248, flex: 'none', background: 'var(--bg-card)',
      borderRight: '1px solid var(--border)', height: '100vh',
      display: 'flex', flexDirection: 'column', position: 'sticky', top: 0,
    }}>
      <div style={{ padding: '22px 20px 18px', display: 'flex', alignItems: 'center', gap: 11 }}>
        {/* Логотип artel (PNG с прозрачным фоном). Раньше тут был битый путь ../../assets/logo-mark.svg. */}
        <img src="assets/brand/logo-full-color.png" alt="artel" style={{ height: 34, width: 'auto', display: 'block' }} />
      </div>

      <nav style={{ padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: 2 }}>
        {NAV.map(item => {
          const on = active === item.id;
          return (
            <button key={item.id} onClick={() => onNav(item.id)}
              onMouseEnter={e => { if (!on) e.currentTarget.style.background = 'var(--bg-soft)'; }}
              onMouseLeave={e => { if (!on) e.currentTarget.style.background = 'transparent'; }}
              style={{
              display: 'flex', alignItems: 'center', gap: 11, padding: '10px 12px',
              border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', textAlign: 'left',
              background: on ? 'var(--brand-soft)' : 'transparent',
              color: on ? 'var(--brand-ink)' : 'var(--text-secondary)',
              fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: on ? 600 : 500,
              position: 'relative', transition: 'background var(--dur-fast) var(--ease)',
            }}>
              {on && <span style={{ position: 'absolute', left: 0, top: 8, bottom: 8, width: 3, borderRadius: 3, background: 'var(--brand)' }} />}
              <Icon name={item.icon} size={19} strokeWidth={on ? 2 : 1.75} />
              <span style={{ flex: 1 }}>{item.label}</span>
              {(() => { const cnt = liveCount(item.id); return cnt != null && (
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                  padding: '1px 7px', borderRadius: 'var(--radius-pill)',
                  background: on ? 'rgba(30,58,138,0.12)' : 'var(--bg-soft)',
                  color: on ? 'var(--brand-ink)' : 'var(--text-dim)',
                }}>{cnt}</span>
              ); })()}
            </button>
          );
        })}
      </nav>

      <div style={{ marginTop: 'auto', padding: 12 }}>
        <button onClick={() => onNav('settings')}
          onMouseEnter={e => { if (active !== 'settings') e.currentTarget.style.background = 'var(--bg-soft)'; }}
          onMouseLeave={e => { if (active !== 'settings') e.currentTarget.style.background = 'transparent'; }}
          style={{
          display: 'flex', alignItems: 'center', gap: 11, padding: '10px 12px', width: '100%',
          border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', textAlign: 'left',
          background: active === 'settings' ? 'var(--bg-soft)' : 'transparent', color: 'var(--text-secondary)',
          fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
          transition: 'background var(--dur-fast) var(--ease)',
        }}>
          <Icon name="settings" size={19} /><span>Настройки</span>
        </button>
      </div>
    </aside>
  );
}

function Topbar({ title, searchPlaceholder }) {
  return (
    <header style={{
      display: 'flex', alignItems: 'center', gap: 16, padding: '18px 32px',
      borderBottom: '1px solid var(--border)', background: 'var(--bg)',
      position: 'sticky', top: 0, zIndex: 5,
    }}>
      <h1 style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.5px', color: 'var(--text)', margin: 0 }}>{title}</h1>
      <div style={{ flex: 1 }} />
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8, background: 'var(--bg-card)',
        border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', padding: '8px 12px', width: 280,
      }}>
        <Icon name="search" size={16} style={{ color: 'var(--text-dim)' }} />
        <input placeholder={searchPlaceholder || 'Поиск…'} style={{
          border: 'none', outline: 'none', background: 'transparent', flex: 1,
          fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--text)',
        }} />
      </div>
      <button title="Уведомления" style={{
        position: 'relative', width: 40, height: 40, borderRadius: 'var(--radius-sm)',
        border: '1px solid var(--border)', background: 'var(--bg-card)', cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)',
      }}>
        <Icon name="bell" size={18} />
        <span style={{ position: 'absolute', top: 8, right: 9, width: 7, height: 7, borderRadius: '50%', background: 'var(--coral)', border: '1.5px solid var(--bg-card)' }} />
      </button>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, paddingLeft: 6 }}>
        <Avatar animal="dog" tone="navy" size={36} />
      </div>
    </header>
  );
}

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