<template>
  <UCard class="h-full flex flex-col hover:shadow-lg transition-shadow duration-200">
    <template #header>
      <div class="flex justify-between items-start">
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-900 line-clamp-2">
            {{ sermon.title }}
          </h3>
          <p class="text-sm text-gray-600 mt-1">
            {{ formatDate(sermon.date) }}
          </p>
        </div>
        <div class="ml-2">
          <QRCodeButton :url="sermonUrl" :title="sermon.title" @click="showQRModal = $event" />
        </div>
      </div>
    </template>

    <div class="flex-1">
      <div v-if="sermon.bibleReferences && sermon.bibleReferences.length > 0" class="mb-4">
        <h4 class="text-sm font-medium text-gray-700 mb-2">Bible References:</h4>
        <div class="space-y-1">
          <p
            v-for="reference in sermon.bibleReferences.slice(0, 3)"
            :key="reference"
            class="text-sm text-gray-600 bg-gray-50 px-2 py-1 rounded"
          >
            {{ reference }}
          </p>
          <p
            v-if="sermon.bibleReferences.length > 3"
            class="text-sm text-gray-500 italic"
          >
            +{{ sermon.bibleReferences.length - 3 }} more references
          </p>
        </div>
      </div>

      <div v-if="sermon.personalApplication" class="mb-4">
        <h4 class="text-sm font-medium text-gray-700 mb-2">Personal Application:</h4>
        <p class="text-sm text-gray-600 line-clamp-3">
          {{ sermon.personalApplication }}
        </p>
      </div>
    </div>

    <template #footer>
      <UButton
        @click="navigateTo(sermonUrl)"
        variant="outline"
        color="primary"
        class="w-full"
        :label="`View Sermon - ${sermon.slug.replace('sermon-', '').replace(/(\d{2})(\d{2})(\d{4})/, '$1/$2/$3')}`"
      />
    </template>

    <!-- QR Code Modal -->
    <QRCodeModal
      v-model="showQRModal"
      :url="sermonUrl"
      :title="sermon.title"
    />
  </UCard>
</template>

<script setup lang="ts">
import { format, parseISO } from 'date-fns'

interface Sermon {
  id: number
  title: string
  date: string
  slug: string
  bibleReferences?: string[]
  personalApplication?: string
  pastorChallenge?: string
}

const props = defineProps<{
  sermon: Sermon
}>()

const showQRModal = ref(false)
const sermonUrl = computed(() => `/${props.sermon.slug}`)

const formatDate = (dateString: string) => {
  try {
    return format(parseISO(dateString), 'MMMM d, yyyy')
  } catch {
    return dateString
  }
}
</script>
