// JammSanté Clinique — écrans soins : urgences, hospitalisation, bloc, labo/imagerie
function ScreenUrgences() {
  return <ScreenPad>
    <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:14 }}>
      <div>
        <SectionTitle icon="siren" right={<Button size="xs" icon="plus">Nouvelle arrivée</Button>}>Prises en charge en cours</SectionTitle>
        <div style={{ display:'grid', gap:10 }}>
          {C_URGENCES.map(u => <Card key={u.id} padding={16}>
            <div style={{ display:'flex', alignItems:'center', gap:12 }}>
              <TriageDot level={u.triage} />
              <div style={{ flex:1 }}>
                <div style={{ fontSize:14, fontWeight:700, color:'var(--g-fg)' }}>{u.name} <span style={{ fontWeight:400, color:'var(--g-fg-faint)' }}>· {u.age} ans</span></div>
                <div style={{ fontSize:12, color:'var(--g-fg-subtle)' }}>{u.motif} · arrivé {u.arrivee}</div>
              </div>
              <Badge tone={u.statut === 'En attente' ? 'amber' : 'teal'} dot={false}>{u.statut}</Badge>
            </div>
            <div style={{ display:'flex', gap:14, marginTop:10, paddingTop:10, borderTop:'1px solid var(--g-surface-2)', fontSize:11.5, color:'var(--g-fg-subtle)' }}>
              <span style={{ fontFamily:'JetBrains Mono, monospace' }}>{u.constantes}</span><span style={{ flex:1 }} />
              <span>{u.prise === '—' ? 'Non affecté' : `Pris en charge : ${u.prise}`}</span>
            </div>
          </Card>)}
        </div>
        <SectionTitle icon="arrow-right-left">Référencement / évacuation</SectionTitle>
        <Card padding={16}>
          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
            <span style={{ width:34, height:34, borderRadius:9, background:'var(--g-danger-bg)', color:'#B91C1C', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="hospital" size={17} /></span>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13, fontWeight:700, color:'var(--g-fg)' }}>Évacuation 06:40 → Hôpital Principal</div>
              <div style={{ fontSize:11.5, color:'var(--g-fg-subtle)' }}>AVC suspecté · fiche de transfert transmise · retour ambulance 07:35</div>
            </div>
            <Button size="xs" variant="ghost" iconRight="file-text">Fiche</Button>
          </div>
        </Card>
      </div>
      <div>
        <SectionTitle icon="truck">Ambulance</SectionTitle>
        <Card padding={16}>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:12 }}>
            <span style={{ width:38, height:38, borderRadius:10, background:'var(--g-success-bg)', color:'#059669', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="truck" size={19} /></span>
            <div style={{ flex:1 }}><div style={{ fontSize:13.5, fontWeight:700, color:'var(--g-fg)' }}>{C_AMBULANCE.vehicule}</div><div style={{ fontSize:11.5, color:'var(--g-fg-subtle)' }}>Chauffeur : {C_AMBULANCE.chauffeur}</div></div>
            <Badge tone="green" dot>Disponible</Badge>
          </div>
          {C_AMBULANCE.sorties.map((s, i) => <div key={i} style={{ padding:'10px 0', borderTop:'1px solid var(--g-surface-2)', fontSize:12 }}>
            <div style={{ fontWeight:600, color:'var(--g-fg)' }}>{s.h} - {s.motif}</div>
            <div style={{ color:'var(--g-fg-subtle)', marginTop:2 }}>{s.duree} · facturé {fmtF(s.fact)}</div>
          </div>)}
          <Button size="sm" icon="phone" style={{ width:'100%', marginTop:8 }}>Déclencher une sortie</Button>
        </Card>
        <SectionTitle icon="moon">Garde & transmission</SectionTitle>
        <Card padding={16}>
          <div style={{ fontSize:12.5, fontWeight:700, color:'var(--g-fg)', marginBottom:6 }}>Cette nuit : {C_GARDE.nuit}</div>
          <div style={{ fontSize:12, color:'var(--g-fg-subtle)', lineHeight:1.6, padding:'10px 12px', background:'var(--g-surface-2)', borderRadius:9 }}>
            <span style={{ fontWeight:700, color:'var(--g-fg-muted)' }}>Transmission du matin - </span>{C_GARDE.transmission}
          </div>
        </Card>
      </div>
    </div>
  </ScreenPad>;
}

function ScreenHospit() {
  const [sel, setSel] = useState(null);
  const tone = { libre:{bg:'var(--g-success-bg)',fg:'#059669',label:'Libre'}, occupé:{bg:'var(--g-danger-bg)',fg:'#B91C1C',label:'Occupé'}, nettoyage:{bg:'var(--g-warn-bg)',fg:'#B45309',label:'Nettoyage'} };
  return <ScreenPad>
    <SectionTitle icon="bed-double" right={<div style={{ display:'flex', gap:10 }}>{Object.values(tone).map(t => <span key={t.label} style={{ display:'inline-flex', alignItems:'center', gap:5, fontSize:11, color:'var(--g-fg-subtle)' }}><span style={{ width:10, height:10, borderRadius:3, background:t.bg, border:`1px solid ${t.fg}44` }} />{t.label}</span>)}</div>}>Plan des lits, 5/8 occupés</SectionTitle>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:12 }}>
      {C_LITS.map(l => { const t = tone[l.statut];
        return <Card key={l.lit} padding={14} hoverable onClick={() => l.patient && setSel(l)} style={{ borderTop:`3px solid ${t.fg}` }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8 }}>
            <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize:13, fontWeight:700, color:'var(--g-fg)' }}>{l.ch} · {l.lit}</span>
            <span style={{ fontSize:10.5, fontWeight:700, padding:'2px 8px', borderRadius:999, background:t.bg, color:t.fg }}>{t.label}</span>
          </div>
          <div style={{ fontSize:11, color:'var(--g-fg-subtle)' }}>{l.type} · {fmtF(l.tarif)}/j</div>
          {l.patient && <div style={{ marginTop:9, paddingTop:9, borderTop:'1px solid var(--g-surface-2)' }}>
            <div style={{ fontSize:12.5, fontWeight:700, color:'var(--g-fg)' }}>{l.patient}</div>
            <div style={{ fontSize:11, color:'var(--g-fg-subtle)' }}>{l.motif} · J{l.jours} · {l.medecin}</div>
          </div>}
        </Card>; })}
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:14, marginTop:8 }}>
      <div>
        <SectionTitle icon="receipt">Facture de séjour - {C_SEJOUR.patient}</SectionTitle>
        <Card padding={0}>
          <Table cols={['Jour','Lit','Soins','Médicaments','Actes']} rows={C_SEJOUR.jours.map(j => [
            <span style={{ fontWeight:700, color:'var(--g-fg)' }}>{j.j}</span>, fmtF(j.lit), fmtF(j.soins), fmtF(j.medicaments), <span style={{ fontSize:11.5 }}>{j.actes}</span>])} />
          <div style={{ display:'flex', alignItems:'center', padding:'12px 16px', borderTop:'1px solid var(--g-border)', gap:12 }}>
            <Tag tone="teal">{C_SEJOUR.assurance}</Tag><span style={{ flex:1 }} />
            <span style={{ fontSize:12, color:'var(--g-fg-subtle)' }}>Total en cours</span><span style={{ fontSize:16, fontWeight:800, color:'var(--g-fg)' }}>{fmtF(C_SEJOUR.total)}</span>
          </div>
        </Card>
      </div>
      <div>
        <SectionTitle icon="clipboard-list">Suivi infirmier, ce matin</SectionTitle>
        <Card padding={0}>
          {[['07:00','Astou Guèye - constantes','TA 118/76 · T° 37,8 · perfusion OK'],['07:15','Ousmane Dieng - pansement','Cicatrice propre · douleur 2/10 · paracétamol donné'],['08:00','Mamadou Lô - constantes','TA 150/92 · à re-contrôler 12h'],['08:30','N. Coumba Fall - post-op','Saignement normal · allaitement démarré']].map((r, i) => <div key={i} style={{ display:'flex', gap:12, padding:'11px 16px', borderBottom: i < 3 ? '1px solid var(--g-surface-2)' : 'none' }}>
            <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--g-fg-faint)', paddingTop:2 }}>{r[0]}</span>
            <div><div style={{ fontSize:12.5, fontWeight:600, color:'var(--g-fg)' }}>{r[1]}</div><div style={{ fontSize:11.5, color:'var(--g-fg-subtle)' }}>{r[2]}</div></div>
          </div>)}
        </Card>
      </div>
    </div>
    {sel && <Modal onClose={() => setSel(null)} width={460}>
      <div style={{ padding:24 }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14 }}><h3 style={{ fontSize:16, fontWeight:800, color:'var(--g-fg)' }}>{sel.ch} · {sel.lit} - {sel.patient}</h3><IconButton icon="x" onClick={() => setSel(null)} /></div>
        <div style={{ display:'grid', gap:8, fontSize:13, color:'var(--g-fg-muted)' }}>
          <div>Motif : <b>{sel.motif}</b> · J{sel.jours}</div><div>Médecin : {sel.medecin}</div><div>Chambre {sel.type} · {fmtF(sel.tarif)}/jour · facturation journalière automatique</div>
        </div>
        <div style={{ display:'flex', gap:8, marginTop:18 }}><Button size="sm" icon="receipt">Facture de séjour</Button><Button size="sm" variant="outline" icon="log-out">Programmer la sortie</Button></div>
      </div>
    </Modal>}
  </ScreenPad>;
}

function ScreenBloc() {
  return <ScreenPad>
    <SectionTitle icon="scissors" right={<Button size="xs" icon="plus">Programmer un acte</Button>}>Programme opératoire, aujourd'hui</SectionTitle>
    <Card padding={0}>
      <Table cols={['Heure','Acte','Patient','Équipe','Salle','Statut','Facturation']} rows={C_BLOC.map(b => [
        <span style={{ fontFamily:'JetBrains Mono, monospace', fontWeight:700 }}>{b.h}</span>,
        <span style={{ fontWeight:700, color:'var(--g-fg)' }}>{b.acte}</span>, b.patient, <span style={{ fontSize:11.5 }}>{b.equipe}</span>, b.salle,
        <Badge tone={b.statut === 'Terminé' ? 'green' : 'blue'} dot={false}>{b.statut}</Badge>, <span style={{ fontWeight:700 }}>{fmtF(b.fact)}</span>])} />
    </Card>
    <SectionTitle icon="baby">Maternité, dernières 24 h</SectionTitle>
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
      {C_MATERNITE.map((m, i) => <Card key={i} padding={16}>
        <div style={{ display:'flex', alignItems:'center', gap:12 }}>
          <span style={{ width:36, height:36, borderRadius:10, background:'var(--g-pink-bg)', color:'#BE185D', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="baby" size={18} /></span>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:13.5, fontWeight:700, color:'var(--g-fg)' }}>{m.patient}</div>
            <div style={{ fontSize:12, color:'var(--g-fg-subtle)' }}>{m.evt} · {m.h}</div>
          </div>
        </div>
        <div style={{ marginTop:10, fontSize:12, color:'#059669', fontWeight:600 }}>{m.statut}</div>
      </Card>)}
    </div>
    <SectionTitle icon="repeat">Soins en séances, kinésithérapie</SectionTitle>
    <Card padding={0}>
      <Table cols={['Patient','Forfait','Séances','Prochaine','Solde']} rows={[
        ['Ibrahima Sagna', 'Rééducation épaule · 10 séances', <span><b style={{ color:'var(--g-fg)' }}>6</b>/10</span>, 'Mer 15 juil · 16h', <span style={{ color:'#059669', fontWeight:600 }}>Payé</span>],
        ['Fatou Mendy', 'Kiné respiratoire · 5 séances', <span><b style={{ color:'var(--g-fg)' }}>2</b>/5</span>, 'Jeu 16 juil · 11h', <span style={{ fontWeight:700, color:'#B45309' }}>{fmtF(15000)} dû</span>],
      ]} />
    </Card>
  </ScreenPad>;
}

function ScreenExams() {
  const [tab, setTab] = useState('Tous');
  const rows = C_EXAMS.filter(e => tab === 'Tous' || e.type === tab);
  return <ScreenPad>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, marginBottom:18 }}>
      <Stat label="Demandes du jour" value="18" icon="flask-conical" />
      <Stat label="Délai moyen labo" value="52 min" hint="objectif < 60" hintTone="green" icon="timer" />
      <Stat label="Résultats prêts" value="2" hint="1 patient à notifier" hintTone="amber" icon="bell" />
      <Stat label="Imagerie programmée" value="5" icon="scan" />
    </div>
    <SectionTitle icon="flask-conical" right={<Segmented items={['Tous','Labo','Imagerie']} active={tab} onChange={setTab} />}>Demandes & résultats</SectionTitle>
    <Card padding={0}>
      <Table cols={['Type','Examen','Patient','Prescripteur','Demandé','Délai','Statut','']} rows={rows.map(e => [
        <Tag tone={e.type === 'Labo' ? 'violet' : 'teal'}>{e.type}</Tag>,
        <span style={{ fontWeight:700, color:'var(--g-fg)' }}>{e.exam}</span>, e.patient, e.prescripteur,
        <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11.5 }}>{e.demande}</span>, e.delai,
        <Badge tone={e.statut.includes('prêt') ? 'amber' : e.statut === 'Validé' ? 'green' : 'blue'} dot={false}>{e.statut}</Badge>,
        e.statut.includes('prêt') ? (e.notif ? <Tag tone="teal">Patient notifié ✓</Tag> : <Button size="xs" variant="secondary" icon="send">Notifier</Button>) : null,
      ])} />
    </Card>
  </ScreenPad>;
}
Object.assign(window, { ScreenUrgences, ScreenHospit, ScreenBloc, ScreenExams });