Inventory/app/components/PieceItem.vue

<template>
  <div class="space-y-4">
    <DocumentPreviewModal
      :document="previewDocument"
      :visible="previewVisible"
      :documents="pieceDocuments"
      @close="closePreview"
    />

    <!-- Piece Header (collapsible, same pattern as ComponentItem) -->
    <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
      <div class="flex items-start gap-3 flex-1 min-w-0">
        <button
          type="button"
          class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
          :class="{ 'rotate-90': !isCollapsed }"
          :aria-expanded="!isCollapsed"
          :title="isCollapsed ? 'Déplier les détails de la pièce' : 'Replier les détails de la pièce'"
          @click="toggleCollapse"
        >
          <IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
          <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} la pièce</span>
        </button>
        <div class="flex-1 min-w-0">
          <h3 class="text-lg font-semibold">
            {{ pieceData.name }}
          </h3>
          <div class="flex flex-wrap gap-2 mt-2">
            <span v-if="piece.parentComponentName" class="badge badge-ghost badge-sm">
              Rattachée à {{ piece.parentComponentName }}
            </span>
            <span v-if="pieceData.reference" class="badge badge-outline badge-sm">{{ pieceData.reference }}</span>
            <template v-if="pieceConstructeursDisplay.length">
              <span
                v-for="constructeur in pieceConstructeursDisplay"
                :key="constructeur.id"
                class="badge badge-outline badge-sm"
              >
                {{ constructeur.name }}
              </span>
            </template>
            <span v-if="pieceData.prix" class="badge badge-primary badge-sm">{{ pieceData.prix }}€</span>
            <span
              v-if="displayProductName"
              class="badge badge-info badge-sm"
            >
              Produit&nbsp;: {{ displayProductName }}
            </span>
          </div>
        </div>
      </div>
      <button
        v-if="showDelete"
        type="button"
        class="btn btn-ghost btn-xs text-error shrink-0"
        title="Supprimer cette pièce"
        @click="$emit('delete')"
      >
        Supprimer
      </button>
    </div>

    <div v-show="!isCollapsed" class="space-y-4">
      <div class="p-4 bg-base-100 border border-base-200 rounded-lg">
        <div class="space-y-2 text-sm">
      <div>
        <span class="font-medium">Référence:</span>
        <input
          v-if="isEditMode"
          :id="`piece-reference-${piece.id}`"
          v-model="pieceData.reference"
          type="text"
          class="input input-sm input-bordered ml-2"
          @blur="updatePiece"
        />
        <span v-else class="ml-2">{{
          pieceData.reference || "Non définie"
        }}</span>
      </div>
      <div>
        <span class="font-medium">Fournisseur:</span>
        <div v-if="!isEditMode" class="ml-2">
          <div v-if="pieceConstructeursDisplay.length" class="space-y-1">
            <div
              v-for="constructeur in pieceConstructeursDisplay"
              :key="constructeur.id"
              class="flex flex-col"
            >
              <span class="font-medium">
                {{ constructeur.name }}
              </span>
              <span
                v-if="formatConstructeurContact(constructeur)"
                class="text-xs text-base-content/50"
              >
                {{ formatConstructeurContact(constructeur) }}
              </span>
            </div>
          </div>
          <span v-else class="font-medium">
            Non défini
          </span>
        </div>
        <ConstructeurSelect
          v-else
          class="w-full"
          :model-value="pieceConstructeurIds"
          :initial-options="pieceConstructeursDisplay"
          placeholder="Sélectionner un ou plusieurs fournisseurs..."
          @update:model-value="handleConstructeurChange"
        />
      </div>
      <div>
        <span class="font-medium">Prix:</span>
        <input
          v-if="isEditMode"
          :id="`piece-prix-${piece.id}`"
          v-model="pieceData.prix"
          type="number"
          step="0.01"
          class="input input-sm input-bordered ml-2"
          @blur="updatePiece"
        />
        <span v-else class="ml-2">{{
          pieceData.prix ? `${pieceData.prix}€` : "Non défini"
        }}</span>
      </div>
      <div>
        <span class="font-medium">Produit catalogue:</span>
        <div v-if="isEditMode" class="mt-2 space-y-2">
          <ProductSelect
            :model-value="pieceData.productId"
            placeholder="Associer un produit…"
            helper-text="Optionnel : reliez cette pièce à un produit catalogue."
            @update:modelValue="handleProductChange"
          />
          <div
            v-if="selectedProduct"
            class="rounded-md border border-base-200 bg-base-100 p-3 text-xs space-y-1"
          >
            <p class="text-sm font-semibold text-base-content">
              {{ selectedProduct.name }}
            </p>
            <p
              v-for="info in productInfoRows"
              :key="info.label"
              class="flex flex-wrap gap-1"
            >
              <span class="font-semibold">{{ info.label }} :</span>
              <span>{{ info.value }}</span>
            </p>
            <NuxtLink
              v-if="selectedProduct.id"
              :to="`/product/${selectedProduct.id}/edit`"
              class="link link-primary text-xs"
            >
              Ouvrir la fiche produit
            </NuxtLink>
          </div>
          <p v-else class="text-xs text-base-content/60">
            Aucun produit associé.
          </p>
        </div>
        <div class="ml-2">
          <div v-if="displayProduct" class="space-y-1">
            <p class="font-medium text-base-content">
              {{ displayProductName || 'Produit catalogue' }}
            </p>
            <p
              v-for="info in productInfoRows"
              :key="info.label"
              class="text-xs text-base-content/70"
            >
              <span class="font-semibold">{{ info.label }} :</span>
              <span class="ml-1">{{ info.value }}</span>
            </p>
            <ProductDocumentsInline
              :documents="productDocuments"
              @preview="openPreview"
            />
          </div>
          <span v-else class="font-medium">
            Non défini
          </span>
        </div>
      </div>
    </div>
      </div>

    <!-- Champs personnalisés de la pièce -->
    <CustomFieldDisplay
      :fields="displayedCustomFields"
      :is-edit-mode="isEditMode"
      @field-input="handleCustomFieldInput"
      @field-blur="handleCustomFieldBlur"
    />

    <div class="mt-4 pt-4 border-t border-base-200 space-y-3">
      <div class="flex items-center justify-between">
        <h5 class="text-sm font-medium text-base-content/80">Documents</h5>
        <span
          v-if="isEditMode && selectedFiles.length"
          class="badge badge-outline"
        >
          {{ selectedFiles.length }} fichier{{
            selectedFiles.length > 1 ? "s" : ""
          }}
          sélectionné{{ selectedFiles.length > 1 ? "s" : "" }}
        </span>
      </div>

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

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

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

<script setup>
import { reactive, ref, onMounted, watch, computed } from 'vue'
import ConstructeurSelect from './ConstructeurSelect.vue'
import ProductSelect from '~/components/ProductSelect.vue'
import DocumentUpload from '~/components/DocumentUpload.vue'
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
import IconLucideChevronRight from '~icons/lucide/chevron-right'
import { useConstructeurs } from '~/composables/useConstructeurs'
import { useProducts } from '~/composables/useProducts'
import {
  formatConstructeurContact as formatConstructeurContactSummary,
  resolveConstructeurs,
  uniqueConstructeurIds,
} from '~/shared/constructeurUtils'
import {
  resolveFieldId,
  resolveFieldReadOnly,
} from '~/shared/utils/entityCustomFieldLogic'
import { useEntityDocuments } from '~/composables/useEntityDocuments'
import { useEntityProductDisplay } from '~/composables/useEntityProductDisplay'
import { useEntityCustomFields } from '~/composables/useEntityCustomFields'

const props = defineProps({
  piece: { 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', 'custom-field-update', 'delete'])

// --- Local reactive data for editing ---
const pieceData = reactive({
  name: props.piece.name || '',
  reference: props.piece.reference || '',
  prix: props.piece.prix || '',
  productId: props.piece.product?.id || props.piece.productId || null,
})

// --- Products ---
const { products, loadProducts, getProduct } = useProducts()

const selectedProduct = computed(() => {
  const id = pieceData.productId
  if (!id) return null
  const list = Array.isArray(products.value) ? products.value : []
  const cached = list.find((p) => p && p.id === id) || null
  if (cached) return cached
  const current = props.piece.product
  if (current && current.id === id) return current
  return null
})

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

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

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

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

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

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

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

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

const pieceConstructeursDisplay = computed(() =>
  resolveConstructeurs(
    pieceConstructeurIds.value,
    Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
    props.piece.constructeur ? [props.piece.constructeur] : [],
    constructeurs.value,
  ),
)

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

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

// --- Product handling ---
const ensureProductLoaded = async (id) => {
  if (!id) return null
  const list = Array.isArray(products.value) ? products.value : []
  const cached = list.find((p) => p && p.id === id)
  if (cached) return cached
  const result = await getProduct(id, { force: true })
  return result.success && result.data ? result.data : null
}

const handleProductChange = async (value) => {
  const nextId = value || null
  pieceData.productId = nextId
  props.piece.productId = nextId

  if (!nextId) {
    props.piece.product = null
    updatePiece()
    return
  }

  const resolved = await ensureProductLoaded(nextId)
  if (resolved) {
    props.piece.product = resolved
    const supplierPrice = resolved.supplierPrice
    if (
      (pieceData.prix === '' || pieceData.prix === null || pieceData.prix === undefined) &&
      supplierPrice !== null && supplierPrice !== undefined
    ) {
      const number = Number(supplierPrice)
      if (!Number.isNaN(number)) pieceData.prix = String(number)
    }
  }

  updatePiece()
}

// --- Custom field event handlers ---
const handleCustomFieldInput = (field, value) => {
  if (resolveFieldReadOnly(field)) return
  const fieldValueId = resolveFieldId(field)
  if (!fieldValueId) return
  const fieldValue = props.piece.customFieldValues?.find((fv) => fv.id === fieldValueId)
  if (fieldValue) fieldValue.value = value
}

const handleCustomFieldBlur = async (field) => {
  await updateCustomField(field)
  const cfId = field?.customFieldId || field?.customField?.id || null
  if (cfId || field?.customFieldValueId) {
    emit('custom-field-update', {
      fieldId: cfId,
      pieceId: props.piece.id,
      value: field?.value ?? '',
    })
  }
}

// --- Update piece ---
const updatePiece = () => {
  const prixValue = pieceData.prix
  let parsedPrice = null
  if (prixValue !== null && prixValue !== undefined && String(prixValue).trim().length > 0) {
    const numeric = Number(prixValue)
    if (!Number.isNaN(numeric)) parsedPrice = numeric
  }
  const product = selectedProduct.value ? { ...selectedProduct.value } : null
  emit('update', {
    ...props.piece,
    ...pieceData,
    prix: parsedPrice,
    productId: pieceData.productId || null,
    product,
    constructeurIds: pieceConstructeurIds.value,
  })
}

// --- Watchers ---
watch(
  () => props.piece.product?.id || props.piece.productId || null,
  async (id) => {
    if (pieceData.productId === id) {
      if (id && !selectedProduct.value) {
        const resolved = await ensureProductLoaded(id)
        if (resolved) props.piece.product = resolved
      }
      if (!id) props.piece.product = null
      return
    }
    pieceData.productId = id
    if (id) {
      const resolved = await ensureProductLoaded(id)
      if (resolved) {
        props.piece.product = resolved
        if (
          (pieceData.prix === '' || pieceData.prix === null || pieceData.prix === undefined) &&
          resolved.supplierPrice !== null && resolved.supplierPrice !== undefined
        ) {
          const number = Number(resolved.supplierPrice)
          if (!Number.isNaN(number)) pieceData.prix = String(number)
        }
      }
    } else {
      props.piece.product = null
    }
  },
  { immediate: true },
)

watch(
  () => [props.piece.name, props.piece.reference, props.piece.prix],
  () => {
    pieceData.name = props.piece.name || ''
    pieceData.reference = props.piece.reference || ''
    pieceData.prix = props.piece.prix || ''
  },
)

onMounted(() => {
  pieceData.name = props.piece.name || ''
  pieceData.reference = props.piece.reference || ''
  pieceData.prix = props.piece.prix || ''
  loadProducts().catch(() => {})
  if (pieceData.productId) ensureProductLoaded(pieceData.productId)
  if (!props.piece.documents?.length) refreshDocuments()
})
</script>