// JammSanté Dentiste — écrans 3 : consultation Jamm IA, agenda, prothèse/labo, assurance, stock, stérilisation

// ---------- Consultation + Jamm IA ----------
function DConsultation({ onNavigate }) {
  const [rec, setRec] = useState(false);
  const [step, setStep] = useState(0);
  useEffect(() => {
    if (!rec) return;
    const id = setInterval(() => setStep(s => Math.min(s+1, D_TRANSCRIPT.length)), 1400);
    return () => clearInterval(id);
  }, [rec]);
  const p = D_PATIENTS[0];
  return <div>
    <SectionTitle eyebrow="Fauteuil 1 · en cours" title="Consultation - Fatou Sow" sub="16 · douleur au froid · demande esthétique 11" right={<Button variant="ghost" icon="x" onClick={()=>onNavigate('accueil')}>Terminer</Button>} />
    <div style={{ marginBottom:18 }}><MedicalAlerts patient={p} compact /></div>
    <div style={{ display:'grid', gridTemplateColumns:'1fr 380px', gap:20 }}>
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <Card>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
            <button onClick={()=>{ setRec(!rec); if(!rec) setStep(0); }} style={{ width:52, height:52, borderRadius:'50%', border:'none', cursor:'pointer', background: rec?'#EF4444':'#0D9488', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', boxShadow: rec?'0 0 0 6px rgba(239,68,68,0.18)':'0 4px 14px rgba(13,148,136,0.35)', transition:'all 200ms' }}><Icon name={rec?'square':'mic'} size={22} /></button>
            <div style={{ flex:1 }}><div style={{ fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>{rec?'Jamm IA - écoute en cours…':'Démarrer la dictée'}</div><div style={{ fontSize:12, color:'var(--d-fg-subtle)' }}>Transcription FR / Wolof · mains libres</div></div>
            {rec && <div style={{ display:'flex', gap:3, alignItems:'flex-end', height:28 }}>{[0,1,2,3,4].map(i=><span key={i} style={{ width:4, borderRadius:2, background:'#0D9488', height:'100%', animation:'dBar 900ms ease-in-out infinite', animationDelay:i*120+'ms', transformOrigin:'bottom' }} />)}</div>}
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:10, minHeight:180 }}>
            {D_TRANSCRIPT.slice(0, rec?step:D_TRANSCRIPT.length).map((l,i)=>(
              <div key={i} style={{ alignSelf: l.who==='praticien'?'flex-start':'flex-end', maxWidth:'82%', background: l.who==='praticien'?'var(--d-surface-2)':'var(--d-accent-bg)', padding:'9px 13px', borderRadius:12, animation:'dPop 240ms ease' }}>
                <div style={{ fontSize:10, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color: l.who==='praticien'?'var(--d-fg-faint)':'#0D9488', marginBottom:3 }}>{l.who}</div>
                <div style={{ fontSize:13, color:'var(--d-fg)', lineHeight:1.45 }}>{l.t}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <Card style={{ borderColor:'transparent', background:'linear-gradient(135deg,#0D9488,#2DD4BF)', color:'#fff' }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:10 }}><Icon name="sparkles" size={15} /><div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.12em' }}>NOTE JAMM IA</div></div>
          {['Motif : douleur thermique 16, évolution 48h.','Examen : carie occlusale profonde 16, test au froid positif prolongé → pulpite réversible/irréversible à confirmer (radio).','CAT : cliché rétro-alvéolaire, coiffage + provisoire ce jour.','⚠ AVK : pas de geste sanglant aujourd\u2019hui.'].map((t,i)=>(
            <div key={i} style={{ fontSize:12.5, lineHeight:1.5, marginBottom:7, opacity: rec&&step<D_TRANSCRIPT.length?0.5:1, display:'flex', gap:7 }}><span>•</span><span>{t}</span></div>
          ))}
          <Button variant="secondary" size="sm" icon="check" style={{ marginTop:6, background:'#fff', color:'#0D9488', width:'100%' }}>Valider la note</Button>
        </Card>
        <Card>
          <h3 style={{ margin:'0 0 12px', fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>Ordonnance suggérée</h3>
          <div style={{ display:'flex', gap:10, padding:'10px 12px', borderRadius:10, background:'var(--d-danger-bg)', marginBottom:10, alignItems:'flex-start' }}>
            <Icon name="alert-triangle" size={15} color="#B91C1C" style={{ marginTop:1 }} /><div style={{ fontSize:12, color:'var(--d-fg-muted)', lineHeight:1.4 }}><strong style={{ color:'#B91C1C' }}>Interaction :</strong> allergie Pénicilline → amoxicilline exclue. Alternative proposée.</div>
          </div>
          {[['Clindamycine 300 mg','1 gél. ×3/j, 5 j'],['Paracétamol 1 g','1 cp ×3/j si douleur'],['Bain de bouche CHX 0,12 %','2×/j, 7 j']].map(([m,d],i,arr)=>(
            <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'9px 0', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none' }}><span style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>{m}</span><span style={{ fontSize:12, color:'var(--d-fg-subtle)' }}>{d}</span></div>
          ))}
          <Button variant="outline" size="sm" icon="printer" style={{ marginTop:12, width:'100%' }}>Imprimer l'ordonnance</Button>
        </Card>
      </div>
    </div>
  </div>;
}

// ---------- Agenda multi-fauteuils ----------
function DAgenda() {
  const hours = ['09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00'];
  const toneBg = { teal:'var(--d-accent-bg)', sky:'var(--d-sky-bg)', violet:'var(--d-violet-bg)', red:'var(--d-danger-bg)' };
  const toneFg = { teal:'#0D9488', sky:'#0369A1', violet:'#6D28D9', red:'#B91C1C' };
  const rowH = 64;
  return <div>
    <SectionTitle eyebrow="Vendredi 26 juin 2026" title="Agenda" sub="3 fauteuils · confirmations WhatsApp automatiques"
      right={<><Segmented items={['Jour','Semaine']} active="Jour" onChange={()=>{}} /><Button variant="primary" icon="plus">Nouveau RDV</Button></>} />
    <Card padding={0}>
      <div style={{ display:'grid', gridTemplateColumns:'60px repeat(3,1fr)', borderBottom:'1px solid var(--d-border)' }}>
        <div />
        {D_PRATICIENS.map(pr=>(
          <div key={pr.id} style={{ padding:'12px 14px', borderLeft:'1px solid var(--d-border)', display:'flex', alignItems:'center', gap:9 }}>
            <span style={{ width:9, height:9, borderRadius:'50%', background:pr.color }} />
            <div><div style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>{pr.name}</div><div style={{ fontSize:11, color:'var(--d-fg-subtle)' }}>{pr.fauteuil}</div></div>
          </div>
        ))}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'60px repeat(3,1fr)', position:'relative' }}>
        <div>{hours.map(h=><div key={h} style={{ height:rowH, borderBottom:'1px solid var(--d-border)', fontSize:11, color:'var(--d-fg-faint)', padding:'4px 8px', fontFamily:'JetBrains Mono, monospace', textAlign:'right' }}>{h}</div>)}</div>
        {D_PRATICIENS.map((pr,ci)=>(
          <div key={pr.id} style={{ borderLeft:'1px solid var(--d-border)', position:'relative' }}>
            {hours.map(h=><div key={h} style={{ height:rowH, borderBottom:'1px solid var(--d-border)' }} />)}
            {D_RDV.filter(r=>r.fauteuil===ci).map((r,i)=>{
              const top = (hours.indexOf(r.h) + (parseInt(r.h.split(':')[1])>=30?0.5:0)) * rowH;
              const hIdx = hours.indexOf(r.h.replace(/:30/,':00'));
              const realTop = (hIdx + (r.h.endsWith('30')?0.5:0))*rowH;
              return <div key={i} style={{ position:'absolute', top:realTop+2, left:4, right:4, height:(r.dur/60)*rowH-4, background:toneBg[r.tone], border:'1px solid '+toneFg[r.tone]+'44', borderLeft:'3px solid '+toneFg[r.tone], borderRadius:8, padding:'6px 9px', overflow:'hidden' }}>
                <div style={{ fontSize:12, fontWeight:600, color:'var(--d-fg)', display:'flex', alignItems:'center', gap:5 }}>{r.patient}{r.confirm && <Icon name="check-circle" size={11} color={toneFg[r.tone]} />}</div>
                <div style={{ fontSize:11, color:'var(--d-fg-subtle)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{r.acte}</div>
              </div>;
            })}
          </div>
        ))}
      </div>
    </Card>
    <div style={{ marginTop:14, display:'flex', gap:14, fontSize:12, color:'var(--d-fg-subtle)' }}>
      <span style={{ display:'flex', alignItems:'center', gap:6 }}><Icon name="check-circle" size={13} color="#059669" /> Confirmé WhatsApp</span>
      <span style={{ display:'flex', alignItems:'center', gap:6 }}><span style={{ width:10, height:10, borderRadius:3, background:'var(--d-danger-bg)', border:'1px solid #B91C1C' }} /> Urgence / walk-in</span>
    </div>
  </div>;
}

// ---------- Prothèse & labo ----------
function DLabo() {
  const etat = { attente:{l:'En attente',t:'neutral'}, essayage:{l:'Essayage',t:'sky'}, pose:{l:'Prêt à poser',t:'green'}, reprise:{l:'Reprise',t:'amber'} };
  return <div>
    <SectionTitle eyebrow="Prothèse" title="Laboratoire" sub="Suivi des travaux · envoi bon de commande par WhatsApp" right={<Button variant="primary" icon="plus">Nouveau bon labo</Button>} />
    <Card padding={0}>
      <div style={{ display:'grid', gridTemplateColumns:'1.3fr 1.4fr 1fr 80px 1fr 120px', gap:12, padding:'11px 20px', borderBottom:'1px solid var(--d-border)', fontSize:10.5, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--d-fg-faint)' }}>
        <span>Patient</span><span>Travail</span><span>Labo</span><span>Teinte</span><span>Retour prévu</span><span>État</span></div>
      {D_LABO.map((l,i,arr)=>(
        <div key={l.id} style={{ display:'grid', gridTemplateColumns:'1.3fr 1.4fr 1fr 80px 1fr 120px', gap:12, alignItems:'center', padding:'13px 20px', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', background: l.retard?'var(--d-danger-bg-2)':'transparent' }}>
          <div style={{ fontSize:13.5, fontWeight:600, color:'var(--d-fg)' }}>{l.patient}</div>
          <div><div style={{ fontSize:13, color:'var(--d-fg-muted)' }}>{l.travail}</div>{l.note && <div style={{ fontSize:11, color:'#B45309', marginTop:2 }}>{l.note}</div>}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{l.labo}</div>
          <div><span style={{ fontSize:11.5, fontWeight:700, padding:'3px 9px', borderRadius:6, background:'var(--d-surface-2)', color:'var(--d-fg-muted)', fontFamily:'JetBrains Mono, monospace' }}>{l.teinte}</span></div>
          <div style={{ fontSize:12.5, color: l.retard?'#B91C1C':'var(--d-fg-muted)', fontFamily:'JetBrains Mono, monospace', fontWeight: l.retard?600:400 }}>{l.retour}{l.retard && ' ⚠'}</div>
          <Badge tone={etat[l.etat].t}>{etat[l.etat].l}</Badge>
        </div>
      ))}
    </Card>
  </div>;
}

// ---------- Assurance / tiers payant ----------
function DAssurance() {
  const rows = [
    { patient:'Fatou Sow', assureur:'IPM Sonatel', acte:'Devis prothèse 16', montant:130000, taux:80, statut:'accord', ref:'PEC-2261' },
    { patient:'Mamadou Kane', assureur:'ASKIA', acte:'Prothèse adjointe', montant:180000, taux:70, statut:'attente', ref:'PEC-2258' },
    { patient:'Awa Ndiaye', assureur:'SUNU', acte:'Détartrage + soins', montant:48000, taux:100, statut:'rembourse', ref:'PEC-2240' },
    { patient:'Ousmane Diallo', assureur:'CSS', acte:'Bilan parodontal', montant:35000, taux:80, statut:'refus', ref:'PEC-2231' },
  ];
  const st = { accord:{l:'Accord',t:'green'}, attente:{l:'En attente',t:'amber'}, rembourse:{l:'Remboursé',t:'teal'}, refus:{l:'Refusé',t:'red'} };
  return <div>
    <SectionTitle eyebrow="Tiers payant" title="Assurances" sub="Prises en charge, part assureur / reste à charge, suivi des remboursements" right={<Button variant="primary" icon="file-plus">Nouvelle PEC</Button>} />
    <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:20 }}>
      <Stat label="PEC en attente" value="1" hint="ASKIA" hintTone="amber" icon="clock" />
      <Stat label="Accords" value="1" hint="IPM" hintTone="green" icon="check-circle" />
      <Stat label="Remboursé (juin)" value="240 000 F" hintTone="teal" icon="wallet" />
      <Stat label="Reste à charge patients" value="86 000 F" icon="user" />
    </div>
    <Card padding={0}>
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr 1.4fr 1fr 90px 1fr', gap:12, padding:'11px 20px', borderBottom:'1px solid var(--d-border)', fontSize:10.5, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--d-fg-faint)' }}>
        <span>Patient</span><span>Assureur</span><span>Acte</span><span>Montant</span><span>Taux</span><span>Statut</span></div>
      {rows.map((r,i,arr)=>(
        <div key={i} style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr 1.4fr 1fr 90px 1fr', gap:12, alignItems:'center', padding:'13px 20px', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none' }}>
          <div style={{ fontSize:13.5, fontWeight:600, color:'var(--d-fg)' }}>{r.patient}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r.assureur}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r.acte}</div>
          <div style={{ fontSize:13, fontWeight:600, fontFamily:'JetBrains Mono, monospace', color:'var(--d-fg)' }}>{fmtCFA(r.montant)}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)', fontFamily:'JetBrains Mono, monospace' }}>{r.taux}%</div>
          <Badge tone={st[r.statut].t}>{st[r.statut].l}</Badge>
        </div>
      ))}
    </Card>
  </div>;
}

// ---------- Stock ----------
function DStock() {
  const tn = { green:{l:'OK',t:'green'}, amber:{l:'Bas',t:'amber'}, red:{l:'Rupture',t:'red'} };
  return <div>
    <SectionTitle eyebrow="Cabinet" title="Stock consommables" sub="Seuils d'alerte, péremptions · décrémentation automatique liée à l'acte" right={<Button variant="primary" icon="plus">Entrée de stock</Button>} />
    <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14, marginBottom:20 }}>
      <Stat label="Articles suivis" value="6" icon="package" />
      <Stat label="Sous le seuil" value="3" hint="à commander" hintTone="amber" icon="alert-triangle" />
      <Stat label="Rupture" value="1" hint="gants M" hintTone="red" icon="x-circle" />
    </div>
    <Card padding={0}>
      <div style={{ display:'grid', gridTemplateColumns:'1.8fr 1fr 90px 90px 100px 90px', gap:12, padding:'11px 20px', borderBottom:'1px solid var(--d-border)', fontSize:10.5, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--d-fg-faint)' }}>
        <span>Article</span><span>Catégorie</span><span>Qté</span><span>Seuil</span><span>Péremption</span><span>État</span></div>
      {D_STOCK.map((s,i,arr)=>(
        <div key={i} style={{ display:'grid', gridTemplateColumns:'1.8fr 1fr 90px 90px 100px 90px', gap:12, alignItems:'center', padding:'13px 20px', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none' }}>
          <div style={{ fontSize:13.5, fontWeight:600, color:'var(--d-fg)' }}>{s.article}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{s.cat}</div>
          <div style={{ fontSize:13, fontWeight:600, fontFamily:'JetBrains Mono, monospace', color: s.qte<=s.seuil?'#B91C1C':'var(--d-fg)' }}>{s.qte}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-subtle)', fontFamily:'JetBrains Mono, monospace' }}>{s.seuil}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)', fontFamily:'JetBrains Mono, monospace' }}>{s.exp}</div>
          <Badge tone={tn[s.tone].t}>{tn[s.tone].l}</Badge>
        </div>
      ))}
    </Card>
  </div>;
}

Object.assign(window, { DConsultation, DAgenda, DLabo, DAssurance, DStock });