// JammSanté Dermatologie — écrans 1 : accueil, patients, dossier patient
const dmCFA = (n) => (n<0?'−':'') + Math.abs(n).toLocaleString('fr-FR') + ' F';

function DmAlerts({ patient, compact }) {
  if (!patient.alertes || !patient.alertes.length) return null;
  const list = [...patient.alertes.filter(a=>a.t==='crit'), ...patient.alertes.filter(a=>a.t==='warn')];
  return <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
    {list.map((a,i) => {
      const isC = a.t==='crit';
      return <div key={i} style={{ display:'flex', gap:11, padding:'11px 14px', borderRadius:11, background: isC?'var(--d-danger-bg)':'var(--d-warn-bg)', border:'1px solid '+(isC?'var(--d-danger-border)':'transparent'), alignItems:'flex-start' }}>
        <Icon name={isC?'shield-alert':'alert-triangle'} size={17} color={isC?'#B91C1C':'#B45309'} style={{ marginTop:1, flexShrink:0 }} />
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:13, fontWeight:700, color: isC?'#B91C1C':'#B45309' }}>{a.label}</div>
          {!compact && <div style={{ fontSize:12, color:'var(--d-fg-muted)', marginTop:3, lineHeight:1.45 }}>{a.detail}</div>}
          {!compact && a.act && <div style={{ fontSize:12, color:'var(--d-fg)', marginTop:4, fontWeight:600 }}>→ {a.act}</div>}
        </div>
      </div>;
    })}
  </div>;
}

// ---------- Accueil ----------
function DmAccueil({ onNavigate, onOpenPatient }) {
  return <div>
    <SectionTitle eyebrow="Lundi · 20 juillet 2026" title="Bonjour, Dr. Diop" sub="9 rendez-vous · 4 avis télédermatologie · 1 exérèse cette semaine"
      right={<><Button variant="outline" icon="user-plus">Nouveau patient</Button><Button variant="primary" icon="mic" onClick={()=>onNavigate('consultation')}>Consultation</Button></>} />
    <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:20 }}>
      <Stat label="RDV aujourd'hui" value="9" hint="2 salles" icon="calendar" />
      <Stat label="Télédermatologie" value="4" hint="poste de Fatick" hintTone="sky" icon="smartphone" />
      <Stat label="Lésions en surveillance" value="3" hint="1 exérèse 24/07" hintTone="red" icon="scan" />
      <Stat label="Anapath en attente" value="1" hint="résultat 31/07" hintTone="amber" icon="flask-conical" />
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'1fr 350px', gap:20 }}>
      <Card padding={0}>
        <div style={{ padding:'16px 20px', borderBottom:'1px solid var(--d-border)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div><h3 style={{ margin:0, fontSize:15, fontWeight:600, color:'var(--d-fg)' }}>Patients du jour</h3><div style={{ fontSize:12, color:'var(--d-fg-subtle)', marginTop:2 }}>Salle 1 · Dr. Diop</div></div>
          <Button variant="ghost" size="sm" iconRight="arrow-right" onClick={()=>onNavigate('agenda')}>Agenda</Button>
        </div>
        {DM_PATIENTS.map((p,i,arr) => (
          <div key={p.id} onClick={()=>onOpenPatient(p)} onMouseEnter={e=>e.currentTarget.style.background='var(--d-bg)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}
            style={{ display:'grid', gridTemplateColumns:'54px 1.4fr 1.3fr 120px 22px', alignItems:'center', gap:12, padding:'12px 20px', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none', cursor:'pointer', transition:'background 120ms' }}>
            <span style={{ fontSize:12.5, fontWeight:600, fontFamily:'JetBrains Mono, monospace', color:'var(--d-fg-subtle)' }}>{p.heure}</span>
            <div style={{ display:'flex', alignItems:'center', gap:11, minWidth:0 }}>
              <Avatar name={p.name} size={34} />
              <div style={{ minWidth:0 }}><div style={{ fontSize:13.5, fontWeight:600, color:'var(--d-fg)' }}>{p.name}</div><div style={{ fontSize:11.5, color:'var(--d-fg-subtle)', fontFamily:'JetBrains Mono, monospace' }}>{p.age} ans · Phototype {p.phototype}</div></div>
            </div>
            <div style={{ fontSize:12.5, color:'var(--d-fg-muted)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{p.motif}</div>
            <div style={{ display:'flex', gap:5, flexWrap:'wrap' }}>{p.statut==='urgence' && <Badge tone="red">Urgence</Badge>}{(p.alertes||[]).some(a=>a.t==='crit') && <Badge tone="amber" dot={false}>⚠ Alerte</Badge>}</div>
            <Icon name="chevron-right" size={15} color="var(--d-fg-faint)" />
          </div>
        ))}
      </Card>
      <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
        <Card style={{ borderColor:'var(--d-danger-border)', background:'linear-gradient(135deg, var(--d-danger-bg-2), var(--d-surface))' }}>
          <div style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
            <div style={{ width:36, height:36, borderRadius:10, background:'var(--d-danger-bg)', color:'#B91C1C', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><Icon name="scan" size={18} /></div>
            <div><div style={{ fontSize:11, fontWeight:700, color:'#B91C1C', letterSpacing:'0.1em', textTransform:'uppercase' }}>Lésion suspecte</div>
              <div style={{ fontSize:14, fontWeight:600, marginTop:4, color:'var(--d-fg)' }}>Adama Cissé - nævus dos ABCDE 3/5</div>
              <div style={{ fontSize:12.5, color:'var(--d-fg-subtle)', marginTop:4, lineHeight:1.5 }}>Évolution sur 4 mois. Exérèse-biopsie programmée le 24/07, consentement signé.</div>
              <Button variant="danger" size="sm" style={{ marginTop:12 }} onClick={()=>onOpenPatient(DM_PATIENTS[0])}>Ouvrir le dossier</Button>
            </div>
          </div>
        </Card>
        <Card style={{ background:'linear-gradient(135deg,#0D9488,#2DD4BF)', color:'#fff', borderColor:'transparent', position:'relative', overflow:'hidden' }}>
          <div style={{ position:'absolute', right:-26, top:-26, opacity:0.15 }}><Icon name="sparkles" size={140} color="#fff" strokeWidth={1} /></div>
          <div style={{ position:'relative' }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.12em' }}>JAMM IA · SYNTHÈSE DU JOUR</div>
            <div style={{ fontSize:15, fontWeight:700, marginTop:8, lineHeight:1.4 }}>1 lésion suspecte à ne pas retarder, 1 bilan isotrétinoïne à vérifier.</div>
            <div style={{ fontSize:12.5, opacity:0.92, marginTop:6, lineHeight:1.5 }}>Les 4 avis téléderm de Fatick sont pré-triés : 1 urgent, 3 non urgents.</div>
            <button onClick={()=>onNavigate('telederm')} style={{ marginTop:14, background:'#fff', color:'#0D9488', border:'none', padding:'8px 14px', borderRadius:9, fontSize:12.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit', display:'inline-flex', alignItems:'center', gap:6 }}>Voir les avis <Icon name="arrow-right" size={14} /></button>
          </div>
        </Card>
        <Card>
          <h3 style={{ margin:'0 0 12px', fontSize:14, fontWeight:600, color:'var(--d-fg)' }}>Anapath - suivis</h3>
          {[['Biopsie punch - Cheikh Mbaye','Résultat attendu 31/07','amber'],['Exérèse nævus - Adama Cissé','Prélèvement le 24/07','neutral']].map(([t,s,c],i,arr)=>(
            <div key={i} style={{ display:'flex', gap:10, alignItems:'center', padding:'9px 0', borderBottom:i<arr.length-1?'1px solid var(--d-border)':'none' }}>
              <Icon name={c==='amber'?'clock':'flask-conical'} size={15} color={c==='amber'?'#B45309':'var(--d-fg-faint)'} />
              <div style={{ flex:1 }}><div style={{ fontSize:12.5, fontWeight:600, color:'var(--d-fg)' }}>{t}</div><div style={{ fontSize:11.5, color:'var(--d-fg-subtle)' }}>{s}</div></div>
            </div>
          ))}
        </Card>
      </div>
    </div>
  </div>;
}

// ---------- Patients ----------
function DmPatients({ onOpenPatient }) {
  const [q, setQ] = useState('');
  const list = DM_PATIENTS.filter(p => p.name.toLowerCase().includes(q.toLowerCase()));
  return <div>
    <SectionTitle eyebrow="Fichier" title="Patients" sub={DM_PATIENTS.length+' dossiers actifs'} right={<Button variant="primary" icon="user-plus">Nouveau patient</Button>} />
    <Card padding={0}>
      <div style={{ padding:14, borderBottom:'1px solid var(--d-border)' }}><SearchInput placeholder="Rechercher un patient, un numéro…" value={q} onChange={e=>setQ(e.target.value)} /></div>
      <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1.2fr 90px 1fr 100px 22px', gap:12, padding:'10px 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>Motif</span><span>Phototype</span><span>Assurance</span><span>Alertes</span><span/></div>
      {list.map((p,i,arr) => (
        <div key={p.id} onClick={()=>onOpenPatient(p)} onMouseEnter={e=>e.currentTarget.style.background='var(--d-bg)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}
          style={{ display:'grid', gridTemplateColumns:'1.4fr 1.2fr 90px 1fr 100px 22px', 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:11, minWidth:0 }}><Avatar name={p.name} size={36} /><div style={{ minWidth:0 }}><div style={{ fontSize:13.5, fontWeight:600, color:'var(--d-fg)' }}>{p.name}</div><div style={{ fontSize:11.5, color:'var(--d-fg-subtle)', fontFamily:'JetBrains Mono, monospace' }}>{p.age} ans · {p.dmn}</div></div></div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{p.motif}</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' }}>{p.phototype}</span></div>
          <div style={{ fontSize:12.5, color:'var(--d-fg-muted)' }}>{p.assurance}</div>
          <div>{(p.alertes||[]).some(a=>a.t==='crit') ? <Badge tone="red" dot={false}>⚠ {p.alertes.filter(a=>a.t==='crit').length}</Badge> : <span style={{ fontSize:12, color:'var(--d-fg-faint)' }}>—</span>}</div>
          <Icon name="chevron-right" size={15} color="var(--d-fg-faint)" />
        </div>
      ))}
    </Card>
  </div>;
}

// ---------- Courbe score (SCORAD / PASI) ----------
function ScoreChart({ data, color = '#0D9488' }) {
  const w = 420, h = 130, pad = 26;
  const max = Math.max(...data.pts.map(p=>p.v)) * 1.15;
  const x = i => pad + i * ((w - pad*2) / (data.pts.length - 1));
  const y = v => h - pad - (v / max) * (h - pad*1.6);
  const path = data.pts.map((p,i) => (i?'L':'M') + x(i) + ',' + y(p.v)).join(' ');
  return <svg width="100%" viewBox={'0 0 '+w+' '+h} style={{ display:'block' }}>
    <path d={path + ' L' + x(data.pts.length-1) + ',' + (h-pad) + ' L' + pad + ',' + (h-pad) + ' Z'} fill={color} opacity="0.09" />
    <path d={path} fill="none" stroke={color} strokeWidth="2.4" strokeLinecap="round" />
    {data.pts.map((p,i) => <g key={i}>
      <circle cx={x(i)} cy={y(p.v)} r="4" fill={color} stroke="var(--d-surface)" strokeWidth="2" />
      <text x={x(i)} y={y(p.v)-9} textAnchor="middle" fontSize="11" fontWeight="700" fill="var(--d-fg)" fontFamily="JetBrains Mono, monospace">{p.v}</text>
      <text x={x(i)} y={h-8} textAnchor="middle" fontSize="9.5" fill="var(--d-fg-faint)">{p.d}</text>
    </g>)}
  </svg>;
}

Object.assign(window, { dmCFA, DmAlerts, DmAccueil, DmPatients, ScoreChart });