<template>
  <div class="border border-gray-200 rounded-lg p-4">
    <DocumentPreviewModal
      :document="previewDocument"
      :visible="previewVisible"
      @close="closePreview"
    />

    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center gap-2">
        <IconLucidePackage class="w-4 h-4 text-purple-500" aria-hidden="true" />
        <input
          v-if="isEditMode"
          :id="`piece-name-${piece.id}`"
          v-model="pieceData.name"
          type="text"
          class="font-semibold text-lg input input-sm input-bordered"
          @blur="updatePiece"
        />
        <div
          v-else
          class="font-semibold text-lg input input-sm input-bordered bg-base-200"
        >
          {{ pieceData.name }}
        </div>
      </div>
      <div class="flex flex-wrap items-center gap-2 text-xs">
        <span
          v-if="piece.skeletonOnly"
          class="badge badge-warning badge-sm"
        >
          Défini dans le catalogue
        </span>
        <span
          v-if="piece.typeMachinePieceRequirement"
          class="badge badge-outline badge-sm"
        >
          Groupe :
          {{
            piece.typeMachinePieceRequirement.label ||
            piece.typeMachinePieceRequirement.typePiece?.name ||
            "Non défini"
          }}
        </span>
        <span
          v-if="piece.parentComponentName"
          class="badge badge-ghost badge-sm"
        >
          Rattachée à {{ piece.parentComponentName }}
        </span>
        <span
          v-if="displayProductName"
          class="badge badge-info badge-sm"
        >
          Produit&nbsp;: {{ displayProductName }}
        </span>
      </div>
    </div>

    <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-gray-500"
              >
                {{ 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>
            <div
              v-if="productDocuments.length"
              class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
            >
              <h5 class="font-medium text-base-content">Documents du produit</h5>
              <div
                v-for="document in productDocuments"
                :key="document.id || document.path || document.name"
                class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
              >
                <div class="flex items-center gap-3">
                  <div
                    class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-10 w-8"
                  >
                    <img
                      v-if="isImageDocument(document) && document.path"
                      :src="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-5 w-5"
                      :class="documentIcon(document).colorClass"
                      aria-hidden="true"
                    />
                  </div>
                  <div>
                    <div class="font-medium text-base-content">
                      {{ document.name }}
                    </div>
                    <div class="text-xs text-base-content/70">
                      {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
                    </div>
                  </div>
                </div>
                <div class="flex items-center gap-2 text-xs">
                  <button
                    type="button"
                    class="btn btn-ghost btn-xs"
                    :disabled="!canPreviewDocument(document)"
                    :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
                    @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>
          <span v-else class="font-medium">
            Non défini
          </span>
        </div>
      </div>
    </div>

    <!-- Champs personnalisés de la pièce -->
    <div
      v-if="displayedCustomFields.length"
      class="mt-4 pt-4 border-t border-gray-200"
    >
      <h5 class="text-sm font-medium text-gray-700 mb-3">
        Champs personnalisés
      </h5>
      <div class="space-y-3">
        <div
          v-for="(field, index) in displayedCustomFields"
          :key="resolveFieldKey(field, index)"
          class="form-control"
        >
          <label class="label">
            <span class="label-text text-sm">{{
              resolveFieldName(field)
            }}</span>
            <span
              v-if="resolveFieldRequired(field)"
              class="label-text-alt text-error"
              >*</span
            >
          </label>

          <!-- Mode édition -->
          <template v-if="isEditMode && !resolveFieldReadOnly(field)">
            <!-- Champ de type TEXT -->
            <input
              v-if="resolveFieldType(field) === 'text'"
              :value="field.value ?? ''"
              type="text"
              class="input input-bordered input-sm"
              :required="resolveFieldRequired(field)"
              @input="
                setCustomFieldValue(
                  resolveFieldId(field),
                  $event.target.value,
                  field
                )
              "
              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
            />

            <!-- Champ de type NUMBER -->
            <input
              v-else-if="resolveFieldType(field) === 'number'"
              :value="field.value ?? ''"
              type="number"
              class="input input-bordered input-sm"
              :required="resolveFieldRequired(field)"
              @input="
                setCustomFieldValue(
                  resolveFieldId(field),
                  $event.target.value,
                  field
                )
              "
              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
            />

            <!-- Champ de type SELECT -->
            <select
              v-else-if="resolveFieldType(field) === 'select'"
              :value="field.value ?? ''"
              class="select select-bordered select-sm"
              :required="resolveFieldRequired(field)"
              @change="
                (event) =>
                  setCustomFieldValue(
                    resolveFieldId(field),
                    event.target.value,
                    field
                  )
              "
              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
            >
              <option value="">Sélectionner...</option>
              <option
                v-for="option in resolveFieldOptions(field)"
                :key="option"
                :value="option"
              >
                {{ option }}
              </option>
            </select>

            <!-- Champ de type BOOLEAN -->
            <div
              v-else-if="resolveFieldType(field) === 'boolean'"
              class="flex items-center gap-2"
            >
              <input
                :value="field.value ?? ''"
                type="checkbox"
                class="checkbox checkbox-sm"
                :checked="String(field.value).toLowerCase() === 'true'"
                @change="
                  setCustomFieldValue(
                    resolveFieldId(field),
                    $event.target.checked ? 'true' : 'false',
                    field
                  )
                "
                @blur="updateCustomFieldValue(resolveFieldId(field), field)"
              />
              <span class="text-sm">{{
                String(field.value).toLowerCase() === "true" ? "Oui" : "Non"
              }}</span>
            </div>

            <!-- Champ de type DATE -->
            <input
              v-else-if="resolveFieldType(field) === 'date'"
              :value="field.value ?? ''"
              type="date"
              class="input input-bordered input-sm"
              :required="resolveFieldRequired(field)"
              @input="
                setCustomFieldValue(
                  resolveFieldId(field),
                  $event.target.value,
                  field
                )
              "
              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
            />
          </template>

          <!-- Mode lecture seule -->
          <template v-else>
            <div class="input input-bordered input-sm bg-base-200">
              {{ formatFieldDisplayValue(field) }}
            </div>
          </template>
        </div>
      </div>
    </div>

    <div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
      <div class="flex items-center justify-between">
        <h5 class="text-sm font-medium text-gray-700">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-gray-500">
        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"
      />

      <div v-if="pieceDocuments.length" class="space-y-2">
        <div
          v-for="document in pieceDocuments"
          :key="document.id"
          class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
        >
          <div class="flex items-center gap-3 text-sm">
            <div
              class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
              :class="documentThumbnailClass(document)"
            >
              <img
                v-if="isImageDocument(document) && document.path"
                :src="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-6 w-6"
                :class="documentIcon(document).colorClass"
                aria-hidden="true"
              />
            </div>
            <div>
              <div class="font-medium">
                {{ document.name }}
              </div>
              <div class="text-xs text-gray-500">
                {{ document.mimeType || "Inconnu" }} •
                {{ formatSize(document.size) }}
              </div>
            </div>
          </div>
          <div class="flex items-center gap-2">
            <button
              type="button"
              class="btn btn-ghost btn-xs"
              :disabled="!canPreviewDocument(document)"
              :title="
                canPreviewDocument(document)
                  ? 'Consulter le document'
                  : 'Aucun aperçu disponible pour ce type'
              "
              @click="openPreview(document)"
            >
              Consulter
            </button>
            <button
              type="button"
              class="btn btn-ghost btn-xs"
              @click="downloadDocument(document)"
            >
              Télécharger
            </button>
            <button
              v-if="isEditMode"
              type="button"
              class="btn btn-error btn-xs"
              :disabled="uploadingDocuments"
              @click="removeDocument(document.id)"
            >
              Supprimer
            </button>
          </div>
        </div>
      </div>
      <p v-else-if="!loadingDocuments" class="text-xs text-gray-500">
        Aucun document lié à cette pièce.
      </p>
    </div>
  </div>
</template>

<script setup>
import { reactive, 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 IconLucidePackage from '~icons/lucide/package'
import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
import { useConstructeurs } from '~/composables/useConstructeurs'
import { useProducts } from '~/composables/useProducts'
import {
  formatConstructeurContact as formatConstructeurContactSummary,
  resolveConstructeurs,
  uniqueConstructeurIds,
} from '~/shared/constructeurUtils'
import {
  formatSize,
  shouldInlinePdf,
  documentPreviewSrc,
  documentThumbnailClass,
  documentIcon,
  downloadDocument,
} from '~/shared/utils/documentDisplayUtils'
import {
  resolveFieldKey,
  resolveFieldId,
  resolveFieldName,
  resolveFieldType,
  resolveFieldOptions,
  resolveFieldRequired,
  resolveFieldReadOnly,
  formatFieldDisplayValue,
} 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 },
})

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

// --- 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' })

// --- 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 local helpers ---
const setCustomFieldValue = (fieldValueId, value, field) => {
  if (resolveFieldReadOnly(field)) return
  if (field && typeof field === 'object') field.value = value
  if (!fieldValueId) return
  const fieldValue = props.piece.customFieldValues?.find((fv) => fv.id === fieldValueId)
  if (fieldValue) fieldValue.value = value
}

const updateCustomFieldValue = async (_fieldValueId, 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>
