// JammSanté Dentiste — Shell (sidebar + topbar) + App
function DShell({ children, screen, onNavigate, theme, onToggleTheme }) {
  const groups = [
    { g:'Clinique', items:[
      { id:'accueil', label:'Accueil', icon:'layout-dashboard' },
      { id:'patients', label:'Patients', icon:'users' },
      { id:'consultation', label:'Consultation', icon:'mic' },
      { id:'agenda', label:'Agenda', icon:'calendar' },
    ]},
    { g:'Prothèse & finances', items:[
      { id:'devis', label:'Plans & devis', icon:'file-text' },
      { id:'labo', label:'Laboratoire', icon:'flask-conical' },
      { id:'assurance', label:'Assurances', icon:'shield-check' },
    ]},
    { g:'Cabinet', items:[
      { id:'stock', label:'Stock', icon:'package' },
    ]},
  ];
  return (
    <div style={{ display:'grid', gridTemplateColumns:'248px 1fr', minHeight:'100vh', background:'var(--d-bg)' }}>
      <aside style={{ background:'var(--d-surface)', borderRight:'1px solid var(--d-border)', display:'flex', flexDirection:'column', padding:'20px 14px', position:'sticky', top:0, height:'100vh', overflowY:'auto' }}>
        <div style={{ display:'flex', alignItems:'center', gap:10, padding:'4px 8px 6px' }}>
          <img src="assets/logo-icon.svg" alt="" style={{ width:26, height:26 }} />
          <span style={{ fontSize:17, fontWeight:600, letterSpacing:'-0.02em', color:'var(--d-fg)' }}>jamm<span style={{ color:'#0D9488' }}>santé</span></span>
        </div>
        <div style={{ fontSize:10, fontWeight:700, color:'#0369A1', letterSpacing:'0.14em', padding:'0 8px 16px', textTransform:'uppercase' }}>Cabinet dentaire</div>
        <button style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 10px', margin:'0 0 16px', borderRadius:9, background:'var(--d-bg)', border:'1px solid var(--d-border)', cursor:'pointer', color:'var(--d-fg-faint)', fontSize:12, fontFamily:'inherit', textAlign:'left' }}>
          <Icon name="search" size={14} /><span style={{ flex:1 }}>Recherche rapide…</span>
          <span style={{ fontSize:10, fontFamily:'JetBrains Mono, monospace', padding:'1px 6px', borderRadius:4, background:'var(--d-surface)', border:'1px solid var(--d-border)' }}>⌘K</span>
        </button>
        <nav style={{ display:'flex', flexDirection:'column', gap:2 }}>
          {groups.map(grp => (
            <div key={grp.g} style={{ marginBottom:6 }}>
              <div style={{ fontSize:9.5, fontWeight:700, color:'var(--d-fg-faint)', letterSpacing:'0.14em', padding:'8px 10px 5px', textTransform:'uppercase' }}>{grp.g}</div>
              {grp.items.map(item => {
                const sel = screen === item.id || (item.id==='patients' && screen==='patient');
                return <button key={item.id} onClick={() => onNavigate(item.id)} style={{ width:'100%', display:'flex', alignItems:'center', gap:11, padding:'8px 10px', borderRadius:9, background: sel ? 'var(--d-accent-bg)' : 'transparent', border:'none', cursor:'pointer', textAlign:'left', color: sel ? '#0D9488' : 'var(--d-fg-muted)', fontSize:12.5, fontWeight: sel ? 600 : 500, fontFamily:'inherit', transition:'background 140ms' }}
                  onMouseEnter={e => { if(!sel) e.currentTarget.style.background = 'var(--d-bg)'; }}
                  onMouseLeave={e => { if(!sel) e.currentTarget.style.background = 'transparent'; }}>
                  <Icon name={item.icon} size={16} /><span style={{ flex:1 }}>{item.label}</span></button>;
              })}
            </div>
          ))}
        </nav>
        <div style={{ marginTop:'auto', paddingTop:16 }}>
          <div style={{ padding:14, borderRadius:13, background:'linear-gradient(135deg,#0369A1,#0EA5E9)', color:'#fff', position:'relative', overflow:'hidden' }}>
            <div style={{ position:'absolute', right:-10, bottom:-18, opacity:0.15 }}><Icon name="sparkles" size={80} color="#fff" strokeWidth={1} /></div>
            <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6, position:'relative' }}><Icon name="sparkles" size={14} /><div style={{ fontSize:10, fontWeight:700, letterSpacing:'0.12em' }}>JAMM IA</div></div>
            <div style={{ fontSize:12, lineHeight:1.45, position:'relative', fontWeight:500 }}>Dictée du charting, alertes médicales & interactions.</div>
          </div>
        </div>
      </aside>
      <div style={{ display:'flex', flexDirection:'column', minWidth:0 }}>
        <header style={{ height:62, padding:'0 28px', background:'var(--d-topbar)', backdropFilter:'blur(16px)', WebkitBackdropFilter:'blur(16px)', borderBottom:'1px solid var(--d-border)', display:'flex', alignItems:'center', gap:18, position:'sticky', top:0, zIndex:20 }}>
          <div style={{ display:'flex', alignItems:'center', gap:9 }}>
            <Icon name="stethoscope" size={16} color="#0369A1" />
            <span style={{ fontSize:13, fontWeight:600, color:'var(--d-fg-muted)' }}>Cabinet Dentaire Teranga</span>
            <span style={{ fontSize:12, color:'var(--d-fg-faint)' }}>· Dakar · 3 fauteuils</span>
          </div>
          <div style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:8 }}>
            <Button variant="secondary" size="sm" icon="mic" onClick={() => onNavigate('consultation')}>Nouvelle consultation</Button>
            <div style={{ width:1, height:22, background:'var(--d-border)', margin:'0 4px' }} />
            <IconButton icon={theme === 'dark' ? 'sun' : 'moon'} title="Thème" onClick={onToggleTheme} />
            <IconButton icon="bell" title="Notifications" />
            <div style={{ display:'flex', alignItems:'center', gap:9, padding:'4px 8px 4px 4px', borderRadius:999 }}>
              <Avatar name="Seynabou Faye" size={30} color="#0D9488" />
              <div style={{ textAlign:'left' }}><div style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>Dr. Faye</div><div style={{ fontSize:11, color:'var(--d-fg-subtle)' }}>Chirurgien-dentiste</div></div>
            </div>
          </div>
        </header>
        <main style={{ flex:1, padding:'26px 28px', overflow:'auto' }}>{children}</main>
      </div>
    </div>
  );
}

function DApp() {
  const [screen, setScreen] = useState('accueil');
  const [patient, setPatient] = useState(null);
  const [theme, setTheme] = useState('light');
  const [findings, setFindings] = useState(SEED_FINDINGS);
  useEffect(() => { document.documentElement.setAttribute('data-theme', theme); }, [theme]);
  const openPatient = (p) => { setPatient(p); setScreen('patient'); window.scrollTo(0,0); };
  const nav = (s) => { setScreen(s); window.scrollTo(0,0); };
  let view;
  if (screen==='accueil') view = <DAccueil onNavigate={nav} onOpenPatient={openPatient} />;
  else if (screen==='patients') view = <DPatients onOpenPatient={openPatient} />;
  else if (screen==='patient' && patient) view = <PatientFile patient={patient} findings={findings} setFindings={setFindings} onBack={()=>nav('patients')} onNavigate={nav} />;
  else if (screen==='consultation') view = <DConsultation onNavigate={nav} />;
  else if (screen==='agenda') view = <DAgenda />;
  else if (screen==='devis') view = <div><SectionTitle eyebrow="Plan de traitement" title="Plans & devis" sub="Fatou Sow · lignes ancrées à la dent et à la surface" right={<Button variant="primary" icon="file-text">Générer PDF</Button>} /><DevisInline onNavigate={nav} /></div>;
  else if (screen==='labo') view = <DLabo />;
  else if (screen==='assurance') view = <DAssurance />;
  else if (screen==='stock') view = <DStock />;
  else view = <DAccueil onNavigate={nav} onOpenPatient={openPatient} />;
  return <DShell screen={screen} onNavigate={nav} theme={theme} onToggleTheme={()=>setTheme(t=>t==='dark'?'light':'dark')}>{view}</DShell>;
}

Object.assign(window, { DShell, DApp });