// JammSanté Dentiste — écrans 2 : dossier patient, consultation, agenda, devis, labo, assurance, stock

// ---------- Dossier patient (hub avec onglets cliniques) ----------
function PatientFile({ patient, findings, setFindings, onBack, onNavigate }) {
  const [tab, setTab] = useState('Dossier');
  const [layer, setLayer] = useState('both');
  const [sel, setSel] = useState(16);
  const [surf, setSurf] = useState('O');
  const addFinding = (f) => setFindings(prev => [...prev, f]);
  const rmFinding = (f) => setFindings(prev => prev.filter(x => x !== f));
  const p = patient;
  return <div>
    <button onClick={onBack} style={{ display:'inline-flex', alignItems:'center', gap:6, background:'none', border:'none', color:'var(--d-fg-subtle)', fontSize:13, cursor:'pointer', fontFamily:'inherit', marginBottom:14, padding:0 }}><Icon name="arrow-left" size={15} /> Patients</button>
    <div style={{ display:'flex', alignItems:'flex-start', gap:16, marginBottom:18 }}>
      <Avatar name={p.name} size={58} />
      <div style={{ flex:1 }}>
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <h1 style={{ fontSize:24, fontWeight:700, letterSpacing:'-0.02em', margin:0, color:'var(--d-fg)' }}>{p.name}</h1>
          {p.statut==='urgence' && <Badge tone="red">Urgence</Badge>}
        </div>
        <div style={{ fontSize:13, color:'var(--d-fg-subtle)', marginTop:4, display:'flex', gap:14, flexWrap:'wrap', fontFamily:'JetBrains Mono, monospace' }}>
          <span>{p.age} ans · {p.sexe}</span><span>{p.dmn}</span><span>{p.tel}</span><span>{p.groupe}</span><span>{p.assurance}</span>
        </div>
      </div>
      <div style={{ display:'flex', gap:8 }}><Button variant="outline" icon="printer">Imprimer</Button><Button variant="primary" icon="mic" onClick={()=>onNavigate('consultation')}>Consultation</Button></div>
    </div>
    {(p.alertes||[]).length>0 && <div style={{ marginBottom:18 }}><MedicalAlerts patient={p} /></div>}
    <Tabs items={['Dossier','Odontogramme','Parodontie','Imagerie','Plan & devis']} active={tab} onChange={setTab} style={{ marginBottom:20 }} />

    {tab==='Dossier' && <div style={{ display:'grid', gridTemplateColumns:'1fr 320px', gap:20 }}>
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <Card><h3 style={{ margin:'0 0 12px', fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>Antécédents médicaux</h3>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'12px 20px' }}>
            {[['Motif de consultation',p.motif],['Traitements en cours',(p.med||[]).join(', ')||'Aucun'],['Groupe sanguin',p.groupe],['Assurance',p.assurance]].map(([k,v])=>(
              <div key={k}><div style={{ fontSize:10.5, fontWeight:700, color:'var(--d-fg-faint)', letterSpacing:'0.08em', textTransform:'uppercase' }}>{k}</div><div style={{ fontSize:13.5, color:'var(--d-fg)', marginTop:3 }}>{v}</div></div>
            ))}
          </div>
        </Card>
        <Card><h3 style={{ margin:'0 0 12px', fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>Derniers actes</h3>
          {findings.filter(f=>f.layer==='ex'&&f.code!=='absente').slice(0,4).map((f,i,arr)=>(
            <div key={i} style={{ display:'flex', gap:10, padding:'10px 0', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', alignItems:'center' }}>
              <span style={{ width:10, height:10, borderRadius:3, background:LEG[f.code].color, flexShrink:0 }} />
              <div style={{ flex:1 }}><div style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>{LEG[f.code].label} · dent {f.tooth}{f.s?' ('+f.s.join('')+')':''}</div></div>
              <div style={{ fontSize:11.5, color:'var(--d-fg-subtle)', fontFamily:'JetBrains Mono, monospace' }}>{f.date}</div>
            </div>
          ))}
        </Card>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <Card style={{ background: p.solde<0?'var(--d-danger-bg-2)':'var(--d-surface)' }}>
          <div style={{ fontSize:11, fontWeight:700, color:'var(--d-fg-subtle)', letterSpacing:'0.1em', textTransform:'uppercase' }}>Solde courant</div>
          <div style={{ fontSize:26, fontWeight:700, color: p.solde<0?'#B91C1C':'#059669', marginTop:6, fontFamily:'JetBrains Mono, monospace' }}>{fmtCFA(p.solde)}</div>
          {p.solde<0 && <Button variant="sky" size="sm" icon="wallet" style={{ marginTop:12 }} onClick={()=>onNavigate('devis')}>Encaisser</Button>}
        </Card>
        <Card><h3 style={{ margin:'0 0 10px', fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>Prochain RDV</h3>
          <div style={{ display:'flex', gap:10, alignItems:'center' }}><Icon name="calendar-clock" size={18} color="#0369A1" /><div style={{ fontSize:13, color:'var(--d-fg)' }}>{p.prochain}</div></div>
        </Card>
        <Card><h3 style={{ margin:'0 0 10px', fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>Documents</h3>
          {['Consentement éclairé - signé','Devis 26/06 - envoyé','Prise en charge '+p.assurance].map((d,i,arr)=>(
            <div key={i} style={{ display:'flex', gap:9, alignItems:'center', padding:'8px 0', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none' }}><Icon name="file-text" size={14} color="var(--d-fg-faint)" /><span style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{d}</span></div>
          ))}
        </Card>
      </div>
    </div>}

    {tab==='Odontogramme' && <div style={{ display:'grid', gridTemplateColumns:'1fr 340px', gap:20 }}>
      <Card>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16 }}>
          <div><h3 style={{ margin:0, fontSize:15, fontWeight:600, color:'var(--d-fg)' }}>Odontogramme FDI</h3><div style={{ fontSize:12, color:'var(--d-fg-subtle)', marginTop:2 }}>Permanente 11–48 · temporaire 51–85</div></div>
          <Segmented items={['Existant','Planifié','Les deux']} active={layer==='ex'?'Existant':layer==='plan'?'Planifié':'Les deux'} onChange={v=>setLayer(v==='Existant'?'ex':v==='Planifié'?'plan':'both')} />
        </div>
        <div style={{ padding:'10px 0 18px', overflowX:'auto' }}>
          <Odontogram findings={findings} layer={layer} selected={sel} selectedSurface={surf} onSelect={setSel} onSurface={setSurf} showTemp={patient.age<13} />
        </div>
        <div style={{ borderTop:'1px solid var(--d-border)', paddingTop:14 }}><OdontoLegend /></div>
      </Card>
      <Card><ToothDetail tooth={sel} findings={findings} selectedSurface={surf} onSurface={setSurf} onAdd={addFinding} onRemove={rmFinding} /></Card>
    </div>}

    {tab==='Parodontie' && <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14 }}>
        <Stat label="PP moyenne" value={D_PERIO.curr.mean+' mm'} hint={'↓ depuis '+D_PERIO.prev.mean} hintTone="green" icon="ruler" />
        <Stat label="Saignement (BOP)" value={D_PERIO.curr.bop+' %'} hint={'↓ depuis '+D_PERIO.prev.bop+' %'} hintTone="green" icon="droplet" />
        <Stat label="Poches ≥ 5 mm" value="4 sites" hint="26, 16" hintTone="red" icon="alert-triangle" />
        <Stat label="Mobilité" value="26 (2)" hint="à surveiller" hintTone="amber" icon="move" />
      </div>
      <Card>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16 }}>
          <div><h3 style={{ margin:0, fontSize:15, fontWeight:600, color:'var(--d-fg)' }}>Sondage 6 sites - {D_PERIO.curr.date}</h3><div style={{ fontSize:12, color:'var(--d-fg-subtle)', marginTop:2 }}>Comparatif vs {D_PERIO.prev.date}</div></div>
          <div style={{ display:'flex', gap:8 }}><Button variant="secondary" size="sm" icon="mic">Saisie vocale FR/Wolof</Button><Button variant="ghost" size="sm" icon="git-compare">Comparer</Button></div>
        </div>
        <PerioChart />
        <div style={{ marginTop:16, display:'flex', gap:10, padding:'12px 14px', borderRadius:11, background:'var(--d-sky-bg)', alignItems:'flex-start' }}>
          <Icon name="sparkles" size={16} color="#0369A1" style={{ marginTop:1 }} /><div style={{ fontSize:12.5, color:'var(--d-fg-muted)', lineHeight:1.5 }}><strong style={{ color:'#0369A1' }}>Jamm IA :</strong> amélioration globale des poches et du saignement depuis mars. Persistance d'une poche 7 mm en 26 (mobilité 2), envisager surfaçage ciblé + réévaluation à 3 mois.</div></div>
      </Card>
    </div>}

    {tab==='Imagerie' && <div>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16 }}>
        <div style={{ fontSize:13, color:'var(--d-fg-subtle)' }}>Images rattachées à la dent, à la date et à la projection · <strong>CBCT référencé en local uniquement</strong></div>
        <div style={{ display:'flex', gap:8 }}><Button variant="secondary" size="sm" icon="scan">Capteur intra-oral</Button><Button variant="outline" size="sm" icon="camera">Photo</Button></div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(230px,1fr))', gap:16 }}>
        {D_IMAGES.map(im => (
          <Card key={im.id} padding={0} hoverable>
            <div style={{ aspectRatio:'4/3', background:'linear-gradient(135deg,#1E293B,#0B1220)', borderRadius:'14px 14px 0 0', display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
              <Icon name={im.type.includes('Photo')?'image':'scan-line'} size={40} color="rgba(255,255,255,0.35)" />
              {im.tooth && <div style={{ position:'absolute', top:10, left:10, background:'rgba(3,105,161,0.9)', color:'#fff', fontSize:11, fontWeight:700, padding:'2px 9px', borderRadius:999, fontFamily:'JetBrains Mono, monospace' }}>Dent {im.tooth}</div>}
              <div style={{ position:'absolute', bottom:10, right:10, background:'rgba(15,23,42,0.7)', color:'#fff', fontSize:10.5, padding:'2px 8px', borderRadius:6 }}>zoom · mesure · annot.</div>
            </div>
            <div style={{ padding:14 }}><div style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>{im.type}</div><div style={{ fontSize:11.5, color:'var(--d-fg-subtle)', marginTop:2, fontFamily:'JetBrains Mono, monospace' }}>{im.date} · {im.proj}</div><div style={{ fontSize:12, color:'var(--d-fg-muted)', marginTop:7, lineHeight:1.4 }}>{im.note}</div></div>
          </Card>
        ))}
      </div>
    </div>}

    {tab==='Plan & devis' && <DevisInline onNavigate={onNavigate} />}
  </div>;
}

// ---------- Plan de traitement + devis ----------
function DevisInline({ onNavigate }) {
  const total = D_PLAN.reduce((s,ph)=>s+ph.lines.reduce((a,l)=>a+l.tarif,0),0);
  const stTone = { planifie:'sky', attente:'amber', conditionnel:'neutral' };
  const stLab = { planifie:'Planifié', attente:'En attente', conditionnel:'Conditionnel' };
  return <div style={{ display:'grid', gridTemplateColumns:'1fr 320px', gap:20 }}>
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      {D_PLAN.map(ph => (
        <Card key={ph.phase} padding={0}>
          <div style={{ padding:'12px 18px', borderBottom:'1px solid var(--d-border)', display:'flex', alignItems:'center', gap:10 }}>
            <span style={{ width:10, height:10, borderRadius:3, background:ph.color }} />
            <h3 style={{ margin:0, fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>{ph.phase}</h3>
            <span style={{ marginLeft:'auto', fontSize:13, fontWeight:700, fontFamily:'JetBrains Mono, monospace', color:'var(--d-fg-muted)' }}>{fmtCFA(ph.lines.reduce((a,l)=>a+l.tarif,0))}</span>
          </div>
          {ph.lines.map((l,i,arr)=>(
            <div key={i} style={{ display:'grid', gridTemplateColumns:'70px 1fr 110px 110px', gap:12, alignItems:'center', padding:'11px 18px', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none' }}>
              <span style={{ fontSize:12, fontWeight:700, fontFamily:'JetBrains Mono, monospace', color:'#0369A1' }}>{l.tooth?l.tooth+(l.s?'·'+l.s:''):'—'}</span>
              <div><div style={{ fontSize:13, color:'var(--d-fg)' }}>{l.acte}</div>{l.note && <div style={{ fontSize:11, color:'#B45309', marginTop:2 }}>⚠ {l.note}</div>}</div>
              <Badge tone={stTone[l.statut]}>{stLab[l.statut]}</Badge>
              <span style={{ fontSize:13, fontWeight:600, fontFamily:'JetBrains Mono, monospace', color:'var(--d-fg-muted)', textAlign:'right' }}>{fmtCFA(l.tarif)}</span>
            </div>
          ))}
        </Card>
      ))}
    </div>
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      <Card>
        <div style={{ fontSize:11, fontWeight:700, color:'var(--d-fg-subtle)', letterSpacing:'0.1em', textTransform:'uppercase' }}>Total du devis</div>
        <div style={{ fontSize:28, fontWeight:700, color:'var(--d-fg)', marginTop:6, fontFamily:'JetBrains Mono, monospace' }}>{fmtCFA(total)}</div>
        <div style={{ marginTop:14, display:'flex', flexDirection:'column', gap:8 }}>
          {[['Part assurance (IPM 80%)',Math.round(total*0.8)],['Reste à charge patient',Math.round(total*0.2)]].map(([k,v])=>(
            <div key={k} style={{ display:'flex', justifyContent:'space-between', fontSize:12.5 }}><span style={{ color:'var(--d-fg-subtle)' }}>{k}</span><span style={{ fontWeight:600, fontFamily:'JetBrains Mono, monospace', color:'var(--d-fg)' }}>{fmtCFA(v)}</span></div>
          ))}
        </div>
        <Button variant="primary" icon="file-text" style={{ marginTop:16, width:'100%' }}>Générer le devis PDF</Button>
        <div style={{ display:'flex', gap:8, marginTop:10 }}><Button variant="outline" size="sm" style={{ flex:1 }}>Accepté</Button><Button variant="ghost" size="sm" style={{ flex:1 }}>Partiel</Button></div>
      </Card>
      <Card>
        <h3 style={{ margin:'0 0 10px', fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>Encaissement</h3>
        <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
          {['Espèces','Wave','Orange Money','PayDunya','Tiers payant','Échelonné'].map(m=>(
            <span key={m} style={{ fontSize:11.5, padding:'5px 11px', borderRadius:999, background:'var(--d-surface-2)', color:'var(--d-fg-muted)', fontWeight:600 }}>{m}</span>
          ))}
        </div>
      </Card>
    </div>
  </div>;
}

Object.assign(window, { PatientFile, DevisInline });
