<template>
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <!-- Loading state -->
      <div v-if="loading" class="text-center py-12">
        <LoadingLogo size="large" text="Chargement de l'événement..." />
      </div>

    <!-- Event not found -->
    <div v-else-if="!event" class="text-center py-12">
      <h1 class="text-2xl font-bold text-gray-900 mb-4">Événement non trouvé</h1>
      <p class="text-gray-600 mb-6">L'événement que vous recherchez n'existe pas ou a été supprimé.</p>
      <router-link to="/events" class="btn-primary">
        Retour aux événements
      </router-link>
    </div>

    <!-- Event details -->
    <div v-else>
      <!-- Header -->
      <div class="mb-8">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4 space-y-4 sm:space-y-0">
          <router-link to="/events" class="text-primary-600 hover:text-primary-700 flex items-center">
            <ArrowLeft class="w-4 h-4 mr-2" />
            Retour aux événements
          </router-link>
          
          <div v-if="canEdit" class="flex w-full sm:w-auto space-x-2">
            <button
              @click="showEditModal = true"
              class="flex-1 sm:flex-none btn-secondary justify-center"
            >
              <Edit class="w-4 h-4 mr-2" />
              Modifier
            </button>
            <button
              @click="deleteEvent"
              class="flex-1 sm:flex-none btn-secondary text-accent-600 hover:text-accent-700 hover:border-accent-300 justify-center"
            >
              <Trash2 class="w-4 h-4 mr-2" />
              Supprimer
            </button>
          </div>
        </div>
        
        <div class="flex flex-col md:flex-row items-start space-y-6 md:space-y-0 md:space-x-6">
          <!-- Cover Image -->
          <div class="w-full md:w-64 h-48 bg-gradient-to-br from-primary-400 to-primary-600 rounded-xl flex items-center justify-center flex-shrink-0">
            <img
              v-if="!event.cover_image && event.creator_avatar"
              :src="getMediaUrl(event.creator_avatar)"
              :alt="event.creator_name"
              class="w-16 h-16 rounded-full object-cover"
            >
            <div v-else-if="!event.cover_image" class="w-16 h-16 rounded-full bg-primary-100 flex items-center justify-center">
              <User class="w-8 h-8 text-primary-600" />
            </div>
            <img
              v-else
              :src="getMediaUrl(event.cover_image)"
              :alt="event.title"
              class="w-full h-full object-cover rounded-xl"
            >
          </div>
          
          <!-- Event Info -->
          <div class="flex-1">
            <h1 class="text-4xl font-bold text-gray-900 mb-4">{{ event.title }}</h1>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="space-y-3">
                <div class="flex items-center text-gray-600">
                  <Clock class="w-5 h-5 mr-3" />
                  <span>{{ formatDate(event.date) }}</span>
                </div>
                
                <div v-if="event.end_date" class="flex items-center text-gray-600">
                  <Clock class="w-5 h-5 mr-3" />
                  <span>Fin : {{ formatDate(event.end_date) }}</span>
                </div>
                
                <div v-if="event.location" class="flex items-center text-gray-600">
                  <MapPin class="w-5 h-5 mr-3" />
                  <span>{{ event.location }}</span>
                </div>
                
                <div class="flex items-center text-gray-600">
                  <User class="w-5 h-5 mr-3" />
                  <span>Organisé par {{ event.creator_name }}</span>
                </div>
              </div>
              
              <!-- Participation Stats -->
              <div class="bg-gray-50 rounded-lg p-4">
                <h3 class="font-semibold text-gray-900 mb-3">Participation</h3>
                <div class="grid grid-cols-2 gap-4 text-sm">
                  <div class="text-center">
                    <div class="text-2xl font-bold text-success-600">{{ event.present_count || 0 }}</div>
                    <div class="text-gray-600">Présents</div>
                  </div>
                  <div class="text-center">
                    <div class="text-2xl font-bold text-warning-600">{{ event.maybe_count || 0 }}</div>
                    <div class="text-gray-600">Peut-être</div>
                  </div>
                  <div class="text-center">
                    <div class="text-2xl font-bold text-accent-600">{{ event.absent_count || 0 }}</div>
                    <div class="text-gray-600">Absents</div>
                  </div>
                  <div class="text-center">
                    <div class="text-2xl font-bold text-secondary-600">{{ event.pending_count || 0 }}</div>
                    <div class="text-gray-600">En attente</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Description -->
      <div v-if="event.description" class="card p-6 mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">Description</h2>
        <p class="text-gray-700 whitespace-pre-wrap">{{ event.description }}</p>
      </div>

      <!-- My Participation -->
      <div class="card p-6 mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">Ma participation</h2>
        <div class="flex gap-3">
          <button
            @click="updateParticipation('present')"
            class="flex-1 py-3 px-4 rounded-lg text-sm font-medium transition-colors"
            :class="getParticipationClass('present')"
          >
            ✓ Présent
          </button>
          <button
            @click="updateParticipation('maybe')"
            class="flex-1 py-3 px-4 rounded-lg text-sm font-medium transition-colors"
            :class="getParticipationClass('maybe')"
          >
            ? Peut-être
          </button>
          <button
            @click="updateParticipation('absent')"
            class="flex-1 py-3 px-4 rounded-lg text-sm font-medium transition-colors"
            :class="getParticipationClass('absent')"
          >
            ✗ Absent
          </button>
        </div>
      </div>

      <!-- Participants -->
      <div class="card p-6 mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">Participants</h2>
        
        <div v-if="event.participations.length === 0" class="text-center py-8 text-gray-500">
          Aucun participant pour le moment
        </div>
        
        <div v-else class="space-y-3">
          <div
            v-for="participation in event.participations"
            :key="participation.user_id"
            class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
          >
            <div class="flex items-center space-x-3">
              <img
                v-if="participation.avatar_url"
                :src="getMediaUrl(participation.avatar_url)"
                :alt="participation.full_name"
                class="w-10 h-10 rounded-full object-cover"
              >
              <div v-else class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center">
                <User class="w-5 h-5 text-primary-600" />
              </div>
              <div>
                <p class="font-medium text-gray-900">{{ participation.full_name }}</p>
                <p class="text-sm text-gray-600">@{{ participation.username }}</p>
              </div>
            </div>
            
            <div class="flex items-center space-x-2">
              <span
                class="px-3 py-1 rounded-full text-xs font-medium"
                :class="getStatusClass(participation.status)"
              >
                {{ getStatusText(participation.status) }}
              </span>
              <span v-if="participation.response_date" class="text-xs text-gray-500">
                {{ formatRelativeDate(participation.response_date) }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- Related Albums -->
      <div class="card p-6 mb-8">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold text-gray-900">Albums liés</h2>
          <router-link
            :to="`/albums?event_id=${event.id}`"
            class="text-primary-600 hover:text-primary-700 text-sm"
          >
            Voir tous les albums →
          </router-link>
        </div>
        
        <div v-if="relatedAlbums.length === 0" class="text-center py-8 text-gray-500">
          Aucun album lié à cet événement
        </div>
        
        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <router-link
            v-for="album in relatedAlbums"
            :key="album.id"
            :to="`/albums/${album.id}`"
            class="block hover:shadow-lg transition-all duration-300 rounded-xl overflow-hidden bg-white border border-gray-200 hover:border-primary-300 hover:scale-105 transform"
          >
            <div class="aspect-[4/3] bg-gray-100 relative overflow-hidden">
              <img
                v-if="album.cover_image"
                :src="getMediaUrl(album.cover_image)"
                :alt="album.title"
                class="w-full h-full object-cover hover:scale-110 transition-transform duration-300"
              >
              <div v-else class="w-full h-full flex items-center justify-center">
                <Image class="w-16 h-16 text-gray-400" />
              </div>
              
              <!-- Media Count Badge -->
              <div class="absolute top-3 right-3 bg-black bg-opacity-80 text-white text-sm px-3 py-1.5 rounded-full font-medium">
                {{ album.media_count }} média{{ album.media_count > 1 ? 's' : '' }}
              </div>
              
              <!-- Hover Overlay -->
              <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition-all duration-300 flex items-center justify-center">
                <div class="opacity-0 hover:opacity-100 transition-opacity duration-300">
                  <div class="bg-white bg-opacity-90 text-gray-900 px-4 py-2 rounded-full font-medium">
                    Voir l'album →
                  </div>
                </div>
              </div>
            </div>
            
            <div class="p-4">
              <h3 class="font-semibold text-gray-900 text-lg mb-2 line-clamp-2">{{ album.title }}</h3>
              <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
                <User class="w-4 h-4" />
                <span>{{ album.creator_name }}</span>
              </div>
              <p v-if="album.description" class="text-sm text-gray-500 line-clamp-2">{{ album.description }}</p>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- Edit Event Modal -->
    <transition
      enter-active-class="transition ease-out duration-200"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="transition ease-in duration-150"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <div
        v-if="showEditModal"
        class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
      >
        <div class="bg-white rounded-xl max-w-md w-full p-6">
          <h2 class="text-xl font-semibold mb-4">Modifier l'événement</h2>
          
          <form @submit.prevent="updateEvent" class="space-y-4">
            <div>
              <label class="label">Titre</label>
              <input
                v-model="editForm.title"
                type="text"
                required
                class="input"
              >
            </div>
            
            <div>
              <label class="label">Description</label>
              <textarea
                v-model="editForm.description"
                rows="3"
                class="input"
              />
            </div>
            
            <div>
              <label class="label">Date et heure</label>
              <input
                v-model="editForm.date"
                type="datetime-local"
                required
                class="input"
              >
            </div>
            
            <div>
              <label class="label">Lieu</label>
              <input
                v-model="editForm.location"
                type="text"
                class="input"
              >
            </div>
            
            <div class="flex gap-3 pt-4">
              <button
                type="button"
                @click="showEditModal = false"
                class="flex-1 btn-secondary"
              >
                Annuler
              </button>
              <button
                type="submit"
                :disabled="updating"
                class="flex-1 btn-primary"
              >
                {{ updating ? 'Mise à jour...' : 'Mettre à jour' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useToast } from 'vue-toastification'
import axios from '@/utils/axios'
import { getMediaUrl } from '@/utils/axios'
import { format, formatDistanceToNow } from 'date-fns'
import { fr } from 'date-fns/locale'
import {
  ArrowLeft,
  Calendar,
  Clock,
  MapPin,
  User,
  Edit,
  Trash2,
  Image
} from 'lucide-vue-next'
import LoadingLogo from '@/components/LoadingLogo.vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const toast = useToast()

const event = ref(null)
const relatedAlbums = ref([])
const loading = ref(true)
const updating = ref(false)
const showEditModal = ref(false)

const editForm = ref({
  title: '',
  description: '',
  date: '',
  location: ''
})

const canEdit = computed(() => 
  event.value && (event.value.creator_id === authStore.user?.id || authStore.user?.is_admin)
)

function formatDate(date) {
  return format(new Date(date), 'EEEE d MMMM yyyy à HH:mm', { locale: fr })
}

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

function getParticipationClass(status) {
  const participation = event.value?.participations.find(p => p.user_id === authStore.user?.id)
  const isSelected = participation?.status === status
  
  if (status === 'present') {
    return isSelected
      ? 'bg-success-100 text-success-700 border-success-300'
      : 'bg-white text-gray-700 border-gray-300 hover:bg-success-50'
  } else if (status === 'maybe') {
    return isSelected
      ? 'bg-warning-100 text-warning-700 border-warning-300'
      : 'bg-white text-gray-700 border-gray-300 hover:bg-warning-50'
  } else {
    return isSelected
      ? 'bg-accent-100 text-accent-700 border-accent-300'
      : 'bg-white text-gray-700 border-gray-300 hover:bg-accent-50'
  }
}

function getStatusClass(status) {
  switch (status) {
    case 'present':
      return 'bg-success-100 text-success-700'
    case 'maybe':
      return 'bg-warning-100 text-warning-700'
    case 'absent':
      return 'bg-accent-100 text-accent-700'
    default:
      return 'bg-secondary-100 text-secondary-700'
  }
}

function getStatusText(status) {
  switch (status) {
    case 'present':
      return 'Présent'
    case 'maybe':
      return 'Peut-être'
    case 'absent':
      return 'Absent'
    default:
      return 'En attente'
  }
}

async function fetchEvent() {
  try {
    const response = await axios.get(`/api/events/${route.params.id}`)
    event.value = response.data
    
    // Fetch related albums
    const albumsResponse = await axios.get(`/api/albums?event_id=${event.value.id}`)
    relatedAlbums.value = albumsResponse.data
    
    // Initialize edit form
    editForm.value = {
      title: event.value.title,
      description: event.value.description || '',
      date: format(new Date(event.value.date), "yyyy-MM-dd'T'HH:mm", { locale: fr }),
      location: event.value.location || ''
    }
  } catch (error) {
    toast.error('Erreur lors du chargement de l\'événement')
    console.error('Error fetching event:', error)
  } finally {
    loading.value = false
  }
}

async function updateParticipation(status) {
  try {
    const response = await axios.put(`/api/events/${event.value.id}/participation`, { status })
    event.value = response.data
    toast.success('Participation mise à jour')
  } catch (error) {
    toast.error('Erreur lors de la mise à jour')
  }
}

async function updateEvent() {
  updating.value = true
  try {
    const response = await axios.put(`/api/events/${event.value.id}`, {
      ...editForm.value,
      date: new Date(editForm.value.date).toISOString()
    })
    event.value = response.data
    showEditModal.value = false
    toast.success('Événement mis à jour')
  } catch (error) {
    toast.error('Erreur lors de la mise à jour')
  }
  updating.value = false
}

async function deleteEvent() {
  if (!confirm('Êtes-vous sûr de vouloir supprimer cet événement ?')) return
  
  try {
    await axios.delete(`/api/events/${event.value.id}`)
    toast.success('Événement supprimé')
    router.push('/events')
  } catch (error) {
    toast.error('Erreur lors de la suppression')
  }
}

onMounted(() => {
  fetchEvent()
})
</script>
