// Sidebar nav — main routes, per-property links, cleaner portal, settings, profile.
function Sidebar({ page, onNav, houses, needsReviewCount }) {
  const mainNav = [
    { id: 'overview',     label: 'Overview',      icon: Icon.home },
    { id: 'pnl',          label: 'P & L',         icon: Icon.pl },
    { id: 'transactions', label: 'Transactions',  icon: Icon.txns },
    { id: 'needs-review', label: 'Needs Review',  icon: Icon.txns, badge: needsReviewCount },
    { id: 'connections',  label: 'Connections',   icon: Icon.connections },
  ];
  return (
    <nav className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark">s</div>
        <span>Slate</span>
      </div>

      <div className="sidebar-section">
        {mainNav.map(n => (
          <button key={n.id} className={`nav-item ${page.name === n.id ? 'active' : ''}`}
                  onClick={() => onNav({ name: n.id })}>
            <span className="nav-item-icon">{n.icon}</span>
            <span style={{ flex: 1 }}>{n.label}</span>
            {n.badge ? (
              <span style={{
                background: 'var(--accent)', color: 'white',
                fontSize: 11, fontWeight: 600,
                padding: '1px 7px', borderRadius: 999,
                minWidth: 20, textAlign: 'center',
                lineHeight: 1.5,
              }}>{n.badge}</span>
            ) : null}
          </button>
        ))}
      </div>

      <div className="sidebar-section">
        <div className="sidebar-label">Properties</div>
        {houses.map(h => (
          <button key={h.id}
                  className={`nav-item ${page.name === 'house' && page.houseId === h.id ? 'active' : ''}`}
                  onClick={() => onNav({ name: 'house', houseId: h.id })}>
            <span className="nav-item-icon" style={{ color: h.accentColor, opacity: 1 }}>
              <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="5" fill="currentColor"/></svg>
            </span>
            {h.name}
          </button>
        ))}
        <button className="nav-item" onClick={() => onNav({ name: 'settings' })}>
          <span className="nav-item-icon">{Icon.plus}</span>
          <span style={{ color: 'var(--text-tertiary)' }}>Add property</span>
        </button>
      </div>

      <div className="sidebar-section">
        <button className={`nav-item ${page.name === 'cleaners' ? 'active' : ''}`}
                onClick={() => onNav({ name: 'cleaners' })}>
          <span className="nav-item-icon">{Icon.cleaners}</span>
          Cleaner portal
        </button>
        <button className={`nav-item ${page.name === 'settings' ? 'active' : ''}`}
                onClick={() => onNav({ name: 'settings' })}>
          <span className="nav-item-icon">{Icon.settings}</span>
          Settings
        </button>
      </div>

      <div className="sidebar-footer">
        <div className="avatar">EH</div>
        <div style={{ lineHeight: 1.3, flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 500 }}>Ellery Harmon</div>
          <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Owner</div>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { Sidebar });