const { Badge } = window.CLIQDesignSystem_d61053;

/**
 * Facility console sidebar — navy rail with CLIQ wordmark, nav, and the
 * facility identity. B2B operations surface for Assisted / Independent /
 * Memory Care directors.
 */
window.Sidebar = function Sidebar({ active, onNavigate }) {
  const nav = [
    { id: 'overview', icon: 'layout-dashboard', label: 'Overview' },
    { id: 'residents', icon: 'users', label: 'Residents' },
    { id: 'network', icon: 'shield-lock', label: 'Network oversight' },
    { id: 'approvals', icon: 'checkup-list', label: 'Approvals', badge: 3 },
    { id: 'billing', icon: 'receipt', label: 'Billing & licensing' },
  ];
  return (
    <aside style={{ width: 248, background: 'var(--navy-900)', display: 'flex', flexDirection: 'column', flexShrink: 0, padding: '22px 16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 8px 22px' }}>
        <img src="../../assets/logos/cliq-wordmark-white.png" alt="CLIQ" style={{ height: 26 }} />
        <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--cliq-teal)', border: '1px solid var(--teal-600)', borderRadius: 6, padding: '2px 7px', letterSpacing: '.05em' }}>FACILITY</span>
      </div>

      <nav style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: 1 }}>
        {nav.map(n => {
          const on = active === n.id;
          return (
            <button key={n.id} onClick={() => onNavigate(n.id)} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '11px 12px',
              borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer',
              background: on ? 'var(--violet-500)' : 'transparent',
              color: on ? '#fff' : 'var(--navy-200)', fontFamily: 'var(--font-sans)',
              fontSize: 15, fontWeight: 600, textAlign: 'left',
            }}>
              <i className={`ti ti-${n.icon}`} style={{ fontSize: 21 }} aria-hidden="true" />
              <span style={{ flex: 1 }}>{n.label}</span>
              {n.badge && <span style={{ background: on ? 'rgba(255,255,255,.25)' : 'var(--cliq-teal)', color: on ? '#fff' : 'var(--navy-800)', fontSize: 12, fontWeight: 700, borderRadius: 999, padding: '1px 8px' }}>{n.badge}</span>}
            </button>
          );
        })}
      </nav>

      <div style={{ background: 'rgba(255,255,255,.06)', borderRadius: 'var(--radius-lg)', padding: 14, marginTop: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <i className="ti ti-lock" style={{ fontSize: 16, color: 'var(--cliq-teal)' }} />
          <span style={{ fontSize: 12, fontWeight: 700, color: '#fff' }}>Zero-Knowledge</span>
        </div>
        <p style={{ fontSize: 12, color: 'var(--navy-300)', lineHeight: 1.45, margin: 0 }}>Staff see network metrics only. Private resident logs &amp; credentials stay sealed.</p>
      </div>
    </aside>
  );
}