<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>

    <UContainer class="py-8">
      <UCard>
        <template #header>
          <h2 class="text-xl font-semibold">Sermon Details</h2>
        </template>

        <form @submit.prevent="handleSubmit" class="space-y-8">
          <!-- Basic Information -->
          <div class="space-y-4">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <UFormGroup label="Sermon Title" name="title" required>
                <UInput
                  v-model="form.title"
                  placeholder="Enter sermon title"
                  :disabled="loading"
                />
              </UFormGroup>

              <UFormGroup label="Sermon Date" name="date" required>
                <UInput
                  v-model="form.date"
                  type="date"
                  :disabled="loading"
                />
              </UFormGroup>
            </div>

            <UFormGroup label="Generated URL" name="generatedUrl">
              <UInput
                :value="form.title && form.date ? generateSlug(form.title, form.date) : 'Enter title and date to see URL'"
                :disabled="loading"
                readonly
              />
            </UFormGroup>
          </div>
        </form>
      </UCard>

      <!-- Success Message -->
      <div v-if="successMessage" class="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
        <p class="text-green-800">{{ successMessage }}</p>
      </div>
    </UContainer>
  </div>
</template>

<script setup lang="ts">
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>
