/* Étape 4 — Gestes effectués & surveillance */

const SURVEILLANCE_COLS = [
  { key: 'heure', label: 'Heure', type: 'time' },
  { key: 'fc', label: 'FC', unit: 'bpm', tone: 'fc' },
  { key: 'fr', label: 'FR', unit: '/min', tone: 'fr' },
  { key: 'spo2', label: 'SpO2', unit: '%', tone: 'spo2' },
  { key: 'ta', label: 'TA', placeholder: '120/80' },
  { key: 'conscience', label: 'Conscience', placeholder: 'A / GCS' },
  { key: 'obs', label: 'Observation', placeholder: '…' },
];

function SurveillanceTable({ value, onChange }) {
  const rows = Array.isArray(value) ? value : [];
  const addRow = () => onChange([...rows, { id: uid(), heure: nowTime() }]);
  const updateRow = (id, key, val) => onChange(rows.map((r) => (r.id === id ? { ...r, [key]: val } : r)));
  const removeRow = (id) => onChange(rows.filter((r) => r.id !== id));

  return (
    <div className="space-y-3">
      {rows.length > 0 && (
        <div className="scrollbar-thin overflow-x-auto rounded-lg border border-slate-200">
          <table className="w-full min-w-[720px] text-sm">
            <thead className="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
              <tr>
                {SURVEILLANCE_COLS.map((c) => (
                  <th key={c.key} className="px-2 py-2 text-left font-semibold">
                    {c.label} {c.unit && <span className="font-normal normal-case text-slate-400">({c.unit})</span>}
                  </th>
                ))}
                <th />
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {rows.map((r) => (
                <tr key={r.id}>
                  {SURVEILLANCE_COLS.map((c) => {
                    const tone = c.tone ? vitalTone(c.tone, r[c.key]) : null;
                    return (
                      <td key={c.key} className="p-1.5">
                        <input
                          type={c.type || 'text'}
                          className={cx('input px-2 py-1.5', tone && tone !== 'ok' && TONE_INPUT[tone])}
                          value={r[c.key] || ''}
                          placeholder={c.placeholder}
                          onChange={(e) => updateRow(r.id, c.key, e.target.value)}
                        />
                      </td>
                    );
                  })}
                  <td className="p-1.5 text-right">
                    <IconButton icon={Trash2} tone="red" title="Supprimer la ligne" onClick={() => removeRow(r.id)} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      <Button variant="secondary" icon={Plus} onClick={addRow}>
        Ajouter une surveillance
      </Button>
    </div>
  );
}

function StepGestes({ b, bind }) {
  const actes = b.gestes.actes || [];
  const nbActes = actes.length;

  return (
    <div className="space-y-5">
      <Card
        title="Soins & actes réalisés"
        icon={HeartPulse}
        actions={<Badge tone={nbActes ? 'emerald' : 'slate'}>{nbActes} geste{nbActes > 1 ? 's' : ''}</Badge>}
      >
        <div className="space-y-5">
          {GESTES_GROUPES.map((g) => (
            <Field key={g.titre} label={g.titre}>
              <ChipGroup options={g.items} tone={g.tone} {...bind('gestes.actes')} />
            </Field>
          ))}
          {actes.includes('DAE') && (
            <Field label="Nombre de chocs délivrés (DAE)" className="max-w-[200px]">
              <NumberInput min="0" {...bind('gestes.daeChocs')} />
            </Field>
          )}
          <Field label="Autres gestes / précisions">
            <TextArea placeholder="Heure des gestes, matériel utilisé, médicaments de la victime…" {...bind('gestes.autres')} />
          </Field>
        </div>
      </Card>

      <Card title="Surveillance" subtitle="Évolution des paramètres pendant la prise en charge" icon={Activity}>
        <SurveillanceTable {...bind('gestes.surveillance')} />
      </Card>
    </div>
  );
}