<template>
  <div class="card bg-base-100 shadow-lg">
    <div class="card-body space-y-4">
      <div class="flex items-center justify-between">
        <div>
          <h2 class="card-title">Produits associés</h2>
          <p class="text-xs text-gray-500">
            Produits sélectionnés directement pour cette machine selon le squelette.
          </p>
        </div>
        <span class="badge badge-outline" v-if="products.length">
          {{ products.length }} produit{{ products.length > 1 ? 's' : '' }}
        </span>
      </div>

      <div v-if="products.length" class="space-y-3">
        <div
          v-for="product in products"
          :key="product.id || product.name"
          class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-1"
        >
          <div class="flex items-center justify-between flex-wrap gap-2">
            <p class="font-semibold text-base-content">
              {{ product.name }}
            </p>
            <span class="badge badge-ghost badge-sm">
              {{ product.groupLabel }}
            </span>
          </div>
          <p v-if="product.reference" class="text-xs text-base-content/70">
            <span class="font-medium">Référence :</span>
            <span class="ml-1">{{ product.reference }}</span>
          </p>
          <p v-if="product.supplierLabel" class="text-xs text-base-content/70">
            <span class="font-medium">Fournisseurs :</span>
            <span class="ml-1">{{ product.supplierLabel }}</span>
          </p>
          <p v-if="product.priceLabel" class="text-xs text-base-content/70">
            <span class="font-medium">Prix indicatif :</span>
            <span class="ml-1">{{ product.priceLabel }}</span>
          </p>
        </div>
      </div>
      <p v-else class="text-xs text-gray-500">
        Aucun produit n'a été associé directement à cette machine.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  products: Array<{
    id?: string | null
    name?: string
    reference?: string | null
    supplierLabel?: string | null
    priceLabel?: string | null
    groupLabel?: string
  }>
}>()
</script>
