// Shared shell primitives — slimmed for the compact "sheet" demo layout.
const DG = '#033d2e';
const DG80 = 'rgba(3,61,46,0.8)';
const DG70 = 'rgba(3,61,46,0.7)';
const DG60 = 'rgba(3,61,46,0.6)';
const DG50 = 'rgba(3,61,46,0.5)';
const DG10 = 'rgba(3,61,46,0.1)';
const DG06 = 'rgba(3,61,46,0.06)';
const MINT = '#77deba';
const MINT32 = 'rgba(119,222,186,0.32)';
const MINT12 = 'rgba(119,222,186,0.12)';
const BGMINT = '#d3e8e1';
const BGLIGHT = '#f8faf9';
const SPINE = '#03a878';

// Legacy standalone TopBar — unused in the embedded sheet; kept exported for safety.
const TopBar = ({ currentAssistant, onHome }) => (
  <div style={{ background: BGMINT, borderBottom: `1px solid ${MINT}`, position: 'sticky', top: 0, zIndex: 40 }}>
    <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 24px', height: 56, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <a onClick={onHome} style={{ cursor: 'pointer', fontWeight: 600, color: DG, fontSize: 14 }}>Hysio — Digitale assistenten</a>
      {currentAssistant && <span style={{ fontSize: 12, color: DG70 }}>{currentAssistant.name}</span>}
    </div>
  </div>
);

// Horizontal chip-tabs that replace the old 248px AssistantSidebar.
// First chip is "HOME" (→ hub); then one per assistant.
const TopTabs = ({ assistants, currentId, onPick }) => {
  const chipStyle = (active) => ({
    height: 44,
    padding: '0 14px',
    borderRadius: 9999,
    fontSize: 12.5,
    fontWeight: 600,
    letterSpacing: '0.02em',
    border: active ? `1px solid ${DG}` : `1px solid ${MINT32}`,
    background: active ? DG : 'transparent',
    color: active ? '#fff' : DG,
    transition: 'background-color 200ms ease, color 200ms ease, border-color 200ms ease',
    scrollSnapAlign: 'start',
    flexShrink: 0,
    whiteSpace: 'nowrap',
    cursor: 'pointer',
    fontFamily: 'inherit',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 6,
  });
  return (
    <div
      className="hy-top-tabs"
      style={{
        display: 'flex',
        gap: 8,
        padding: '4px 2px',
        marginBottom: 14,
        overflowX: 'auto',
        scrollSnapType: 'x mandatory',
        WebkitOverflowScrolling: 'touch',
        position: 'sticky',
        top: 0,
        zIndex: 2,
        background: 'inherit',
      }}
    >
      <style>{`.hy-top-tabs::-webkit-scrollbar{display:none}.hy-top-tabs{scrollbar-width:none}`}</style>
      <button
        onClick={() => onPick('hub')}
        style={chipStyle(currentId === 'hub')}
        onMouseEnter={(e) => { if (currentId !== 'hub') e.currentTarget.style.background = MINT12; }}
        onMouseLeave={(e) => { if (currentId !== 'hub') e.currentTarget.style.background = 'transparent'; }}
      >
        HOME
      </button>
      {assistants.map((a) => {
        const active = a.id === currentId;
        const num = a.number || a.num;
        const short = a.shortName || (a.name || '').replace('Hysio ', '');
        return (
          <button
            key={a.id}
            onClick={() => onPick(a.id)}
            style={chipStyle(active)}
            onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = MINT12; }}
            onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}
          >
            <span style={{ fontSize: 10.5, opacity: 0.8, fontFamily: 'ui-monospace, Menlo, monospace' }}>{num}</span>
            {short}
          </button>
        );
      })}
    </div>
  );
};

const PatientStrip = ({ patient }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', background: '#fff', border: `1px solid ${MINT32}`, borderRadius: 10 }}>
    <div style={{ width: 32, height: 32, borderRadius: 9999, background: BGMINT, color: DG, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 12, flexShrink: 0 }}>
      {patient.initials || (patient.name || '').split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase()}
    </div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, flexWrap: 'wrap' }}>
        <div style={{ fontSize: 12, color: DG, fontWeight: 600 }}>{patient.name}</div>
        <div style={{ fontSize: 10.5, color: DG50, fontFamily: 'ui-monospace, Menlo, monospace' }}>{patient.episode}</div>
      </div>
      <div style={{ fontSize: 11, color: DG60, marginTop: 1 }}>{patient.age} jr · {patient.geslacht} · {patient.klacht}</div>
    </div>
    <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 9999, background: BGMINT, color: DG70, fontWeight: 500, flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
      <span style={{ width: 5, height: 5, borderRadius: 9999, background: SPINE }} />Actief
    </span>
  </div>
);

// Legacy vertical sidebar — kept exported but no longer rendered by app.jsx.
const AssistantSidebar = ({ assistants, currentId, onPick }) => (
  <div style={{ width: 248, flexShrink: 0, background: '#fff', border: `1px solid ${MINT32}`, borderRadius: 12, padding: 8 }}>
    {assistants.map((a) => {
      const active = a.id === currentId;
      return (
        <button
          key={a.id}
          onClick={() => onPick(a.id)}
          style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '7px 8px', borderRadius: 6, border: 'none', cursor: 'pointer',
            background: active ? DG : 'transparent', color: active ? '#fff' : DG, width: '100%', textAlign: 'left',
            fontFamily: 'inherit', fontSize: 12.5, fontWeight: active ? 600 : 500,
          }}
        >
          {window.Ic[a.icon](16)} <span>{a.shortName}</span>
        </button>
      );
    })}
  </div>
);

const Chip = ({ children, tone = 'default' }) => {
  const tones = {
    default: { bg: BGMINT, color: DG70 },
    solid: { bg: DG, color: '#fff' },
    active: { bg: 'rgba(3,168,120,0.12)', color: SPINE },
  };
  const t = tones[tone];
  return (
    <span style={{ fontSize: 11, padding: '3px 8px', borderRadius: 9999, background: t.bg, color: t.color, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
      {children}
    </span>
  );
};

const Card = ({ children, style = {} }) => (
  <div style={{ background: '#fff', border: `1px solid ${MINT32}`, borderRadius: 12, padding: 14, ...style }}>{children}</div>
);

const PrimaryButton = ({ children, onClick, disabled, loading, icon }) => (
  <button
    onClick={onClick}
    disabled={disabled || loading}
    style={{
      background: disabled ? DG10 : 'linear-gradient(90deg,#4fbb9e 0%,#03a878 100%)',
      color: disabled ? DG50 : '#fff',
      border: 'none', padding: '8px 14px', borderRadius: 9, fontSize: 12.5, fontWeight: 600,
      cursor: disabled || loading ? 'not-allowed' : 'pointer', fontFamily: 'inherit',
      display: 'inline-flex', alignItems: 'center', gap: 6, minHeight: 36,
      boxShadow: disabled ? 'none' : '0 1px 2px rgba(3,61,46,0.1)',
      transition: 'transform 200ms ease, opacity 200ms ease',
    }}
  >
    {loading ? <span className="hy-spin" style={{ width: 13, height: 13, border: '2px solid rgba(255,255,255,0.4)', borderTopColor: '#fff', borderRadius: 9999, display: 'inline-block' }} /> : icon}
    {children}
  </button>
);

const GhostButton = ({ children, onClick, icon }) => (
  <button
    onClick={onClick}
    style={{
      background: 'transparent', color: DG, border: `1px solid ${MINT32}`,
      padding: '7px 12px', borderRadius: 9, fontSize: 12, fontWeight: 500, cursor: 'pointer',
      fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 6, minHeight: 36,
      transition: 'background-color 200ms ease, border-color 200ms ease',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.background = MINT12; }}
    onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
  >
    {icon}{children}
  </button>
);

const SectionLabel = ({ children, icon }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, fontWeight: 600, color: DG60, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>
    {icon}{children}
  </div>
);

Object.assign(window, {
  TopBar, TopTabs, PatientStrip, AssistantSidebar, Chip, Card, PrimaryButton, GhostButton, SectionLabel,
  DG, DG80, DG70, DG60, DG50, DG10, DG06, MINT, MINT32, MINT12, BGMINT, BGLIGHT, SPINE,
});