// Hospital Dashboard — Shell (Sidebar, Header, Layout)

const { useState, useEffect, useRef } = React;

const HOSP_NAV = [
  { id: 'ward', label: 'Ward Grid', icon: 'Grid' },
  { id: 'vitals', label: 'Live Vitals', icon: 'Activity' },
  { id: 'hospitals', label: 'Hospitals', icon: 'Building' },
  { id: 'patients', label: 'Patients', icon: 'Users' },
  { id: 'devices', label: 'Devices', icon: 'Device' },
  { id: 'alerts', label: 'Alerts', icon: 'Bell' },
  { id: 'map', label: 'Floor Plan', icon: 'Map' },
];

function Sidebar({ current, onNav, mode = 'full', alertCount = 0, accent }) {
  // mode: 'full' | 'icon' | 'floating'
  const collapsed = mode === 'icon';
  const floating = mode === 'floating';

  return (
    <aside className={`sidebar sidebar-${mode}`}>
      <div className="sidebar-inner">
        <div className="sb-brand">
          <div className="sb-mark" style={{ background: `linear-gradient(135deg, ${accent} 0%, #00BCD4 100%)` }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <path d="M3 12h4l2-6 4 12 2-6h6" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          {!collapsed && (
            <div className="sb-brand-text">
              <div className="sb-brand-name">ArogyaSync</div>
              <div className="sb-brand-sub">Hospital · v2.4</div>
            </div>
          )}
        </div>

        <nav className="sb-nav">
          {HOSP_NAV.map((item, i) => {
            const I = window.Icon[item.icon];
            const active = current === item.id;
            const badge = item.id === 'alerts' ? alertCount : 0;
            return (
              <button key={item.id} onClick={() => onNav(item.id)}
                className={`sb-nav-item ${active ? 'active' : ''}`}
                style={{ animationDelay: `${i * 40}ms` }}>
                <span className="sb-nav-icon"><I /></span>
                {!collapsed && <span className="sb-nav-label">{item.label}</span>}
                {!collapsed && badge > 0 && <span className="sb-nav-badge">{badge}</span>}
                {collapsed && badge > 0 && <span className="sb-nav-badge sb-nav-badge-dot" />}
                {active && <span className="sb-nav-rail" style={{ background: accent }} />}
              </button>
            );
          })}
        </nav>

        <div className="sb-footer">
          {!collapsed ? (
            <div className="sb-user">
              <div className="sb-avatar" style={{ background: `linear-gradient(135deg, ${accent}, #ec4899)` }}>AM</div>
              <div className="sb-user-text">
                <div className="sb-user-name">Dr. A. Mehta</div>
                <div className="sb-user-role">Senior Physician</div>
              </div>
              <button className="sb-logout" title="Sign out"><window.Icon.Logout /></button>
            </div>
          ) : (
            <div className="sb-avatar" style={{ background: `linear-gradient(135deg, ${accent}, #ec4899)`, margin: '0 auto' }}>AM</div>
          )}
        </div>
      </div>
    </aside>
  );
}

function Header({ title, subtitle, dark, onToggleDark, accent, search, onSearch, live, onToggleLive, breadcrumb }) {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const t = time.toTimeString().slice(0, 8);
  const d = time.toLocaleDateString('en-GB', { weekday: 'short', day: '2-digit', month: 'short' });

  return (
    <header className="header">
      <div className="header-left">
        {breadcrumb && (
          <div className="breadcrumb">
            {breadcrumb.map((b, i) => (
              <React.Fragment key={i}>
                {i > 0 && <span className="bc-sep"><window.Icon.ChevronRight /></span>}
                <span className={i === breadcrumb.length - 1 ? 'bc-current' : 'bc-link'}>{b}</span>
              </React.Fragment>
            ))}
          </div>
        )}
        <h1 className="page-title">{title}</h1>
        {subtitle && <div className="page-subtitle">{subtitle}</div>}
      </div>

      <div className="header-right">
        <div className="header-search">
          <window.Icon.Search />
          <input placeholder="Search patient, bed, device…" value={search} onChange={(e) => onSearch(e.target.value)} />
          <kbd>⌘K</kbd>
        </div>

        <button className={`live-toggle ${live ? 'on' : 'off'}`} onClick={onToggleLive} title={live ? 'Pause live data' : 'Resume live data'}>
          <span className="live-dot" />
          {live ? 'LIVE' : 'PAUSED'}
        </button>

        <div className="header-clock">
          <div className="clock-time">{t}</div>
          <div className="clock-date">{d} · IST</div>
        </div>

        <button className="icon-btn" onClick={onToggleDark} title={dark ? 'Light mode' : 'Dark mode'}>
          {dark ? <window.Icon.Sun /> : <window.Icon.Moon />}
        </button>
      </div>
    </header>
  );
}

Object.assign(window, { Sidebar, Header, HOSP_NAV });