/* =====================================================================
 * Schéma corporel cliquable (vue de face, côté droit de la victime à
 * gauche de l'écran).
 * ===================================================================== */

const BODY_SHAPES = [
  { id: 'tete', el: 'ellipse', props: { cx: 100, cy: 38, rx: 24, ry: 28 } },
  { id: 'cou', el: 'rect', props: { x: 89, y: 64, width: 22, height: 16, rx: 4 } },
  { id: 'thorax', el: 'rect', props: { x: 62, y: 80, width: 76, height: 66, rx: 14 } },
  { id: 'abdomen', el: 'rect', props: { x: 66, y: 148, width: 68, height: 46, rx: 8 } },
  { id: 'bassin', el: 'rect', props: { x: 63, y: 196, width: 74, height: 32, rx: 12 } },
  { id: 'msd', el: 'rect', props: { x: 34, y: 84, width: 25, height: 136, rx: 12 } },
  { id: 'msg', el: 'rect', props: { x: 141, y: 84, width: 25, height: 136, rx: 12 } },
  { id: 'mid', el: 'rect', props: { x: 66, y: 231, width: 32, height: 160, rx: 14 } },
  { id: 'mig', el: 'rect', props: { x: 102, y: 231, width: 32, height: 160, rx: 14 } },
];

function BodySchema({ zones, selected, onSelect }) {
  const hasLesion = (id) => zones[id] && ((zones[id].types || []).length > 0 || zones[id].details);
  const fillFor = (id) => {
    if (hasLesion(id)) return id === selected ? '#dc2626' : '#f87171';
    return id === selected ? '#bfdbfe' : '#e2e8f0';
  };

  return (
    <div className="flex flex-col items-center gap-3">
      <svg viewBox="0 0 200 400" className="h-[360px] w-auto select-none" role="img" aria-label="Schéma corporel">
        <text x="14" y="20" className="fill-slate-400 text-[11px] font-bold">D</text>
        <text x="178" y="20" className="fill-slate-400 text-[11px] font-bold">G</text>
        {BODY_SHAPES.map((s) => {
          const El = s.el;
          return (
            <El
              key={s.id}
              {...s.props}
              className="body-zone"
              fill={fillFor(s.id)}
              stroke={s.id === selected ? '#1d4ed8' : '#94a3b8'}
              strokeWidth={s.id === selected ? 3 : 1.5}
              onClick={() => onSelect(s.id)}
            >
              <title>{zoneLabel(s.id)}</title>
            </El>
          );
        })}
      </svg>
      <button
        type="button"
        onClick={() => onSelect('rachis')}
        className={cx(
          'chip',
          selected === 'rachis' ? 'border-blue-600 bg-blue-600 text-white' : hasLesion('rachis') ? 'border-red-400 bg-red-100 text-red-700' : 'chip-off',
        )}
      >
        Dos / Rachis
      </button>
      <p className="text-center text-xs text-slate-400">Vue de face — D = droite de la victime</p>
    </div>
  );
}