<template>
  <div class="h-full flex flex-col bg-gray-950 overflow-hidden">
    <!-- Header -->
    <div class="flex-shrink-0 flex items-center justify-between px-4 py-2 bg-gray-900 border-b border-gray-700">
      <span class="card-title">Donnees extraites</span>
      <div class="flex items-center gap-2">
        <button
          v-if="data"
          @click="expandAll"
          class="btn btn-sm btn-ghost"
        >
          Tout deplier
        </button>
        <button
          v-if="data"
          @click="collapseAll"
          class="btn btn-sm btn-ghost"
        >
          Tout replier
        </button>
        <button
          v-if="data"
          @click="copyJson"
          class="btn btn-sm btn-ghost"
        >
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
          </svg>
          {{ copyLabel }}
        </button>
      </div>
    </div>

    <!-- Content -->
    <div class="flex-1 overflow-auto custom-scrollbar">
      <!-- Loading state -->
      <div v-if="isLoading" class="flex flex-col items-center justify-center h-full text-gray-500">
        <svg class="animate-spin h-10 w-10 mb-3 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <p class="text-sm font-medium">Extraction en cours...</p>
      </div>
      
      <!-- Empty state -->
      <div v-else-if="!data" class="flex flex-col items-center justify-center h-full text-gray-500 p-8">
        <svg class="w-16 h-16 mb-3 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        <p class="text-sm">En attente de l'extraction...</p>
      </div>
      
      <!-- Structured data view -->
      <div v-else class="p-4 space-y-3">
        <!-- Source file -->
        <div class="text-xs text-gray-500 mb-4">
          Fichier: <span class="font-medium text-gray-300">{{ data.source_file }}</span>
        </div>

        <!-- Metadata Section -->
        <DataSection 
          title="Metadata" 
          :expanded="expandedSections.metadata"
          @toggle="toggleSection('metadata')"
        >
          <!-- Les fiches metadata se repartissent sur la largeur disponible -->
          <div class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-3">
            <!-- Editeur -->
            <DataCard title="Editeur" icon="building">
              <DataRow label="Nom" :value="data.data?.metadata?.editeur?.nom" @update:value="updateMetadata('editeur.nom', $event)" />
              <DataRow label="Adresse" :value="data.data?.metadata?.editeur?.adresse" @update:value="updateMetadata('editeur.adresse', $event)" />
              <DataRow label="Telephone" :value="data.data?.metadata?.editeur?.telephone" @update:value="updateMetadata('editeur.telephone', $event)" />
              <DataRow label="SIRET" :value="data.data?.metadata?.editeur?.siret" @update:value="updateMetadata('editeur.siret', $event)" />
            </DataCard>

            <!-- Destinataire -->
            <DataCard title="Destinataire" icon="user">
              <DataRow label="Nom" :value="data.data?.metadata?.destinataire?.nom" @update:value="updateMetadata('destinataire.nom', $event)" />
              <DataRow label="Adresse" :value="data.data?.metadata?.destinataire?.adresse" @update:value="updateMetadata('destinataire.adresse', $event)" />
            </DataCard>

            <!-- Document -->
            <DataCard title="Document" icon="document">
              <DataRow label="Reference" :value="data.data?.metadata?.document?.reference" @update:value="updateMetadata('document.reference', $event)" />
              <DataRow label="Date" :value="data.data?.metadata?.document?.date" type="date" @update:value="updateMetadata('document.date', $event)" />
              <DataRow label="Type" :value="data.data?.metadata?.document?.type" @update:value="updateMetadata('document.type', $event)" />
            </DataCard>

            <!-- Immeuble -->
            <DataCard title="Immeuble" icon="home">
              <DataRow label="Code" :value="data.data?.metadata?.immeuble?.code" @update:value="updateMetadata('immeuble.code', $event)" />
              <DataRow label="Adresse" :value="data.data?.metadata?.immeuble?.adresse" @update:value="updateMetadata('immeuble.adresse', $event)" />
              <DataRow label="Ville" :value="data.data?.metadata?.immeuble?.ville" @update:value="updateMetadata('immeuble.ville', $event)" />
              <DataRow label="Code postal" :value="data.data?.metadata?.immeuble?.code_postal" @update:value="updateMetadata('immeuble.code_postal', $event)" />
            </DataCard>

            <!-- Solde -->
            <DataCard title="Solde" icon="currency">
              <DataRow label="Montant" :value="data.data?.metadata?.solde?.montant" type="currency" highlight @update:value="updateMetadata('solde.montant', $event)" />
              <DataRow label="Type" :value="data.data?.metadata?.solde?.type" @update:value="updateMetadata('solde.type', $event)" />
              <DataRow label="Date arrete" :value="data.data?.metadata?.solde?.date_arrete" type="date" @update:value="updateMetadata('solde.date_arrete', $event)" />
            </DataCard>
          </div>
        </DataSection>

        <!-- Situation Locataires Section -->
        <DataSection 
          title="Situation des locataires" 
          :count="data.data?.situation_locataires?.length"
          :expanded="expandedSections.locataires"
          @toggle="toggleSection('locataires')"
        >
          <div class="space-y-2">
            <LocataireCard
              v-for="(loc, idx) in data.data?.situation_locataires"
              :key="idx"
              :locataire="loc"
              :index="idx"
              :highlighted="highlightedLocataireIndex === idx"
              :changed="changedLocataireSet.has(idx)"
              @update:locataire="updateLocataire(idx, $event)"
              @remove="removeLocataire(idx)"
            />
            
            <!-- Bouton ajouter locataire -->
            <button
              @click="addLocataire"
              class="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm text-blue-400 hover:bg-blue-500/10 border border-dashed border-blue-500/40 rounded-lg transition-colors"
            >
              <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="M12 4v16m8-8H4" />
              </svg>
              Ajouter un locataire
            </button>
          </div>
        </DataSection>

        <!-- Recapitulatif Operations Section -->
        <DataSection 
          title="Recapitulatif des operations" 
          :count="data.data?.recapitulatif_operations?.length"
          :expanded="expandedSections.operations"
          @toggle="toggleSection('operations')"
        >
          <div class="space-y-2">
            <OperationCard
              v-for="(group, idx) in operationsGroupedByCategory"
              :key="idx"
              :categorie="group.categorie"
              :operations="group.operations"
              :highlightIndex="group.categorie === highlightOperationCategorie ? highlightOperationIndex : -1"
              :changedIndices="changedOpByCategorie[group.categorie] || []"
              @update:operations="updateOperationsGroup(group.categorie, $event)"
            />
            
            <!-- Bouton ajouter operation -->
            <button
              @click="addOperation"
              class="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm text-blue-400 hover:bg-blue-500/10 border border-dashed border-blue-500/40 rounded-lg transition-colors"
            >
              <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="M12 4v16m8-8H4" />
              </svg>
              Ajouter une operation
            </button>
          </div>
        </DataSection>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import DataSection from './DataSection.vue'
import DataCard from './DataCard.vue'
import DataRow from './DataRow.vue'
import LocataireCard from './LocataireCard.vue'
import OperationCard from './OperationCard.vue'

const props = defineProps({
  data: {
    type: Object,
    default: null
  },
  isLoading: {
    type: Boolean,
    default: false
  },
  highlight: {
    type: Object,
    default: null
  },
  diff: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:data'])

// Grouper les operations par categorie pour l'affichage
const operationsGroupedByCategory = computed(() => {
  const operations = props.data?.data?.recapitulatif_operations
  if (!operations || !Array.isArray(operations)) return []
  
  // Grouper par categorie en preservant l'ordre d'apparition
  const groups = []
  const categoryIndex = {}
  
  for (const op of operations) {
    const cat = op.categorie || 'AUTRES'
    if (!(cat in categoryIndex)) {
      categoryIndex[cat] = groups.length
      groups.push({ categorie: cat, operations: [] })
    }
    groups[categoryIndex[cat]].operations.push(op)
  }
  
  return groups
})

// Indices de locataires modifiés par la re-extraction (anneau « modifié »).
const changedLocataireSet = computed(
  () => new Set(props.diff?.changedLocataireIndices || [])
)

// Indices d'opérations modifiées, ramenés au repère (catégorie, index dans le groupe).
const changedOpByCategorie = computed(() => {
  const result = {}
  const operations = props.data?.data?.recapitulatif_operations
  const changed = new Set(props.diff?.changedOperationIndices || [])
  if (!operations || !changed.size) return result
  const counters = {}
  operations.forEach((op, absIdx) => {
    const cat = op.categorie || 'AUTRES'
    if (!(cat in counters)) counters[cat] = 0
    if (changed.has(absIdx)) {
      if (!result[cat]) result[cat] = []
      result[cat].push(counters[cat])
    }
    counters[cat]++
  })
  return result
})

const copyLabel = ref('Copier')
const expandedSections = reactive({
  metadata: true,
  locataires: true,
  operations: false
})

// Highlight state
const highlightedLocataireIndex = ref(-1)
const highlightOperationCategorie = ref(null)
const highlightOperationIndex = ref(-1)

watch(
  () => [props.data, props.highlight],
  ([data, highlight]) => {
    if (!data || !highlight) return

    if (highlight.type === 'locataire') {
      const locataires = data.data?.situation_locataires
      if (!locataires) return
      const idx = locataires.findIndex(
        loc => loc.lot?.numero === highlight.lot_numero && loc.locataire?.nom === highlight.locataire_nom
      )
      if (idx >= 0) {
        expandedSections.locataires = true
        highlightedLocataireIndex.value = idx
      }
    }

    if (highlight.type === 'operation') {
      const operations = data.data?.recapitulatif_operations
      if (!operations) return
      // Find the matching operation and determine its category + index within that category group
      let targetCategorie = null
      let indexInGroup = -1
      const categoryCounters = {}
      for (const op of operations) {
        const cat = op.categorie || 'AUTRES'
        if (!(cat in categoryCounters)) categoryCounters[cat] = 0
        if (op.fournisseur === highlight.fournisseur && op.description === highlight.description) {
          targetCategorie = cat
          indexInGroup = categoryCounters[cat]
          break
        }
        categoryCounters[cat]++
      }
      if (targetCategorie !== null) {
        expandedSections.operations = true
        highlightOperationCategorie.value = targetCategorie
        highlightOperationIndex.value = indexInGroup
      }
    }
  },
  { immediate: true }
)

// Déplier automatiquement les sections qui contiennent des différences.
watch(
  () => props.diff,
  (diff) => {
    if (!diff) return
    if (diff.summary?.metadata) expandedSections.metadata = true
    if (diff.summary?.locataires) expandedSections.locataires = true
    if (diff.summary?.operations) expandedSections.operations = true
  }
)

function toggleSection(section) {
  expandedSections[section] = !expandedSections[section]
}

function expandAll() {
  expandedSections.metadata = true
  expandedSections.locataires = true
  expandedSections.operations = true
}

function collapseAll() {
  expandedSections.metadata = false
  expandedSections.locataires = false
  expandedSections.operations = false
}

async function copyJson() {
  if (!props.data) return
  
  try {
    await navigator.clipboard.writeText(JSON.stringify(props.data, null, 2))
    copyLabel.value = 'Copie!'
    setTimeout(() => {
      copyLabel.value = 'Copier'
    }, 2000)
  } catch (error) {
    console.error('Failed to copy:', error)
  }
}

// ===== FONCTIONS DE MISE A JOUR =====

// Helper pour creer une copie profonde des donnees
function cloneData() {
  return JSON.parse(JSON.stringify(props.data))
}

// Helper pour setter une valeur nested
function setNestedValue(obj, path, value) {
  const parts = path.split('.')
  let current = obj
  for (let i = 0; i < parts.length - 1; i++) {
    if (!current[parts[i]]) {
      current[parts[i]] = {}
    }
    current = current[parts[i]]
  }
  current[parts[parts.length - 1]] = value
}

// Mettre a jour les metadonnees
function updateMetadata(path, value) {
  const updated = cloneData()
  if (!updated.data) updated.data = {}
  if (!updated.data.metadata) updated.data.metadata = {}
  
  setNestedValue(updated.data.metadata, path, value)
  emit('update:data', updated)
}

// Mettre a jour un locataire
function updateLocataire(index, locataire) {
  const updated = cloneData()
  if (!updated.data) updated.data = {}
  if (!updated.data.situation_locataires) updated.data.situation_locataires = []
  
  updated.data.situation_locataires[index] = locataire
  emit('update:data', updated)
}

// Ajouter un locataire
function addLocataire() {
  const updated = cloneData()
  if (!updated.data) updated.data = {}
  if (!updated.data.situation_locataires) updated.data.situation_locataires = []
  
  updated.data.situation_locataires.push({
    lot: {
      numero: '',
      type: ''
    },
    locataire: {
      nom: 'Nouveau locataire'
    },
    lignes: [],
    totaux: {
      solde_anterieur: 0,
      loyers: 0,
      taxes: 0,
      provisions: 0,
      divers: 0,
      total: 0,
      regles: 0,
      impayes: 0
    }
  })
  
  emit('update:data', updated)
}

// Supprimer un locataire
function removeLocataire(index) {
  const updated = cloneData()
  updated.data.situation_locataires.splice(index, 1)
  emit('update:data', updated)
}

// Mettre a jour un groupe d'operations (par categorie)
function updateOperationsGroup(categorie, updatedGroupOperations) {
  const updated = cloneData()
  if (!updated.data) updated.data = {}
  if (!updated.data.recapitulatif_operations) updated.data.recapitulatif_operations = []
  
  // Reconstruire la liste en preservant l'ordre original
  const newOperations = []
  let updatedIndex = 0
  
  // Parcourir les operations originales et remplacer celles de la categorie modifiee
  for (const op of updated.data.recapitulatif_operations) {
    if (op.categorie === categorie) {
      // Remplacer par les operations mises a jour (dans l'ordre)
      if (updatedIndex < updatedGroupOperations.length) {
        newOperations.push(updatedGroupOperations[updatedIndex])
        updatedIndex++
      }
      // Si on a supprime des operations, on ne les ajoute pas
    } else {
      // Garder les operations des autres categories telles quelles
      newOperations.push(op)
    }
  }
  
  // Ajouter les nouvelles operations si on en a ajoute
  while (updatedIndex < updatedGroupOperations.length) {
    newOperations.push(updatedGroupOperations[updatedIndex])
    updatedIndex++
  }
  
  updated.data.recapitulatif_operations = newOperations
  emit('update:data', updated)
}

// Ajouter une operation
function addOperation() {
  const updated = cloneData()
  if (!updated.data) updated.data = {}
  if (!updated.data.recapitulatif_operations) updated.data.recapitulatif_operations = []
  
  updated.data.recapitulatif_operations.push({
    categorie: 'AUTRES',
    sous_categorie: null,
    fournisseur: 'Nouveau fournisseur',
    description: null,
    lot_concerne: null,
    lot_numero: null,
    montants: {
      debit: 0,
      credit: 0,
      tva: 0,
      locatif: 0,
      deductible: 0
    }
  })
  
  emit('update:data', updated)
}
</script>
