// Shell: sidebar, topbar, role switcher

const NAV_ITEMS = [
  { id: 'dashboard', label: 'Dashboard', icon: 'dashboard', group: 'Today' },
  { id: 'calendar', label: 'Unified Calendar', icon: 'calendar', group: 'Today' },
  { id: 'appointments', label: 'Appointments', icon: 'clipboard', group: 'Today', badge: '18' },
  { id: 'patients', label: 'Patients', icon: 'users', group: 'Records' },
  { id: 'multi', label: 'Multi-Dept Scheduler', icon: 'workflow', group: 'Scheduling' },
  { id: 'waitlist', label: 'Waitlist', icon: 'history', group: 'Scheduling', badge: '7' },
  { id: 'noshow', label: 'No-show & Overbook', icon: 'zap', group: 'Scheduling' },
  { id: 'resources', label: 'Resources', icon: 'box', group: 'Operations' },
  { id: 'notifications', label: 'Notifications', icon: 'bell', group: 'Operations', badge: '3', badgeTone: 'warn' },
  { id: 'analytics', label: 'Analytics', icon: 'chart', group: 'Insights' },
  { id: 'settings', label: 'Settings', icon: 'settings', group: 'Insights' },
];

const Sidebar = ({ active, onChange }) => {
  const groups = NAV_ITEMS.reduce((acc, it) => {
    (acc[it.group] = acc[it.group] || []).push(it);
    return acc;
  }, {});

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">Z</div>
        <div>
          <div className="brand-name">Zylo</div>
          <div className="brand-sub">Scheduling OS</div>
        </div>
      </div>
      <div className="nav-section">
        {Object.entries(groups).map(([g, items]) => (
          <div key={g}>
            <div className="nav-label">{g}</div>
            {items.map(it => (
              <button
                key={it.id}
                className={`nav-item ${active === it.id ? 'active' : ''}`}
                onClick={() => onChange(it.id)}
              >
                <Icon name={it.icon} size={15} />
                <span>{it.label}</span>
                {it.badge && <span className={`badge ${it.badgeTone || ''}`}>{it.badge}</span>}
              </button>
            ))}
          </div>
        ))}
      </div>
      <div className="sidebar-footer">
        <Avatar name="Rhea Calder" size={30} />
        <div className="user-meta">
          <b>Rhea Calder</b>
          <span>Scheduling Coordinator</span>
        </div>
      </div>
    </aside>
  );
};

const Topbar = ({ title, sub, children, onOpenModal }) => (
  <div className="topbar">
    <div>
      <span className="top-title serif">{title}</span>
      {sub && <span className="top-title-sub">{sub}</span>}
    </div>
    <div className="top-actions">
      <div className="search-box">
        <Icon name="search" size={14} />
        <input placeholder="Search patients, appointments…" />
        <kbd>⌘K</kbd>
      </div>
      {children}
      <button className="btn accent" onClick={onOpenModal}>
        <Icon name="plus" size={14} /> New appointment
      </button>
    </div>
  </div>
);

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