// JammSanté Dermatologie — carte corporelle interactive (avant / dos)

// Silhouette humaine simplifiée (viewBox 0 0 300 470)
function BodySilhouette({ side }) {
  const s = 'var(--d-skin)'; const st = 'var(--d-border-strong)';
  return <g fill={s} stroke={st} strokeWidth="1.4" strokeLinejoin="round">
    <ellipse cx="150" cy="42" rx="24" ry="30" />
    <rect x="138" y="70" width="24" height="22" rx="8" />
    <path d="M104,94 C120,86 180,86 196,94 C210,100 216,116 218,136 L224,196 C226,214 224,224 220,238 L212,238 C214,222 214,210 212,196 L206,150 L204,220 C206,248 202,258 200,276 L188,340 C186,362 186,390 184,410 L182,442 C182,452 176,456 168,456 L162,456 C156,456 154,450 155,442 L158,392 L156,330 L152,300 L148,300 L144,330 L142,392 L145,442 C146,450 144,456 138,456 L132,456 C124,456 118,452 118,442 L116,410 C114,390 114,362 112,340 L100,276 C98,258 94,248 96,220 L94,150 L88,196 C86,210 86,222 88,238 L80,238 C76,224 74,214 76,196 L82,136 C84,116 90,100 104,94 Z" />
    {side==='front'
      ? <path d="M150,92 L150,96" stroke={st} strokeWidth="0" />
      : <path d="M150,100 L150,240" stroke={st} strokeWidth="1" fill="none" opacity="0.5" />}
    {side==='back' && <path d="M96,250 C114,262 186,262 204,250" stroke={st} strokeWidth="1" fill="none" opacity="0.5" />}
    {/* mains */}
    <ellipse cx="84" cy="252" rx="10" ry="14" transform="rotate(14 84 252)" />
    <ellipse cx="216" cy="252" rx="10" ry="14" transform="rotate(-14 216 252)" />
  </g>;
}

function BodyMap({ side, lesions, selected, onSelect, onSide }) {
  const zones = BM_ZONES[side];
  const here = lesions.filter(l => l.side === side);
  return <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:12 }}>
    <Segmented items={['Face antérieure','Face postérieure']} active={side==='front'?'Face antérieure':'Face postérieure'} onChange={v=>onSide(v==='Face antérieure'?'front':'back')} />
    <svg width={300} height={470} viewBox="0 0 300 470" style={{ maxWidth:'100%' }}>
      <BodySilhouette side={side} />
      {here.map(l => {
        const z = zones.find(z => z.id === l.zone); if (!z) return null;
        const isSel = selected && selected.id === l.id;
        const c = BMT[l.code].color;
        return <g key={l.id} onClick={() => onSelect(l)} style={{ cursor:'pointer' }}>
          {isSel && <circle cx={z.x} cy={z.y} r={15} fill={c} opacity="0.18"><animate attributeName="r" values="13;17;13" dur="1.6s" repeatCount="indefinite" /></circle>}
          <circle cx={z.x} cy={z.y} r={8.5} fill={c} stroke="#fff" strokeWidth="2.2" opacity={isSel?1:0.92} />
          {l.status==='surveillance' && <circle cx={z.x} cy={z.y} r={12.5} fill="none" stroke={c} strokeWidth="1.4" strokeDasharray="3 2.4" />}
        </g>;
      })}
    </svg>
    <div style={{ display:'flex', flexWrap:'wrap', gap:'6px 14px', justifyContent:'center' }}>
      {BM_TYPES.filter(t => lesions.some(l => l.code === t.code)).map(t => (
        <span key={t.code} style={{ display:'inline-flex', alignItems:'center', gap:6, fontSize:11.5, color:'var(--d-fg-muted)' }}>
          <span style={{ width:10, height:10, borderRadius:'50%', background:t.color }} />{t.label}</span>
      ))}
      <span style={{ display:'inline-flex', alignItems:'center', gap:6, fontSize:11.5, color:'var(--d-fg-muted)' }}>
        <span style={{ width:12, height:12, borderRadius:'50%', border:'1.5px dashed var(--d-fg-subtle)' }} />Surveillance rapprochée</span>
    </div>
  </div>;
}

// Fiche lésion (droite) — détail, ABCDE, photos, historique
function LesionDetail({ lesion, allZones, onClose }) {
  if (!lesion) return <div style={{ padding:'40px 20px', textAlign:'center', color:'var(--d-fg-faint)' }}>
    <Icon name="mouse-pointer-click" size={26} /><div style={{ fontSize:13, marginTop:10 }}>Cliquez une lésion sur la silhouette</div>
    <div style={{ fontSize:11.5, marginTop:4 }}>Chaque lésion est ancrée à (zone, date) avec ses photos</div></div>;
  const z = [...BM_ZONES.front, ...BM_ZONES.back].find(z => z.id === lesion.zone);
  const c = BMT[lesion.code].color;
  const stMap = { surveillance:{l:'Surveillance',t:'red'}, traitement:{l:'En traitement',t:'amber'}, chronique:{l:'Chronique',t:'sky'}, nouveau:{l:'Nouveau',t:'teal'} };
  const st = stMap[lesion.status] || stMap.nouveau;
  return <div>
    <div style={{ display:'flex', alignItems:'flex-start', gap:11, marginBottom:14 }}>
      <span style={{ width:14, height:14, borderRadius:'50%', background:c, marginTop:4, flexShrink:0, boxShadow:'0 0 0 3px '+c+'22' }} />
      <div style={{ flex:1 }}>
        <div style={{ fontSize:14.5, fontWeight:700, color:'var(--d-fg)' }}>{lesion.label}</div>
        <div style={{ fontSize:11.5, color:'var(--d-fg-subtle)', marginTop:2 }}>{z?z.label:''} · {BMT[lesion.code].label} · {lesion.size}</div>
      </div>
      <Badge tone={st.t}>{st.l}</Badge>
    </div>
    {lesion.abcde && <div style={{ marginBottom:16 }}>
      <div style={{ fontSize:11, fontWeight:700, color:'var(--d-fg-subtle)', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:8 }}>Règle ABCDE - {Object.values(lesion.abcde).filter(Boolean).length}/5</div>
      <div style={{ display:'flex', gap:6 }}>
        {Object.entries(lesion.abcde).map(([k,v]) => (
          <div key={k} style={{ flex:1, textAlign:'center', padding:'8px 0', borderRadius:8, background: v?'var(--d-danger-bg)':'var(--d-surface-2)', color: v?'#B91C1C':'var(--d-fg-faint)', fontWeight:700, fontSize:13 }}>{k}</div>
        ))}
      </div>
      <div style={{ fontSize:11, color:'var(--d-fg-faint)', marginTop:5 }}>Asymétrie · Bords · Couleur · Diamètre · Évolution</div>
    </div>}
    <div style={{ fontSize:12.5, color:'var(--d-fg-muted)', lineHeight:1.55, padding:'11px 13px', borderRadius:10, background:'var(--d-surface-2)', marginBottom:16 }}>{lesion.note}</div>
    <div style={{ fontSize:11, fontWeight:700, color:'var(--d-fg-subtle)', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:8 }}>Photos - évolution</div>
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:14 }}>
      {lesion.photos.map((ph,i) => (
        <div key={i} style={{ borderRadius:10, overflow:'hidden', border:'1px solid var(--d-border)' }}>
          <div style={{ aspectRatio:'4/3', background:'linear-gradient(135deg,#3b2f2a,#1f1815)', display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
            <Icon name={ph.k==='dermoscopie'?'search':'camera'} size={24} color="rgba(255,255,255,0.4)" />
            <span style={{ position:'absolute', bottom:6, left:8, fontSize:9.5, color:'rgba(255,255,255,0.85)', background:'rgba(0,0,0,0.45)', padding:'1px 7px', borderRadius:5 }}>{ph.k}</span>
          </div>
          <div style={{ padding:'6px 9px', fontSize:10.5, color:'var(--d-fg-subtle)', fontFamily:'JetBrains Mono, monospace' }}>{ph.d}</div>
        </div>
      ))}
    </div>
    <div style={{ display:'flex', gap:8 }}>
      <Button variant="secondary" size="sm" icon="camera" style={{ flex:1 }}>Nouvelle photo</Button>
      <Button variant="outline" size="sm" icon="git-compare" style={{ flex:1 }}>Comparer</Button>
    </div>
  </div>;
}

Object.assign(window, { BodyMap, LesionDetail });