// JammSanté Clinique — shell : sidebar, topbar, rôle
const NAV = [
  { grp:'Pilotage', items:[ {id:'dash',icon:'layout-dashboard',label:'Vue d\u2019ensemble'}, {id:'rapports',icon:'bar-chart-3',label:'Rapports & finances',lock:['chef']} ] },
  { grp:'Flux patients', items:[ {id:'accueil',icon:'ticket',label:'Accueil & file'}, {id:'agenda',icon:'calendar-days',label:'Agenda praticiens'}, {id:'patients',icon:'users',label:'Patients'}, {id:'urgences',icon:'siren',label:'Urgences & ambulance',badge:'3'} ] },
  { grp:'Soins', items:[ {id:'hospit',icon:'bed-double',label:'Hospitalisation'}, {id:'bloc',icon:'scissors',label:'Bloc & maternité'}, {id:'exams',icon:'flask-conical',label:'Labo & imagerie'} ] },
  { grp:'Gestion', items:[ {id:'caisse',icon:'wallet',label:'Caisse & facturation'}, {id:'pharma',icon:'pill',label:'Pharmacie & stock',badge:'2',badgeTone:'amber'}, {id:'assurances',icon:'shield-check',label:'Assurances & recouvrement',lock:['chef']}, {id:'personnel',icon:'id-card',label:'Personnel & paie',lock:['chef']}, {id:'vacataires',icon:'handshake',label:'Vacataires & rétrocession',lock:['chef']}, {id:'comms',icon:'message-circle',label:'Communication patients'} ] },
];

function ClinicSidebar({ screen, setScreen, role }) {
  return (
    <aside style={{ width:242, flexShrink:0, background:'var(--g-surface)', borderRight:'1px solid var(--g-border)', display:'flex', flexDirection:'column', height:'100vh', position:'sticky', top:0 }}>
      <div style={{ padding:'18px 18px 14px', display:'flex', alignItems:'center', gap:10 }}>
        <img src="assets/logo-icon.svg" alt="" style={{ width:32, height:32 }} />
        <div>
          <div style={{ fontSize:15, fontWeight:800, letterSpacing:'-0.02em', color:'var(--g-fg)' }}>jamm<span style={{ color:'#0D9488' }}>santé</span></div>
          <div style={{ fontSize:10, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--g-fg-faint)' }}>Clinique</div>
        </div>
      </div>
      <div style={{ margin:'0 14px 10px', padding:'9px 12px', borderRadius:10, background:'var(--g-accent-bg)', display:'flex', alignItems:'center', gap:9 }}>
        <Icon name="building-2" size={15} color="#0D9488" />
        <div style={{ minWidth:0 }}>
          <div style={{ fontSize:12, fontWeight:700, color:'var(--g-fg)' }}>{C_CLINIC.name}</div>
          <div style={{ fontSize:10.5, color:'var(--g-fg-subtle)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{C_CLINIC.addr}</div>
        </div>
      </div>
      <nav style={{ flex:1, overflowY:'auto', padding:'0 10px 10px' }}>
        {NAV.map(g => (
          <div key={g.grp} style={{ marginBottom:6 }}>
            <div style={{ fontSize:10, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--g-fg-faint)', padding:'10px 10px 5px' }}>{g.grp}</div>
            <div style={{ display:'flex', flexDirection:'column', gap:1 }}>
              {g.items.map(it => {
                const locked = it.lock && it.lock.includes(role);
                const active = screen === it.id;
                return (
                  <button key={it.id} onClick={() => !locked && setScreen(it.id)} style={{
                    display:'flex', alignItems:'center', gap:10, padding:'8px 10px', borderRadius:9, border:'none', cursor: locked ? 'not-allowed' : 'pointer', fontFamily:'inherit', textAlign:'left',
                    background: active ? 'var(--g-accent-bg)' : 'transparent', color: locked ? 'var(--g-fg-faint)' : active ? '#0D9488' : 'var(--g-fg-muted)', fontWeight: active ? 700 : 500, fontSize:12.5, opacity: locked ? 0.55 : 1, transition:'background 140ms' }}>
                    <Icon name={it.icon} size={16} />
                    <span style={{ flex:1 }}>{it.label}</span>
                    {locked && <Icon name="lock" size={12} />}
                    {!locked && it.badge && <span style={{ fontSize:10, fontWeight:700, padding:'1px 7px', borderRadius:999, background: it.badgeTone === 'amber' ? 'var(--g-warn-bg)' : 'var(--g-danger-bg)', color: it.badgeTone === 'amber' ? '#B45309' : '#B91C1C' }}>{it.badge}</span>}
                  </button>
                );
              })}
            </div>
          </div>
        ))}
      </nav>
      <div style={{ padding:'12px 14px', borderTop:'1px solid var(--g-border)', display:'flex', alignItems:'center', gap:10 }}>
        <Avatar name={role === 'gerant' ? 'Mme Diagne' : 'Dr Awa Ndiaye'} size={32} />
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:12.5, fontWeight:700, color:'var(--g-fg)' }}>{role === 'gerant' ? 'Mme A. Diagne' : 'Dr Awa Ndiaye'}</div>
          <div style={{ fontSize:10.5, color:'var(--g-fg-subtle)' }}>{role === 'gerant' ? 'Gérante' : 'Médecin-chef'}</div>
        </div>
      </div>
    </aside>
  );
}

function ClinicTopbar({ title, sub, role, setRole, theme, setTheme, actions }) {
  return (
    <header style={{ position:'sticky', top:0, zIndex:50, background:'var(--g-topbar)', backdropFilter:'blur(10px)', borderBottom:'1px solid var(--g-border)', padding:'13px 26px', display:'flex', alignItems:'center', gap:14 }}>
      <div style={{ flex:1, minWidth:0 }}>
        <h1 style={{ fontSize:17, fontWeight:800, letterSpacing:'-0.02em', color:'var(--g-fg)' }}>{title}</h1>
        {sub && <div style={{ fontSize:11.5, color:'var(--g-fg-subtle)', marginTop:1 }}>{sub}</div>}
      </div>
      {actions}
      <Segmented items={['Gérant','Médecin-chef']} active={role === 'gerant' ? 'Gérant' : 'Médecin-chef'} onChange={v => setRole(v === 'Gérant' ? 'gerant' : 'chef')} />
      <IconButton icon={theme === 'light' ? 'moon' : 'sun'} title="Thème" onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} />
    </header>
  );
}

function ScreenPad({ children }) { return <div style={{ padding:'22px 26px 40px', animation:'gFade 200ms ease' }}>{children}</div>; }
function SectionTitle({ icon, children, right }) {
  return <div style={{ display:'flex', alignItems:'center', gap:8, margin:'22px 0 12px' }}>
    {icon && <Icon name={icon} size={16} color="#0D9488" />}
    <h2 style={{ fontSize:14, fontWeight:800, letterSpacing:'-0.01em', color:'var(--g-fg)', flex:1 }}>{children}</h2>{right}
  </div>;
}
function TriageDot({ level }) {
  const c = { rouge:'#EF4444', orange:'#F97316', jaune:'#EAB308', urgent:'#EF4444', normal:'#10B981' }[level] || '#10B981';
  return <span style={{ display:'inline-flex', alignItems:'center', gap:5, fontSize:11, fontWeight:700, color:c, textTransform:'capitalize' }}><span style={{ width:8, height:8, borderRadius:'50%', background:c, boxShadow:`0 0 0 3px ${c}22` }} />{level}</span>;
}
function Table({ cols, rows }) {
  return <div style={{ overflowX:'auto' }}><table style={{ width:'100%', borderCollapse:'collapse', fontSize:12.5 }}>
    <thead><tr>{cols.map(c => <th key={c} style={{ textAlign:'left', padding:'8px 10px', fontSize:10.5, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--g-fg-faint)', borderBottom:'1px solid var(--g-border)' }}>{c}</th>)}</tr></thead>
    <tbody>{rows.map((r, i) => <tr key={i} style={{ borderBottom:'1px solid var(--g-surface-2)' }}>{r.map((cell, j) => <td key={j} style={{ padding:'10px', color:'var(--g-fg-muted)', verticalAlign:'middle' }}>{cell}</td>)}</tr>)}</tbody>
  </table></div>;
}
Object.assign(window, { ClinicSidebar, ClinicTopbar, ScreenPad, SectionTitle, TriageDot, Table, NAV });