/* Étape 2 — Bilan vital / primaire (méthode X-ABCDE) */

function AbcdeSection({ letter, title, subtitle, color, children }) {
  return (
    <section className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
      <header className="flex items-center gap-3 border-b border-slate-100 px-4 py-3">
        <span className={cx('flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-2xl font-black text-white shadow-sm', color)}>{letter}</span>
        <div>
          <h3 className="font-semibold text-slate-800">{title}</h3>
          {subtitle && <p className="text-xs text-slate-500">{subtitle}</p>}
        </div>
      </header>
      <div className="space-y-4 p-4">{children}</div>
    </section>
  );
}

function DouleurScale({ value, onChange }) {
  const color = (n) => (n <= 3 ? 'emerald' : n <= 6 ? 'amber' : 'red');
  const solid = { emerald: 'bg-emerald-500 border-emerald-500', amber: 'bg-amber-500 border-amber-500', red: 'bg-red-600 border-red-600' };
  return (
    <div className="flex flex-wrap gap-1.5">
      {Array.from({ length: 11 }, (_, n) => {
        const active = String(value) === String(n);
        return (
          <button
            key={n}
            type="button"
            onClick={() => onChange(active ? '' : String(n))}
            className={cx(
              'h-11 w-11 rounded-lg border text-base font-bold transition active:scale-95',
              active ? `${solid[color(n)]} text-white shadow` : 'border-slate-300 bg-white text-slate-600 hover:bg-slate-50',
            )}
          >
            {n}
          </button>
        );
      })}
    </div>
  );
}

function StepVital({ b, bind }) {
  const v = b.vital;
  const gcs = glasgowScore(v.d);
  const gcsTone = gcs === null ? 'slate' : gcs <= 8 ? 'red' : gcs < 15 ? 'amber' : 'emerald';

  return (
    <div className="space-y-5">
      <AbcdeSection letter="X" title="Hémorragie externe" subtitle="Hémorragie cataclysmique" color="bg-red-700">
        <Field label="Hémorragie massive ?">
          <YesNo {...bind('vital.x.hemorragie')} />
        </Field>
        {v.x.hemorragie === 'oui' && (
          <div className="grid gap-4 rounded-lg bg-red-50 p-4 sm:grid-cols-2">
            <Field label="Localisation">
              <TextInput placeholder="ex : cuisse gauche" {...bind('vital.x.localisation')} />
            </Field>
            <Field label="Heure de pose du garrot">
              <TimeInput {...bind('vital.x.garrotHeure')} />
            </Field>
            <Field label="Gestes réalisés" className="sm:col-span-2">
              <ChipGroup options={HEMORRAGIE_GESTES} {...bind('vital.x.gestes')} />
            </Field>
          </div>
        )}
      </AbcdeSection>

      <AbcdeSection letter="A" title="Airway — Voies aériennes" color="bg-orange-500">
        <Field label="État des voies aériennes">
          <Segmented options={VA_ETAT} size="lg" {...bind('vital.a.etat')} />
        </Field>
        {v.a.etat === 'obstruees' && (
          <Field label="Cause de l'obstruction">
            <ChipGroup options={VA_CAUSES} {...bind('vital.a.causes')} />
          </Field>
        )}
        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="Risque d'impossibilité de maintenir les VA libres">
            <YesNo {...bind('vital.a.risque')} />
          </Field>
          <Field label="Collier cervical posé">
            <YesNo danger="none" {...bind('vital.a.collier')} />
          </Field>
        </div>
      </AbcdeSection>

      <AbcdeSection letter="B" title="Breathing — Ventilation" color="bg-sky-600">
        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="Fréquence respiratoire">
            <NumberInput unit="/min" tone={vitalTone('fr', v.b.fr)} {...bind('vital.b.fr')} />
          </Field>
          <Field label="SpO2">
            <NumberInput unit="%" min="0" max="100" tone={vitalTone('spo2', v.b.spo2)} {...bind('vital.b.spo2')} />
          </Field>
        </div>
        <Field label="Qualité de la respiration" extra={<Button size="sm" variant="secondary" onClick={() => bind('vital.b.qualite').onChange(['Ample', 'Silencieuse', 'Régulière'])}>Ample, silencieuse, régulière</Button>}>
          <ChipGroup options={RESP_QUALITE} tone="blue" {...bind('vital.b.qualite')} />
        </Field>
        <Field label="Oxygène administré">
          <YesNo danger="none" {...bind('vital.b.o2')} />
        </Field>
        {v.b.o2 === 'oui' && (
          <div className="grid gap-4 rounded-lg bg-sky-50 p-4 sm:grid-cols-[180px_1fr]">
            <Field label="Débit">
              <NumberInput unit="L/min" {...bind('vital.b.o2Debit')} />
            </Field>
            <Field label="Dispositif">
              <Segmented options={O2_DISPOSITIFS} tone="blue" {...bind('vital.b.o2Dispositif')} />
            </Field>
          </div>
        )}
      </AbcdeSection>

      <AbcdeSection letter="C" title="Circulation — Hémodynamique" color="bg-rose-600">
        <div className="grid gap-4 sm:grid-cols-3">
          <Field label="Fréquence cardiaque">
            <NumberInput unit="bpm" tone={vitalTone('fc', v.c.fc)} {...bind('vital.c.fc')} />
          </Field>
          <Field label="TA systolique">
            <NumberInput unit="mmHg" tone={vitalTone('tas', v.c.tas)} {...bind('vital.c.tas')} />
          </Field>
          <Field label="TA diastolique">
            <NumberInput unit="mmHg" tone={vitalTone('tad', v.c.tad)} {...bind('vital.c.tad')} />
          </Field>
        </div>
        <Field label="Qualité du pouls" extra={<Button size="sm" variant="secondary" onClick={() => bind('vital.c.pouls').onChange('Régulier, bien frappé, symétrique')}>Régulier, bien frappé, symétrique</Button>}>
          <Segmented options={POULS_QUALITE} {...bind('vital.c.pouls')} />
        </Field>
        <Field label="Signes périphériques">
          <ChipGroup options={SIGNES_PERIPH} tone="amber" {...bind('vital.c.signes')} />
        </Field>
        <Field label="Temps de recoloration cutanée">
          <Segmented options={TRC} {...bind('vital.c.trc')} />
        </Field>
      </AbcdeSection>

      <AbcdeSection letter="D" title="Disability — Neurologique" color="bg-violet-600">
        <Field label="Score AVPU">
          <Segmented options={AVPU} {...bind('vital.d.avpu')} />
        </Field>
        <Field label="Score de Glasgow" extra={<Badge tone={gcsTone}>{gcs === null ? 'GCS —' : `GCS ${gcs} / 15`}</Badge>}>
          <div className="grid gap-3 sm:grid-cols-3">
            <SelectInput placeholder="E — Ouverture des yeux" options={GLASGOW.E} {...bind('vital.d.gE')} />
            <SelectInput placeholder="V — Réponse verbale" options={GLASGOW.V} {...bind('vital.d.gV')} />
            <SelectInput placeholder="M — Réponse motrice" options={GLASGOW.M} {...bind('vital.d.gM')} />
          </div>
        </Field>
        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="Perte de connaissance initiale">
            <YesNo {...bind('vital.d.pci')} />
          </Field>
          {v.d.pci === 'oui' && (
            <Field label="Durée estimée">
              <TextInput placeholder="ex : 2 min" {...bind('vital.d.pciDuree')} />
            </Field>
          )}
        </div>
        <Field label="Pupilles">
          <ChipGroup options={PUPILLES} tone="violet" {...bind('vital.d.pupilles')} />
        </Field>
        <Field label="Glycémie capillaire">
          <NumberInput
            unit={v.d.glyUnite || 'ml/dL'}
            step={String(v.d.glyUnite || 'ml/dL').toLowerCase() === 'ml/dl' ? '1' : '0.01'}
            tone={vitalTone('glyGL', glycemieGL(v.d))}
            value={v.d.glycemie}
            onChange={(value) => {
              bind('vital.d.glycemie').onChange(value);
              if (!v.d.glyUnite) bind('vital.d.glyUnite').onChange('ml/dL');
            }}
          />
        </Field>
        <Field label="Motricité / sensibilité">
          <ChipGroup options={NEURO} tone="violet" {...bind('vital.d.neuro')} />
        </Field>
        <Field label="Côté du déficit">
          <Segmented options={COTES} tone="violet" {...bind('vital.d.deficitCote')} />
        </Field>
      </AbcdeSection>

      <AbcdeSection letter="E" title="Exposure — Environnement & douleur" color="bg-emerald-600">
        <div className="grid gap-4 sm:grid-cols-[180px_1fr]">
          <Field label="Température">
            <NumberInput unit="°C" step="0.1" tone={vitalTone('temp', v.e.temp)} {...bind('vital.e.temp')} />
          </Field>
          <Field label="Échelle de douleur">
            <Segmented options={ECHELLES_DOULEUR} tone="slate" allowEmpty={false} {...bind('vital.e.echelle')} />
          </Field>
        </div>
        <Field label={`Intensité de la douleur (${v.e.echelle || 'EN'} 0 à 10)`}>
          <DouleurScale {...bind('vital.e.douleur')} />
        </Field>
        <Field label="Localisation de la douleur principale">
          <TextInput placeholder="ex : thoracique rétrosternale irradiant bras gauche" {...bind('vital.e.douleurLoc')} />
        </Field>
      </AbcdeSection>
    </div>
  );
}