<template>
  <div>
    <!-- Hero Section -->
    <div class="bg-gradient-to-br from-purple-600 via-blue-600 to-emerald-500 py-16">
      <UContainer>
        <div class="text-center">
          <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
            Event Series
          </h1>
          <p class="text-xl md:text-2xl text-purple-100 max-w-3xl mx-auto">
            Discover our multi-event series designed to take you on a journey of learning and growth
          </p>
        </div>
      </UContainer>
    </div>

    <!-- Series Grid -->
    <div class="py-16 bg-gray-50">
      <UContainer>
        <div v-if="pending" class="text-center py-12">
          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500 mx-auto mb-4"></div>
          <p class="text-gray-600">Loading series...</p>
        </div>

        <div v-else-if="filteredSeries.length > 0" class="space-y-8">
          <div 
            v-for="series in filteredSeries" 
            :key="series.id"
            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300"
          >
            <!-- Series Header -->
            <div class="p-6 border-b border-gray-200">
              <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div class="flex-1">
                  <div class="flex items-center gap-3 mb-2">
                    <div :class="[
                      'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium',
                      getSeriesTypeBadgeClass(series.type)
                    ]">
                      {{ formatSeriesType(series.type) }}
                    </div>
                    <span :class="[
                      'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
                      series.status === 'active' ? 'bg-green-100 text-green-700' :
                      series.status === 'upcoming' ? 'bg-blue-100 text-blue-700' :
                      'bg-gray-100 text-gray-700'
                    ]">
                      {{ series.status }}
                    </span>
                  </div>
                  <h2 class="text-2xl font-bold text-gray-900 mb-2">{{ series.title }}</h2>
                  <p class="text-gray-600 leading-relaxed">{{ series.description }}</p>
                </div>
                <div class="text-center md:text-right">
                  <div class="text-3xl font-bold text-purple-600 mb-1">{{ series.eventCount }}</div>
                  <div class="text-sm text-gray-500">Events</div>
                  <div v-if="series.totalEvents" class="text-xs text-gray-400 mt-1">
                    of {{ series.totalEvents }} planned
                  </div>
                </div>
              </div>
            </div>

            <!-- Events List -->
            <div class="divide-y divide-gray-100">
              <div 
                v-for="event in series.events" 
                :key="event.id"
                class="p-4 hover:bg-gray-50 transition-colors duration-200"
              >
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-4 flex-1">
                    <div class="w-10 h-10 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center text-sm font-semibold">
                      {{ event.series?.position || '?' }}
                    </div>
                    <div class="flex-1">
                      <h3 class="font-medium text-gray-900 mb-1">{{ event.title }}</h3>
                      <div class="flex items-center gap-4 text-sm text-gray-500">
                        <div class="flex items-center gap-1">
                          <Icon name="heroicons:calendar-days" class="w-4 h-4" />
                          {{ formatEventDate(event.startDate) }}
                        </div>
                        <div class="flex items-center gap-1">
                          <Icon name="heroicons:clock" class="w-4 h-4" />
                          {{ formatEventTime(event.startDate) }}
                        </div>
                        <div v-if="event.registrations?.length" class="flex items-center gap-1">
                          <Icon name="heroicons:users" class="w-4 h-4" />
                          {{ event.registrations.length }} registered
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="flex items-center gap-3">
                    <span :class="[
                      'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
                      getEventStatusClass(event)
                    ]">
                      {{ getEventStatus(event) }}
                    </span>
                    <NuxtLink 
                      :to="`/events/${event.slug || event.id}`"
                      class="inline-flex items-center px-3 py-1 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors"
                    >
                      View Event
                    </NuxtLink>
                  </div>
                </div>
              </div>
            </div>

            <!-- Series Footer -->
            <div v-if="series.startDate && series.endDate" class="px-6 py-4 bg-gray-50 border-t border-gray-200">
              <div class="flex items-center justify-between text-sm text-gray-500">
                <div class="flex items-center gap-1">
                  <Icon name="heroicons:calendar-days" class="w-4 h-4" />
                  Series runs from {{ formatDateRange(series.startDate, series.endDate) }}
                </div>
                <div v-if="series.totalRegistrations" class="flex items-center gap-1">
                  <Icon name="heroicons:users" class="w-4 h-4" />
                  {{ series.totalRegistrations }} total registrations
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="text-center py-16">
          <Icon name="heroicons:squares-2x2" class="w-16 h-16 text-gray-300 mx-auto mb-4" />
          <h3 class="text-xl font-semibold text-gray-900 mb-2">No Event Series Available</h3>
          <p class="text-gray-600 max-w-md mx-auto">
            We're currently planning exciting event series. Check back soon for multi-event learning journeys!
          </p>
        </div>
      </UContainer>
    </div>
  </div>
</template>

<script setup>
// SEO
useHead({
  title: 'Event Series - Ghost Guild',
  meta: [
    { name: 'description', content: 'Discover our multi-event series designed to take you on a journey of learning and growth in cooperative game development and community building.' }
  ]
})

// Fetch series data
const { data: seriesData, pending } = await useFetch('/api/series', {
  query: { includeHidden: false }
})

// Filter for active and upcoming series only
const filteredSeries = computed(() => {
  if (!seriesData.value) return []
  return seriesData.value.filter(series => 
    series.status === 'active' || series.status === 'upcoming'
  )
})

// Helper functions
const formatSeriesType = (type) => {
  const types = {
    'workshop_series': 'Workshop Series',
    'recurring_meetup': 'Recurring Meetup',
    'multi_day': 'Multi-Day Event',
    'course': 'Course',
    'tournament': 'Tournament'
  }
  return types[type] || type
}

const getSeriesTypeBadgeClass = (type) => {
  const classes = {
    'workshop_series': 'bg-emerald-100 text-emerald-700',
    'recurring_meetup': 'bg-blue-100 text-blue-700',
    'multi_day': 'bg-purple-100 text-purple-700',
    'course': 'bg-amber-100 text-amber-700',
    'tournament': 'bg-red-100 text-red-700'
  }
  return classes[type] || 'bg-gray-100 text-gray-700'
}

const formatEventDate = (date) => {
  return new Date(date).toLocaleDateString('en-US', {
    weekday: 'long',
    month: 'long',
    day: 'numeric',
    year: 'numeric'
  })
}

const formatEventTime = (date) => {
  return new Date(date).toLocaleTimeString('en-US', {
    hour: 'numeric',
    minute: '2-digit',
    hour12: true
  })
}

const formatDateRange = (startDate, endDate) => {
  const start = new Date(startDate)
  const end = new Date(endDate)
  
  const formatter = new Intl.DateTimeFormat('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric'
  })
  
  return `${formatter.format(start)} to ${formatter.format(end)}`
}

const getEventStatus = (event) => {
  const now = new Date()
  const startDate = new Date(event.startDate)
  const endDate = new Date(event.endDate)
  
  if (now < startDate) return 'Upcoming'
  if (now >= startDate && now <= endDate) return 'Ongoing'
  return 'Completed'
}

const getEventStatusClass = (event) => {
  const status = getEventStatus(event)
  const classes = {
    'Upcoming': 'bg-blue-100 text-blue-700',
    'Ongoing': 'bg-green-100 text-green-700',
    'Completed': 'bg-gray-100 text-gray-700'
  }
  return classes[status] || 'bg-gray-100 text-gray-700'
}
</script>