<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4">
      <!-- En-tête -->
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-black mb-4">Texte au Hasard</h1>
        <p class="mb-6" style="color: #6b7280">
          Découvrez un texte choisi aléatoirement dans notre collection
        </p>
        <button
          @click="loadRandomText"
          :disabled="loading"
          class="btn-primary"
        >
          <span v-if="loading" class="flex items-center">
            <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
            Chargement...
          </span>
          <span v-else>
            Nouveau texte au hasard
          </span>
        </button>
      </div>

      <!-- Contenu du texte -->
      <div v-if="randomText && !loading">
        <!-- Navigation vers le texte complet -->
        <div class="text-center mb-6">
          <router-link
            :to="`/texte/${randomText.id}`"
            class="btn-secondary"
          >
            Voir le texte complet
          </router-link>
        </div>

        <!-- Affichage du texte -->
        <TextDisplay
          :patois-text="randomText.patoisText"
          :french-text="randomText.frenchText"
          :metadata="randomText.metadata"
        />

        <!-- Actions -->
        <div class="mt-8 flex justify-center space-x-4">
          <button
            @click="loadRandomText"
            class="btn-primary"
          >
            Autre texte au hasard
          </button>
          <router-link
            :to="`/texte/${randomText.id}`"
            class="btn-secondary"
          >
            Lire avec audio
          </router-link>
        </div>
      </div>

      <!-- Chargement -->
      <div v-if="loading" class="flex justify-center items-center py-20">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-black"></div>
      </div>

      <!-- Erreur -->
      <div v-if="error" class="text-center py-20">
        <svg class="mx-auto h-12 w-12 text-red-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
        </svg>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Erreur</h3>
        <p class="text-gray-500 mb-4">{{ error }}</p>
        <button
          @click="loadRandomText"
          class="btn-primary"
        >
          Réessayer
        </button>
      </div>

      <!-- Message si aucun texte -->
      <div v-if="!randomText && !loading && !error" class="text-center py-20">
        <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Aucun texte disponible</h3>
        <p class="text-gray-500">La collection est vide pour le moment.</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { textService } from '../services/textService.js'
import TextDisplay from '../components/TextDisplay.vue'

export default {
  name: 'Random',
  components: {
    TextDisplay
  },
  setup() {
    const randomText = ref(null)
    const loading = ref(false)
    const error = ref(null)

    const loadRandomText = async () => {
      loading.value = true
      error.value = null

      try {
        const text = await textService.getRandomText()
        randomText.value = text
      } catch (err) {
        error.value = err.message
        console.error('Erreur lors du chargement du texte aléatoire:', err)
      } finally {
        loading.value = false
      }
    }

    onMounted(() => {
      loadRandomText()
    })

    return {
      randomText,
      loading,
      error,
      loadRandomText
    }
  }
}
</script>
