// scaffolding.jsx — overall page chrome: sidebar + dark header tabs

function Sidebar({ accent }) {
  const items = [
    { icon: '👤', label: '聯絡人' },
    { icon: '🩺', label: '病歷' },
    { icon: '☢', label: '影像' },
    { icon: '🧪', label: '檢驗' },
    { icon: '📊', label: '統計' },
    { icon: '⚙', label: '設定', active: true },
    { icon: '🌐', label: '網站' },
    { icon: '⎋', label: '登出' },
  ];
  return (
    <aside style={{
      width: 56, background: '#3f3a36', color: '#dcd3c8',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      paddingTop: 14, gap: 4, flexShrink: 0, minHeight: '100vh',
      fontFamily: 'ui-sans-serif, system-ui',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 6,
        background: '#2c2925', display: 'grid', placeItems: 'center',
        color: '#e7ddd0', fontSize: 18, fontFamily: 'Georgia, serif',
        fontStyle: 'italic', marginBottom: 12,
      }}>ö</div>
      {items.slice(0,5).map((it, i) => (
        <div key={i} style={{
          width: 36, height: 36, display: 'grid', placeItems: 'center',
          color: 'rgba(220,211,200,.55)', fontSize: 14, cursor: 'default',
        }}>{it.icon}</div>
      ))}
      <div style={{
        width: 36, height: 36, display: 'grid', placeItems: 'center',
        color: accent, fontSize: 14, position: 'relative',
        background: 'rgba(255,255,255,.05)', borderRadius: 6,
      }}>
        ⚙
        <span style={{
          position: 'absolute', left: -2, top: 6, bottom: 6, width: 2,
          background: accent, borderRadius: 1,
        }} />
      </div>
      {items.slice(6).map((it, i) => (
        <div key={i+10} style={{
          width: 36, height: 36, display: 'grid', placeItems: 'center',
          color: 'rgba(220,211,200,.55)', fontSize: 14,
        }}>{it.icon}</div>
      ))}
      <div style={{ flex: 1 }} />
      <div style={{ fontSize: 9, color: 'rgba(220,211,200,.4)', paddingBottom: 8 }}>1.15.12</div>
    </aside>
  );
}

function HeaderTabs({ tabs, active, onChange, accent }) {
  return (
    <div style={{
      background: '#3f3a36', color: '#dcd3c8',
      display: 'flex', alignItems: 'stretch',
      paddingLeft: 8, height: 56,
      fontFamily: 'ui-sans-serif, system-ui', fontSize: 14,
      borderBottom: '1px solid #2c2925', position: 'relative',
    }}>
      {tabs.map(t => {
        const isActive = active === t.id;
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            background: 'transparent', border: 0,
            color: isActive ? accent : 'rgba(220,211,200,.78)',
            padding: '0 24px', cursor: 'pointer',
            position: 'relative', fontSize: 14,
            fontWeight: isActive ? 500 : 400,
            letterSpacing: '.02em',
          }}>
            {t.label}
            {isActive && (
              <span style={{
                position: 'absolute', left: 16, right: 16, bottom: 0,
                height: 3, background: accent, borderRadius: '2px 2px 0 0',
              }} />
            )}
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { Sidebar, HeaderTabs });