<template>
  <div class="flex-shrink-0 border-b border-amber-500/40 bg-amber-500/10">
    <!-- En-tête -->
    <div class="flex items-center justify-between px-4 py-2">
      <div class="flex items-center gap-2 text-sm">
        <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        <span v-if="diff.summary.total === 0" class="font-medium text-amber-300">
          Nouvelle extraction — aucune différence avec la version précédente
        </span>
        <span v-else class="font-medium text-amber-300">
          Nouvelle extraction — {{ diff.summary.total }} différence{{ diff.summary.total > 1 ? 's' : '' }}
          <span class="text-amber-400/80 font-normal">
            ({{ diff.summary.metadata }} métadonnée{{ diff.summary.metadata > 1 ? 's' : '' }},
            {{ diff.summary.locataires }} locataire{{ diff.summary.locataires > 1 ? 's' : '' }},
            {{ diff.summary.operations }} opération{{ diff.summary.operations > 1 ? 's' : '' }})
          </span>
        </span>
      </div>
      <div class="flex items-center gap-2">
        <button
          @click="$emit('revert')"
          class="px-2 py-1 text-xs text-amber-300 hover:text-amber-100 hover:bg-amber-500/20 rounded transition-colors"
          title="Restaurer les données d'avant la re-extraction"
        >
          Revenir à la version précédente
        </button>
        <button
          v-if="diff.summary.total > 0"
          @click="open = !open"
          class="px-2 py-1 text-xs text-amber-300 hover:text-amber-100 hover:bg-amber-500/20 rounded transition-colors"
        >
          {{ open ? 'Masquer le détail' : 'Voir le détail' }}
        </button>
        <button
          @click="$emit('close')"
          class="p-1 text-amber-400 hover:text-amber-200 hover:bg-amber-500/20 rounded transition-colors"
          title="Fermer"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Détail -->
    <div v-if="open && diff.summary.total > 0" class="max-h-56 overflow-auto px-4 pb-3">
      <ExtractionDiffDetails :diff="diff" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ExtractionDiffDetails from './ExtractionDiffDetails.vue'

defineProps({
  diff: {
    type: Object,
    required: true,
  },
})

defineEmits(['revert', 'close'])

const open = ref(true)
</script>
