<template>
  <div class="space-y-4">
    <div class="flex flex-wrap items-center gap-2 text-sm text-gray-600">
      <span v-if="stats.customFields" class="badge badge-outline badge-sm">{{ stats.customFields }} champ(s)</span>
      <span v-if="stats.pieces" class="badge badge-outline badge-sm">{{ stats.pieces }} pièce(s)</span>
      <span v-if="stats.subComponents" class="badge badge-outline badge-sm">{{ stats.subComponents }} sous-composant(s)</span>
      <span v-if="!stats.customFields && !stats.pieces && !stats.subComponents" class="text-xs text-gray-500">
        Structure vide
      </span>
    </div>

    <details class="collapse collapse-arrow bg-base-200">
      <summary class="collapse-title text-sm font-medium">
        Voir la structure JSON
      </summary>
      <div class="collapse-content">
        <pre class="mockup-code whitespace-pre-wrap text-xs bg-base-300 p-4 rounded">
<code>{{ formatted }}</code>
        </pre>
      </div>
    </details>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { computeStructureStats } from '~/shared/modelUtils'

const props = defineProps({
  structure: {
    type: Object,
    default: () => ({})
  }
})

const stats = computed(() => computeStructureStats(props.structure))
const formatted = computed(() => JSON.stringify(props.structure ?? {}, null, 2))
</script>
