<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>
      <button type="button" class="btn btn-ghost btn-sm md:btn-md self-start" @click="$router.back()">
        Retour au catalogue
      </button>
    </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="!canEdit || 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="!canEdit || submitting || !selectedType"
              placeholder="Nom affiché dans le catalogue"
              required
            >
          </div>
        </div>

        <div class="form-control">
          <label class="label">
            <span class="label-text">Description</span>
          </label>
          <textarea
            v-model="creationForm.description"
            class="textarea textarea-bordered textarea-sm md:textarea-md"
            :disabled="!canEdit || submitting || !selectedType"
            placeholder="Description du composant (optionnel)"
            rows="3"
          />
        </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="!canEdit || 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="!canEdit || submitting || !selectedType"
              placeholder="Rechercher un ou plusieurs fournisseurs..."
            />
          </div>
        </div>

        <ConstructeurLinksTable
          v-if="constructeurLinks.length"
          v-model="constructeurLinks"
        />

        <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="!canEdit || submitting || !selectedType"
              placeholder="Valeur indicatrice"
            >
          </div>
        </div>

        <StructureSkeletonPreview
          v-if="selectedType"
          :structure="selectedTypeStructure"
          :description="selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.'"
          :preview-badge="formatStructurePreview(selectedTypeStructure)"
          variant="component"
          :resolve-piece-label="resolvePieceLabel"
          :resolve-product-label="resolveProductLabel"
          :resolve-subcomponent-label="resolveSubcomponentLabel"
        />

        <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"
            :piece-type-label-map="pieceTypeLabelMap"
            :product-type-label-map="productTypeLabelMap"
            :component-type-label-map="componentTypeLabelMap"
          />
          <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>
          <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || submitting" />
        </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': !canEdit || 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 { watch } from 'vue'
import { useConstructeurs } from '~/composables/useConstructeurs'

const { getConstructeurById } = useConstructeurs()

const {
  selectedTypeId,
  submitting,
  creationForm,
  constructeurLinks,
  customFieldInputs,
  structureAssignments,
  selectedDocuments,
  uploadingDocuments,
  loadingTypes,
  componentTypeList,
  selectedType,
  selectedTypeStructure,
  availablePieces,
  availableProducts,
  availableComponents,
  piecesLoading,
  productsLoading,
  componentsLoading,
  structureDataLoading,
  pieceTypeLabelMap,
  productTypeLabelMap,
  componentTypeLabelMap,
  structureHasRequirements,
  structureSelectionsComplete,
  canEdit,
  canSubmit,
  typeOptionLabel,
  typeOptionDescription,
  formatStructurePreview,
  resolvePieceLabel,
  resolveProductLabel,
  resolveSubcomponentLabel,
  submitCreation,
} = useComponentCreate()

// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
watch(
  () => creationForm.constructeurIds,
  (ids) => {
    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
    for (const id of ids) {
      if (!currentIds.has(id)) {
        const resolved = getConstructeurById(id)
        constructeurLinks.value.push({
          constructeurId: id,
          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
          supplierReference: null,
        })
      }
    }
    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
  },
)
</script>
