<template>
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body">
      <div class="flex justify-between items-center mb-4">
        <h2 class="card-title">
          Pièces de la machine
          <span v-if="pieces.length" class="badge badge-outline badge-sm ml-1">{{ pieces.length }}</span>
        </h2>
        <button
          type="button"
          class="btn btn-ghost btn-sm gap-2"
          @click="$emit('toggle-collapse')"
          :title="collapsed ? 'Déplier toutes les pièces' : 'Replier toutes les pièces'"
        >
          <IconLucideChevronRight
            class="w-5 h-5 transition-transform"
            :class="collapsed ? 'rotate-0' : 'rotate-90'"
            aria-hidden="true"
          />
          <span class="text-sm">
            {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
          </span>
        </button>
      </div>

      <div v-if="pieces.length === 0" class="text-sm text-gray-500 py-4">
        Aucune pièce associée à cette machine.
      </div>

      <div v-else class="space-y-2">
        <div v-for="piece in pieces" :key="piece.id">
          <PieceItem
            :piece="piece"
            :is-edit-mode="isEditMode"
            :show-delete="isEditMode"
            :collapse-all="collapsed"
            :toggle-token="collapseToggleToken"
            @update="$emit('update-piece', $event)"
            @edit="$emit('edit-piece', $event)"
            @custom-field-update="$emit('custom-field-update', $event)"
            @delete="$emit('remove-piece', piece.linkId || piece.id)"
            @fill-entity="(linkId, typeId) => $emit('fill-entity', linkId, typeId)"
          />
        </div>
      </div>

      <button
        v-if="isEditMode"
        type="button"
        class="btn btn-sm md:btn-md btn-primary"
        @click="$emit('add-piece')"
      >
        Ajouter une pièce
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import IconLucideChevronRight from '~icons/lucide/chevron-right'

defineProps<{
  pieces: any[]
  isEditMode: boolean
  collapsed: boolean
  collapseToggleToken: number
}>()

defineEmits<{
  'toggle-collapse': []
  'update-piece': [piece: any]
  'edit-piece': [piece: any]
  'custom-field-update': [fieldUpdate: any]
  'add-piece': []
  'remove-piece': [linkId: string]
  'fill-entity': [linkId: string, modelTypeId: string]
}>()
</script>
