<template>
  <div>
    <section class="page-header sermons-header" style="background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url('https://images.unsplash.com/photo-1504052434569-70ad5836ab65?w=1600&q=80') center/cover no-repeat;">
      <div class="container animate-up">
        <h1><i class="fa-solid fa-headphones me-2"></i>Sermons</h1>
        <p class="mb-0 opacity-75">Listen to our latest messages and teachings</p>
      </div>
    </section>

    <div class="container py-5">
      <div v-if="loading" class="row">
        <div v-for="i in 6" :key="i" class="col-lg-4 col-md-6 mb-4">
          <div class="skeleton-card">
            <div class="skeleton skeleton-img"></div>
            <div class="skeleton-body">
              <div class="skeleton skeleton-text w-75"></div>
              <div class="skeleton skeleton-text-sm"></div>
              <div class="skeleton skeleton-text"></div>
              <div class="skeleton skeleton-text w-50"></div>
              <div class="skeleton skeleton-btn mt-3"></div>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="sermons.length === 0" class="text-center py-5 animate-on-scroll">
        <i class="fa-solid fa-headphones fa-4x text-secondary mb-3" style="opacity:.4;"></i>
        <h4>No Sermons Yet</h4>
        <p class="text-secondary">Check back soon for new messages.</p>
      </div>
      <div v-else class="row">
        <div v-for="(s, i) in sermons" :key="s.serm_id" class="col-lg-4 col-md-6 mb-4 animate-on-scroll anim-zoom" :style="{ transitionDelay: (i % 6) * .08 + 's' }">
          <div class="card sermon-card shadow-sm">
            <div v-if="s.serm_image_url" class="overflow-hidden rounded-top"><img :src="s.serm_image_url" class="card-img-top" :alt="s.serm_title"></div>
            <div v-else class="card-img-top d-flex align-items-center justify-content-center bg-light"><i class="fa-solid fa-headphones fa-3x text-secondary" style="opacity:.4;"></i></div>
            <div class="card-body d-flex flex-column">
              <div class="d-flex justify-content-between align-items-start mb-1">
                <h5 class="card-title mb-0">{{ s.serm_title }}</h5>
                <span v-if="s.serm_featured" class="badge bg-warning ms-1 flex-shrink-0">Featured</span>
              </div>
              <div class="text-secondary small mb-2">
                <span v-if="s.serm_speaker"><i class="fa-solid fa-user me-1"></i>{{ s.serm_speaker }}<br></span>
                <i class="fa-solid fa-calendar me-1"></i>{{ formatDate(s.serm_date) }}
              </div>
              <span v-if="s.serm_scripture" class="badge bg-info bg-opacity-10 text-info align-self-start mb-2">{{ s.serm_scripture }}</span>
              <p class="card-text flex-grow-1">{{ truncate(s.serm_description, 150) }}</p>
              <router-link :to="'/sermons/' + s.serm_id" class="btn btn-primary mt-auto"><i class="fa-solid fa-eye me-1"></i>View Sermon</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { getSermons } from '../api/index.js'

const sermons = ref([])
const loading = ref(true)

function formatDate(d) { return d ? new Date(d + 'T00:00:00').toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) : 'TBD' }
function truncate(s, n) { return s ? (s.length > n ? s.slice(0, n) + '...' : s) : '' }

onMounted(async () => {
  try { const r = await getSermons(); sermons.value = r.sermons } catch (e) {}
  loading.value = false
  nextTick(() => {
    const els = document.querySelectorAll('.animate-on-scroll')
    if ('IntersectionObserver' in window) {
      const obs = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target) } }) }, { threshold: .15 })
      els.forEach(el => obs.observe(el))
    } else { els.forEach(el => el.classList.add('visible')) }
  })
})
</script>
