Inventory/app/components/ComponentItem.vue

<template>
  <div>
    <DocumentPreviewModal
      :document="previewDocument"
      :visible="previewVisible"
      :documents="componentDocuments"
      @close="closePreview"
    />

    <!-- Component Header -->
    <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg cursor-pointer" @click="toggleCollapse">
      <IconLucideChevronRight
        class="w-4 h-4 shrink-0 transition-transform text-base-content/50"
        :class="{ 'rotate-90': !isCollapsed }"
        aria-hidden="true"
      />
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2 flex-wrap">
          <h3 class="text-sm font-semibold text-base-content truncate">
            {{ component.name }}
          </h3>
          <span v-if="component.reference" class="badge badge-outline badge-xs">{{ component.reference }}</span>
          <span v-if="component.prix" class="badge badge-primary badge-xs">{{ component.prix }}€</span>
        </div>
        <div v-if="componentConstructeursDisplay.length || displayProductName" class="flex flex-wrap gap-1.5 mt-1">
          <span
            v-for="constructeur in componentConstructeursDisplay"
            :key="constructeur.id"
            class="text-xs text-base-content/50"
          >
            {{ constructeur.name }}
          </span>
          <span v-if="displayProductName" class="badge badge-info badge-xs">
            {{ displayProductName }}
          </span>
        </div>
      </div>
      <button
        v-if="showDelete"
        type="button"
        class="btn btn-ghost btn-xs text-error shrink-0"
        title="Supprimer ce composant"
        @click.stop="$emit('delete')"
      >
        Supprimer
      </button>
    </div>

    <!-- Expanded content -->
    <div v-show="!isCollapsed" class="mt-3 space-y-4 pl-7">
      <!-- Info fields -->
      <div v-if="isEditMode" class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div class="form-control">
          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Nom</span></label>
          <input v-model="component.name" type="text" class="input input-bordered input-sm" @blur="updateComponent">
        </div>
        <div class="form-control">
          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Référence</span></label>
          <input v-model="component.reference" type="text" class="input input-bordered input-sm" @blur="updateComponent">
        </div>
        <div class="form-control">
          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Prix</span></label>
          <input v-model="component.prix" type="number" step="0.01" class="input input-bordered input-sm" @blur="updateComponent">
        </div>
        <div class="form-control">
          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Fournisseur</span></label>
          <ConstructeurSelect
            class="w-full"
            :model-value="componentConstructeurIds"
            :initial-options="componentConstructeursDisplay"
            @update:model-value="handleConstructeurChange"
          />
        </div>
      </div>

      <!-- Read-only info -->
      <div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3 text-sm">
        <div>
          <p class="text-xs text-base-content/40 mb-0.5">Nom</p>
          <p class="text-base-content">{{ component.name }}</p>
        </div>
        <div>
          <p class="text-xs text-base-content/40 mb-0.5">Référence</p>
          <p class="text-base-content">{{ component.reference || '—' }}</p>
        </div>
        <div>
          <p class="text-xs text-base-content/40 mb-0.5">Prix</p>
          <p class="text-base-content">{{ component.prix ? `${component.prix} €` : '—' }}</p>
        </div>
        <div>
          <p class="text-xs text-base-content/40 mb-0.5">Fournisseur</p>
          <div v-if="componentConstructeursDisplay.length">
            <p
              v-for="constructeur in componentConstructeursDisplay"
              :key="constructeur.id"
              class="text-base-content"
            >
              {{ constructeur.name }}
              <span v-if="formatConstructeurContact(constructeur)" class="text-xs text-base-content/50 block">
                {{ formatConstructeurContact(constructeur) }}
              </span>
            </p>
          </div>
          <p v-else class="text-base-content">—</p>
        </div>
      </div>

      <!-- Product -->
      <div v-if="displayProduct" class="rounded-lg border border-base-200 bg-base-100 p-3">
        <div class="flex items-start justify-between gap-3">
          <div class="space-y-1">
            <p class="text-xs text-base-content/40">Produit catalogue</p>
            <p class="text-sm font-semibold text-base-content">{{ displayProductName }}</p>
            <p
              v-for="info in productInfoRows"
              :key="info.label"
              class="text-xs text-base-content/60"
            >
              {{ info.label }} : {{ info.value }}
            </p>
          </div>
          <NuxtLink
            v-if="component.product?.id"
            :to="`/product/${component.product.id}/edit`"
            class="btn btn-ghost btn-xs shrink-0"
          >
            Voir le produit
          </NuxtLink>
        </div>
        <!-- Product documents -->
        <div v-if="productDocuments.length" class="mt-3 pt-3 border-t border-base-200 space-y-2">
          <p class="text-xs font-medium text-base-content/50">Documents du produit</p>
          <div
            v-for="document in productDocuments"
            :key="document.id || document.path || document.name"
            class="flex items-center justify-between gap-3 text-xs"
          >
            <div class="flex items-center gap-2 min-w-0">
              <div class="flex-shrink-0 overflow-hidden rounded border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-7">
                <img
                  v-if="isImageDocument(document) && (document.fileUrl || document.path)"
                  :src="document.fileUrl || document.path"
                  class="h-full w-full object-cover"
                  :alt="`Aperçu de ${document.name}`"
                >
                <iframe
                  v-else-if="shouldInlinePdf(document)"
                  :src="documentPreviewSrc(document)"
                  class="h-full w-full border-0 bg-white"
                  title="Aperçu PDF"
                />
                <component
                  v-else
                  :is="documentIcon(document).component"
                  class="h-4 w-4"
                  :class="documentIcon(document).colorClass"
                  aria-hidden="true"
                />
              </div>
              <span class="truncate text-base-content">{{ document.name }}</span>
            </div>
            <div class="flex items-center gap-1 shrink-0">
              <button
                type="button"
                class="btn btn-ghost btn-xs"
                :disabled="!canPreviewDocument(document)"
                @click="openPreview(document)"
              >
                Consulter
              </button>
              <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
                Télécharger
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Custom Fields -->
      <CustomFieldDisplay
        :fields="displayedCustomFields"
        :is-edit-mode="isEditMode"
        :columns="2"
        @field-blur="updateComponentCustomField"
      />

      <!-- Documents -->
      <div class="space-y-2">
        <div class="flex items-center justify-between">
          <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Documents</p>
          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
          </span>
        </div>

        <p v-if="loadingDocuments" class="text-xs text-base-content/50">
          Chargement...
        </p>

        <DocumentUpload
          v-if="isEditMode"
          v-model="selectedFiles"
          title="Déposer des fichiers pour ce composant"
          subtitle="Formats acceptés : PDF, images, documents..."
          @files-added="handleFilesAdded"
        />

        <DocumentListInline
          :documents="componentDocuments"
          :can-delete="isEditMode"
          :delete-disabled="uploadingDocuments"
          empty-text="Aucun document lié à ce composant."
          @preview="openPreview"
          @delete="removeDocument"
        />
      </div>

      <!-- Component Pieces -->
      <div v-if="component.pieces && component.pieces.length > 0" class="space-y-2">
        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
          Pièces du composant
        </p>
        <div class="space-y-2">
          <PieceItem
            v-for="piece in component.pieces"
            :key="piece.id"
            :piece="piece"
            :is-edit-mode="isEditMode"
            @update="updatePiece"
            @edit="editPiece"
            @custom-field-update="updatePieceCustomField"
          />
        </div>
      </div>

      <!-- Sub Components -->
      <div v-if="childComponents.length > 0" class="space-y-2">
        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
          Sous-composants
        </p>
        <div class="space-y-2 pl-4 border-l-2 border-base-200">
          <ComponentItem
            v-for="subComponent in childComponents"
            :key="subComponent.id"
            :component="subComponent"
            :is-edit-mode="isEditMode"
            :collapse-all="collapseAll"
            :toggle-token="toggleToken"
            @update="$emit('update', $event)"
            @edit-piece="$emit('edit-piece', $event)"
            @custom-field-update="$emit('custom-field-update', $event)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import PieceItem from './PieceItem.vue'
import DocumentUpload from './DocumentUpload.vue'
import ConstructeurSelect from './ConstructeurSelect.vue'
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
import IconLucideChevronRight from '~icons/lucide/chevron-right'
import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
import { useConstructeurs } from '~/composables/useConstructeurs'
import {
  formatConstructeurContact as formatConstructeurContactSummary,
  resolveConstructeurs,
  uniqueConstructeurIds,
} from '~/shared/constructeurUtils'
import {
  formatSize,
  shouldInlinePdf,
  documentPreviewSrc,
  documentIcon,
  downloadDocument,
} from '~/shared/utils/documentDisplayUtils'
import { useEntityDocuments } from '~/composables/useEntityDocuments'
import { useEntityProductDisplay } from '~/composables/useEntityProductDisplay'
import { useEntityCustomFields } from '~/composables/useEntityCustomFields'

const props = defineProps({
  component: { type: Object, required: true },
  isEditMode: { type: Boolean, default: false },
  showDelete: { type: Boolean, default: false },
  collapseAll: { type: Boolean, default: true },
  toggleToken: { type: Number, default: 0 },
})

const emit = defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])

// --- Shared composables ---
const {
  documents: componentDocuments,
  selectedFiles,
  uploadingDocuments,
  loadingDocuments,
  previewDocument,
  previewVisible,
  openPreview,
  closePreview,
  ensureDocumentsLoaded,
  handleFilesAdded,
  removeDocument,
} = useEntityDocuments({ entity: () => props.component, entityType: 'composant' })

const {
  displayProduct,
  displayProductName,
  productInfoRows,
  productDocuments,
} = useEntityProductDisplay({ entity: () => props.component })

const {
  displayedCustomFields,
  updateCustomField: updateComponentCustomField,
} = useEntityCustomFields({ entity: () => props.component, entityType: 'composant' })

// --- Collapse state ---
const isCollapsed = ref(true)

watch(
  () => props.toggleToken,
  () => {
    isCollapsed.value = props.collapseAll
    if (!isCollapsed.value) ensureDocumentsLoaded()
  },
  { immediate: true },
)

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
  if (!isCollapsed.value) ensureDocumentsLoaded()
}

// --- Child components ---
const childComponents = computed(() => {
  const list = props.component.subcomponents || props.component.subComponents || []
  return Array.isArray(list) ? list : []
})

// --- Constructeurs ---
const { constructeurs } = useConstructeurs()

const componentConstructeurIds = computed(() =>
  uniqueConstructeurIds(
    props.component,
    Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
    props.component.constructeur ? [props.component.constructeur] : [],
  ),
)

const componentConstructeursDisplay = computed(() =>
  resolveConstructeurs(
    componentConstructeurIds.value,
    Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
    props.component.constructeur ? [props.component.constructeur] : [],
    constructeurs.value,
  ),
)

const formatConstructeurContact = (constructeur) =>
  formatConstructeurContactSummary(constructeur)

const handleConstructeurChange = async (value) => {
  const ids = uniqueConstructeurIds(value)
  props.component.constructeurIds = [...ids]
  props.component.constructeurId = null
  props.component.constructeur = null
  props.component.constructeurs = resolveConstructeurs(
    ids,
    constructeurs.value,
    Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
  )
  await updateComponent()
}

// --- Update / Event forwarding ---
const updateComponent = () => {
  emit('update', {
    ...props.component,
    constructeurIds: componentConstructeurIds.value,
  })
}

const updatePiece = (updatedPiece) => {
  emit('edit-piece', updatedPiece)
}

const editPiece = (piece) => {
  emit('edit-piece', piece)
}

const updatePieceCustomField = (fieldUpdate) => {
  emit('custom-field-update', fieldUpdate)
  emit('edit-piece', { ...fieldUpdate, type: 'custom-field-update' })
}
</script>