<template>
  <main class="container mx-auto px-6 py-10 space-y-8">
    <header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
      <div>
        <h1 class="text-3xl font-semibold text-base-content">Catalogue des pièces</h1>
        <p class="text-sm text-gray-500">
          Consultez et gérez toutes les pièces existantes.
        </p>
      </div>
      <div class="flex flex-wrap gap-2">
        <NuxtLink to="/pieces/create" class="btn btn-primary btn-sm md:btn-md">
          Ajouter une pièce
        </NuxtLink>
        <NuxtLink to="/piece-category" class="btn btn-outline btn-sm md:btn-md">
          Gérer les catégories
        </NuxtLink>
      </div>
    </header>
    <section class="card border border-base-200 bg-base-100 shadow-sm">
      <div class="card-body space-y-4">
        <header class="flex flex-col gap-2">
          <h2 class="text-xl font-semibold text-base-content">Pièces créées</h2>
          <p class="text-sm text-base-content/70">
            Liste globale des pièces enregistrées, quel que soit leur squelette d'origine.
          </p>
        </header>

        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
          <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
            <label class="w-full sm:w-72">
              <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Recherche</span>
              <input
                v-model="searchTerm"
                type="text"
                class="input input-bordered input-sm w-full mt-1"
                placeholder="Nom, référence ou catégorie…"
              />
            </label>
            <div class="flex items-center gap-2">
              <label
                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
                for="piece-catalog-sort"
              >
                Trier par
              </label>
              <select
                id="piece-catalog-sort"
                v-model="sortField"
                class="select select-bordered select-sm"
              >
                <option value="name">Nom</option>
                <option value="createdAt">Date de création</option>
              </select>
            </div>
            <div class="flex items-center gap-2">
              <label
                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
                for="piece-catalog-dir"
              >
                Ordre
              </label>
              <select
                id="piece-catalog-dir"
                v-model="sortDirection"
                class="select select-bordered select-sm"
              >
                <option value="asc">Ascendant</option>
                <option value="desc">Descendant</option>
              </select>
            </div>
          </div>
          <p class="text-xs text-base-content/50 lg:text-right">
            {{ visiblePieces.length }} / {{ piecesTotal }} résultat{{ visiblePieces.length > 1 ? 's' : '' }}
          </p>
        </div>

        <div v-if="loadingPieces" class="flex justify-center py-8">
          <span class="loading loading-spinner" aria-hidden="true" />
        </div>

        <p v-else-if="!piecesTotal" class="text-sm text-base-content/70">
          Aucune pièce n'a encore été créée.
        </p>

        <p v-else-if="!visiblePieces.length" class="text-sm text-base-content/70">
          Aucune pièce ne correspond à votre recherche.
        </p>

        <div v-else class="overflow-x-auto">
          <table class="table table-sm md:table-md">
            <thead>
              <tr>
                <th class="w-24">Aperçu</th>
                <th>Nom</th>
                <th>Catégorie</th>
                <th>Référence</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="piece in visiblePieces" :key="piece.id">
                <td class="align-middle">
                  <DocumentThumbnail
                    :document="resolvePrimaryDocument(piece)"
                    :alt="resolvePreviewAlt(piece)"
                  />
                </td>
                <td>{{ piece.name || 'Pièce sans nom' }}</td>
                <td>{{ piece.typePiece?.name || '—' }}</td>
                <td>{{ piece.reference || '—' }}</td>
                <td>
                  <div class="flex items-center gap-2">
                    <NuxtLink
                      :to="`/pieces/${piece.id}/edit`"
                      class="btn btn-ghost btn-xs"
                    >
                      Modifier
                    </NuxtLink>
                    <button
                      type="button"
                      class="btn btn-error btn-xs"
                      :disabled="loadingPieces"
                      @click="handleDeletePiece(piece)"
                    >
                      Supprimer
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </main>

</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { usePieces } from '~/composables/usePieces'
import { useToast } from '~/composables/useToast'
import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'

const { showError } = useToast()
const { pieces, loadPieces, loading: loadingPiecesRef, deletePiece } = usePieces()
const loadingPieces = computed(() => loadingPiecesRef.value)
const piecesList = computed(() => pieces.value || [])
const piecesTotal = computed(() => piecesList.value.length)

const searchTerm = ref('')
const sortField = ref<'name' | 'createdAt'>('name')
const sortDirection = ref<'asc' | 'desc'>('asc')

const resolvePrimaryDocument = (piece: Record<string, any>) => {
  const documents = Array.isArray(piece?.documents) ? piece.documents : []
  if (!documents.length) {
    return null
  }
  const normalized = documents.filter((doc) => doc && typeof doc === 'object')
  const withPath = normalized.filter((doc) => doc?.path)

  const pdf = withPath.find((doc) => isPdfDocument(doc))
  if (pdf) {
    return pdf
  }

  const image = withPath.find((doc) => isImageDocument(doc))
  if (image) {
    return image
  }

  return withPath[0] ?? normalized[0] ?? null
}

const resolvePreviewAlt = (piece: Record<string, any>) => {
  const parts = [piece?.name, piece?.reference].filter(Boolean)
  if (parts.length) {
    return `Aperçu du document de ${parts.join(' – ')}`
  }
  return 'Aperçu du document'
}

const resolveDeleteBlockingReasons = (piece: Record<string, any>) => {
  const reasons: string[] = []
  const machineLinks = Array.isArray(piece?.machineLinks)
    ? piece.machineLinks.length
    : piece?.machineLinksCount ?? 0
  const documents = Array.isArray(piece?.documents)
    ? piece.documents.length
    : piece?.documentsCount ?? 0
  const customFields = Array.isArray(piece?.customFieldValues)
    ? piece.customFieldValues.length
    : piece?.customFieldValuesCount ?? 0

  if (machineLinks > 0) {
    reasons.push(`${machineLinks} liaison${machineLinks > 1 ? 's' : ''} machine`)
  }
  if (documents > 0) {
    reasons.push(`${documents} document${documents > 1 ? 's' : ''}`)
  }
  if (customFields > 0) {
    reasons.push(`${customFields} valeur${customFields > 1 ? 's' : ''} de champ personnalisé`)
  }
  return reasons
}

const resolveComparableName = (piece: Record<string, any>) => {
  const normalise = (value?: string | null) =>
    (value ?? '').toString().trim().toLowerCase()

  return (
    normalise(piece?.name) ||
    normalise(piece?.reference) ||
    normalise(piece?.id)
  )
}

const resolveComparableDate = (piece: Record<string, any>) => {
  const raw = piece?.createdAt ?? piece?.created_at ?? null
  if (!raw) {
    return 0
  }
  const timestamp = new Date(raw).getTime()
  return Number.isNaN(timestamp) ? 0 : timestamp
}

const visiblePieces = computed(() => {
  const term = searchTerm.value.trim().toLowerCase()
  const source = piecesList.value || []

  const filtered = term
    ? source.filter((piece) => {
        const name = (piece?.name || '').toLowerCase()
        const reference = (piece?.reference || '').toLowerCase()
        const category = (piece?.typePiece?.name || '').toLowerCase()
        return (
          name.includes(term) ||
          reference.includes(term) ||
          category.includes(term)
        )
      })
    : [...source]

  const direction = sortDirection.value === 'asc' ? 1 : -1

  return filtered.sort((a, b) => {
    if (sortField.value === 'name') {
      return (
        resolveComparableName(a).localeCompare(
          resolveComparableName(b),
          'fr',
          { sensitivity: 'base' }
        ) * direction
      )
    }

    return (resolveComparableDate(a) - resolveComparableDate(b)) * direction
  })
})

const handleDeletePiece = async (piece: Record<string, any>) => {
  const blockingReasons = resolveDeleteBlockingReasons(piece)

  if (blockingReasons.length) {
    showError(
      `Impossible de supprimer cette pièce car elle possède encore: ${blockingReasons.join(
        ', ',
      )}. Supprimez ou détachez ces éléments avant de réessayer.`
    )
    return
  }

  const pieceName = piece?.name || 'cette pièce'
  const confirmed = window.confirm(`Voulez-vous vraiment supprimer ${pieceName} ?`)
  if (!confirmed) {
    return
  }

  await deletePiece(piece.id)
}

onMounted(async () => {
  await loadPieces()
})
</script>
