// Workforce OS — Platform shell: sidebar (with sub-nav accordion) + topbar.

const NAV = [
{ key: 'home', label: 'Home', icon: 'sparkles', badge: null,
  subs: [] },
{ key: 'patients', label: 'Patients', icon: 'users', badge: null,
  subs: ['List', 'Add new / Invite', 'Search', 'Filters'] },
{ key: 'capacity', label: 'Capacity', icon: 'gauge', badge: '12',
  subs: ['To-Do', 'Notes', 'Calendar', 'Flags', 'Cycles'] },
{ key: 'portal', label: 'Patient Portal', icon: 'smartphone', badge: null,
  subs: ['Onboarding', 'Home page', 'Colors', 'Forms'] },
{ key: 'comms', label: 'Communication', icon: 'message-square', badge: '4',
  subs: ['Patient chat', 'Internal', 'Emails', 'SMS', 'App'] },
{ key: 'apps', label: 'Apps', icon: 'layout-grid', badge: null,
  subs: ['MedReview', 'CareCall', 'Scribe', 'Agent Hub'] },
{ key: 'finance', label: 'Finance', icon: 'wallet', badge: '3',
  subs: ['Payments', 'Pre-Authorization', 'Invoicing', 'Insurance'] },
{ key: 'settings', label: 'Settings', icon: 'settings', badge: null,
  subs: ['Smart Flagging', 'Global Context', 'Journey', 'Knowledgebase', 'Team', 'Connectors'] }];


function Sidebar({ active, onNav, collapsed, onToggle, medReviewLink, appsActiveSub, subLinks, subActive, onSubNav }) {
  React.useEffect(() => {window.lucide && window.lucide.createIcons();}, [active, collapsed]);
  const [expanded, setExpanded] = React.useState(active);

  React.useEffect(() => {setExpanded(active);}, [active]);

  return (
    <aside style={{
      width: collapsed ? 64 : 232,
      flexShrink: 0,
      background: '#fff',
      borderRight: '1px solid #EBEBEB',
      display: 'flex', flexDirection: 'column',
      transition: 'width 220ms cubic-bezier(0.22,1,0.36,1)',
      overflow: 'hidden'
    }}>
      {/* Logo + clinic */}
      <div style={{
        padding: collapsed ? '18px 12px' : '18px 16px',
        display: 'flex', alignItems: 'center', gap: 10,
        borderBottom: '1px solid #EBEBEB'
      }}>
        <img src={(window.__resources && window.__resources.eraLogo) || "assets/logo-era-icon-light.svg"} alt="era" style={{ width: 30, height: 30, flexShrink: 0 }} />
        {!collapsed &&
        <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'Urbanist', fontWeight: 700, fontSize: 14, letterSpacing: '-0.005em' }}>era<span style={{ color: '#62748E', fontWeight: 500 }}> · workforce</span></div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#62748E', marginTop: 1, letterSpacing: '0.04em' }}>Coastal Fertility Center</div>
          </div>
        }
      </div>

      {/* Nav items */}
      <nav style={{ padding: '12px 8px', flex: 1, overflowY: 'auto' }}>
        {NAV.map((item) => {
          const isActive = active === item.key;
          const isExpanded = !collapsed && expanded === item.key && item.subs.length > 0;
          return (
            <div key={item.key} style={{ marginBottom: 2 }}>
              <button onClick={() => {onNav(item.key);setExpanded((e) => e === item.key ? null : item.key);}} style={{
                width: '100%', display: 'flex', alignItems: 'center', gap: 10,
                padding: collapsed ? '10px 0' : '9px 12px',
                justifyContent: collapsed ? 'center' : 'flex-start',
                borderRadius: 8, border: 'none', cursor: 'pointer',
                background: isActive ? '#000' : 'transparent',
                color: isActive ? '#fff' : '#000',
                fontFamily: 'Urbanist', fontSize: 13, fontWeight: 600,
                textAlign: 'left'
              }}>
                <i data-lucide={item.icon} style={{ width: 16, height: 16, flexShrink: 0 }}></i>
                {!collapsed && <span style={{ flex: 1 }}>{item.label}</span>}
                {!collapsed && item.badge &&
                <span style={{
                  padding: '1px 7px', borderRadius: 999,
                  background: isActive ? '#FF404C' : '#FFE5E7',
                  color: isActive ? '#fff' : '#a82530',
                  fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800
                }}>{item.badge}</span>
                }
                {!collapsed && item.subs.length > 0 &&
                <i data-lucide={isExpanded ? 'chevron-down' : 'chevron-right'}
                style={{ width: 12, height: 12, color: isActive ? '#fff' : '#62748E' }}></i>
                }
              </button>
              {isExpanded &&
              <div style={{ paddingLeft: 34, marginTop: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
                  {item.subs.map((sub, i) => {
                  const subKey = `${item.key}:${sub}`;
                  const isSubActive = appsActiveSub ?
                  item.key === 'apps' && sub === appsActiveSub :
                  i === 0;
                  const linkHref = subLinks && subLinks[subKey];
                  const isMedReview = item.key === 'apps' && sub === 'MedReview' && medReviewLink;
                  const handler = linkHref ?
                  () => {window.location.href = linkHref;} :
                  isMedReview ? () => {window.location.href = medReviewLink;} : undefined;
                  return (
                    <button key={sub} onClick={handler} style={{
                      display: 'flex', alignItems: 'center', gap: 6,
                      padding: '6px 10px',
                      background: 'transparent', border: 'none', cursor: 'pointer',
                      color: isSubActive ? '#000' : '#62748E',
                      fontFamily: 'Urbanist', fontSize: 12, fontWeight: isSubActive ? 700 : 500,
                      textAlign: 'left', borderRadius: 6,
                      borderLeft: `2px solid ${isSubActive ? '#7E80FF' : 'transparent'}`,
                      paddingLeft: 12
                    }}>
                        <span style={{ flex: 1 }}>{sub}</span>
                        {linkHref && !isSubActive && <i data-lucide="external-link" style={{ width: 11, height: 11, color: '#62748E' }}></i>}
                        {isMedReview && !linkHref && <i data-lucide="external-link" style={{ width: 11, height: 11, color: '#7E80FF' }}></i>}
                      </button>);

                })}
                </div>
              }
            </div>);

        })}
      </nav>

      {/* User */}
      <div style={{
        padding: collapsed ? '12px 12px' : '12px 16px',
        borderTop: '1px solid #EBEBEB',
        display: 'flex', alignItems: 'center', gap: 10
      }}>
        <Avatar name="Robin Lee" size={32} />
        {!collapsed &&
        <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700 }}>Robin Lee</div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#62748E' }}>Coordinator · CFC</div>
          </div>
        }
        {!collapsed &&
        <button onClick={onToggle} style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 4, color: '#62748E' }}>
            <i data-lucide="panel-left-close" style={{ width: 14, height: 14 }}></i>
          </button>
        }
      </div>
    </aside>);

}

function TopBar({ title, subtitle, eyebrow, actions, collapsed, onToggleSidebar }) {
  React.useEffect(() => {window.lucide && window.lucide.createIcons();});
  return (
    <header style={{
      padding: '14px 24px',
      background: '#fff', borderBottom: '1px solid #EBEBEB',
      display: 'flex', alignItems: 'center', gap: 16, flexShrink: 0
    }}>
      {collapsed &&
      <button onClick={onToggleSidebar} style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 4, color: '#000' }}>
          <i data-lucide="panel-left-open" style={{ width: 18, height: 18 }}></i>
        </button>
      }
      <div style={{ flex: 1, minWidth: 0 }}>
        {eyebrow &&
        <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', color: '#62748E', textTransform: 'uppercase', marginBottom: 2 }}>
            {eyebrow}
          </div>
        }
        <div style={{ fontFamily: 'Urbanist', fontWeight: 700, fontSize: 20, letterSpacing: '-0.01em' }}>{title}</div>
        {subtitle &&
        <div style={{ fontFamily: 'Urbanist', fontSize: 12, color: '#62748E', marginTop: 1 }}>{subtitle}</div>
        }
      </div>
      {actions}
      {/* Global ⌘K search */}
      <button style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '8px 12px', background: '#FDFBFA',
        border: '1px solid #EBEBEB', borderRadius: 8,
        fontFamily: 'Urbanist', fontSize: 12, color: '#62748E', cursor: 'pointer',
        minWidth: 260
      }}>
        <i data-lucide="search" style={{ width: 13, height: 13 }}></i>
        <span style={{ flex: 1, textAlign: 'left' }}>Search patients, docs, tasks…</span>
        <span style={{
          padding: '1px 6px', borderRadius: 4, background: '#fff',
          border: '1px solid #EBEBEB', fontFamily: 'ui-monospace, Menlo, monospace',
          fontSize: 10, color: '#62748E'
        }}>⌘K</span>
      </button>

      <button style={{
        padding: '8px 10px', background: '#fff',
        border: '1px solid #EBEBEB', borderRadius: 8, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 6
      }}>
        <i data-lucide="building-2" style={{ width: 14, height: 14, color: '#62748E' }}></i>
        <span style={{ fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700 }}>NW </span>
        <i data-lucide="chevron-down" style={{ width: 12, height: 12, color: '#62748E' }}></i>
      </button>

      <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', position: 'relative', padding: 6 }}>
        <i data-lucide="bell" style={{ width: 18, height: 18 }}></i>
        <span style={{ position: 'absolute', top: 4, right: 4, width: 8, height: 8, borderRadius: 999, background: '#FF404C', border: '2px solid #fff' }}></span>
      </button>
    </header>);

}

Object.assign(window, { Sidebar, TopBar, NAV });