/* Étape 3 — Bilan lésionnel / secondaire & SAMPLE */

function StepLesionnel({ b, bind }) {
  const [zone, setZone] = useState('tete');
  const zones = b.lesions.zones || {};
  const touchees = bilanZonesTouchees(b);

  return (
    <div className="space-y-5">
      <Card title="Bilan lésionnel" subtitle="Touchez une zone du corps puis indiquez le type de lésion" icon={Bandage}>
        <div className="grid gap-6 lg:grid-cols-[260px_1fr]">
          <BodySchema zones={zones} selected={zone} onSelect={setZone} />

          <div className="space-y-5">
            <div className="flex flex-wrap gap-2">
              {BODY_ZONES.map((z) => {
                const touched = touchees.some(([id]) => id === z.id);
                return (
                  <button
                    key={z.id}
                    type="button"
                    onClick={() => setZone(z.id)}
                    className={cx(
                      'chip',
                      zone === z.id ? 'border-blue-600 bg-blue-600 text-white' : touched ? 'border-red-300 bg-red-50 text-red-700' : 'chip-off',
                    )}
                  >
                    {touched && <span className="h-2 w-2 rounded-full bg-red-500" />}
                    {z.label}
                  </button>
                );
              })}
            </div>

            <div className="rounded-xl border border-blue-200 bg-blue-50/50 p-4">
              <h4 className="mb-3 font-semibold text-blue-900">{zoneLabel(zone)}</h4>
              <div className="space-y-4">
                <Field label="Type de lésion">
                  <ChipGroup options={LESIONS} {...bind(`lesions.zones.${zone}.types`)} />
                </Field>
                <Field label="Précisions">
                  <TextInput placeholder="Taille, aspect, saignement…" {...bind(`lesions.zones.${zone}.details`)} />
                </Field>
              </div>
            </div>

            <div>
              <h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Récapitulatif</h4>
              {touchees.length === 0 ? (
                <p className="text-sm text-slate-400">Aucune lésion relevée.</p>
              ) : (
                <ul className="divide-y divide-slate-100 rounded-lg border border-slate-200">
                  {touchees.map(([id, z]) => (
                    <li key={id} className="flex flex-wrap items-center gap-2 px-3 py-2 text-sm">
                      <button type="button" className="font-semibold text-slate-800 hover:underline" onClick={() => setZone(id)}>
                        {zoneLabel(id)}
                      </button>
                      {(z.types || []).map((t) => (
                        <Badge key={t} tone="red">
                          {t}
                        </Badge>
                      ))}
                      {z.details && <span className="text-slate-500">— {z.details}</span>}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </div>
        </div>
      </Card>

      <Card title="Interrogatoire SAMPLE" icon={Stethoscope}>
        <div className="grid gap-4 md:grid-cols-2">
          {SAMPLE.map((s) => (
            <div key={s.key} className="flex gap-3">
              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-800 text-lg font-black text-white">{s.letter}</span>
              <Field label={s.label} className="flex-1">
                <TextArea rows={2} placeholder={s.placeholder} {...bind(`lesions.sample.${s.key}`)} />
              </Field>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}