/* Étape 1 — Bilan circonstanciel */

function StepCirconstanciel({ b, bind }) {
  return (
    <div className="space-y-5">
      <Card title="Informations générales" icon={ClipboardList}>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <Field label="Date / heure">
            <TextInput type="datetime-local" {...bind('circ.dateHeure')} />
          </Field>
          <Field label="N° d'intervention">
            <TextInput placeholder="ex : 2026-004512" {...bind('circ.numInter')} />
          </Field>
          <Field label="Engin">
            <TextInput list="engins-list" placeholder="VSAV 1" {...bind('circ.engin')} />
          </Field>
          <Field label="Équipage">
            <TextInput placeholder="CA, équipiers…" {...bind('circ.equipage')} />
          </Field>
          <Field label="Adresse de l'intervention" className="sm:col-span-2 lg:col-span-3">
            <TextInput placeholder="N°, rue, lieu-dit, étage, code…" {...bind('circ.adresse')} />
          </Field>
          <Field label="Commune">
            <TextInput {...bind('circ.commune')} />
          </Field>
          <Field label="Motif de départ" className="sm:col-span-2">
            <SelectInput options={MOTIFS} {...bind('circ.motif')} />
          </Field>
          <Field label="Précision du motif" className="sm:col-span-2">
            <TextInput placeholder="Informations transmises par le CTA/CODIS" {...bind('circ.motifDetail')} />
          </Field>
        </div>
      </Card>

      <Card title="Victime" icon={CircleUser}>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
          <Field label="Nom">
            <TextInput {...bind('circ.victime.nom')} />
          </Field>
          <Field label="Prénom">
            <TextInput {...bind('circ.victime.prenom')} />
          </Field>
          <Field label="Sexe">
            <Segmented
              tone="slate"
              options={[
                { value: 'H', label: 'Homme' },
                { value: 'F', label: 'Femme' },
              ]}
              {...bind('circ.victime.sexe')}
            />
          </Field>
          <Field label="Âge">
            <NumberInput unit="ans" min="0" max="120" {...bind('circ.victime.age')} />
          </Field>
          <Field label="Date de naissance">
            <TextInput type="date" {...bind('circ.victime.naissance')} />
          </Field>
        </div>
      </Card>

      <Card title="Évaluation des risques" icon={AlertTriangle}>
        <div className="space-y-4">
          <Field label="Sécurité de la zone">
            <Segmented options={SECURITE_ZONE} size="lg" {...bind('circ.securite')} />
          </Field>
          <Field label="Risques particuliers">
            <ChipGroup options={RISQUES} tone="amber" {...bind('circ.risques')} />
          </Field>
          <Field label="Précisions / mesures prises">
            <TextInput placeholder="Balisage, coupure énergie, ventilation des locaux…" {...bind('circ.risquesDetail')} />
          </Field>
        </div>
      </Card>

      <Card title="Situation" icon={Siren}>
        <div className="space-y-4">
          <div className="grid gap-4 sm:grid-cols-[160px_1fr]">
            <Field label="Nombre de victimes">
              <NumberInput min="0" {...bind('circ.nbVictimes')} />
            </Field>
            <Field label="Mécanisme">
              <Segmented options={MECANISMES} tone="slate" {...bind('circ.mecanisme')} />
            </Field>
          </div>
          <Field label="Description du mécanisme / de la maladie">
            <TextArea placeholder="Cinétique, hauteur de chute, début des symptômes…" {...bind('circ.mecanismeDetail')} />
          </Field>
          <Field label="Éléments de l'environnement">
            <ChipGroup options={ENVIRONNEMENT} tone="slate" {...bind('circ.environnement')} />
          </Field>
          <Field label="Autres éléments">
            <TextInput placeholder="Position exacte, témoins, accès difficile…" {...bind('circ.environnementDetail')} />
          </Field>
        </div>
      </Card>

      <Card title="Renforts / moyens complémentaires" icon={Truck}>
        <div className="space-y-4">
          <ChipGroup options={RENFORTS} tone="blue" {...bind('circ.renforts')} />
          <Field label="Précisions">
            <TextInput placeholder="Heure de demande, motif du renfort…" {...bind('circ.renfortsDetail')} />
          </Field>
        </div>
      </Card>

      <datalist id="engins-list">
        {ENGINS.map((e) => (
          <option key={e} value={e} />
        ))}
      </datalist>
    </div>
  );
}