<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
          </div>
          <div class="flex items-center gap-4">
            <ClientOnly fallback-tag="div">
              <template v-if="isAuthenticated">
                <NuxtLink 
                  to="/admin" 
                  class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm whitespace-nowrap"
                >
                  Manage Sermons
                </NuxtLink>
                <button
                  @click="handleLogout"
                  class="text-sm font-medium text-red-600 hover:text-red-700"
                >
                  Logout
                </button>
              </template>
              <NuxtLink 
                v-else
                to="/login" 
                class="text-sm font-medium text-blue-600 hover:text-blue-700"
              >
                Admin Login
              </NuxtLink>
              <template #fallback>
                <div class="h-10"></div>
              </template>
            </ClientOnly>
          </div>
        </div>
        <div class="text-center mt-6">
          <h1 class="text-3xl font-bold text-gray-900">
            Welcome to New Life! Please choose the sermon you'd like to see.
          </h1>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <!-- Recent Sermons (Last 3 months) -->
      <div v-if="recentSermons.length > 0">
        <h2 class="text-2xl font-semibold text-gray-900 mb-6">Recent Sermons</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
          <SermonCard 
            v-for="sermon in recentSermons" 
            :key="sermon.id" 
            :sermon="sermon" 
          />
        </div>
      </div>

      <!-- Older Sermons Dropdown -->
      <div v-if="olderSermons.length > 0" class="mt-8">
        <button
          @click="showOlder = !showOlder"
          class="w-full bg-white border border-gray-300 rounded-lg px-6 py-4 text-left hover:bg-gray-50 transition-colors flex items-center justify-between"
        >
          <span class="text-lg font-medium text-gray-900">View Older Sermons</span>
          <svg 
            :class="['w-5 h-5 text-gray-500 transition-transform', showOlder ? 'rotate-180' : '']"
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24"
          >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </button>
        
        <div v-if="showOlder" class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <SermonCard 
            v-for="sermon in olderSermons" 
            :key="sermon.id" 
            :sermon="sermon" 
          />
        </div>
      </div>

      <!-- Empty State -->
      <div v-if="recentSermons.length === 0 && olderSermons.length === 0" class="text-center py-12">
        <p class="text-gray-500 text-lg">No sermons available yet.</p>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
const showOlder = ref(false)

// Check authentication status
const { data: authData } = await useFetch('/api/auth/verify')
const isAuthenticated = computed(() => authData.value?.authenticated || false)

// Fetch all sermons
const { data: allSermons } = await useFetch('/api/sermons')

// Calculate date 3 months ago
const threeMonthsAgo = new Date()
threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3)

// Split sermons into recent and older
const recentSermons = computed(() => {
  if (!allSermons.value) return []
  return allSermons.value.filter((sermon: any) => {
    const sermonDate = new Date(sermon.date)
    return sermonDate >= threeMonthsAgo
  })
})

const olderSermons = computed(() => {
  if (!allSermons.value) return []
  return allSermons.value.filter((sermon: any) => {
    const sermonDate = new Date(sermon.date)
    return sermonDate < threeMonthsAgo
  })
})

async function handleLogout() {
  await $fetch('/api/auth/logout', { method: 'POST' })
  // Refresh the page to update authentication state
  window.location.reload()
}
</script>
