// JammSanté Dermatologie — écrans 2 : dossier patient (carte corporelle, chroniques, xessal), consultation

function DmPatientFile({ patient, lesions, onBack, onNavigate }) {
  const [tab, setTab] = useState('Dermato');
  const [side, setSide] = useState('back');
  const [sel, setSel] = useState(lesions[0]);
  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>Phototype {p.phototype}</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 }}><DmAlerts patient={p} /></div>}
    <Tabs items={['Dermato','Antécédents','Carte corporelle','Photos','Chroniques','Dépigmentation']} active={tab} onChange={setTab} style={{ marginBottom:20 }} />

    {tab==='Dermato' && <div style={{ display:'grid', gridTemplateColumns:'1fr 320px', gap:20 }}>
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12 }}>
          {[
            { i:'map-pin', t:'Carte corporelle', s:lesions.length+' lésion'+(lesions.length>1?'s':'')+' active'+(lesions.length>1?'s':''), c:'pink', tab:'Carte corporelle' },
            { i:'camera', t:'Photos & dermoscopie', s:'Séries avant/après', c:'violet', tab:'Photos' },
            { i:'activity', t:'Chroniques', s:p.tags.includes('Psoriasis')?'PASI en cours':p.tags.includes('Vitiligo')?'VASI en cours':'SCORAD ↓', c:'teal', tab:'Chroniques' },
            { i:'shield-alert', t:'Dépigmentation', s:p.tags.includes('Xessal')?'Sevrage S2/5':'—', c:p.tags.includes('Xessal')?'amber':'teal', tab:'Dépigmentation' },
            { i:'slice', t:'Actes & chirurgie', s:p.tags.includes('Suspect')?'Exérèse 24/07':'—', c:p.tags.includes('Suspect')?'red':'teal', go:'actes' },
            { i:'smartphone', t:'Télédermatologie', s:'Avis à distance', c:'sky', go:'telederm' },
          ].map(m => (
            <div key={m.t} onClick={()=> m.go ? onNavigate(m.go) : setTab(m.tab)} style={{ padding:16, borderRadius:13, border:'1px solid var(--d-border)', background:'var(--d-surface)', cursor:'pointer', transition:'all 160ms' }}
              onMouseEnter={e=>{ e.currentTarget.style.borderColor='var(--d-accent-bg-2)'; e.currentTarget.style.transform='translateY(-2px)'; }}
              onMouseLeave={e=>{ e.currentTarget.style.borderColor='var(--d-border)'; e.currentTarget.style.transform='none'; }}>
              <div style={{ width:38, height:38, borderRadius:11, background:`var(--d-${m.c==='red'?'danger':m.c==='pink'?'pink':m.c==='violet'?'violet':m.c==='amber'?'warn':m.c==='sky'?'sky':'accent'}-bg)`, color:m.c==='red'?'#B91C1C':m.c==='pink'?'#BE185D':m.c==='violet'?'#6D28D9':m.c==='amber'?'#B45309':m.c==='sky'?'#0369A1':'#0D9488', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name={m.i} size={18} /></div>
              <div style={{ fontSize:13.5, fontWeight:600, marginTop:12, color:'var(--d-fg)' }}>{m.t}</div>
              <div style={{ fontSize:11.5, color:'var(--d-fg-subtle)', marginTop:2 }}>{m.s}</div>
            </div>
          ))}
        </div>
        <Card>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12 }}>
            <h3 style={{ margin:0, fontSize:15, fontWeight:600, color:'var(--d-fg)' }}>Synthèse clinique</h3>
            <Button variant="ghost" size="sm" icon="pencil">Modifier</Button>
          </div>
          <p style={{ fontSize:13.5, color:'var(--d-fg-muted)', lineHeight:1.6, margin:0 }}>{p.motif}. Phototype {p.phototype} · {(p.med||[]).length>0 ? 'Traitement en cours : '+(p.med||[]).join(', ')+'.' : 'Aucun traitement en cours.'}</p>
        </Card>
        <Card><h3 style={{ margin:'0 0 12px', fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>Lésions actives - {lesions.length}</h3>
          {lesions.map((l,i,arr)=>(
            <div key={l.id} onClick={()=>{ setTab('Carte corporelle'); setSide(l.side); setSel(l); }} onMouseEnter={e=>e.currentTarget.style.background='var(--d-bg)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}
              style={{ display:'flex', gap:10, padding:'10px 6px', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', alignItems:'center', cursor:'pointer', borderRadius:8 }}>
              <span style={{ width:11, height:11, borderRadius:'50%', background:BMT[l.code].color, flexShrink:0 }} />
              <div style={{ flex:1 }}><div style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>{l.label}</div><div style={{ fontSize:11.5, color:'var(--d-fg-subtle)' }}>{BMT[l.code].label}</div></div>
              <div style={{ fontSize:11.5, color:'var(--d-fg-subtle)', fontFamily:'JetBrains Mono, monospace' }}>{l.date}</div>
              <Icon name="chevron-right" size={14} color="var(--d-fg-faint)" />
            </div>
          ))}
        </Card>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        {(()=>{ const risques=[ ...(p.tags.includes('Suspect')?[{t:'Nævus ABCDE 3/5 - exérèse requise',n:'eleve'}]:[]), ...(p.tags.includes('Xessal')?[{t:'Dépigmentation cosmétique - 6 ans',n:'modere'}]:[]), ...((p.alertes||[]).filter(a=>a.code==='iso'||a.code==='grossesse'||a.code==='diabete').map(a=>({t:a.label,n:'modere'}))), {t:'Phototype '+p.phototype+' - risque chéloïde après geste',n:'faible'} ];
          return <Card style={{ borderColor: risques.some(r=>r.n==='eleve')?'var(--d-danger-border)':'var(--d-border)' }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:12 }}>
            <Icon name="alert-triangle" size={16} color={risques.some(r=>r.n==='eleve')?'#B91C1C':'#B45309'} />
            <h3 style={{ margin:0, fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>Facteurs de risque</h3>
            <span style={{ marginLeft:'auto', fontSize:10.5, color:'var(--d-fg-faint)', fontWeight:600 }}>auto · Jamm IA</span>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {risques.map((r,i)=>(<div key={i} style={{ display:'flex', gap:8, alignItems:'center' }}><span style={{ width:8, height:8, borderRadius:'50%', background:r.n==='eleve'?'#EF4444':r.n==='modere'?'#F59E0B':'#94A3B8', flexShrink:0 }} /><span style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r.t}</span></div>))}
          </div>
        </Card>; })()}
        <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' }}>{dmCFA(p.solde)}</div>
          {p.solde<0 && <Button variant="sky" size="sm" icon="wallet" style={{ marginTop:12 }}>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="#BE185D" /><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 exérèse - signé','Fiche info dépigmentation','Ordonnance 02/07'].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==='Antécédents' && <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
      <Card><h3 style={{ margin:'0 0 12px', fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>Antécédents & terrain</h3>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'12px 20px' }}>
          {[['Motif de consultation',p.motif],['Traitements en cours',(p.med||[]).join(', ')||'Aucun'],['Phototype (Fitzpatrick)',p.phototype],['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)' }}>Historique dermatologique</h3>
        {[['Fév 2026','Première consultation - cartographie complète'],['Avr 2026','Eczema - début protocole SCORAD'],['Juil 2026','Nævus dos - passage en surveillance rapprochée']].map(([d,t],i,arr)=>(
          <div key={i} style={{ display:'flex', gap:12, padding:'9px 0', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none' }}>
            <span style={{ fontSize:11.5, color:'var(--d-fg-faint)', fontFamily:'JetBrains Mono, monospace', flexShrink:0, width:70 }}>{d}</span>
            <span style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{t}</span>
          </div>
        ))}
      </Card>
    </div>}

    {tab==='Carte corporelle' && <div style={{ display:'grid', gridTemplateColumns:'1fr 360px', gap:20 }}>
      <Card>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8 }}>
          <div><h3 style={{ margin:0, fontSize:15, fontWeight:600, color:'var(--d-fg)' }}>Carte corporelle</h3><div style={{ fontSize:12, color:'var(--d-fg-subtle)', marginTop:2 }}>Chaque lésion ancrée à (zone, date) avec photos</div></div>
          <Button variant="secondary" size="sm" icon="plus">Nouvelle lésion</Button>
        </div>
        <BodyMap side={side} lesions={lesions} selected={sel} onSelect={setSel} onSide={setSide} />
      </Card>
      <Card><LesionDetail lesion={sel} /></Card>
    </div>}

    {tab==='Photos' && <div>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16 }}>
        <div style={{ fontSize:13, color:'var(--d-fg-subtle)' }}>Toutes les photos, rattachées à la lésion et à la date · dermoscopie + clinique + lumière de Wood</div>
        <Button variant="secondary" size="sm" icon="camera">Nouvelle photo</Button>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(210px,1fr))', gap:16 }}>
        {lesions.flatMap(l => l.photos.map((ph,i) => ({ ...ph, lesion:l, key:l.id+'-'+i }))).map(ph => (
          <Card key={ph.key} padding={0} hoverable>
            <div style={{ aspectRatio:'4/3', background:'linear-gradient(135deg,#3b2f2a,#1f1815)', borderRadius:'14px 14px 0 0', display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
              <Icon name={ph.k==='dermoscopie'?'search':ph.k==='lumière de Wood'?'lamp':'camera'} size={34} color="rgba(255,255,255,0.35)" />
              <div style={{ position:'absolute', top:10, left:10, background:'rgba(190,24,93,0.92)', color:'#fff', fontSize:10.5, fontWeight:700, padding:'2px 9px', borderRadius:999 }}>{BMT[ph.lesion.code].label}</div>
            </div>
            <div style={{ padding:13 }}><div style={{ fontSize:12.5, fontWeight:600, color:'var(--d-fg)' }}>{ph.lesion.label}</div><div style={{ fontSize:11, color:'var(--d-fg-subtle)', marginTop:2, fontFamily:'JetBrains Mono, monospace' }}>{ph.d} · {ph.k}</div></div>
          </Card>
        ))}
      </div>
    </div>}

    {tab==='Chroniques' && <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
      <Card>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:6 }}>
          <h3 style={{ margin:0, fontSize:14.5, fontWeight:600, color:'var(--d-fg)' }}>{DM_SCORES.scorad.label}</h3>
          <Badge tone="green">−54 % en 9 mois</Badge>
        </div>
        <div style={{ fontSize:12, color:'var(--d-fg-subtle)', marginBottom:10 }}>Objectif {DM_SCORES.scorad.target}, atteint en juillet</div>
        <ScoreChart data={DM_SCORES.scorad} color="#0D9488" />
        <div style={{ marginTop:12, display:'flex', gap:10, padding:'11px 13px', borderRadius:10, background:'var(--d-accent-bg)', alignItems:'flex-start' }}>
          <Icon name="sparkles" size={15} color="#0D9488" style={{ marginTop:1 }} />
          <div style={{ fontSize:12, color:'var(--d-fg-muted)', lineHeight:1.5 }}><strong style={{ color:'#0D9488' }}>Jamm IA :</strong> amélioration continue sous dermocorticoïde en cures courtes + émollient. Proposer espacement des contrôles à 6 mois si stabilité confirmée.</div>
        </div>
      </Card>
      <Card>
        <h3 style={{ margin:'0 0 10px', fontSize:14.5, fontWeight:600, color:'var(--d-fg)' }}>Plan de soins chronique</h3>
        {[['Dermocorticoïde classe III','Cure courte 7 j max lors des poussées','check-circle-2'],['Émollient quotidien','Application biquotidienne - observance bonne','check-circle-2'],['Photoprotection SPF50+','Chaque matin (sevrage dépigmentation)','check-circle-2'],['Éducation thérapeutique','Reconnaître le prurit annonciateur de poussée','book-open']].map(([t,s,ic],i,arr)=>(
          <div key={i} style={{ display:'flex', gap:11, padding:'11px 0', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', alignItems:'flex-start' }}>
            <Icon name={ic} size={16} color="#0D9488" style={{ marginTop:1 }} />
            <div><div style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>{t}</div><div style={{ fontSize:12, color:'var(--d-fg-subtle)', marginTop:2 }}>{s}</div></div>
          </div>
        ))}
      </Card>
    </div>}

    {tab==='Dépigmentation' && <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <Card>
          <h3 style={{ margin:'0 0 4px', fontSize:14.5, fontWeight:600, color:'var(--d-fg)' }}>Produits utilisés (6 ans)</h3>
          <div style={{ fontSize:12, color:'var(--d-fg-subtle)', marginBottom:12 }}>Déclarés à l'interrogatoire, sans jugement, en confiance</div>
          {DM_XESSAL.produits.map((pr,i,arr)=>(
            <div key={i} style={{ display:'flex', gap:10, padding:'9px 0', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', alignItems:'center' }}>
              <Icon name="flask-conical" size={15} color="#7C3AED" /><span style={{ fontSize:13, color:'var(--d-fg-muted)' }}>{pr}</span>
            </div>
          ))}
        </Card>
        <Card>
          <h3 style={{ margin:'0 0 12px', fontSize:14.5, fontWeight:600, color:'var(--d-fg)' }}>Bilan des complications</h3>
          {DM_XESSAL.complications.map((c,i,arr)=>(
            <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 0', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none' }}>
              <span style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>{c.c}</span>
              <Badge tone={c.tone === 'red' ? 'red' : c.tone === 'amber' ? 'amber' : 'green'}>{c.s}</Badge>
            </div>
          ))}
        </Card>
      </div>
      <Card>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12 }}>
          <h3 style={{ margin:0, fontSize:14.5, fontWeight:600, color:'var(--d-fg)' }}>Protocole de sevrage</h3>
          <Badge tone="teal">Étape 2/5</Badge>
        </div>
        {DM_XESSAL.sevrage.map((s,i,arr)=>(
          <div key={i} style={{ display:'flex', gap:12, padding:'11px 0', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', alignItems:'flex-start', opacity: s.fait?1:0.75 }}>
            <div style={{ width:22, height:22, borderRadius:'50%', flexShrink:0, background: s.fait?'#0D9488':'var(--d-surface-2)', color: s.fait?'#fff':'var(--d-fg-faint)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name={s.fait?'check':'circle'} size={12} /></div>
            <div style={{ flex:1 }}><div style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>{s.etape}</div><div style={{ fontSize:11.5, color:'var(--d-fg-subtle)', marginTop:2, fontFamily:'JetBrains Mono, monospace' }}>{s.date}</div></div>
          </div>
        ))}
        <div style={{ marginTop:12, display:'flex', gap:10, padding:'11px 13px', borderRadius:10, background:'var(--d-violet-bg)', alignItems:'flex-start' }}>
          <Icon name="heart-handshake" size={15} color="#6D28D9" style={{ marginTop:1 }} />
          <div style={{ fontSize:12, color:'var(--d-fg-muted)', lineHeight:1.5 }}>Approche sans stigmatisation : accompagnement, alternatives sûres, photoprotection. Fiche patient en français et wolof.</div>
        </div>
      </Card>
    </div>}
  </div>;
}

Object.assign(window, { DmPatientFile });