<template>
  <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
    <!-- En-tête avec les titres -->
    <div class="grid grid-cols-2 gap-8 mb-6 pb-4 border-b border-gray-200">
      <div class="text-center">
        <h3 class="text-xl font-semibold text-gray-900">Patois Franco-Provençal</h3>
        <p class="text-sm mt-1" style="color: #6b7280">{{ metadata?.titre_pt || 'Texte en patois' }}</p>
      </div>
      <div class="text-center">
        <h3 class="text-xl font-semibold text-gray-900">Français</h3>
        <p class="text-sm mt-1" style="color: #6b7280">{{ metadata?.titre_fr || 'Texte en français' }}</p>
      </div>
    </div>

    <!-- Contenu des textes alignés -->
    <div class="grid grid-cols-2 gap-8">
      <!-- Colonne Patois -->
      <div class="space-y-3">
        <div
          v-for="(line, index) in patoisLines"
          :key="`patois-${index}`"
          class="text-patois py-2 px-3 rounded hover:bg-gray-50 transition-colors cursor-pointer"
          :class="{ 'bg-yellow-50 border-l-4 border-yellow-400': highlightedLine === index }"
          @click="highlightLine(index)"
        >
          {{ line }}
        </div>
      </div>

      <!-- Colonne Français -->
      <div class="space-y-3">
        <div
          v-for="(line, index) in frenchLines"
          :key="`french-${index}`"
          class="text-french py-2 px-3 rounded hover:bg-gray-50 transition-colors cursor-pointer"
          :class="{ 'bg-yellow-50 border-l-4 border-yellow-400': highlightedLine === index }"
          @click="highlightLine(index)"
        >
          {{ line }}
        </div>
      </div>
    </div>

    <!-- Informations supplémentaires -->
    <div v-if="metadata" class="mt-8 pt-6 border-t border-gray-200">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
        <div v-if="metadata.auteur" class="flex items-center space-x-2">
          <span class="font-medium" style="color: #6b7280">Auteur:</span>
          <span style="color: #6b7280">{{ metadata.auteur }}</span>
        </div>
        <div v-if="metadata.traducteur" class="flex items-center space-x-2">
          <span class="font-medium" style="color: #6b7280">Traducteur:</span>
          <span style="color: #6b7280">{{ metadata.traducteur }}</span>
        </div>
        <div v-if="metadata.categorie" class="flex items-center space-x-2">
          <span class="font-medium" style="color: #6b7280">Catégorie:</span>
          <span style="color: #6b7280">{{ metadata.categorie }}</span>
        </div>
        <div v-if="metadata.difficulte" class="flex items-center space-x-2">
          <span class="font-medium" style="color: #6b7280">Difficulté:</span>
          <span class="px-2 py-1 rounded-full text-xs" :class="getDifficultyClass(metadata.difficulte)">
            {{ metadata.difficulte }}
          </span>
        </div>
        <div v-if="metadata.date_creation" class="flex items-center space-x-2">
          <span class="font-medium" style="color: #6b7280">Date:</span>
          <span style="color: #6b7280">{{ formatDate(metadata.date_creation) }}</span>
        </div>
      </div>
    </div>

    <!-- Actions -->
    <div class="mt-6 flex justify-center space-x-4">
      <button
        @click="copyPatoisText"
        class="btn-secondary text-sm"
      >
        Copier le texte patois
      </button>
      <button
        @click="copyFrenchText"
        class="btn-secondary text-sm"
      >
        Copier le texte français
      </button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'TextDisplay',
  props: {
    patoisText: {
      type: String,
      default: ''
    },
    frenchText: {
      type: String,
      default: ''
    },
    metadata: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const highlightedLine = ref(null)

    // Diviser les textes en lignes
    const patoisLines = computed(() => {
      return props.patoisText
        .split('\n')
        .map(line => line.trim())
        .filter(line => line.length > 0)
    })

    const frenchLines = computed(() => {
      return props.frenchText
        .split('\n')
        .map(line => line.trim())
        .filter(line => line.length > 0)
    })

    // Fonctions utilitaires
    const highlightLine = (index) => {
      highlightedLine.value = highlightedLine.value === index ? null : index
    }

    const getDifficultyClass = (difficulty) => {
      switch (difficulty?.toLowerCase()) {
        case 'facile':
          return 'bg-green-100 text-green-800'
        case 'moyen':
        case 'moyenne':
          return 'bg-yellow-100 text-yellow-800'
        case 'difficile':
          return 'bg-red-100 text-red-800'
        default:
          return 'bg-gray-100 text-gray-800'
      }
    }

    const formatDate = (dateString) => {
      try {
        const date = new Date(dateString)
        return date.toLocaleDateString('fr-FR')
      } catch {
        return dateString
      }
    }

    const copyPatoisText = async () => {
      try {
        await navigator.clipboard.writeText(props.patoisText)
        // Ici vous pourriez ajouter une notification de succès
      } catch (err) {
        console.error('Erreur lors de la copie:', err)
      }
    }

    const copyFrenchText = async () => {
      try {
        await navigator.clipboard.writeText(props.frenchText)
        // Ici vous pourriez ajouter une notification de succès
      } catch (err) {
        console.error('Erreur lors de la copie:', err)
      }
    }

    return {
      highlightedLine,
      patoisLines,
      frenchLines,
      highlightLine,
      getDifficultyClass,
      formatDate,
      copyPatoisText,
      copyFrenchText
    }
  }
}
</script>

<style scoped>
/* Assurer que les lignes correspondent visuellement */
.text-patois,
.text-french {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}
</style>
