<template>
  <div class="min-h-screen bg-gray-100">
    <!-- Header -->
    <header class="bg-white shadow-sm border-b py-2 px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-4">
          <img src="/logos/logo.png" alt="New Life Christian Church" class="h-10" />
          <UButton
            @click="navigateTo('/')"
            variant="ghost"
            color="gray"
            icon="i-heroicons-arrow-left"
          >
            Back to Sermons
          </UButton>
          <h1 class="text-2xl font-bold text-gray-900">Create New Sermon</h1>
        </div>
        <UButton
          @click="handleLogout"
          variant="outline"
          color="gray"
        >
          Logout
        </UButton>
      </div>
    </header>

    <div class="py-8 w-96 mx-auto px-4 sm:px-6 lg:px-8">
      <p>Test content with fixed width</p>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: ['auth']
})

const form = reactive({
  title: '',
  date: '',
  bibleReferences: [''],
  personalApplication: '',
  pastorChallenge: ''
})

const loading = ref(false)
const successMessage = ref('')

const generateSlug = (title: string, date: string) => {
  if (!title || !date) return ''

  const formattedTitle = title
    .toLowerCase()
    .replace(/[^a-z0-9\s-]/g, '')
    .replace(/\s+/g, '-')
    .replace(/-+/g, '-')
    .trim()

  const dateObj = new Date(date)
  const month = String(dateObj.getMonth() + 1).padStart(2, '0')
  const day = String(dateObj.getDate()).padStart(2, '0')
  const year = dateObj.getFullYear()

  return `sermon-${month}${day}${year}`
}

const addBibleReference = () => {
  form.bibleReferences.push('')
}

const removeBibleReference = (index: number) => {
  if (form.bibleReferences.length > 1) {
    form.bibleReferences.splice(index, 1)
  }
}

const resetForm = () => {
  form.title = ''
  form.date = ''
  form.bibleReferences = ['']
  form.personalApplication = ''
  form.pastorChallenge = ''
  successMessage.value = ''
}

const handleSubmit = async () => {
  loading.value = true
  successMessage.value = ''

  try {
    await $fetch('/api/sermons', {
      method: 'POST',
      body: {
        title: form.title,
        date: form.date,
        bibleReferences: form.bibleReferences.filter(ref => ref.trim() !== ''),
        personalApplication: form.personalApplication,
        pastorChallenge: form.pastorChallenge
      }
    })

    successMessage.value = 'Sermon created successfully!'
    resetForm()
  } catch (error: any) {
    console.error('Failed to create sermon:', error)
    // Error handling is done by Nuxt automatically
  } finally {
    loading.value = false
  }
}

const handleLogout = async () => {
  await $fetch('/api/auth/logout', { method: 'POST' })
  await navigateTo('/')
}
</script>
