// JammSanté Clinique — écrans gestion : caisse, pharmacie, assurances, rapports
function ScreenCaisse() {
  return <ScreenPad>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14, marginBottom:6 }}>
      {C_CAISSES.map(c => <Card key={c.nom} padding={16}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div style={{ fontSize:12, fontWeight:700, color:'var(--g-fg-subtle)' }}>{c.nom}</div><Tag>{c.ops} opérations</Tag>
        </div>
        <div style={{ fontSize:22, fontWeight:800, color:'var(--g-fg)', margin:'8px 0 2px' }}>{fmtF(c.encaisse)}</div>
        <div style={{ fontSize:11, color:'var(--g-fg-subtle)' }}>Agent : {c.agent}</div>
      </Card>)}
    </div>
    <div style={{ display:'flex', alignItems:'center', gap:10, margin:'10px 0 16px', padding:'11px 16px', borderRadius:10, background:'var(--g-accent-bg)' }}>
      <Icon name="calculator" size={15} color="#0D9488" />
      <span style={{ fontSize:12.5, color:'var(--g-fg-muted)' }}><b>Consolidé du jour : {fmtF(731500)}</b> · clôture des caisses à 19h00 par la gérante</span>
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:14 }}>
      <div>
        <SectionTitle icon="receipt" right={<Button size="xs" icon="plus">Encaisser</Button>}>Encaissements récents</SectionTitle>
        <Card padding={0}>
          <Table cols={['Heure','Patient','Prestation','Total','Part patient','Mode','Statut']} rows={C_PAIEMENTS.map(p => [
            <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11.5 }}>{p.h}</span>,
            <span style={{ fontWeight:600, color:'var(--g-fg)' }}>{p.patient}</span>,
            <span style={{ fontSize:11.5 }}>{p.desc}{p.assureur !== '—' && <span style={{ display:'block', color:'var(--g-fg-faint)', fontSize:10.5 }}>Tiers payant : {p.assureur}</span>}</span>,
            fmtF(p.total), <span style={{ fontWeight:700, color:'var(--g-fg)' }}>{fmtF(p.part)}</span>,
            p.mode === '—' ? <span style={{ color:'var(--g-fg-faint)' }}>—</span> : <Tag tone={p.mode === 'Wave' || p.mode === 'Orange Money' ? 'teal' : p.mode === 'Ardoise' ? 'amber' : 'neutral'}>{p.mode}</Tag>,
            <Badge tone={p.statut === 'Payé' ? 'green' : p.statut.startsWith('Échelonné') ? 'amber' : 'red'} dot={false}>{p.statut}</Badge>,
          ])} />
        </Card>
      </div>
      <div>
        <SectionTitle icon="pie-chart">Répartition par mode</SectionTitle>
        <Card padding={18}>
          {C_MODES.map(m => <div key={m.mode} style={{ marginBottom:13 }}>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:12, marginBottom:5 }}>
              <span style={{ fontWeight:600, color:'var(--g-fg-muted)' }}>{m.mode}</span><span style={{ fontWeight:700, color:'var(--g-fg)' }}>{fmtF(m.total)}</span>
            </div>
            <div style={{ height:7, borderRadius:99, background:'var(--g-surface-2)' }}><div style={{ width:`${m.pct}%`, height:'100%', borderRadius:99, background:'#0D9488', opacity:1 - C_MODES.indexOf(m)*0.16 }} /></div>
          </div>)}
          <div style={{ fontSize:11, color:'var(--g-fg-faint)', marginTop:4 }}>Ticket modérateur calculé automatiquement selon la couverture (IPM / mutuelle).</div>
        </Card>
      </div>
    </div>
  </ScreenPad>;
}

function ScreenPharma() {
  const [tab, setTab] = useState('Tout');
  const rows = C_STOCK.filter(s => tab === 'Tout' || (tab === 'Médicaments' ? !s.conso : s.conso));
  return <ScreenPad>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, marginBottom:18 }}>
      <Stat label="Ventes pharmacie (jour)" value={fmtF(C_VENTES_PHARMA.jour)} hint={`${C_VENTES_PHARMA.ordonnances} ordonnances`} hintTone="teal" icon="pill" />
      <Stat label="Sorties internes (soins)" value={C_VENTES_PHARMA.internes} hint="hospitalisation + urgences" icon="syringe" />
      <Stat label="Alertes stock" value="2" hint="1 rupture imminente" hintTone="red" icon="alert-triangle" />
      <Stat label="Péremption < 90 j" value="1" hint="artéméther 09/2026" hintTone="amber" icon="calendar-x" />
    </div>
    <SectionTitle icon="pill" right={<div style={{ display:'flex', gap:10 }}><Segmented items={['Tout','Médicaments','Consommables']} active={tab} onChange={setTab} /><Button size="xs" icon="plus">Commande</Button></div>}>Stock, point de vente & interne</SectionTitle>
    <Card padding={0}>
      <Table cols={['Produit','Stock','Seuil','Prix vente','Expiration','Alerte']} rows={rows.map(s => [
        <span style={{ fontWeight:700, color:'var(--g-fg)' }}>{s.med}{s.frigo && <Tag tone="teal"> chaîne du froid</Tag>}</span>,
        <span style={{ fontWeight:800, color: s.alerte === 'rupture' ? '#B91C1C' : s.alerte ? '#B45309' : 'var(--g-fg)' }}>{s.stock}</span>,
        s.seuil, fmtF(s.prix), s.exp,
        s.alerte === 'rupture' ? <Badge tone="red" dot={false}>Commander maintenant</Badge> : s.alerte ? <Badge tone="amber" dot={false}>Proche du seuil</Badge> : <span style={{ color:'#059669', fontSize:11.5, fontWeight:600 }}>OK</span>,
      ])} />
    </Card>
  </ScreenPad>;
}

function ScreenAssurances() {
  return <ScreenPad>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14, marginBottom:18 }}>
      <Stat label="En recouvrement" value={fmtF(4245000)} hint="88 dossiers" hintTone="amber" icon="hourglass" />
      <Stat label="En retard (> 30 j)" value={fmtF(1620000)} hint="CSS + AXA" hintTone="red" icon="alert-triangle" />
      <Stat label="Encaissé ce mois" value={fmtF(1870000)} hint="+9% vs juin" hintTone="green" icon="check-circle-2" />
    </div>
    <SectionTitle icon="shield-check">Dossiers par assureur</SectionTitle>
    <div style={{ display:'grid', gap:10 }}>
      {C_RECOUVREMENT.map(r => <Card key={r.assureur} padding={16}>
        <div style={{ display:'flex', alignItems:'center', gap:14 }}>
          <span style={{ width:36, height:36, borderRadius:10, background:'var(--g-surface-2)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--g-fg-subtle)' }}><Icon name="landmark" size={17} /></span>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:13.5, fontWeight:700, color:'var(--g-fg)' }}>{r.assureur}</div>
            <div style={{ fontSize:11.5, color:'var(--g-fg-subtle)' }}>{r.dossiers} dossiers · ancienneté {r.age}</div>
          </div>
          <div style={{ fontSize:15, fontWeight:800, color:'var(--g-fg)' }}>{fmtF(r.montant)}</div>
          <Badge tone={r.tone} dot={false}>{r.statut}</Badge>
          {r.relance && <Button size="xs" variant="danger" icon="send">Relancer</Button>}
        </div>
      </Card>)}
    </div>
    <div style={{ display:'flex', alignItems:'center', gap:10, marginTop:16, padding:'11px 16px', borderRadius:10, background:'var(--g-warn-bg)' }}>
      <Icon name="sparkles" size={15} color="#B45309" />
      <span style={{ fontSize:12.5, color:'var(--g-fg-muted)' }}><b>Jamm IA :</b> 3 rejets AXA dus à un code acte manquant, correction proposée, re-soumission en 1 clic.</span>
      <span style={{ flex:1 }} /><Button size="xs" variant="secondary">Voir les corrections</Button>
    </div>
  </ScreenPad>;
}

function ScreenRapports() {
  const f = C_FINANCES; const marge = f.recettes - f.depenses;
  return <ScreenPad>
    <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
      <Segmented items={['Ce mois','Trimestre','Année']} active="Ce mois" onChange={() => {}} />
      <span style={{ fontSize:12.5, color:'var(--g-fg-subtle)' }}>{f.mois}</span><span style={{ flex:1 }} />
      <Button size="sm" variant="secondary" icon="sparkles">Générer le rapport mensuel (Jamm IA)</Button>
      <Button size="sm" variant="outline" icon="download">Exporter</Button>
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14 }}>
      <Stat label="Recettes" value={fmtF(f.recettes)} hint="+11% vs juin" hintTone="green" icon="trending-up" />
      <Stat label="Dépenses" value={fmtF(f.depenses)} hint="dont rétrocessions" icon="trending-down" />
      <Stat label="Résultat" value={fmtF(marge)} hint="marge 38%" hintTone="teal" icon="piggy-bank" />
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:14, marginTop:8 }}>
      <div>
        <SectionTitle icon="bar-chart-3">Revenus par service</SectionTitle>
        <Card padding={18}>
          {f.services.map(s => <div key={s.s} style={{ marginBottom:13 }}>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:12.5, marginBottom:5 }}>
              <span style={{ fontWeight:600, color:'var(--g-fg-muted)' }}>{s.s}</span>
              <span><b style={{ color:'var(--g-fg)' }}>{fmtF(s.v)}</b> <span style={{ color:'var(--g-fg-faint)', fontSize:11 }}>· {s.pct}%</span></span>
            </div>
            <div style={{ height:8, borderRadius:99, background:'var(--g-surface-2)' }}><div style={{ width:`${s.pct*3.2}%`, height:'100%', borderRadius:99, background:'#0D9488' }} /></div>
          </div>)}
        </Card>
      </div>
      <div>
        <SectionTitle icon="wallet">Dépenses du mois</SectionTitle>
        <Card padding={0}>
          {f.depensesDetail.map((d, i) => <div key={d.d} style={{ display:'flex', justifyContent:'space-between', padding:'11px 16px', borderBottom: i < f.depensesDetail.length-1 ? '1px solid var(--g-surface-2)' : 'none', fontSize:12.5 }}>
            <span style={{ color:'var(--g-fg-muted)' }}>{d.d}</span><span style={{ fontWeight:700, color:'var(--g-fg)' }}>{fmtF(d.v)}</span>
          </div>)}
        </Card>
        <Card padding={16} style={{ marginTop:12, background:'var(--g-accent-bg)', border:'1px solid var(--g-accent-bg-2)' }}>
          <div style={{ display:'flex', gap:10 }}>
            <Icon name="sparkles" size={16} color="#0D9488" />
            <div style={{ fontSize:12, color:'var(--g-fg-muted)', lineHeight:1.55 }}><b>Jamm IA, lecture du mois :</b> le bloc tire la croissance (+23%). La pharmacie perd 4% de marge à cause des ruptures ; commander plus tôt ferait gagner ≈ 180 000 F/mois.</div>
          </div>
        </Card>
      </div>
    </div>
  </ScreenPad>;
}
Object.assign(window, { ScreenCaisse, ScreenPharma, ScreenAssurances, ScreenRapports });
