<template>
  <UDashboardPanel id="contact">
    <template #header>
      <UDashboardNavbar :title="$t('contact.title')">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>
      </UDashboardNavbar>
    </template>

    <template #body>
      <div class="flex flex-col gap-6 w-full lg:max-w-4xl mx-auto p-6">
        <!-- Introduction Card -->
        <UCard>
          <template #header>
            <div>
              <h3 class="text-lg font-semibold text-highlighted">{{ $t('contact.header') }}</h3>
              <p class="text-sm text-muted mt-1">{{ $t('contact.description') }}</p>
            </div>
          </template>
        </UCard>

        <!-- Contact Form -->
        <UCard>
          <template #header>
            <div>
              <h3 class="text-lg font-semibold text-highlighted">{{ $t('contact.form.title') }}</h3>
              <p class="text-sm text-muted mt-1">{{ $t('contact.form.description') }}</p>
            </div>
          </template>

          <form class="space-y-4" @submit.prevent="handleSubmit">
            <UFormField :label="$t('contact.form.subject')" required>
              <UInput
                v-model="subject"
                :placeholder="$t('contact.form.subjectPlaceholder')"
                :disabled="isSubmitting"
                class="w-full"
                aria-required="true"
              />
            </UFormField>

            <UFormField :label="$t('contact.form.message')" required>
              <ContactEditor
                v-model="message"
                :disabled="isSubmitting"
                :placeholder="$t('contact.form.messagePlaceholder')"
              />
            </UFormField>

            <UButton
              type="submit"
              :label="$t('contact.form.submit')"
              :loading="isSubmitting"
              :disabled="isSubmitting || !isFormValid"
              color="primary"
            />
          </form>
        </UCard>
      </div>
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
import { useContact } from '~/composables'

definePageMeta({
  layout: 'default'
})

const { t: $t } = useI18n()
const toast = useToast()
const { sendContactMessage } = useContact()

const subject = ref('')
const message = ref('')
const isSubmitting = ref(false)

const isFormValid = computed(() => {
  return subject.value.trim().length > 0 && message.value.trim().length > 0
})

async function handleSubmit() {
  if (!isFormValid.value) return

  isSubmitting.value = true
  try {
    await sendContactMessage(subject.value, message.value)

    toast.add({
      title: $t('contact.success.title'),
      description: $t('contact.success.description'),
      color: 'success'
    })

    // Reset form
    subject.value = ''
    message.value = ''
  } catch {
    toast.add({
      title: $t('common.error'),
      description: $t('contact.error.description'),
      color: 'error'
    })
  } finally {
    isSubmitting.value = false
  }
}
</script>
