<template>
  <main class="container mx-auto px-6 py-8">
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
        <div>
          <h1 class="text-2xl font-bold">
            Nouvelle machine
          </h1>
          <p class="text-sm text-gray-500">
            Renseignez les informations et la configuration avant de créer la machine.
          </p>
        </div>
        <NuxtLink to="/machines" class="btn btn-ghost">
          Annuler
        </NuxtLink>
      </div>

      <form class="space-y-6" @submit.prevent="finalizeMachineCreation">
        <div class="card bg-base-100 shadow-lg">
          <div class="card-body space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="form-control">
                <label class="label" for="machine-field-name">
                  <span class="label-text">Nom de la machine</span>
                </label>
                <input
                  id="machine-field-name"
                  v-model="newMachine.name"
                  type="text"
                  placeholder="Ex: Presse hydraulique #1"
                  class="input input-bordered"
                  required
                >
              </div>

              <div class="form-control">
                <label class="label" for="machine-field-site">
                  <span class="label-text">Site</span>
                </label>
                <select id="machine-field-site" v-model="newMachine.siteId" class="select select-bordered" required>
                  <option value="">
                    Sélectionner un site
                  </option>
                  <option v-for="site in sites" :key="site.id" :value="site.id">
                    {{ site.name }}
                  </option>
                </select>
              </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Type de machine</span>
                </label>
                <select v-model="newMachine.typeMachineId" class="select select-bordered" required>
                  <option value="">
                    Sélectionner un type
                  </option>
                  <option v-for="type in machineTypes" :key="type.id" :value="type.id">
                    {{ type.name }} ({{ type.category }})
                  </option>
                </select>
              </div>

              <div class="form-control">
                <label class="label">
                  <span class="label-text">Référence</span>
                </label>
                <input
                  v-model="newMachine.reference"
                  type="text"
                  placeholder="Ex: PRESS-001"
                  class="input input-bordered"
                >
              </div>
            </div>

            <div v-if="selectedMachineType" class="p-4 bg-gray-50 rounded-lg space-y-2 text-sm">
              <h4 class="font-semibold text-sm">
                Structure du type sélectionné :
              </h4>
              <div class="flex flex-wrap gap-3">
                <span class="inline-flex items-center gap-2">
                  <span class="font-medium">Familles de composants :</span>
                  <span class="badge badge-sm">{{ selectedMachineType.componentRequirements?.length || 0 }}</span>
                </span>
                <span class="inline-flex items-center gap-2">
                  <span class="font-medium">Groupes de pièces :</span>
                  <span class="badge badge-sm">{{ selectedMachineType.pieceRequirements?.length || 0 }}</span>
                </span>
                <span class="inline-flex items-center gap-2">
                  <span class="font-medium">Catégorie :</span>
                  <span class="badge badge-outline badge-sm">{{ selectedMachineType.category || 'N/A' }}</span>
                </span>
              </div>
              <p
                v-if="(selectedMachineType.componentRequirements?.length || 0) === 0 && (selectedMachineType.pieceRequirements?.length || 0) === 0"
                class="text-xs text-gray-500"
              >
                Ce type n'a pas encore de familles configurées. La machine héritera de la structure legacy du type.
              </p>
            </div>

            <div v-if="selectedMachineType?.componentRequirements?.length" class="space-y-4">
              <h4 class="text-sm font-semibold">
                Sélection des composants
              </h4>

              <div
                v-for="requirement in selectedMachineType.componentRequirements"
                :id="`component-group-${requirement.id}`"
                :key="requirement.id"
                class="border border-base-200 rounded-lg p-4 space-y-3"
              >
                <div class="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <h5 class="font-medium text-sm">
                      {{ requirement.label || requirement.typeComposant?.name || 'Famille de composants' }}
                    </h5>
                    <p class="text-xs text-gray-500">
                      Type : {{ requirement.typeComposant?.name || 'Non défini' }} · Min : {{ requirement.minCount ?? (requirement.required ? 1 : 0) }}
                      · Max : {{ requirement.maxCount ?? '∞' }}
                    </p>
                  </div>

                  <button
                    type="button"
                    class="btn btn-sm btn-outline"
                    :disabled="requirement.maxCount !== null && getComponentRequirementEntries(requirement.id).length >= requirement.maxCount"
                    @click="addComponentSelectionEntry(requirement)"
                  >
                    <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
                    Ajouter
                  </button>
                </div>

                <div v-if="getComponentRequirementEntries(requirement.id).length === 0" class="text-xs text-gray-500">
                  Aucun composant sélectionné pour ce groupe.
                </div>

                <div
                  v-for="(entry, entryIndex) in getComponentRequirementEntries(requirement.id)"
                  :key="`${requirement.id}-${entryIndex}`"
                  class="bg-base-200/60 rounded-md p-3 space-y-4"
                >
                  <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-gray-500">
                    <span>
                      Type appliqué :
                      {{ resolveComponentRequirementTypeLabel(requirement, entry) }}
                    </span>
                    <button
                      type="button"
                      class="btn btn-square btn-xs btn-error"
                      @click="removeComponentSelectionEntry(requirement.id, entryIndex)"
                    >
                      <IconLucideX class="w-4 h-4" aria-hidden="true" />
                    </button>
                  </div>

                  <div class="grid grid-cols-1 gap-3">
                    <div class="space-y-2">
                      <div class="form-control">
                        <label class="label">
                          <span class="label-text text-xs">Composant existant</span>
                        </label>
                        <select
                          class="select select-bordered select-sm"
                          :value="entry.composantId || ''"
                          @change="setComponentRequirementComponent(requirement, entryIndex, ($event.target && $event.target.value) || '')"
                        >
                          <option value="">
                            Sélectionner un composant disponible
                          </option>
                          <option
                            v-for="component in getComponentOptions(requirement, entry)"
                            :key="component.id"
                            :value="component.id"
                          >
                            {{ formatComponentOption(component) }}
                          </option>
                        </select>
                      </div>
                      <p
                        v-if="getComponentOptions(requirement, entry).length === 0"
                        class="text-xs text-error"
                      >
                        Aucun composant disponible pour cette famille.
                      </p>
                    </div>

                    <div
                      v-if="entry.composantId"
                      class="bg-base-300/60 rounded-md p-3 text-xs text-gray-600 space-y-1"
                    >
                      <div class="font-medium">
                        {{ (findComponentById(entry.composantId)?.name) || "Composant" }}
                      </div>
                      <div>
                        Référence : {{ findComponentById(entry.composantId)?.reference || "—" }}
                      </div>
                      <div>
                        Constructeur :
                        {{ findComponentById(entry.composantId)?.constructeur?.name || findComponentById(entry.composantId)?.constructeurName || "—" }}
                      </div>
                    
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="selectedMachineType?.pieceRequirements?.length" class="space-y-4">
              <h4 class="text-sm font-semibold">
                Sélection des pièces principales
              </h4>

              <div
                v-for="requirement in selectedMachineType.pieceRequirements"
                :id="`piece-group-${requirement.id}`"
                :key="requirement.id"
                class="border border-base-200 rounded-lg p-4 space-y-3"
              >
                <div class="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <h5 class="font-medium text-sm">
                      {{ requirement.label || requirement.typePiece?.name || 'Groupe de pièces' }}
                    </h5>
                    <p class="text-xs text-gray-500">
                      Type : {{ requirement.typePiece?.name || 'Non défini' }} · Min : {{ requirement.minCount ?? (requirement.required ? 1 : 0) }}
                      · Max : {{ requirement.maxCount ?? '∞' }}
                    </p>
                  </div>

                  <button
                    type="button"
                    class="btn btn-sm btn-outline"
                    :disabled="requirement.maxCount !== null && getPieceRequirementEntries(requirement.id).length >= requirement.maxCount"
                    @click="addPieceSelectionEntry(requirement)"
                  >
                    <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
                    Ajouter
                  </button>
                </div>

                <div v-if="getPieceRequirementEntries(requirement.id).length === 0" class="text-xs text-gray-500">
                  Aucune pièce sélectionnée pour ce groupe.
                </div>

                <div
                  v-for="(entry, entryIndex) in getPieceRequirementEntries(requirement.id)"
                  :key="`${requirement.id}-piece-${entryIndex}`"
                  class="bg-base-200/60 rounded-md p-3 space-y-4"
                >
                  <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-gray-500">
                    <span>
                      Type appliqué :
                      {{ resolvePieceRequirementTypeLabel(requirement, entry) }}
                    </span>
                    <button
                      type="button"
                      class="btn btn-square btn-xs btn-error"
                      @click="removePieceSelectionEntry(requirement.id, entryIndex)"
                    >
                      <IconLucideX class="w-4 h-4" aria-hidden="true" />
                    </button>
                  </div>

                  <div class="grid grid-cols-1 gap-3">
                    <div class="space-y-2">
                      <div class="form-control">
                        <label class="label">
                          <span class="label-text text-xs">Pièce existante</span>
                        </label>
                        <select
                          class="select select-bordered select-sm"
                          :value="entry.pieceId || ''"
                          @change="setPieceRequirementPiece(requirement, entryIndex, ($event.target && $event.target.value) || '')"
                        >
                          <option value="">
                            Sélectionner une pièce disponible
                          </option>
                          <option
                            v-for="pieceOption in getPieceOptions(requirement, entry)"
                            :key="pieceOption.id"
                            :value="pieceOption.id"
                          >
                            {{ formatPieceOption(pieceOption) }}
                          </option>
                        </select>
                      </div>
                      <p
                        v-if="getPieceOptions(requirement, entry).length === 0"
                        class="text-xs text-error"
                      >
                        Aucune pièce disponible pour cette famille.
                      </p>
                    </div>

                    <div
                      v-if="entry.pieceId"
                      class="bg-base-300/60 rounded-md p-3 text-xs text-gray-600 space-y-1"
                    >
                      <div class="font-medium">
                        {{ (findPieceById(entry.pieceId)?.name) || "Pièce" }}
                      </div>
                      <div>
                        Référence : {{ findPieceById(entry.pieceId)?.reference || "—" }}
                      </div>
                      <div>
                        Constructeur :
                        {{ findPieceById(entry.pieceId)?.constructeur?.name || findPieceById(entry.pieceId)?.constructeurName || "—" }}
                      </div>
                    
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="machinePreview" class="space-y-4">
              <div class="border border-base-200 rounded-lg bg-base-100/80">
                <div class="p-4 space-y-4">
                  <div class="flex items-center justify-between gap-3">
                    <div class="flex items-center gap-2 text-sm font-semibold text-gray-700">
                      <IconLucideEye class="w-4 h-4" aria-hidden="true" />
                      <span>Prévisualisation avant création</span>
                    </div>
                    <span class="badge" :class="getStatusBadgeClass(machinePreview.status)">
                      {{ machinePreview.status === 'ready' ? 'Prête à créer' : machinePreview.status === 'warning' ? 'À compléter' : 'Bloquante' }}
                    </span>
                  </div>

                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div
                      v-for="field in machinePreview.base.fields"
                      :key="field.key"
                      class="flex flex-col gap-1"
                    >
                      <span class="text-[11px] uppercase tracking-wide text-gray-500">{{ field.label }}</span>
                      <span
                        class="text-sm font-medium"
                        :class="field.status === 'missing'
                          ? 'text-error'
                          : field.status === 'optional'
                            ? 'text-gray-500 italic'
                            : 'text-gray-900'"
                      >
                        {{ field.display }}
                      </span>
                    </div>
                  </div>

                  <div class="flex flex-wrap gap-2 text-xs text-gray-500">
                    <span class="badge badge-ghost badge-sm">Type : {{ machinePreview.type.name }}</span>
                    <span v-if="machinePreview.type.category" class="badge badge-ghost badge-sm">Catégorie : {{ machinePreview.type.category }}</span>
                    <span class="badge badge-ghost badge-sm">Structure JSON : {{ machinePreview.type.hasStructuredDefinition ? 'Oui' : 'Legacy' }}</span>
                  </div>

                  <div v-if="machinePreview.base.issues.length" class="rounded-md bg-warning/10 border border-warning/30 p-3 text-xs text-warning">
                    <p class="font-medium mb-1">
                      Informations générales incomplètes :
                    </p>
                    <ul class="space-y-1">
                      <li v-for="issue in machinePreview.base.issues" :key="issue.message">
                        <button
                          type="button"
                          class="flex w-full items-start gap-2 text-left hover:underline"
                          @click="handleIssueClick(issue)"
                        >
                          <span class="mt-0.5 text-[8px] leading-none">•</span>
                          <span>{{ issue.message }}</span>
                        </button>
                      </li>
                    </ul>
                  </div>

                  <div v-if="machinePreview.componentGroups.length" class="space-y-3">
                    <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                      Composants hérités
                    </h5>
                    <div
                      v-for="group in machinePreview.componentGroups"
                      :key="group.id"
                      class="border border-base-200 rounded-md p-3 space-y-3"
                    >
                      <div class="flex flex-wrap items-start justify-between gap-2">
                        <div>
                          <p class="text-sm font-semibold">
                            {{ group.label }}
                          </p>
                          <p class="text-xs text-gray-500">
                            Type : {{ group.typeName }} · Min {{ group.min }} ·
                            {{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
                          </p>
                        </div>
                        <span class="badge badge-sm" :class="getStatusBadgeClass(group.status)">
                          {{ group.completed }} / {{ group.total || 0 }} complétée(s)
                        </span>
                      </div>

                      <div v-if="group.issues.length" class="rounded bg-warning/10 border border-warning/30 p-2 text-[11px] text-warning">
                        <ul class="list-disc pl-4 space-y-1">
                          <li v-for="issue in group.issues" :key="issue.message">
                            {{ issue.message }}
                          </li>
                        </ul>
                      </div>

                      <ul class="space-y-2">
                        <li
                          v-for="entry in group.entries"
                          :key="entry.key"
                          class="flex items-start gap-3"
                        >
                          <component
                            :is="entry.status === 'complete' ? IconLucideCheckCircle2 : IconLucideCircle"
                            class="w-4 h-4 mt-0.5"
                            :class="entry.status === 'complete' ? 'text-success' : 'text-gray-400'"
                            aria-hidden="true"
                          />
                          <div class="flex-1">
                            <p class="text-sm font-medium" :class="entry.status === 'complete' ? 'text-gray-900' : 'text-gray-500'">
                              {{ entry.title }}
                            </p>
                            <p v-if="entry.subtitle" class="text-xs text-gray-500">
                              {{ entry.subtitle }}
                            </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div v-else class="text-xs text-gray-500">
                    Aucun composant n'est requis pour ce type de machine.
                  </div>

                  <div v-if="machinePreview.pieceGroups.length" class="space-y-3">
                    <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                      Pièces associées
                    </h5>
                    <div
                      v-for="group in machinePreview.pieceGroups"
                      :key="group.id"
                      class="border border-base-200 rounded-md p-3 space-y-3"
                    >
                      <div class="flex flex-wrap items-start justify-between gap-2">
                        <div>
                          <p class="text-sm font-semibold">
                            {{ group.label }}
                          </p>
                          <p class="text-xs text-gray-500">
                            Type : {{ group.typeName }} · Min {{ group.min }} ·
                            {{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
                          </p>
                        </div>
                        <span class="badge badge-sm" :class="getStatusBadgeClass(group.status)">
                          {{ group.completed }} / {{ group.total || 0 }} complétée(s)
                        </span>
                      </div>

                      <div v-if="group.issues.length" class="rounded bg-warning/10 border border-warning/30 p-2 text-[11px] text-warning">
                        <ul class="list-disc pl-4 space-y-1">
                          <li v-for="issue in group.issues" :key="issue.message">
                            {{ issue.message }}
                          </li>
                        </ul>
                      </div>

                      <ul class="space-y-2">
                        <li
                          v-for="entry in group.entries"
                          :key="entry.key"
                          class="flex items-start gap-3"
                        >
                          <component
                            :is="entry.status === 'complete' ? IconLucideCheckCircle2 : IconLucideCircle"
                            class="w-4 h-4 mt-0.5"
                            :class="entry.status === 'complete' ? 'text-success' : 'text-gray-400'"
                            aria-hidden="true"
                          />
                          <div class="flex-1">
                            <p class="text-sm font-medium" :class="entry.status === 'complete' ? 'text-gray-900' : 'text-gray-500'">
                              {{ entry.title }}
                            </p>
                            <p v-if="entry.subtitle" class="text-xs text-gray-500">
                              {{ entry.subtitle }}
                            </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div v-else class="text-xs text-gray-500">
                    Aucun groupe de pièces à configurer pour ce type.
                  </div>

                  <div
                    v-if="machinePreview.issues.length && machinePreview.status !== 'ready'"
                    class="rounded-md border border-warning/30 bg-warning/10 p-3 text-xs text-warning"
                  >
                    <div class="flex items-start gap-2">
                      <IconLucideAlertTriangle class="w-4 h-4 mt-0.5" aria-hidden="true" />
                      <div class="space-y-1">
                        <p class="font-medium">
                          Points à vérifier avant la création :
                        </p>
                        <ul class="space-y-1">
                          <li v-for="issue in machinePreview.issues" :key="`${issue.scope}-${issue.message}`">
                            <button
                              type="button"
                              class="flex w-full items-start gap-2 text-left hover:underline"
                              @click="handleIssueClick(issue)"
                            >
                              <span class="mt-0.5 text-[8px] leading-none">•</span>
                              <span>
                                <span class="font-medium">{{ issue.scope }} :</span> {{ issue.message }}
                              </span>
                            </button>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div
              v-if="blockingPreviewIssues.length"
              class="text-xs text-error bg-error/10 border border-error/20 rounded-md px-3 py-2"
            >
              Compléter les informations bloquantes avant de créer la machine.
            </div>

            <div class="flex justify-end gap-3 pt-4 border-t border-base-200">
              <NuxtLink to="/machines" class="btn btn-outline">
                Annuler
              </NuxtLink>
              <button
                type="submit"
                class="btn btn-primary"
                :disabled="!canCreateMachine || submitting"
                :class="{ loading: submitting }"
              >
                Créer la machine
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </main>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useMachines } from '~/composables/useMachines'
import { useSites } from '~/composables/useSites'
import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
import { useComposants } from '~/composables/useComposants'
import { usePieces } from '~/composables/usePieces'
import { useToast } from '~/composables/useToast'
import { sanitizeDefinitionOverrides } from '~/shared/modelUtils'
import IconLucidePlus from '~icons/lucide/plus'
import IconLucideX from '~icons/lucide/x'
import IconLucideEye from '~icons/lucide/eye'
import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
import IconLucideCheckCircle2 from '~icons/lucide/check-circle-2'
import IconLucideCircle from '~icons/lucide/circle'

const { createMachine, createMachineFromType } = useMachines()
const { sites, loadSites } = useSites()
const { machineTypes, loadMachineTypes } = useMachineTypesApi()
const { composants, loadComposants } = useComposants()
const { pieces, loadPieces } = usePieces()
const toast = useToast()

const submitting = ref(false)

const newMachine = reactive({
  name: '',
  siteId: '',
  typeMachineId: '',
  reference: ''
})

const componentRequirementSelections = reactive({})
const pieceRequirementSelections = reactive({})

const selectedMachineType = computed(() => {
  if (!newMachine.typeMachineId) {
    return null
  }
  return machineTypes.value.find(type => type.id === newMachine.typeMachineId) || null
})

const componentById = computed(() => {
  const map = new Map()
  ;(composants.value || []).forEach((component) => {
    if (component?.id) {
      map.set(component.id, component)
    }
  })
  return map
})

const pieceById = computed(() => {
  const map = new Map()
  ;(pieces.value || []).forEach((piece) => {
    if (piece?.id) {
      map.set(piece.id, piece)
    }
  })
  return map
})

const componentInventory = computed(() => composants.value || [])
const pieceInventory = computed(() => pieces.value || [])

const isPlainObject = value => value !== null && typeof value === 'object' && !Array.isArray(value)

const toTrimmedString = (value) => {
  if (typeof value === 'string') {
    const trimmed = value.trim()
    return trimmed.length > 0 ? trimmed : null
  }
  if (typeof value === 'number' && Number.isFinite(value)) {
    return String(value)
  }
  return null
}

const dedupeAssignments = (assignments) => {
  const seen = new Set()
  return assignments.filter((assignment) => {
    if (!assignment) {
      return false
    }
    const id = assignment.id != null ? String(assignment.id) : ''
    const name = assignment.name != null ? String(assignment.name) : ''
    const key = `${id}::${name}`
    if (!id && !name) {
      return false
    }
    if (seen.has(key)) {
      return false
    }
    seen.add(key)
    return true
  })
}

const normalizeMachineAssignment = (input) => {
  if (!input) {
    return null
  }
  if (typeof input === 'string') {
    const name = toTrimmedString(input)
    return name ? { id: name, name } : null
  }
  if (typeof input === 'number' && Number.isFinite(input)) {
    const value = String(input)
    return { id: value, name: value }
  }

  const container = input.machine || input.machineData || input
  if (!isPlainObject(container)) {
    return null
  }

  const id = container.id ?? input.machineId ?? input.id ?? null
  const name =
    container.name
    || input.machineName
    || container.label
    || container.title
    || (typeof id === 'string' ? id : null)
    || (typeof id === 'number' ? String(id) : null)

  if (id == null && name == null) {
    return null
  }

  return {
    id: id != null ? id : null,
    name: name != null ? name : null,
  }
}

const collectMachineAssignments = (source) => {
  if (!isPlainObject(source)) {
    return []
  }

  const candidates = [
    source.machines,
    source.machineLinks,
    source.machineAssignments,
    source.machinesAssignments,
    source.linkedMachines,
  ]

  const assignments = []

  candidates.forEach((list) => {
    if (Array.isArray(list)) {
      list.forEach((item) => {
        const normalized = normalizeMachineAssignment(item)
        if (normalized) {
          assignments.push(normalized)
        }
      })
    }
  })

  if (!assignments.length) {
    const direct = normalizeMachineAssignment(source.machine)
    if (direct) {
      assignments.push(direct)
    }
  }

  if (!assignments.length) {
    const idCandidate = source.machineId ?? source.machineID ?? null
    const nameCandidate = source.machineName ?? null
    const normalized = normalizeMachineAssignment(nameCandidate || idCandidate)
    if (normalized) {
      assignments.push(normalized)
    }
  }

  return dedupeAssignments(assignments)
}

const normalizeComponentAssignment = (input) => {
  if (!input) {
    return null
  }
  if (typeof input === 'string') {
    const value = toTrimmedString(input)
    return value ? { id: value, name: value } : null
  }
  if (typeof input === 'number' && Number.isFinite(input)) {
    const value = String(input)
    return { id: value, name: value }
  }

  const container = input.component || input.composant || input
  if (!isPlainObject(container)) {
    return null
  }

  const id = container.id ?? input.componentId ?? input.composantId ?? input.id ?? null
  const name =
    container.name
    || input.componentName
    || input.composantName
    || container.label
    || (typeof id === 'string' ? id : null)
    || (typeof id === 'number' ? String(id) : null)

  if (id == null && name == null) {
    return null
  }

  return {
    id: id != null ? id : null,
    name: name != null ? name : null,
  }
}

const collectComponentAssignments = (source) => {
  if (!isPlainObject(source)) {
    return []
  }

  const candidates = [
    source.components,
    source.composants,
    source.componentLinks,
    source.linkedComponents,
  ]

  const assignments = []

  candidates.forEach((list) => {
    if (Array.isArray(list)) {
      list.forEach((item) => {
        const normalized = normalizeComponentAssignment(item)
        if (normalized) {
          assignments.push(normalized)
        }
      })
    }
  })

  if (!assignments.length) {
    const direct = normalizeComponentAssignment(source.component || source.composant)
    if (direct) {
      assignments.push(direct)
    }
  }

  if (!assignments.length) {
    const idCandidate = source.componentId ?? source.composantId ?? null
    const normalized = normalizeComponentAssignment(idCandidate)
    if (normalized) {
      assignments.push(normalized)
    }
  }

  return dedupeAssignments(assignments)
}

const getComponentMachineAssignments = component => collectMachineAssignments(component || {})
const getPieceMachineAssignments = piece => collectMachineAssignments(piece || {})
const getPieceComponentAssignments = piece => collectComponentAssignments(piece || {})

const formatAssignmentList = (assignments) => {
  if (!Array.isArray(assignments) || assignments.length === 0) {
    return ''
  }
  return assignments
    .map((assignment) => assignment?.name || assignment?.id)
    .filter(Boolean)
    .join(', ')
}

const selectedComponentIds = computed(() => {
  const ids = []
  Object.values(componentRequirementSelections).forEach((entries) => {
    ;(entries || []).forEach((entry) => {
      if (entry?.composantId) {
        ids.push(entry.composantId)
      }
    })
  })
  return ids
})

const selectedPieceIds = computed(() => {
  const ids = []
  Object.values(pieceRequirementSelections).forEach((entries) => {
    ;(entries || []).forEach((entry) => {
      if (entry?.pieceId) {
        ids.push(entry.pieceId)
      }
    })
  })
  return ids
})

const getComponentOptions = (requirement, currentEntry) => {
  const requirementTypeId = requirement?.typeComposantId || requirement?.typeComposant?.id || null
  const usedIds = new Set(
    selectedComponentIds.value.filter((id) => id && (!currentEntry || id !== currentEntry.composantId)),
  )

  return componentInventory.value.filter((component) => {
    if (requirementTypeId && component.typeComposantId !== requirementTypeId) {
      return false
    }
    if (!component.id) {
      return false
    }
    if (currentEntry?.composantId === component.id) {
      return true
    }
    return !usedIds.has(component.id)
  })
}

const getPieceOptions = (requirement, currentEntry) => {
  const requirementTypeId = requirement?.typePieceId || requirement?.typePiece?.id || null
  const usedIds = new Set(
    selectedPieceIds.value.filter((id) => id && (!currentEntry || id !== currentEntry.pieceId)),
  )

  return pieceInventory.value.filter((piece) => {
    if (requirementTypeId && piece.typePieceId !== requirementTypeId) {
      return false
    }
    if (!piece.id) {
      return false
    }
    if (currentEntry?.pieceId === piece.id) {
      return true
    }
    return !usedIds.has(piece.id)
  })
}

const formatComponentOption = (component) => {
  if (!component) {
    return ''
  }
  const parts = [component.name || 'Composant']
  if (component.reference) {
    parts.push(`Réf. ${component.reference}`)
  }
  const constructeurName = component.constructeur?.name || component.constructeurName
  if (constructeurName) {
    parts.push(constructeurName)
  }
  const machineAssignments = getComponentMachineAssignments(component)
  if (machineAssignments.length) {
    parts.push(`Machines: ${formatAssignmentList(machineAssignments)}`)
  }
  return parts.join(' • ')
}

const formatPieceOption = (piece) => {
  if (!piece) {
    return ''
  }
  const parts = [piece.name || 'Pièce']
  if (piece.reference) {
    parts.push(`Réf. ${piece.reference}`)
  }
  const constructeurName = piece.constructeur?.name || piece.constructeurName
  if (constructeurName) {
    parts.push(constructeurName)
  }
  const machineAssignments = getPieceMachineAssignments(piece)
  if (machineAssignments.length) {
    parts.push(`Machines: ${formatAssignmentList(machineAssignments)}`)
  }
  const componentAssignments = getPieceComponentAssignments(piece)
  if (componentAssignments.length) {
    parts.push(`Composants: ${formatAssignmentList(componentAssignments)}`)
  }
  return parts.join(' • ')
}

const setComponentRequirementComponent = (requirement, index, componentId) => {
  const entries = getComponentRequirementEntries(requirement.id)
  const entry = entries[index]
  if (!entry) return
  entry.composantId = componentId || null
  if (componentId) {
    const component = findComponentById(componentId)
    entry.typeComposantId = component?.typeComposantId || requirement?.typeComposantId || null
  } else {
    entry.typeComposantId = requirement?.typeComposantId || null
  }
}

const setPieceRequirementPiece = (requirement, index, pieceId) => {
  const entries = getPieceRequirementEntries(requirement.id)
  const entry = entries[index]
  if (!entry) return
  entry.pieceId = pieceId || null
  if (pieceId) {
    const piece = findPieceById(pieceId)
    entry.typePieceId = piece?.typePieceId || requirement?.typePieceId || null
  } else {
    entry.typePieceId = requirement?.typePieceId || null
  }
}

const findComponentById = (id) => {
  if (!id) {
    return null
  }
  return componentById.value.get(id) || null
}

const findPieceById = (id) => {
  if (!id) {
    return null
  }
  return pieceById.value.get(id) || null
}
const getStatusBadgeClass = (status) => {
  if (status === 'ready') {
    return 'badge-success'
  }
  if (status === 'warning') {
    return 'badge-warning'
  }
  return 'badge-error'
}

const resolveComponentRequirementTypeLabel = (requirement, entry) => {
  if (entry?.composantId) {
    const component = findComponentById(entry.composantId)
    if (component?.typeComposant?.name) {
      return component.typeComposant.name
    }
  }
  return requirement?.typeComposant?.name || 'Type non défini'
}

const resolvePieceRequirementTypeLabel = (requirement, entry) => {
  if (entry?.pieceId) {
    const piece = findPieceById(entry.pieceId)
    if (piece?.typePiece?.name) {
      return piece.typePiece.name
    }
  }
  return requirement?.typePiece?.name || 'Type non défini'
}

const getComponentRequirementEntries = requirementId => componentRequirementSelections[requirementId] || []
const getPieceRequirementEntries = requirementId => pieceRequirementSelections[requirementId] || []

const createComponentSelectionEntry = (requirement, source = null) => ({
  typeComposantId: requirement?.typeComposantId || requirement?.typeComposant?.id || null,
  composantId: source?.composantId || null,
  definition: {},
})

const createPieceSelectionEntry = (requirement, source = null) => ({
  typePieceId: requirement?.typePieceId || requirement?.typePiece?.id || null,
  pieceId: source?.pieceId || null,
  definition: {},
})

const clearRequirementSelections = () => {
  Object.keys(componentRequirementSelections).forEach((key) => {
    delete componentRequirementSelections[key]
  })
  Object.keys(pieceRequirementSelections).forEach((key) => {
    delete pieceRequirementSelections[key]
  })
}

const addComponentSelectionEntry = (requirement) => {
  const entries = getComponentRequirementEntries(requirement.id)
  const max = requirement.maxCount ?? null
  if (max !== null && entries.length >= max) {
    toast.showError(`Vous ne pouvez pas ajouter plus de ${max} composant(s) pour ${requirement.label || requirement.typeComposant?.name || 'ce groupe'}`)
    return
  }
  componentRequirementSelections[requirement.id] = [
    ...entries,
    createComponentSelectionEntry(requirement),
  ]
}

const removeComponentSelectionEntry = (requirementId, index) => {
  const entries = getComponentRequirementEntries(requirementId)
  componentRequirementSelections[requirementId] = entries.filter((_, i) => i !== index)
}

const addPieceSelectionEntry = (requirement) => {
  const entries = getPieceRequirementEntries(requirement.id)
  const max = requirement.maxCount ?? null
  if (max !== null && entries.length >= max) {
    toast.showError(`Vous ne pouvez pas ajouter plus de ${max} pièce(s) pour ${requirement.label || requirement.typePiece?.name || 'ce groupe'}`)
    return
  }
  pieceRequirementSelections[requirement.id] = [
    ...entries,
    createPieceSelectionEntry(requirement),
  ]
}

const removePieceSelectionEntry = (requirementId, index) => {
  const entries = getPieceRequirementEntries(requirementId)
  pieceRequirementSelections[requirementId] = entries.filter((_, i) => i !== index)
}

const extractParentIdentifiers = (source) => {
  if (!isPlainObject(source)) {
    return {}
  }

  const identifiers = {}

  const idKeys = [
    'parentRequirementId',
    'parentComponentRequirementId',
    'parentPieceRequirementId',
    'parentMachineComponentRequirementId',
    'parentMachinePieceRequirementId',
    'parentLinkId',
    'parentComponentId',
    'parentPieceId',
  ]

  idKeys.forEach((key) => {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      const value = source[key]
      if (value !== undefined && value !== null && value !== '') {
        identifiers[key] = value
      }
    }
  })

  const objectKeys = [
    'parentRequirement',
    'parentComponentRequirement',
    'parentPieceRequirement',
    'parentMachineComponentRequirement',
    'parentMachinePieceRequirement',
  ]

  objectKeys.forEach((key) => {
    const value = source[key]
    if (isPlainObject(value) && value.id !== undefined && value.id !== null && value.id !== '') {
      const idKey = `${key}Id`
      if (!Object.prototype.hasOwnProperty.call(identifiers, idKey)) {
        identifiers[idKey] = value.id
      }
    }
  })

  return identifiers
}

const validateRequirementSelections = (type) => {
  const errors = []
  const componentLinksPayload = []
  const pieceLinksPayload = []

  for (const requirement of type.componentRequirements || []) {
    const entries = getComponentRequirementEntries(requirement.id)
    const min = requirement.minCount ?? (requirement.required ? 1 : 0)
    const max = requirement.maxCount ?? null

    if (entries.length < min) {
      errors.push(`Le groupe "${requirement.label || requirement.typeComposant?.name || 'Composants'}" nécessite au moins ${min} élément(s).`)
    }

    if (max !== null && entries.length > max) {
      errors.push(`Le groupe "${requirement.label || requirement.typeComposant?.name || 'Composants'}" ne peut dépasser ${max} élément(s).`)
    }

    entries.forEach((entry) => {
      if (!entry.composantId) {
        errors.push(`Sélectionner un composant existant pour "${requirement.label || requirement.typeComposant?.name || 'Composants'}".`)
        return
      }

      const component = findComponentById(entry.composantId)
      if (!component) {
        errors.push(`Le composant sélectionné est introuvable (ID: ${entry.composantId}).`)
        return
      }

      const requiredTypeId = requirement.typeComposantId || requirement.typeComposant?.id || null
      if (
        requiredTypeId &&
        component.typeComposantId &&
        component.typeComposantId !== requiredTypeId
      ) {
        errors.push(`Le composant "${component.name || component.id}" n'appartient pas à la famille attendue.`)
        return
      }

      const payload = {
        requirementId: requirement.id,
        composantId: entry.composantId,
      }

      const overrides = sanitizeDefinitionOverrides(entry.definition)
      if (overrides) {
        payload.overrides = overrides
      }

      Object.assign(payload, extractParentIdentifiers(requirement), extractParentIdentifiers(entry))

      componentLinksPayload.push(payload)
    })
  }

  for (const requirement of type.pieceRequirements || []) {
    const entries = getPieceRequirementEntries(requirement.id)
    const min = requirement.minCount ?? (requirement.required ? 1 : 0)
    const max = requirement.maxCount ?? null

    if (entries.length < min) {
      errors.push(`Le groupe "${requirement.label || requirement.typePiece?.name || 'Pièces'}" nécessite au moins ${min} élément(s).`)
    }

    if (max !== null && entries.length > max) {
      errors.push(`Le groupe "${requirement.label || requirement.typePiece?.name || 'Pièces'}" ne peut dépasser ${max} élément(s).`)
    }

    entries.forEach((entry) => {
      if (!entry.pieceId) {
        errors.push(`Sélectionner une pièce existante pour "${requirement.label || requirement.typePiece?.name || 'Pièces'}".`)
        return
      }

      const piece = findPieceById(entry.pieceId)
      if (!piece) {
        errors.push(`La pièce sélectionnée est introuvable (ID: ${entry.pieceId}).`)
        return
      }

      const requiredTypeId = requirement.typePieceId || requirement.typePiece?.id || null
      if (
        requiredTypeId &&
        piece.typePieceId &&
        piece.typePieceId !== requiredTypeId
      ) {
        errors.push(`La pièce "${piece.name || piece.id}" n'appartient pas à la famille attendue.`)
        return
      }

      const payload = {
        requirementId: requirement.id,
        pieceId: entry.pieceId,
      }

      const overrides = sanitizeDefinitionOverrides(entry.definition)
      if (overrides) {
        payload.overrides = overrides
      }

      Object.assign(payload, extractParentIdentifiers(requirement), extractParentIdentifiers(entry))

      pieceLinksPayload.push(payload)
    })
  }

  if (errors.length > 0) {
    return { valid: false, error: errors[0] }
  }

  return {
    valid: true,
    componentLinks: componentLinksPayload,
    pieceLinks: pieceLinksPayload,
  }
}

const machinePreview = computed(() => {
  const type = selectedMachineType.value
  if (!type) {
    return null
  }

  const trimmedName = (newMachine.name || '').trim()
  const currentSite = newMachine.siteId
    ? sites.value.find(site => site.id === newMachine.siteId) || null
    : null
  const trimmedReference = (newMachine.reference || '').trim()

  const baseFields = [
    {
      key: 'name',
      label: 'Nom',
      display: trimmedName || 'À renseigner',
      status: trimmedName ? 'complete' : 'missing'
    },
    {
      key: 'site',
      label: 'Site',
      display: currentSite?.name || 'Sélectionner un site',
      status: currentSite ? 'complete' : 'missing'
    },
    {
      key: 'type',
      label: 'Type sélectionné',
      display: type.name,
      status: 'complete'
    },
    {
      key: 'reference',
      label: 'Référence',
      display: trimmedReference || 'Non renseignée',
      status: trimmedReference ? 'complete' : 'optional'
    }
  ]

  const baseIssues = []
  if (!trimmedName) {
    baseIssues.push({ message: 'Renseigner un nom de machine.', kind: 'error', anchor: 'machine-field-name' })
  }
  if (!currentSite) {
    baseIssues.push({ message: "Sélectionner un site d'affectation.", kind: 'error', anchor: 'machine-field-site' })
  }

  const baseStatus = baseIssues.some(issue => issue.kind === 'error') ? 'error' : 'ready'

  const componentGroups = (type.componentRequirements || []).map((requirement) => {
    const entries = getComponentRequirementEntries(requirement.id)
    const normalizedEntries = entries.map((entry, index) => {
      const selectedComponent = entry.composantId
        ? findComponentById(entry.composantId)
        : null
      const displayName = selectedComponent?.name
        || requirement.typeComposant?.name
        || 'Composant'

      const subtitleParts = []
      if (selectedComponent?.reference) {
        subtitleParts.push(`Réf. ${selectedComponent.reference}`)
      }
      const constructeurName = selectedComponent?.constructeur?.name || selectedComponent?.constructeurName
      if (constructeurName) {
        subtitleParts.push(constructeurName)
      }
      const machineAssignments = selectedComponent ? getComponentMachineAssignments(selectedComponent) : []
      const assignmentLabel = formatAssignmentList(machineAssignments)
      if (assignmentLabel) {
        subtitleParts.push(`Liée à ${assignmentLabel}`)
      }
      const status = entry.composantId ? 'complete' : 'pending'

      return {
        key: `${requirement.id}-${index}`,
        status,
        title: displayName,
        subtitle: subtitleParts.join(' • ') || null,
        assignmentLabel,
        assignments: machineAssignments,
      }
    })

    const min = requirement.minCount ?? (requirement.required ? 1 : 0)
    const max = requirement.maxCount ?? null
    const completed = normalizedEntries.filter(entry => entry.status === 'complete').length
    const issues = []

    if (entries.length < min) {
      issues.push({ message: `Minimum ${min} sélection(s) requise(s)`, kind: 'error', anchor: `component-group-${requirement.id}` })
    }

    if (max !== null && entries.length > max) {
      issues.push({ message: `Maximum ${max} dépassé`, kind: 'error', anchor: `component-group-${requirement.id}` })
    }

    if (normalizedEntries.some(entry => entry.status !== 'complete')) {
      issues.push({ message: 'Sélectionner un composant pour chaque entrée.', kind: 'error', anchor: `component-group-${requirement.id}` })
    }

    const hasErrors = issues.some(issue => issue.kind === 'error')
    const hasWarnings = completed < entries.length

    const status = hasErrors
      ? 'error'
      : hasWarnings
        ? 'warning'
        : 'ready'

    return {
      id: requirement.id,
      label: requirement.label || requirement.typeComposant?.name || 'Famille de composants',
      typeName: requirement.typeComposant?.name || 'Non défini',
      min,
      max,
      entries: normalizedEntries,
      issues,
      completed,
      total: entries.length,
      status
    }
  })

  const pieceGroups = (type.pieceRequirements || []).map((requirement) => {
    const entries = getPieceRequirementEntries(requirement.id)
    const normalizedEntries = entries.map((entry, index) => {
      const selectedPiece = entry.pieceId ? findPieceById(entry.pieceId) : null
      const displayName = selectedPiece?.name || requirement.typePiece?.name || 'Pièce'

      const subtitleParts = []
      if (selectedPiece?.reference) {
        subtitleParts.push(`Réf. ${selectedPiece.reference}`)
      }
      const constructeurName = selectedPiece?.constructeur?.name || selectedPiece?.constructeurName
      if (constructeurName) {
        subtitleParts.push(constructeurName)
      }
      const machineAssignments = selectedPiece ? getPieceMachineAssignments(selectedPiece) : []
      const machineAssignmentLabel = formatAssignmentList(machineAssignments)
      if (machineAssignmentLabel) {
        subtitleParts.push(`Machines: ${machineAssignmentLabel}`)
      }
      const componentAssignments = selectedPiece ? getPieceComponentAssignments(selectedPiece) : []
      const componentAssignmentLabel = formatAssignmentList(componentAssignments)
      if (componentAssignmentLabel) {
        subtitleParts.push(`Composants: ${componentAssignmentLabel}`)
      }
      const status = entry.pieceId ? 'complete' : 'pending'

      return {
        key: `${requirement.id}-${index}`,
        status,
        title: displayName,
        subtitle: subtitleParts.join(' • ') || null,
        machineAssignmentLabel,
        componentAssignmentLabel,
        machineAssignments,
        componentAssignments,
      }
    })

    const min = requirement.minCount ?? (requirement.required ? 1 : 0)
    const max = requirement.maxCount ?? null
    const completed = normalizedEntries.filter(entry => entry.status === 'complete').length
    const issues = []

    if (entries.length < min) {
      issues.push({ message: `Minimum ${min} sélection(s) requise(s)`, kind: 'error', anchor: `piece-group-${requirement.id}` })
    }

    if (max !== null && entries.length > max) {
      issues.push({ message: `Maximum ${max} dépassé`, kind: 'error', anchor: `piece-group-${requirement.id}` })
    }

    if (normalizedEntries.some(entry => entry.status !== 'complete')) {
      issues.push({ message: 'Sélectionner une pièce pour chaque entrée.', kind: 'error', anchor: `piece-group-${requirement.id}` })
    }

    const hasErrors = issues.some(issue => issue.kind === 'error')
    const hasWarnings = completed < entries.length

    const status = hasErrors
      ? 'error'
      : hasWarnings
        ? 'warning'
        : 'ready'

    return {
      id: requirement.id,
      label: requirement.label || requirement.typePiece?.name || 'Groupe de pièces',
      typeName: requirement.typePiece?.name || 'Non défini',
      min,
      max,
      entries: normalizedEntries,
      issues,
      completed,
      total: entries.length,
      status
    }
  })

  const aggregatedIssues = [
    ...baseIssues.map(issue => ({ ...issue, scope: 'Informations générales' })),
    ...componentGroups.flatMap(group => group.issues.map(issue => ({ ...issue, scope: group.label }))),
    ...pieceGroups.flatMap(group => group.issues.map(issue => ({ ...issue, scope: group.label })))
  ]

  const statuses = [
    baseStatus,
    ...componentGroups.map(group => group.status),
    ...pieceGroups.map(group => group.status)
  ]

  const overallStatus = statuses.includes('error')
    ? 'error'
    : statuses.includes('warning')
      ? 'warning'
      : 'ready'

  return {
    base: {
      fields: baseFields,
      issues: baseIssues,
      status: baseStatus
    },
    componentGroups,
    pieceGroups,
    type: {
      name: type.name,
      category: type.category || null,
      hasStructuredDefinition:
        (type.componentRequirements?.length || 0) > 0 || (type.pieceRequirements?.length || 0) > 0
    },
    status: overallStatus,
    ready: overallStatus === 'ready',
    issues: aggregatedIssues
  }
})

const blockingPreviewIssues = computed(() => {
  if (!machinePreview.value) {
    return []
  }
  return machinePreview.value.issues.filter(issue => issue.kind === 'error')
})

const canCreateMachine = computed(() => {
  if (!machinePreview.value) {
    return false
  }
  return blockingPreviewIssues.value.length === 0
})

const highlightClasses = ['ring', 'ring-primary', 'ring-offset-2']

const scrollToAnchor = (anchor) => {
  if (!anchor || typeof window === 'undefined' || typeof document === 'undefined') {
    return
  }
  const target = document.getElementById(anchor)
  if (!target) {
    return
  }
  target.scrollIntoView({ behavior: 'smooth', block: 'center' })
  highlightClasses.forEach(cls => target.classList.add(cls))
  window.setTimeout(() => {
    highlightClasses.forEach(cls => target.classList.remove(cls))
  }, 1500)
}

const handleIssueClick = (issue) => {
  if (!issue?.anchor) {
    return
  }
  scrollToAnchor(issue.anchor)
}

const initializeRequirementSelections = (type) => {
  const componentRequirements = type.componentRequirements || []
  const pieceRequirements = type.pieceRequirements || []

  componentRequirements.forEach((requirement) => {
    const min = requirement.minCount ?? (requirement.required ? 1 : 0)
    const initialCount = Math.max(min, requirement.required ? 1 : 0)
    if (initialCount > 0) {
      componentRequirementSelections[requirement.id] = Array.from({ length: initialCount }, () => createComponentSelectionEntry(requirement))
    } else {
      componentRequirementSelections[requirement.id] = []
    }
  })

  pieceRequirements.forEach((requirement) => {
    const min = requirement.minCount ?? (requirement.required ? 1 : 0)
    const initialCount = Math.max(min, requirement.required ? 1 : 0)
    if (initialCount > 0) {
      pieceRequirementSelections[requirement.id] = Array.from({ length: initialCount }, () => createPieceSelectionEntry(requirement))
    } else {
      pieceRequirementSelections[requirement.id] = []
    }
  })
}

const finalizeMachineCreation = async () => {
  if (submitting.value) {
    return
  }
  const type = selectedMachineType.value
  if (!type) {
    toast.showError('Merci de sélectionner un type de machine')
    return
  }
  if (!canCreateMachine.value) {
    toast.showError('Compléter les informations obligatoires avant de créer la machine')
    return
  }

  submitting.value = true
  try {
    const baseMachineData = {
      name: newMachine.name,
      siteId: newMachine.siteId,
      reference: newMachine.reference,
      typeMachineId: type.id
    }

    const hasRequirements = (type.componentRequirements?.length || 0) > 0 || (type.pieceRequirements?.length || 0) > 0

    let componentLinks = []
    let pieceLinks = []

    if (hasRequirements) {
      const validationResult = validateRequirementSelections(type)
      if (!validationResult.valid) {
        toast.showError(validationResult.error)
        return
      }
      componentLinks = validationResult.componentLinks
      pieceLinks = validationResult.pieceLinks
    }

    const payload = {
      ...baseMachineData,
      ...(hasRequirements
        ? {
            componentLinks,
            pieceLinks
          }
        : {})
    }

    const result = hasRequirements
      ? await createMachine(payload)
      : await createMachineFromType(baseMachineData, type)

    if (result.success) {
      newMachine.name = ''
      newMachine.siteId = ''
      newMachine.typeMachineId = ''
      newMachine.reference = ''
      clearRequirementSelections()
      await navigateTo('/machines')
    } else if (result.error) {
      toast.showError(`Impossible de créer la machine: ${result.error}`)
    }
  } catch (error) {
    toast.showError(`Erreur lors de la création: ${error.message}`)
  } finally {
    submitting.value = false
  }
}

watch(
  () => newMachine.typeMachineId,
  (typeId) => {
    clearRequirementSelections()
    if (!typeId) {
      return
    }

    const type = machineTypes.value.find(item => item.id === typeId)
    if (!type) {
      return
    }

    initializeRequirementSelections(type)
  }
)

onMounted(async () => {
  await Promise.all([
    loadSites(),
    loadMachineTypes(),
    loadComposants(),
    loadPieces()
  ])
})
</script>
