// JammSanté Dermatologie — écrans 4 : registres + transversal (aligné sur les autres spécialités)

// ===== REGISTRES =====
function DmRegSurveillance({ onOpenPatient }) {
  const rows = [
    { patient:'Adama Cissé', lesion:'Nævus dos - 6 mm', abcde:'3/5', prochaine:'Exérèse 24/07', statut:'exerese', p:DM_PATIENTS[0] },
    { patient:'Cheikh Mbaye', lesion:'Plaque lombaire biopsiée', abcde:'—', prochaine:'Anapath 31/07', statut:'anapath', p:DM_PATIENTS[3] },
    { patient:'Omar Guèye', lesion:'Kératose séborrhéique thorax', abcde:'1/5', prochaine:'Contrôle photo · oct 26', statut:'photo', p:null },
  ];
  const st = { exerese:{l:'Exérèse programmée',t:'red'}, anapath:{l:'Anapath en attente',t:'amber'}, photo:{l:'Suivi photo',t:'sky'} };
  return <div>
    <SectionTitle eyebrow="Registre" title="Lésions en surveillance" sub="Toutes les lésions suspectes du cabinet, aucune ne se perd" right={<Badge tone="red">1 exérèse cette semaine</Badge>} />
    <Card padding={0}>
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1.5fr 80px 1.2fr 150px', 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>Lésion</span><span>ABCDE</span><span>Prochaine étape</span><span>Statut</span></div>
      {rows.map((r,i,arr)=>(
        <div key={i} onClick={()=>r.p&&onOpenPatient(r.p)} onMouseEnter={e=>e.currentTarget.style.background='var(--d-bg)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}
          style={{ display:'grid', gridTemplateColumns:'1.2fr 1.5fr 80px 1.2fr 150px', gap:12, alignItems:'center', padding:'13px 20px', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', cursor:r.p?'pointer':'default', transition:'background 120ms' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}><Avatar name={r.patient} size={30} /><span style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>{r.patient}</span></div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r.lesion}</div>
          <div style={{ fontSize:12.5, fontWeight:700, fontFamily:'JetBrains Mono, monospace', color: r.abcde==='3/5'?'#B91C1C':'var(--d-fg-subtle)' }}>{r.abcde}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r.prochaine}</div>
          <Badge tone={st[r.statut].t}>{st[r.statut].l}</Badge>
        </div>
      ))}
    </Card>
  </div>;
}

function DmRegChroniques({ onOpenPatient }) {
  return <div>
    <SectionTitle eyebrow="Registre" title="Maladies chroniques" sub="Eczéma, psoriasis, vitiligo, acné - scores et rappels de suivi" />
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginBottom: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">Objectif atteint</Badge></div>
        <ScoreChart data={DM_SCORES.scorad} color="#0D9488" />
      </Card>
      <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.pasi.label}</h3><Badge tone="green">PASI &lt; 10</Badge></div>
        <ScoreChart data={DM_SCORES.pasi} color="#BE185D" />
      </Card>
    </div>
    <Card padding={0}>
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr 110px 1fr 130px', 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>Pathologie</span><span>Score</span><span>Prochain contrôle</span><span>Tendance</span></div>
      {[
        { n:'Adama Cissé', p:'Eczéma chronique', s:'SCORAD 24', c:'Oct 2026', t:'down', pt:DM_PATIENTS[0] },
        { n:'Cheikh Mbaye', p:'Psoriasis en plaques', s:'PASI 7,6', c:'30 juil - photothérapie', t:'down', pt:DM_PATIENTS[3] },
        { n:'Ndèye Fall', p:'Vitiligo visage', s:'VASI 12 %', c:'Mardi - UVB', t:'flat', pt:DM_PATIENTS[4] },
        { n:'Moussa Ndour', p:'Acné nodulaire', s:'GEA 3', c:'28 juil - bilan iso', t:'down', pt:DM_PATIENTS[1] },
      ].map((r,i,arr)=>(
        <div key={i} onClick={()=>onOpenPatient(r.pt)} onMouseEnter={e=>e.currentTarget.style.background='var(--d-bg)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}
          style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr 110px 1fr 130px', gap:12, alignItems:'center', padding:'13px 20px', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', cursor:'pointer', transition:'background 120ms' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}><Avatar name={r.n} size={30} /><span style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>{r.n}</span></div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r.p}</div>
          <div style={{ fontSize:12.5, fontWeight:700, fontFamily:'JetBrains Mono, monospace', color:'var(--d-fg)' }}>{r.s}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r.c}</div>
          <Badge tone={r.t==='down'?'green':'neutral'} dot={false}>{r.t==='down'?'↓ En amélioration':'→ Stable'}</Badge>
        </div>
      ))}
    </Card>
  </div>;
}

function DmRegXessal({ onOpenPatient }) {
  return <div>
    <SectionTitle eyebrow="Registre" title="Dépigmentation cosmétique" sub="Suivi des sevrages, approche sans stigmatisation, fiches FR/wolof" right={<Badge tone="violet">3 sevrages en cours</Badge>} />
    <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14, marginBottom:20 }}>
      <Stat label="Patientes suivies" value="7" icon="users" />
      <Stat label="Sevrages en cours" value="3" hint="2 en étape S2+" hintTone="teal" icon="trending-down" />
      <Stat label="Complications actives" value="2" hint="ochronose, atrophie" hintTone="amber" icon="alert-triangle" />
    </div>
    <Card padding={0}>
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr 1.2fr 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>Patiente</span><span>Durée d'usage</span><span>Complications</span><span>Étape sevrage</span><span>Prochain RDV</span></div>
      {[
        { n:'Adama Cissé', d:'6 ans', c:'Ochronose + atrophie', e:'S2 / 5', r:'24 juil', pt:DM_PATIENTS[0] },
        { n:'Coumba Sène', d:'3 ans', c:'Vergetures', e:'S4 / 5', r:'2 août', pt:null },
        { n:'Yacine Diouf', d:'8 ans', c:'Dermatophytie profuse', e:'S0 - démarrage', r:'28 juil', pt:null },
      ].map((r,i,arr)=>(
        <div key={i} onClick={()=>r.pt&&onOpenPatient(r.pt)} onMouseEnter={e=>e.currentTarget.style.background='var(--d-bg)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}
          style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr 1.2fr 1fr 120px', gap:12, alignItems:'center', padding:'13px 20px', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', cursor:r.pt?'pointer':'default', transition:'background 120ms' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}><Avatar name={r.n} size={30} /><span style={{ fontSize:13, fontWeight:600, color:'var(--d-fg)' }}>{r.n}</span></div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)', fontFamily:'JetBrains Mono, monospace' }}>{r.d}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r.c}</div>
          <div><Badge tone="teal" dot={false}>{r.e}</Badge></div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)', fontFamily:'JetBrains Mono, monospace' }}>{r.r}</div>
        </div>
      ))}
    </Card>
  </div>;
}

// ===== TRANSVERSAL =====
function DmOrdonnances() {
  const rx = [
    ['Hydrocortisone 1 % crème','Adama Cissé','1 appl. 1 j/2 · 2 sem','active'],
    ['Isotrétinoïne 20 mg','Moussa Ndour','1 cp/j · renouvellement sous bilan','attente'],
    ['Griséofulvine susp.','Khady Sarr','20 mg/kg/j · 6 sem','active'],
    ['Calcipotriol/bétaméthasone','Cheikh Mbaye','1 appl./j · 4 sem','active'],
    ['Valaciclovir 500 mg','Ibrahima Sy','2 cp ×3/j · 7 j','active'],
  ];
  const st = { active:{l:'Active',t:'green'}, attente:{l:'Bilan requis',t:'amber'} };
  return <div>
    <SectionTitle eyebrow="Transversal" title="Ordonnances" sub="Interactions et bilans requis vérifiés par Jamm IA avant signature" right={<Button variant="primary" icon="plus">Nouvelle ordonnance</Button>} />
    <Card padding={0}>
      <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1.2fr 1.5fr 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>Médicament</span><span>Patient</span><span>Posologie</span><span>Statut</span></div>
      {rx.map((r,i,arr)=>(
        <div key={i} style={{ display:'grid', gridTemplateColumns:'1.5fr 1.2fr 1.5fr 120px', 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[0]}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r[1]}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r[2]}</div>
          <Badge tone={st[r[3]].t}>{st[r[3]].l}</Badge>
        </div>
      ))}
    </Card>
  </div>;
}

function DmLaboratoire() {
  const rows = [
    ['Anapath - exérèse nævus','Adama Cissé','Hôpital Le Dantec','Prélèvement 24/07','attente'],
    ['Anapath - biopsie punch','Cheikh Mbaye','Hôpital Le Dantec','Résultat attendu 31/07','attente'],
    ['Mycologie (prélèvement squames)','Khady Sarr','Labo Bio24','Contrôle J42 - 8 août','programme'],
    ['Bilan isotrétinoïne (ASAT/ALAT, lipides)','Moussa Ndour','Labo Bio24','Fait - dans les normes','fait'],
  ];
  const st = { attente:{l:'En attente',t:'amber'}, programme:{l:'Programmé',t:'sky'}, fait:{l:'Reçu',t:'green'} };
  return <div>
    <SectionTitle eyebrow="Transversal" title="Laboratoire & anapath" sub="Demandes, délais et résultats - relance automatique si retard" right={<Button variant="primary" icon="plus">Nouvelle demande</Button>} />
    <Card padding={0}>
      <div style={{ display:'grid', gridTemplateColumns:'1.6fr 1.1fr 1fr 1.3fr 110px', 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>Examen</span><span>Patient</span><span>Laboratoire</span><span>Échéance</span><span>Statut</span></div>
      {rows.map((r,i,arr)=>(
        <div key={i} style={{ display:'grid', gridTemplateColumns:'1.6fr 1.1fr 1fr 1.3fr 110px', 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[0]}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r[1]}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r[2]}</div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{r[3]}</div>
          <Badge tone={st[r[4]].t}>{st[r[4]].l}</Badge>
        </div>
      ))}
    </Card>
  </div>;
}

function DmReference() {
  const rows = [
    { p:'Homme 45 ans - Fatick', vers:'Service dermato CHU Le Dantec', motif:'Suspicion ulcère de Buruli - prise en charge spécialisée', statut:'envoye', d:'Aujourd\u2019hui' },
    { p:'Adama Cissé', vers:'Anapath Le Dantec', motif:'Exérèse nævus - analyse histologique', statut:'programme', d:'24 juil' },
    { p:'Femme 62 ans - Niakhar', vers:'Ophtalmologie', motif:'Zona ophtalmique - avis urgent', statut:'confirme', d:'12 juil' },
  ];
  const st = { envoye:{l:'Envoyée',t:'sky'}, programme:{l:'Programmée',t:'amber'}, confirme:{l:'Prise en charge',t:'green'} };
  return <div>
    <SectionTitle eyebrow="Transversal" title="Référencement" sub="Fiches de référence / évacuation vers les structures partenaires" right={<Button variant="primary" icon="share-2">Nouvelle référence</Button>} />
    <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
      {rows.map((r,i)=>(
        <Card key={i}>
          <div style={{ display:'flex', gap:14, alignItems:'flex-start' }}>
            <div style={{ width:38, height:38, borderRadius:11, background:'var(--d-sky-bg)', color:'#0369A1', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><Icon name="share-2" size={17} /></div>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
                <span style={{ fontSize:13.5, fontWeight:600, color:'var(--d-fg)' }}>{r.p}</span>
                <Icon name="arrow-right" size={13} color="var(--d-fg-faint)" />
                <span style={{ fontSize:13, color:'var(--d-fg-muted)' }}>{r.vers}</span>
              </div>
              <div style={{ fontSize:12.5, color:'var(--d-fg-subtle)', marginTop:4 }}>{r.motif}</div>
            </div>
            <div style={{ textAlign:'right', flexShrink:0 }}>
              <Badge tone={st[r.statut].t}>{st[r.statut].l}</Badge>
              <div style={{ fontSize:11.5, color:'var(--d-fg-faint)', marginTop:6, fontFamily:'JetBrains Mono, monospace' }}>{r.d}</div>
            </div>
          </div>
        </Card>
      ))}
    </div>
  </div>;
}

Object.assign(window, { DmRegSurveillance, DmRegChroniques, DmRegXessal, DmOrdonnances, DmLaboratoire, DmReference });