<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>
                <SearchSelect
                  v-model="newMachine.typeMachineId"
                  :options="machineTypes"
                  :loading="machineTypesLoading"
                  placeholder="Rechercher un type…"
                  empty-text="Aucun type trouvé"
                  :option-label="machineTypeLabel"
                  :option-description="machineTypeDescription"
                />
              </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">Produits requis :</span>
                  <span class="badge badge-sm">{{ selectedMachineType.productRequirements?.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 && (selectedMachineType.productRequirements?.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>
                        <SearchSelect
                          :model-value="entry.composantId || ''"
                          :options="getComponentOptions(requirement, entry)"
                          :loading="composantsLoading"
                          size="sm"
                          placeholder="Rechercher un composant…"
                          empty-text="Aucun composant disponible"
                          :option-label="componentOptionLabel"
                          :option-description="componentOptionDescription"
                          @update:modelValue="setComponentRequirementComponent(requirement, entryIndex, $event || '')"
                        />
                      </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>
                        Fournisseur :
                        {{ 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>
                        <SearchSelect
                          :model-value="entry.pieceId || ''"
                          :options="getPieceOptions(requirement, entry, entryIndex)"
                          :loading="piecesLoading || pieceLoadingByKey[getPieceKey(requirement, entryIndex)]"
                          size="sm"
                          placeholder="Rechercher une pièce…"
                          empty-text="Aucune pièce disponible"
                          :option-label="pieceOptionLabel"
                          :option-description="pieceOptionDescription"
                          @search="(term) => fetchPieceOptions(requirement, entryIndex, term)"
                          @update:modelValue="setPieceRequirementPiece(requirement, entryIndex, $event || '')"
                        />
                      </div>
                      <p
                        v-if="getPieceOptions(requirement, entry, entryIndex).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>
                        Fournisseur :
                        {{ findPieceById(entry.pieceId)?.constructeur?.name || findPieceById(entry.pieceId)?.constructeurName || "—" }}
                      </div>

                    </div>
                  </div>
            </div>
          </div>
        </div>
        <div v-if="selectedMachineType?.productRequirements?.length" class="space-y-4">
          <h4 class="text-sm font-semibold">
            Produits catalogue requis
          </h4>

          <div
            v-for="requirement in selectedMachineType.productRequirements"
            :id="`product-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 class="space-y-1">
                <h5 class="font-medium text-sm">
                  {{ requirement.label || requirement.typeProduct?.name || 'Groupe de produits' }}
                </h5>
                <p class="text-xs text-gray-500">
                  Catégorie : {{ requirement.typeProduct?.name || 'Non définie' }} · Min : {{ requirement.minCount ?? (requirement.required ? 1 : 0) }}
                  · Max : {{ requirement.maxCount ?? '∞' }}
                </p>
                <p
                  v-if="(requirement.allowNewModels ?? true) === false"
                  class="text-xs text-error"
                >
                  Sélection de produits existants uniquement.
                </p>
              </div>

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

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

            <div
              v-for="(entry, entryIndex) in getProductRequirementEntries(requirement.id)"
              :key="`${requirement.id}-product-${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>
                  Catégorie appliquée :
                  {{ requirement.typeProduct?.name || 'Non définie' }}
                </span>
                <button
                  type="button"
                  class="btn btn-square btn-xs btn-error"
                  @click="removeProductSelectionEntry(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">Produit existant</span>
                    </label>
                    <ProductSelect
                      :model-value="entry.productId || ''"
                      :type-product-id="requirement.typeProductId || requirement.typeProduct?.id || null"
                      :placeholder="productsLoading ? 'Chargement…' : 'Sélectionner un produit…'"
                      empty-text="Aucun produit disponible pour cette catégorie"
                      :disabled="productsLoading"
                      @update:modelValue="setProductRequirementProduct(requirement, entryIndex, $event || '')"
                    />
                  </div>
                  <p
                    v-if="!productsLoading && getProductOptions(requirement).length === 0"
                    class="text-xs text-error"
                  >
                    Aucun produit existant pour cette catégorie. Créez-en un depuis le catalogue.
                  </p>
                </div>

                <div
                  v-if="entry.productId"
                  class="bg-base-300/60 rounded-md p-3 text-xs text-gray-600 space-y-1"
                >
                  <div class="font-medium">
                    {{ findProductById(entry.productId)?.name || 'Produit' }}
                  </div>
                  <div>
                    Référence : {{ findProductById(entry.productId)?.reference || "—" }}
                  </div>
                  <div>
                    Prix indicatif :
                    <span
                      v-if="findProductById(entry.productId)?.supplierPrice !== undefined && findProductById(entry.productId)?.supplierPrice !== null"
                    >
                      {{ Number(findProductById(entry.productId)?.supplierPrice).toFixed(2) }} €
                    </span>
                    <span v-else>
                      —
                    </span>
                  </div>
                  <div>
                    Fournisseurs :
                    <span v-if="findProductById(entry.productId)?.constructeurs?.length">
                      {{ findProductById(entry.productId)?.constructeurs.map(constructeur => constructeur?.name).filter(Boolean).join(', ') }}
                    </span>
                    <span v-else>
                      —
                    </span>
                  </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.productGroups.length" class="space-y-3">
                    <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                      Produits requis
                    </h5>
                    <div
                      v-for="group in machinePreview.productGroups"
                      :key="group.id"
                      :id="`product-group-${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">
                            Catégorie : {{ group.typeName }} · Min {{ group.min }} ·
                            {{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
                          </p>
                        </div>
                        <div class="flex flex-wrap items-center gap-2">
                          <span class="badge badge-sm" :class="getStatusBadgeClass(group.status)">
                            Couverture : {{ group.count }}
                          </span>
                          <span class="badge badge-ghost badge-sm">
                            Direct {{ group.completed }} / {{ group.total || 0 }}
                          </span>
                        </div>
                      </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 v-if="group.entries?.length" 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>

                      <p v-else class="text-xs text-gray-500">
                        Couverture assurée via composants ou pièces liés.
                      </p>
                    </div>
                  </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 { useProducts } from '~/composables/useProducts'
import { useApi } from '~/composables/useApi'
import { useToast } from '~/composables/useToast'
import { useMachineCreateSelections } from '~/composables/useMachineCreateSelections'
import {
  useMachineCreatePreview,
  validateRequirementSelections as _validateRequirementSelections,
  getStatusBadgeClass,
  handleIssueClick,
  resolveComponentRequirementTypeLabel as _resolveComponentRequirementTypeLabel,
  resolvePieceRequirementTypeLabel as _resolvePieceRequirementTypeLabel,
} from '~/composables/useMachineCreatePreview'
import {
  getComponentMachineAssignments,
  getPieceMachineAssignments,
  getPieceComponentAssignments,
  formatAssignmentList,
} from '~/shared/utils/assignmentUtils'
import SearchSelect from '~/components/common/SearchSelect.vue'
import ProductSelect from '~/components/ProductSelect.vue'
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'

// ---------------------------------------------------------------------------
// Composable calls
// ---------------------------------------------------------------------------

const { createMachine, createMachineFromType, reconfigureSkeleton } = useMachines()
const { sites, loadSites } = useSites()
const { machineTypes, loadMachineTypes, loading: machineTypesLoading } = useMachineTypesApi()
const { composants, loadComposants, loading: composantsLoading } = useComposants()
const { pieces, loadPieces, loading: piecesLoading } = usePieces()
const { products, loadProducts, loading: productsLoading } = useProducts()
const { get } = useApi()
const toast = useToast()

// ---------------------------------------------------------------------------
// Local state
// ---------------------------------------------------------------------------

const submitting = ref(false)

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

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

// ---------------------------------------------------------------------------
// Entity lookup maps
// ---------------------------------------------------------------------------

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 productInventory = computed(() => products.value || [])

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

// ---------------------------------------------------------------------------
// Entity finders
// ---------------------------------------------------------------------------

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) || findPieceInCachedOptions(id) || null
}

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

// ---------------------------------------------------------------------------
// Selection state (from composable)
// ---------------------------------------------------------------------------

const {
  pieceOptionsByKey,
  pieceLoadingByKey,
  selectedPieceIds,
  getPieceKey,
  findPieceInCachedOptions,
  fetchPieceOptions,
  getComponentRequirementEntries,
  getPieceRequirementEntries,
  getProductRequirementEntries,
  addComponentSelectionEntry,
  removeComponentSelectionEntry,
  addPieceSelectionEntry,
  removePieceSelectionEntry,
  addProductSelectionEntry,
  removeProductSelectionEntry,
  setComponentRequirementComponent,
  setPieceRequirementPiece,
  setProductRequirementProduct: _setProductRequirementProduct,
  clearRequirementSelections,
  initializeRequirementSelections,
} = useMachineCreateSelections({
  findComponentById,
  findPieceById,
  pieces,
  get,
  toast,
})

// ---------------------------------------------------------------------------
// Preview / validation (from composable)
// ---------------------------------------------------------------------------

const { machinePreview, blockingPreviewIssues, canCreateMachine } = useMachineCreatePreview({
  newMachine,
  sites,
  selectedMachineType,
  findComponentById,
  findPieceById,
  findProductById,
  getComponentRequirementEntries,
  getPieceRequirementEntries,
  getProductRequirementEntries,
})

// ---------------------------------------------------------------------------
// Template wrappers (bridge 2-arg template calls to 3-arg extracted functions)
// ---------------------------------------------------------------------------

const resolveComponentRequirementTypeLabel = (requirement, entry) =>
  _resolveComponentRequirementTypeLabel(requirement, entry, findComponentById)

const resolvePieceRequirementTypeLabel = (requirement, entry) =>
  _resolvePieceRequirementTypeLabel(requirement, entry, findPieceById)

const setProductRequirementProduct = (requirement, index, productId) =>
  _setProductRequirementProduct(requirement, index, productId, findProductById)

const validateRequirementSelections = (type) =>
  _validateRequirementSelections(type, {
    newMachine,
    sites,
    selectedMachineType,
    findComponentById,
    findPieceById,
    findProductById,
    getComponentRequirementEntries,
    getPieceRequirementEntries,
    getProductRequirementEntries,
  })

// ---------------------------------------------------------------------------
// Machine type helpers
// ---------------------------------------------------------------------------

const machineTypeLabel = (type) => {
  if (!type) {
    return ''
  }
  return type.name || 'Type de machine'
}

const machineTypeDescription = (type) => {
  if (!type) {
    return ''
  }
  const parts = []
  if (type.category) {
    parts.push(`Catégorie : ${type.category}`)
  }
  const componentCount = type.componentRequirements?.length ?? 0
  const pieceCount = type.pieceRequirements?.length ?? 0
  const productCount = type.productRequirements?.length ?? 0
  parts.push(
    `${componentCount} composant(s)`,
    `${pieceCount} pièce(s)`,
    `${productCount} produit(s)`
  )
  return parts.join(' • ')
}

// ---------------------------------------------------------------------------
// Option filters
// ---------------------------------------------------------------------------

const getComponentOptions = (requirement, currentEntry) => {
  const requirementTypeId = requirement?.typeComposantId || requirement?.typeComposant?.id || null

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

const getPieceOptions = (requirement, currentEntry, entryIndex) => {
  const key = getPieceKey(requirement, entryIndex)
  const cached = pieceOptionsByKey.value[key]
  if (cached) {
    return cached
  }
  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 getProductOptions = (requirement) => {
  const requirementTypeId = requirement?.typeProductId || requirement?.typeProduct?.id || null
  return productInventory.value.filter((product) => {
    if (!product?.id) {
      return false
    }
    if (!requirementTypeId) {
      return true
    }
    const productTypeId =
      product.typeProductId ||
      product.typeProduct?.id ||
      null
    return productTypeId === requirementTypeId
  })
}

// ---------------------------------------------------------------------------
// Option label / description helpers
// ---------------------------------------------------------------------------

const componentOptionLabel = (component) => component?.name || 'Composant'

const componentOptionDescription = (component) => {
  if (!component) {
    return ''
  }
  const parts = []
  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)}`)
  }
  const productTypeName = component.product?.typeProduct?.name
  const productLabel = component.product?.name || component.product?.reference
  if (productTypeName || productLabel) {
    parts.push(`Produit: ${productTypeName || productLabel}`)
  }
  return parts.join(' • ')
}

const pieceOptionLabel = (piece) => piece?.name || 'Pièce'

const pieceOptionDescription = (piece) => {
  if (!piece) {
    return ''
  }
  const parts = []
  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)}`)
  }
  const productTypeName = piece.product?.typeProduct?.name
  const productLabel = piece.product?.name || piece.product?.reference
  if (productTypeName || productLabel) {
    parts.push(`Produit: ${productTypeName || productLabel}`)
  }
  return parts.join(' • ')
}

const productOptionLabel = (product) => product?.name || product?.reference || 'Produit'

const productOptionDescription = (product) => {
  if (!product) {
    return ''
  }
  const parts = []
  if (product.reference) {
    parts.push(`Réf. ${product.reference}`)
  }
  if (product.constructeurs?.length) {
    const label = product.constructeurs
      .map((constructeur) => constructeur?.name)
      .filter(Boolean)
      .join(', ')
    if (label) {
      parts.push(`Fournisseurs: ${label}`)
    }
  }
  if (product.supplierPrice !== undefined && product.supplierPrice !== null) {
    const price = Number(product.supplierPrice)
    if (!Number.isNaN(price)) {
      parts.push(`${price.toFixed(2)} €`)
    }
  }
  return parts.join(' • ')
}

// ---------------------------------------------------------------------------
// Machine creation
// ---------------------------------------------------------------------------

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 ||
      (type.productRequirements?.length || 0) > 0

    let componentLinks = []
    let pieceLinks = []
    let productLinks = []

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

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

    if (result.success) {
      if (hasRequirements && result.data?.id) {
        const skeletonResult = await reconfigureSkeleton(result.data.id, {
          componentLinks,
          pieceLinks,
          productLinks,
        })
        if (!skeletonResult.success) {
          toast.showError(skeletonResult.error || 'Impossible d\'enregistrer les pièces/composants')
          return
        }
      }
      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
  }
}

// ---------------------------------------------------------------------------
// Watchers & lifecycle
// ---------------------------------------------------------------------------

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(),
    loadProducts()
  ])
})
</script>
