<template>
  <div class="max-w-4xl mx-auto px-4 py-8">
    <!-- Header -->
    <div class="text-center mb-8">
      <h1 class="text-4xl font-bold text-gray-900 mb-4">Informations</h1>
      <p class="text-lg text-gray-600">Restez informés des dernières nouvelles de LeDiscord</p>
    </div>

    <!-- Category Filter -->
    <div class="flex flex-wrap gap-2 justify-center mb-8">
      <button
        @click="selectedCategory = null"
        :class="[
          'px-4 py-2 rounded-full text-sm font-medium transition-colors',
          selectedCategory === null
            ? 'bg-primary-600 text-white'
            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
        ]"
      >
        Toutes
      </button>
      <button
        v-for="category in availableCategories"
        :key="category"
        @click="selectedCategory = category"
        :class="[
          'px-4 py-2 rounded-full text-sm font-medium transition-colors',
          selectedCategory === category
            ? 'bg-primary-600 text-white'
            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
        ]"
      >
        {{ getCategoryLabel(category) }}
      </button>
    </div>

          <!-- Loading State -->
      <div v-if="loading" class="text-center py-12">
        <LoadingLogo size="large" text="Chargement des informations..." />
      </div>

    <!-- No Information -->
    <div v-else-if="filteredInformations.length === 0" class="text-center py-12">
      <div class="text-gray-400 mb-4">
        <svg class="mx-auto h-12 w-12" 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>
      </div>
      <h3 class="text-lg font-medium text-gray-900 mb-2">Aucune information</h3>
      <p class="text-gray-600">
        {{ selectedCategory ? `Aucune information dans la catégorie "${getCategoryLabel(selectedCategory)}"` : 'Aucune information disponible pour le moment' }}
      </p>
    </div>

    <!-- Information List -->
    <div v-else class="space-y-6">
      <div
        v-for="info in filteredInformations"
        :key="info.id"
        class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow"
      >
        <!-- Header -->
        <div class="flex items-start justify-between mb-4">
          <div class="flex-1">
            <div class="flex items-center gap-3 mb-2">
              <span
                :class="[
                  'px-3 py-1 rounded-full text-xs font-medium',
                  getCategoryBadgeClass(info.category)
                ]"
              >
                {{ getCategoryLabel(info.category) }}
              </span>
              <span class="text-sm text-gray-500">
                {{ formatDate(info.created_at) }}
              </span>
            </div>
            <h2 class="text-xl font-semibold text-gray-900 mb-2">{{ info.title }}</h2>
          </div>
          <div v-if="info.priority > 0" class="flex items-center gap-1 text-amber-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
            </svg>
            <span class="text-sm font-medium">Important</span>
          </div>
        </div>

        <!-- Content -->
        <div class="prose prose-gray max-w-none">
          <div class="whitespace-pre-wrap text-gray-700 leading-relaxed">{{ info.content }}</div>
        </div>

        <!-- Footer -->
        <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-sm text-gray-500">
          <span>Mis à jour le {{ formatDate(info.updated_at) }}</span>
          <span v-if="!info.is_published" class="text-amber-600 font-medium">Brouillon</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useToast } from 'vue-toastification'
import { formatDistanceToNow } from 'date-fns'
import { fr } from 'date-fns/locale'
import axios from '@/utils/axios'
import LoadingLogo from '@/components/LoadingLogo.vue'

const toast = useToast()

// State
const informations = ref([])
const loading = ref(true)
const selectedCategory = ref(null)

// Computed
const availableCategories = computed(() => {
  const categories = [...new Set(informations.value.map(info => info.category))]
  return categories.sort()
})

const filteredInformations = computed(() => {
  if (!selectedCategory.value) {
    return informations.value
  }
  return informations.value.filter(info => info.category === selectedCategory.value)
})

// Methods
function getCategoryLabel(category) {
  const labels = {
    'general': 'Général',
    'release': 'Nouvelle version',
    'upcoming': 'À venir',
    'maintenance': 'Maintenance',
    'feature': 'Nouvelle fonctionnalité',
    'bugfix': 'Correction de bug'
  }
  return labels[category] || category
}

function getCategoryBadgeClass(category) {
  const classes = {
    'general': 'bg-gray-100 text-gray-800',
    'release': 'bg-green-100 text-green-800',
    'upcoming': 'bg-blue-100 text-blue-800',
    'maintenance': 'bg-yellow-100 text-yellow-800',
    'feature': 'bg-purple-100 text-purple-800',
    'bugfix': 'bg-red-100 text-red-800'
  }
  return classes[category] || 'bg-gray-100 text-gray-800'
}

function formatDate(date) {
  return formatDistanceToNow(new Date(date), { addSuffix: true, locale: fr })
}

async function fetchInformations() {
  try {
    loading.value = true
    const response = await axios.get('/api/information/public')
    informations.value = response.data
  } catch (error) {
    console.error('Error fetching informations:', error)
    toast.error('Erreur lors du chargement des informations')
  } finally {
    loading.value = false
  }
}

// Lifecycle
onMounted(() => {
  fetchInformations()
})
</script>
