<template>
  <main class="mx-auto flex w-full max-w-5xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
    <header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
      <div class="space-y-1">
        <h1 class="text-3xl font-semibold text-base-content">Nouvel composant</h1>
        <p class="text-sm text-base-content/70">
          Sélectionnez la catégorie cible puis complétez les informations du composant.
        </p>
      </div>
      <NuxtLink to="/component-catalog" class="btn btn-ghost btn-sm md:btn-md self-start">
        Retour au catalogue
      </NuxtLink>
    </header>

    <section class="card border border-base-200 bg-base-100 shadow-sm">
      <div class="card-body space-y-6">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="form-control">
            <label class="label">
              <span class="label-text">Catégorie de composant</span>
            </label>
            <SearchSelect
              v-model="selectedTypeId"
              :options="componentTypeList"
              :loading="loadingTypes"
              size="sm"
              placeholder="Rechercher une catégorie..."
              empty-text="Aucune catégorie disponible"
              :option-label="typeOptionLabel"
              :option-description="typeOptionDescription"
              :disabled="loadingTypes || submitting"
            />
            <p v-if="loadingTypes" class="text-xs text-gray-500 mt-1">
              Chargement des catégories…
            </p>
          </div>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="form-control">
            <label class="label">
              <span class="label-text">Nom du composant</span>
            </label>
            <input
              v-model="creationForm.name"
              type="text"
              class="input input-bordered input-sm md:input-md"
              :disabled="submitting || !selectedType"
              placeholder="Nom affiché dans le catalogue"
              required
            >
          </div>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="form-control">
            <label class="label">
              <span class="label-text">Référence</span>
            </label>
            <input
              v-model="creationForm.reference"
              type="text"
              class="input input-bordered input-sm md:input-md"
              :disabled="submitting || !selectedType"
              placeholder="Référence interne ou fournisseur"
            >
          </div>

          <div class="form-control">
            <label class="label">
              <span class="label-text">Fournisseur</span>
            </label>
            <ConstructeurSelect
              v-model="creationForm.constructeurIds"
              class="w-full"
              :disabled="submitting || !selectedType"
              placeholder="Rechercher un ou plusieurs fournisseurs..."
            />
          </div>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="form-control">
            <label class="label">
              <span class="label-text">Prix indicatif (€)</span>
            </label>
            <input
              v-model="creationForm.prix"
              type="number"
              step="0.01"
              min="0"
              class="input input-bordered input-sm md:input-md"
              :disabled="submitting || !selectedType"
              placeholder="Valeur indicatrice"
            >
          </div>
        </div>

        <div v-if="selectedType" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
          <div class="flex items-center justify-between gap-4">
            <div>
              <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
              <p class="text-xs text-base-content/70">
                {{ selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.' }}
              </p>
            </div>
            <span class="badge badge-outline">{{ formatStructurePreview(selectedTypeStructure) }}</span>
          </div>

          <details v-if="selectedTypeStructure" class="collapse collapse-arrow bg-base-100">
            <summary class="collapse-title text-sm font-medium">
              Consulter le détail du squelette
            </summary>
            <div class="collapse-content space-y-4 text-sm text-base-content/80">
              <div v-if="getStructureCustomFields(selectedTypeStructure).length" class="space-y-2">
                <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
                <ul class="space-y-2">
                  <li
                    v-for="field in getStructureCustomFields(selectedTypeStructure)"
                    :key="field.customFieldId || field.id || field.name"
                    class="rounded bg-base-200/60 px-3 py-2"
                  >
                    <p class="font-medium text-sm text-base-content">
                      {{ field.name || field.key }}
                    </p>
                    <p class="text-xs text-base-content/70 mt-1">
                      Type : {{ field.type || 'text' }}<span v-if="field.required"> • Obligatoire</span>
                      <span v-if="Array.isArray(field.options) && field.options.length">
                        • Options : {{ field.options.join(', ') }}
                      </span>
                      <span v-if="field.defaultValue">
                        • Défaut : {{ field.defaultValue }}
                      </span>
                    </p>
                  </li>
                </ul>
              </div>

              <div v-if="getStructurePieces(selectedTypeStructure).length" class="space-y-2">
                <h3 class="font-semibold text-sm text-base-content">Pièces imposées</h3>
                <ul class="list-disc list-inside space-y-1">
                  <li
                    v-for="(piece, index) in getStructurePieces(selectedTypeStructure)"
                    :key="piece.role || piece.typePieceId || piece.familyCode || index"
                  >
                    {{ resolvePieceLabel(piece) }}
                  </li>
                </ul>
              </div>

              <div v-if="getStructureProducts(selectedTypeStructure).length" class="space-y-2">
                <h3 class="font-semibold text-sm text-base-content">Produits imposés</h3>
                <ul class="list-disc list-inside space-y-1">
                  <li
                    v-for="(product, index) in getStructureProducts(selectedTypeStructure)"
                    :key="product.role || product.typeProductId || product.familyCode || index"
                  >
                    {{ resolveProductLabel(product) }}
                  </li>
                </ul>
              </div>

              <div v-if="getStructureSubcomponents(selectedTypeStructure).length" class="space-y-2">
                <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
                <ul class="list-disc list-inside space-y-1">
                  <li
                    v-for="(subcomponent, index) in getStructureSubcomponents(selectedTypeStructure)"
                    :key="subcomponent.alias || subcomponent.typeComposantId || subcomponent.familyCode || index"
                  >
                    {{ resolveSubcomponentLabel(subcomponent) }}
                  </li>
                </ul>
              </div>
            </div>
          </details>
        </div>

        <div
          v-if="structureHasRequirements"
          class="space-y-4 rounded-lg border border-primary/30 bg-primary/5 p-4"
        >
          <div class="flex items-start justify-between gap-4">
            <div>
              <h2 class="font-semibold text-base-content">
                Sélection des éléments du squelette
              </h2>
              <p class="text-xs text-base-content/70">
                Affectez les pièces et sous-composants concrets correspondant à la catégorie choisie.
              </p>
            </div>
            <span
              class="badge"
              :class="structureSelectionsComplete ? 'badge-success' : structureDataLoading ? 'badge-info' : 'badge-warning'"
            >
              {{ structureSelectionsComplete ? 'Complet' : structureDataLoading ? 'Chargement…' : 'Incomplet' }}
            </span>
          </div>

          <div
            v-if="structureDataLoading"
            class="flex items-center gap-3 rounded-md border border-base-200 bg-base-100 p-3 text-sm text-base-content/70"
          >
            <span class="loading loading-spinner loading-sm" aria-hidden="true"></span>
            Chargement du catalogue de pièces, produits et composants…
          </div>
          <ComponentStructureAssignmentNode
            v-else-if="structureAssignments"
            :assignment="structureAssignments"
            :pieces="availablePieces"
            :products="availableProducts"
            :components="availableComponents"
            :pieces-loading="piecesLoading"
            :products-loading="productsLoading"
            :components-loading="componentsLoading"
          />
          <p v-else class="text-xs text-error">
            Impossible de générer les emplacements définis par le squelette.
          </p>
        </div>

        <div v-if="customFieldInputs.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
          <header class="space-y-1">
            <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
            <p class="text-xs text-base-content/70">
              Renseignez les valeurs propres à ce composant selon le squelette choisi.
            </p>
          </header>
          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div
              v-for="(field, index) in customFieldInputs"
              :key="fieldKey(field, index)"
              class="form-control"
            >
              <label class="label">
                <span class="label-text">{{ field.name }}</span>
                <span v-if="field.required" class="label-text-alt text-error">*</span>
              </label>
              <input
                v-if="field.type === 'text'"
                v-model="field.value"
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
                :disabled="submitting"
              >
              <input
                v-else-if="field.type === 'number'"
                v-model="field.value"
                type="number"
                step="0.01"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
                :disabled="submitting"
              >
              <select
                v-else-if="field.type === 'select'"
                v-model="field.value"
                class="select select-bordered select-sm md:select-md"
                :required="field.required"
                :disabled="submitting"
              >
                <option value="">Sélectionner...</option>
                <option
                  v-for="option in field.options"
                  :key="option"
                  :value="option"
                >
                  {{ option }}
                </option>
              </select>
              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
                <input
                  v-model="field.value"
                  type="checkbox"
                  class="checkbox checkbox-sm"
                  true-value="true"
                  false-value="false"
                  :disabled="submitting"
                >
                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
              </div>
              <input
                v-else-if="field.type === 'date'"
                v-model="field.value"
                type="date"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
                :disabled="submitting"
              >
              <input
                v-else
                v-model="field.value"
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
                :disabled="submitting"
              >
            </div>
          </div>
        </div>

        <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
          <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
            <div>
              <h2 class="font-semibold text-base-content">Documents</h2>
              <p class="text-xs text-base-content/70">
                Ajoutez des documents (PDF, images, textes…) liés à ce composant.
              </p>
            </div>
            <span v-if="selectedDocuments.length" class="badge badge-outline">
              {{ selectedDocuments.length }} document{{ selectedDocuments.length > 1 ? 's' : '' }} prêt{{ selectedDocuments.length > 1 ? 's' : '' }} à être ajouté{{ selectedDocuments.length > 1 ? 's' : '' }}
            </span>
          </header>
          <div :class="{ 'pointer-events-none opacity-60': submitting }">
            <DocumentUpload
              v-model="selectedDocuments"
              title="Déposer vos fichiers"
              subtitle="Formats acceptés : PDF, images, documents…"
            />
          </div>
          <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
            Téléversement des documents en cours…
          </p>
        </div>

        <div class="flex flex-col gap-3 md:flex-row md:justify-end">
          <NuxtLink to="/component-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': submitting }">
            Annuler
          </NuxtLink>
          <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitCreation">
            <span v-if="submitting" class="loading loading-spinner loading-sm mr-2"></span>
            Créer le composant
          </button>
        </div>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from '#imports'
import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
import DocumentUpload from '~/components/DocumentUpload.vue'
import ComponentStructureAssignmentNode, {
  type StructureAssignmentNode,
} from '~/components/ComponentStructureAssignmentNode.vue'
import SearchSelect from '~/components/common/SearchSelect.vue'
import { useComponentTypes } from '~/composables/useComponentTypes'
import { useComposants } from '~/composables/useComposants'
import { usePieces } from '~/composables/usePieces'
import { useProducts } from '~/composables/useProducts'
import { useToast } from '~/composables/useToast'
import { useCustomFields } from '~/composables/useCustomFields'
import { useDocuments } from '~/composables/useDocuments'
import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
import type {
  ComponentModelPiece,
  ComponentModelProduct,
  ComponentModelStructure,
  ComponentModelStructureNode,
} from '~/shared/types/inventory'
import type { ModelType } from '~/services/modelTypes'

interface ComponentCatalogType extends ModelType {
  structure: ComponentModelStructure | null
  customFields?: Array<Record<string, any>>
}

const route = useRoute()
const router = useRouter()

const { componentTypes, loadComponentTypes, loadingComponentTypes } = useComponentTypes()
const {
  createComposant,
  composants: componentCatalogRef,
  loadComposants,
  loading: componentsLoading,
} = useComposants()
const {
  pieces: pieceCatalogRef,
  loadPieces,
  loading: piecesLoading,
} = usePieces()
const {
  products: productCatalogRef,
  loadProducts,
  loading: productsLoading,
} = useProducts()
const toast = useToast()
const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
const { uploadDocuments } = useDocuments()

const initialTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
const selectedTypeId = ref<string>(initialTypeId.value)
const submitting = ref(false)
const creationForm = reactive({
  name: '' as string,
  reference: '' as string,
  constructeurIds: [] as string[],
  prix: '' as string,
})
const lastSuggestedName = ref('')
const customFieldInputs = ref<CustomFieldInput[]>([])
const structureAssignments = ref<StructureAssignmentNode | null>(null)
const selectedDocuments = ref<File[]>([])
const uploadingDocuments = ref(false)

const availablePieces = computed(() => pieceCatalogRef.value ?? [])
const availableProducts = computed(() => productCatalogRef.value ?? [])
const availableComponents = computed(() => componentCatalogRef.value ?? [])
const structureDataLoading = computed(
  () => piecesLoading.value || componentsLoading.value || productsLoading.value,
)

watch(
  () => route.query.typeId,
  (value) => {
    if (typeof value === 'string') {
      selectedTypeId.value = value
    }
  },
)

watch(selectedTypeId, (id) => {
  const current = typeof route.query.typeId === 'string' ? route.query.typeId : ''
  if ((id || '') === current) {
    return
  }
  const nextQuery = { ...route.query }
  if (id) {
    nextQuery.typeId = id
  } else {
    delete nextQuery.typeId
  }
  router.replace({ path: route.path, query: nextQuery }).catch(() => {})
})

const loadingTypes = computed(() => loadingComponentTypes.value)
const componentTypeList = computed<ComponentCatalogType[]>(() =>
  (componentTypes.value || [])
    .filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
)

const typeOptionLabel = (type?: ComponentCatalogType) =>
  type?.name || 'Catégorie'

const typeOptionDescription = (type?: ComponentCatalogType) =>
  type?.description ? String(type.description) : ''

const selectedType = computed(() => {
  if (!selectedTypeId.value) {
    return null
  }
  return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
})

const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
  const structure = selectedType.value?.structure ?? null
  return structure ? normalizeStructureForEditor(structure) : null
})

watch(selectedType, (type) => {
  if (!type) {
    clearCreationForm()
    customFieldInputs.value = []
    structureAssignments.value = null
    return
  }
  if (!creationForm.name || creationForm.name === lastSuggestedName.value) {
    creationForm.name = type.name
  }
  lastSuggestedName.value = creationForm.name
  customFieldInputs.value = normalizeCustomFieldInputs(selectedTypeStructure.value)
  structureAssignments.value = initializeStructureAssignments(selectedTypeStructure.value)
})

const extractSubcomponents = (
  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
): ComponentModelStructureNode[] => {
  if (!definition || typeof definition !== 'object') {
    return []
  }
  const raw = Array.isArray((definition as any).subcomponents)
    ? (definition as any).subcomponents
    : Array.isArray((definition as any).subComponents)
      ? (definition as any).subComponents
      : []
  return raw.filter(
    (item: unknown): item is ComponentModelStructureNode =>
      !!item && typeof item === 'object',
  )
}

const extractPiecesFromNode = (
  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
): ComponentModelPiece[] => {
  if (!definition || typeof definition !== 'object') {
    return []
  }
  const raw = Array.isArray((definition as any).pieces)
    ? (definition as any).pieces
    : []
  return raw.filter(
    (item: unknown): item is ComponentModelPiece =>
      !!item && typeof item === 'object',
  )
}

const extractProductsFromNode = (
  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
): ComponentModelProduct[] => {
  if (!definition || typeof definition !== 'object') {
    return []
  }
  const raw = Array.isArray((definition as any).products)
    ? (definition as any).products
    : []
  return raw.filter(
    (item: unknown): item is ComponentModelProduct =>
      !!item && typeof item === 'object',
  )
}

const buildAssignmentNode = (
  definition: ComponentModelStructureNode | ComponentModelStructure,
  path: string,
): StructureAssignmentNode => {
  const pieces = extractPiecesFromNode(definition).map((piece, index) => ({
    path: `${path}:piece-${index}`,
    definition: piece,
    selectedPieceId: '',
  }))

  const products = extractProductsFromNode(definition).map((product, index) => ({
    path: `${path}:product-${index}`,
    definition: product,
    selectedProductId: '',
  }))

  const subcomponents = extractSubcomponents(definition).map(
    (child, index) => buildAssignmentNode(child, `${path}:sub-${index}`),
  )

  return {
    path,
    definition,
    selectedComponentId: '',
    pieces,
    products,
    subcomponents,
  }
}

const initializeStructureAssignments = (
  structure: ComponentModelStructure | null,
): StructureAssignmentNode | null => {
  if (!structure || typeof structure !== 'object') {
    return null
  }
  return buildAssignmentNode(structure, 'root')
}

const hasAssignments = (node: StructureAssignmentNode | null): boolean => {
  if (!node) {
    return false
  }
  if (node.pieces.length > 0 || node.products.length > 0 || node.subcomponents.length > 0) {
    return true
  }
  return node.subcomponents.some((child) => hasAssignments(child))
}

const structureHasRequirements = computed(() =>
  hasAssignments(structureAssignments.value),
)

const isAssignmentNodeComplete = (
  node: StructureAssignmentNode,
  isRootNode = false,
): boolean => {
  const piecesComplete = node.pieces.every(
    (piece) => !!piece.selectedPieceId && piece.selectedPieceId.length > 0,
  )
  const productsComplete = node.products.every(
    (product) => !!product.selectedProductId && product.selectedProductId.length > 0,
  )
  const subcomponentsComplete = node.subcomponents.every(
    (child) =>
      !!child.selectedComponentId &&
      child.selectedComponentId.length > 0 &&
      isAssignmentNodeComplete(child, false),
  )
  return (
    piecesComplete &&
    productsComplete &&
    subcomponentsComplete &&
    (isRootNode || !!node.selectedComponentId)
  )
}

const structureSelectionsComplete = computed(() => {
  if (!structureHasRequirements.value) {
    return true
  }
  if (structureDataLoading.value) {
    return false
  }
  if (!structureAssignments.value) {
    return false
  }
  return isAssignmentNodeComplete(structureAssignments.value, true)
})

const stripNullish = (input: Record<string, any>) =>
  Object.fromEntries(
    Object.entries(input).filter(
      ([, value]) => value !== null && value !== undefined && value !== '',
    ),
  )

const sanitizeStructureDefinition = (
  definition: ComponentModelStructureNode,
) =>
  stripNullish({
    alias: definition.alias ?? null,
    typeComposantId: definition.typeComposantId ?? null,
    typeComposantLabel: definition.typeComposantLabel ?? null,
    modelId: definition.modelId ?? null,
    familyCode: (definition as any).familyCode ?? null,
  })

const sanitizePieceDefinition = (definition: ComponentModelPiece) =>
  stripNullish({
    role: (definition as any).role ?? null,
    typePieceId: definition.typePieceId ?? null,
    typePieceLabel: definition.typePieceLabel ?? null,
    reference: definition.reference ?? null,
    familyCode: (definition as any).familyCode ?? null,
  })

const sanitizeProductDefinition = (definition: ComponentModelProduct) =>
  stripNullish({
    role: (definition as any).role ?? null,
    typeProductId: definition.typeProductId ?? null,
    typeProductLabel: (definition as any).typeProductLabel ?? null,
    reference: (definition as any).reference ?? null,
    familyCode: (definition as any).familyCode ?? null,
  })

const serializeStructureAssignments = (
  root: StructureAssignmentNode | null,
) => {
  if (!root) {
    return null
  }

  const serializeNode = (
    assignment: StructureAssignmentNode,
    isRootNode = false,
  ): Record<string, any> => {
    const serializedPieces = assignment.pieces
      .filter((piece) => !!piece.selectedPieceId)
      .map((piece) =>
        stripNullish({
          path: piece.path,
          definition: sanitizePieceDefinition(piece.definition),
          selectedPieceId: piece.selectedPieceId,
        }),
      )

    const serializedProducts = assignment.products
      .filter((product) => !!product.selectedProductId)
      .map((product) =>
        stripNullish({
          path: product.path,
          definition: sanitizeProductDefinition(product.definition),
          selectedProductId: product.selectedProductId,
        }),
      )

    const serializedSubcomponents = assignment.subcomponents
      .map((child) => serializeNode(child, false))
      .filter((child) => Object.keys(child).length > 0)

    const base: Record<string, any> = {
      path: assignment.path,
      definition: sanitizeStructureDefinition(assignment.definition),
    }

    if (!isRootNode) {
      base.selectedComponentId = assignment.selectedComponentId
    }
    if (serializedPieces.length) {
      base.pieces = serializedPieces
    }
    if (serializedProducts.length) {
      base.products = serializedProducts
    }
    if (serializedSubcomponents.length) {
      base.subcomponents = serializedSubcomponents
    }

    return stripNullish(base)
  }

  const serializedRoot = serializeNode(root, true)
  if (
    (!serializedRoot.pieces || serializedRoot.pieces.length === 0) &&
    (!serializedRoot.products || serializedRoot.products.length === 0) &&
    (!serializedRoot.subcomponents || serializedRoot.subcomponents.length === 0)
  ) {
    return null
  }
  return serializedRoot
}

const requiredCustomFieldsFilled = computed(() =>
  customFieldInputs.value.every((field) => {
    if (!field.required) {
      return true
    }
    if (field.type === 'boolean') {
      return field.value === 'true' || field.value === 'false'
    }
    return toFieldString(field.value).trim() !== ''
  }),
)

const canSubmit = computed(() => Boolean(
  selectedType.value &&
  creationForm.name &&
  requiredCustomFieldsFilled.value &&
  structureSelectionsComplete.value &&
  !submitting.value,
))

const toFieldString = (value: unknown): string => {
  if (value === null || value === undefined) {
    return ''
  }
  if (typeof value === 'string') {
    return value
  }
  if (typeof value === 'number' || typeof value === 'boolean') {
    return String(value)
  }
  return ''
}

const getStructureCustomFields = (structure: ComponentModelStructure | null) => {
  return Array.isArray(structure?.customFields) ? structure.customFields : []
}

const getStructurePieces = (structure: ComponentModelStructure | null) => {
  return Array.isArray(structure?.pieces) ? structure.pieces : []
}

const getStructureProducts = (structure: ComponentModelStructure | null) => {
  return Array.isArray(structure?.products) ? structure.products : []
}

const getStructureSubcomponents = (structure: ComponentModelStructure | null) => {
  if (Array.isArray(structure?.subcomponents)) {
    return structure.subcomponents
  }
  const legacy = (structure as any)?.subComponents
  return Array.isArray(legacy) ? legacy : []
}

const resolvePieceLabel = (piece: Record<string, any>) => {
  const parts: string[] = []
  if (piece.role) {
    parts.push(piece.role)
  }
  if (piece.typePiece?.name) {
    parts.push(piece.typePiece.name)
  } else if (piece.typePieceLabel) {
    parts.push(piece.typePieceLabel)
  } else if (piece.typePiece?.code) {
    parts.push(`Famille ${piece.typePiece.code}`)
  } else if (piece.familyCode) {
    parts.push(`Famille ${piece.familyCode}`)
  } else if (piece.typePieceId) {
    parts.push(`#${piece.typePieceId}`)
  }
  return parts.length ? parts.join(' • ') : 'Pièce'
}

const resolveProductLabel = (product: Record<string, any>) => {
  const parts: string[] = []
  if (product.role) {
    parts.push(product.role)
  }
  if (product.typeProduct?.name) {
    parts.push(product.typeProduct.name)
  } else if (product.typeProductLabel) {
    parts.push(product.typeProductLabel)
  } else if (product.typeProduct?.code) {
    parts.push(`Catégorie ${product.typeProduct.code}`)
  } else if (product.familyCode) {
    parts.push(`Catégorie ${product.familyCode}`)
  } else if (product.typeProductId) {
    parts.push(`#${product.typeProductId}`)
  }
  return parts.length ? parts.join(' • ') : 'Produit'
}

const resolveSubcomponentLabel = (node: Record<string, any>) => {
  const parts: string[] = []
  if (node.alias) {
    parts.push(node.alias)
  }
  if (node.typeComposant?.name) {
    parts.push(node.typeComposant.name)
  } else if (node.typeComposantLabel) {
    parts.push(node.typeComposantLabel)
  } else if (node.familyCode) {
    parts.push(node.familyCode)
  } else if (node.typeComposantId) {
    parts.push(`#${node.typeComposantId}`)
  }

  const childCount = Array.isArray(node.subcomponents)
    ? node.subcomponents.length
    : Array.isArray(node.subComponents)
      ? node.subComponents.length
      : 0
  if (childCount) {
    parts.push(`${childCount} sous-composant(s)`)
  }
  return parts.length ? parts.join(' • ') : 'Sous-composant'
}

const clearCreationForm = () => {
  creationForm.name = ''
  creationForm.reference = ''
  creationForm.constructeurIds = []
  creationForm.prix = ''
  lastSuggestedName.value = ''
  structureAssignments.value = null
}

const submitCreation = async () => {
  if (!selectedType.value) {
    toast.showError('Sélectionnez une catégorie de composant.')
    return
  }
  const payload: Record<string, any> = {
    name: creationForm.name.trim(),
    typeComposantId: selectedType.value.id,
  }

  const reference = creationForm.reference.trim()
  if (reference) {
    payload.reference = reference
  }

  if (creationForm.constructeurIds.length) {
    payload.constructeurIds = uniqueConstructeurIds(creationForm.constructeurIds)
  }

  const rawPrice = typeof creationForm.prix === 'string'
    ? creationForm.prix.trim()
    : creationForm.prix === null || creationForm.prix === undefined
      ? ''
      : String(creationForm.prix).trim()

  if (rawPrice) {
    const parsed = Number(rawPrice)
    if (!Number.isNaN(parsed)) {
      payload.prix = parsed
    }
  }

  const rootProductSelection =
    structureAssignments.value?.products?.find(
      (product) => typeof product.selectedProductId === 'string' && product.selectedProductId.trim().length > 0,
    ) ?? null

  if (rootProductSelection?.selectedProductId) {
    payload.productId = rootProductSelection.selectedProductId.trim()
  }

  if (structureHasRequirements.value && !structureSelectionsComplete.value) {
    toast.showError('Complétez la sélection des pièces, produits et sous-composants.')
    return
  }

  const serializedStructure = structureHasRequirements.value
    ? serializeStructureAssignments(structureAssignments.value)
    : null

  if (serializedStructure) {
    payload.structure = serializedStructure
  }

  submitting.value = true
  try {
    const result = await createComposant(payload)
    if (result.success) {
      await saveCustomFieldValues(result.data)
      if (selectedDocuments.value.length && result.data?.id) {
        uploadingDocuments.value = true
        const uploadResult = await uploadDocuments(
          {
            files: selectedDocuments.value,
            context: { composantId: result.data.id },
          },
          { updateStore: false },
        )
        if (!uploadResult.success) {
          const message = uploadResult.error
            ? `Documents non ajoutés : ${uploadResult.error}`
            : 'Documents non ajoutés : une erreur est survenue.'
          toast.showError(message)
        }
        selectedDocuments.value = []
      }
      toast.showSuccess('Composant créé avec succès')
      await router.push('/component-catalog')
    } else if (result.error) {
      toast.showError(result.error)
    }
  } catch (error: any) {
    toast.showError(error?.message || 'Erreur lors de la création du composant')
  } finally {
    submitting.value = false
    uploadingDocuments.value = false
  }
}

onMounted(async () => {
  await Promise.allSettled([
    loadComponentTypes(),
    loadPieces(),
    loadComposants(),
    loadProducts(),
  ])
})

interface CustomFieldInput {
  id: string | null
  name: string
  type: string
  required: boolean
  options: string[]
  value: string
  customFieldId: string | null
  customFieldValueId: string | null
  orderIndex: number
}

const fieldKey = (field: CustomFieldInput, index: number) =>
  field.customFieldValueId || field.id || `${field.name}-${index}`

const normalizeCustomFieldInputs = (structure: ComponentModelStructure | null): CustomFieldInput[] => {
  if (!structure || typeof structure !== 'object') {
    return []
  }
  const fields = Array.isArray(structure.customFields) ? structure.customFields : []
  return fields
    .map((field, index) => normalizeCustomField(field, index))
    .filter((field): field is CustomFieldInput => field !== null)
    .sort((a, b) => a.orderIndex - b.orderIndex)
}

const normalizeCustomField = (rawField: any, fallbackIndex = 0): CustomFieldInput | null => {
  if (!rawField || typeof rawField !== 'object') {
    return null
  }
  const name = resolveFieldName(rawField)
  if (!name) {
    return null
  }
  const type = resolveFieldType(rawField)
  const required = resolveRequiredFlag(rawField)
  const options = resolveOptions(rawField)
  const defaultSource = resolveDefaultValue(rawField)
  const value = formatDefaultValue(type, defaultSource)
  const id = typeof rawField.id === 'string' ? rawField.id : null
  const customFieldId = typeof rawField.customFieldId === 'string' ? rawField.customFieldId : id
  const customFieldValueId = typeof rawField.customFieldValueId === 'string'
    ? rawField.customFieldValueId
    : null
  const orderIndex = typeof rawField.orderIndex === 'number' ? rawField.orderIndex : fallbackIndex
  return { id, name, type, required, options, value, customFieldId, customFieldValueId, orderIndex }
}

const resolveFieldName = (field: any): string => {
  if (typeof field?.name === 'string' && field.name.trim()) {
    return field.name.trim()
  }
  if (typeof field?.key === 'string' && field.key.trim()) {
    return field.key.trim()
  }
  if (typeof field?.label === 'string' && field.label.trim()) {
    return field.label.trim()
  }
  return ''
}

const resolveFieldType = (field: any): string => {
  const allowed = ['text', 'number', 'select', 'boolean', 'date']
  const rawType =
    typeof field?.type === 'string'
      ? field.type
      : typeof field?.value?.type === 'string'
        ? field.value.type
        : ''
  const value = rawType.toLowerCase()
  return allowed.includes(value) ? value : 'text'
}

const resolveDefaultValue = (field: any): any => {
  if (!field || typeof field !== 'object') {
    return null
  }
  if (field.defaultValue !== undefined && field.defaultValue !== null) {
    return field.defaultValue
  }
  if (field.value !== undefined && field.value !== null && typeof field.value !== 'object') {
    return field.value
  }
  if (field.default !== undefined && field.default !== null) {
    return field.default
  }
  if (field.value && typeof field.value === 'object') {
    if ((field.value as any).defaultValue !== undefined && (field.value as any).defaultValue !== null) {
      return (field.value as any).defaultValue
    }
    if ((field.value as any).value !== undefined && (field.value as any).value !== null && typeof (field.value as any).value !== 'object') {
      return (field.value as any).value
    }
  }
  return null
}

const formatDefaultValue = (type: string, defaultValue: any): string => {
  if (defaultValue === null || defaultValue === undefined) {
    return ''
  }
  if (typeof defaultValue === 'object') {
    if (defaultValue === null) {
      return ''
    }
    if ('defaultValue' in (defaultValue as Record<string, any>)) {
      return formatDefaultValue(type, (defaultValue as Record<string, any>).defaultValue)
    }
    if ('value' in (defaultValue as Record<string, any>)) {
      return formatDefaultValue(type, (defaultValue as Record<string, any>).value)
    }
    return ''
  }
  if (type === 'boolean') {
    const normalized = String(defaultValue).toLowerCase()
    if (normalized === 'true' || normalized === '1') {
      return 'true'
    }
    if (normalized === 'false' || normalized === '0') {
      return 'false'
    }
    return ''
  }
  return String(defaultValue)
}

const resolveRequiredFlag = (field: any): boolean => {
  if (typeof field?.required === 'boolean') {
    return field.required
  }
  const nestedRequired = field?.value?.required
  if (typeof nestedRequired === 'boolean') {
    return nestedRequired
  }
  if (typeof nestedRequired === 'string') {
    const normalized = nestedRequired.toLowerCase()
    return normalized === 'true' || normalized === '1'
  }
  return false
}

const resolveOptions = (field: any): string[] => {
  const sources = [field?.options, field?.value?.options, field?.value?.choices]
  for (const source of sources) {
    if (Array.isArray(source)) {
  const mapped = source
    .map((option: unknown) => {
      if (option === null || option === undefined) {
        return ''
      }
      if (typeof option === 'string') {
        return option.trim()
      }
      if (typeof option === 'object') {
        const record = option || {}
        const keys = ['value', 'label', 'name']
        for (const key of keys) {
          const candidate = record[key]
          if (typeof candidate === 'string' && candidate.trim().length > 0) {
            return candidate.trim()
              }
            }
          }
          const fallback = String(option).trim()
          return fallback === '[object Object]' ? '' : fallback
        })
        .filter((option) => option.length > 0)
      if (mapped.length) {
        return mapped
      }
    }
  }
  return []
}

const buildCustomFieldMetadata = (field: CustomFieldInput) => ({
  customFieldName: field.name,
  customFieldType: field.type,
  customFieldRequired: field.required,
  customFieldOptions: field.options,
})

const saveCustomFieldValues = async (createdComponent: any) => {
  if (!createdComponent || !createdComponent.id) {
    return
  }

  const definitionMap = new Map<string, string>()
  const registerDefinitions = (fields: any[]) => {
    if (!Array.isArray(fields)) {
      return
    }
    fields.forEach((field) => {
      if (!field || typeof field !== 'object') {
        return
      }
      const name = typeof field.name === 'string' ? field.name : null
      const id = typeof field.id === 'string' ? field.id : null
      if (name && id && !definitionMap.has(name)) {
        definitionMap.set(name, id)
      }
    })
  }

  registerDefinitions(createdComponent?.typeComposant?.customFields)
  registerDefinitions(createdComponent?.typeMachineComponentRequirement?.typeComposant?.customFields)

  const resolveDefinitionId = (field: CustomFieldInput) => {
    if (field.customFieldId) {
      return field.customFieldId
    }
    if (field.id) {
      return field.id
    }
    return definitionMap.get(field.name) ?? null
  }

  for (const field of customFieldInputs.value) {
    if (!shouldPersistField(field)) {
      continue
    }

    const definitionId = resolveDefinitionId(field)
    const metadata = definitionId ? undefined : buildCustomFieldMetadata(field)
    const value = formatValueForPersistence(field)

    if (field.customFieldValueId) {
      const result = await updateCustomFieldValue(field.customFieldValueId, { value })
      if (!result.success) {
        toast.showError(`Impossible de mettre à jour le champ personnalisé "${field.name}"`)
      } else if (definitionId && !field.customFieldId) {
        field.customFieldId = definitionId
      }
      continue
    }

    const result = await upsertCustomFieldValue(
      definitionId,
      'composant',
      createdComponent.id,
      value,
      metadata,
    )

    if (!result.success) {
      toast.showError(`Impossible d'enregistrer le champ personnalisé "${field.name}"`)
    } else {
      const createdValue = result.data
      if (createdValue?.id) {
        field.customFieldValueId = createdValue.id
      }
      const resolvedId = createdValue?.customField?.id || definitionId
      if (resolvedId) {
        field.customFieldId = resolvedId
      }
    }
  }
}

const shouldPersistField = (field: CustomFieldInput) => {
  if (field.type === 'boolean') {
    return field.value === 'true' || field.value === 'false'
  }
  return toFieldString(field.value).trim() !== ''
}

const formatValueForPersistence = (field: CustomFieldInput) => {
  if (field.type === 'boolean') {
    return field.value === 'true' ? 'true' : 'false'
  }
  return toFieldString(field.value).trim()
}
</script>
