import React from 'react'

const NAV_ITEMS = [
  { id: 'dashboard', label: 'Dashboard', icon: '⬡', badge: null },
  { id: 'trip-tracker', label: 'Trip Tracker', icon: '♥', badge: '3' },
  { id: 'schedule', label: 'Schedule', icon: '◷', badge: null },
  { id: 'providers', label: 'Providers', icon: '✦', badge: null },
  { id: 'rooms', label: 'Rooms', icon: '▣', badge: null },
  { id: 'reports', label: 'Reports', icon: '◈', badge: null },
]

const BOTTOM_ITEMS = [
  { id: 'notifications', label: 'Notifications', icon: '◉', badge: '5' },
  { id: 'settings', label: 'Settings', icon: '⚙', badge: null },
]

/**
 * Sidebar — primary navigation for CTM Concierge.
 * @param {string}   activePage — the currently active page id (owned by App)
 * @param {function} onNavigate — callback to change the active page
 */
export default function Sidebar({ activePage, onNavigate }) {
  return (
    <aside className="sidebar">
      {/* Logo / App identity */}
      <div className="sidebar-logo">
        <div className="sidebar-logo-icon" aria-hidden="true">✦</div>
        <div className="sidebar-logo-text">
          <span className="sidebar-logo-name">CTM Concierge</span>
          <span className="sidebar-logo-tagline">Trip Tracker</span>
        </div>
      </div>

      {/* Primary navigation */}
      <nav className="sidebar-nav" aria-label="Primary navigation">
        <span className="sidebar-section-label">Main</span>
        {NAV_ITEMS.map((item) => (
          <button
            key={item.id}
            id={`nav-${item.id}`}
            className={`nav-item${activePage === item.id ? ' active' : ''}`}
            onClick={() => onNavigate(item.id)}
            aria-current={activePage === item.id ? 'page' : undefined}
          >
            <span className="nav-item-icon" aria-hidden="true">{item.icon}</span>
            {item.label}
            {item.badge && (
              <span className="nav-item-badge" aria-label={`${item.badge} alerts`}>
                {item.badge}
              </span>
            )}
          </button>
        ))}

        <span className="sidebar-section-label" style={{ marginTop: 'var(--space-4)' }}>System</span>
        {BOTTOM_ITEMS.map((item) => (
          <button
            key={item.id}
            id={`nav-${item.id}`}
            className={`nav-item${activePage === item.id ? ' active' : ''}`}
            onClick={() => onNavigate(item.id)}
            aria-current={activePage === item.id ? 'page' : undefined}
          >
            <span className="nav-item-icon" aria-hidden="true">{item.icon}</span>
            {item.label}
            {item.badge && (
              <span className="nav-item-badge" aria-label={`${item.badge} alerts`}>
                {item.badge}
              </span>
            )}
          </button>
        ))}
      </nav>

      {/* User identity footer */}
      <div className="sidebar-footer">
        <div className="sidebar-user" role="button" tabIndex={0} aria-label="User profile">
          <div className="sidebar-avatar" aria-hidden="true">JD</div>
          <div className="sidebar-user-info">
            <div className="sidebar-user-name">Dr. Jane Doe</div>
            <div className="sidebar-user-role">Senior Physician</div>
          </div>
        </div>
      </div>
    </aside>
  )
}