<script lang="ts" setup>
import { useForm, Link } from '@inertiajs/vue3'
import { ref } from 'vue'
import AdminLayout from '@/Layouts/AdminLayout.vue'

interface Props {
  categories: string[]
}

defineOptions({ layout: AdminLayout })

const props = defineProps<Props>()

const form = useForm({
  title: '',
  content: '',
  category: null as string | null,
  is_shared: true,
})

const useCustomCategory = ref<boolean>(false)
const customCategory = ref<string>('')

const variableHints = [
  { variable: '{customer_name}', description: 'Customer full name' },
  { variable: '{ticket_reference}', description: 'Ticket reference (e.g., [EZSCALE-123])' },
  { variable: '{service_name}', description: 'Service/plan name' },
]

function submit(): void {
  if (useCustomCategory.value && customCategory.value.trim()) {
    form.category = customCategory.value.trim()
  }
  form.post('/canned-responses', {
    onSuccess: () => form.reset(),
  })
}
</script>

<template>
  <div>
    <div class="d-flex align-center gap-4 mb-6">
      <Link href="/canned-responses">
        <VBtn variant="text" icon="tabler-arrow-left" size="small" />
      </Link>
      <div>
        <div class="text-h4 font-weight-bold">
          Create Canned Response
        </div>
        <div class="text-body-2 text-medium-emphasis">
          Create a pre-written response for faster ticket replies
        </div>
      </div>
    </div>

    <VRow>
      <VCol cols="12" lg="8">
        <VCard>
          <VCardText>
            <VForm @submit.prevent="submit">
              <VTextField
                v-model="form.title"
                label="Title"
                :error-messages="form.errors.title"
                class="mb-4"
              />

              <VTextarea
                v-model="form.content"
                label="Content"
                rows="10"
                :error-messages="form.errors.content"
                counter="10000"
                maxlength="10000"
                class="mb-4"
              />

              <VRow>
                <VCol cols="12" md="6">
                  <div v-if="!useCustomCategory">
                    <VSelect
                      v-model="form.category"
                      :items="props.categories"
                      label="Category"
                      clearable
                      :error-messages="form.errors.category"
                    />
                    <VBtn variant="text" size="small" class="mt-1" @click="useCustomCategory = true">
                      + New Category
                    </VBtn>
                  </div>
                  <div v-else>
                    <VTextField
                      v-model="customCategory"
                      label="New Category"
                    />
                    <VBtn variant="text" size="small" class="mt-1" @click="useCustomCategory = false">
                      Choose Existing
                    </VBtn>
                  </div>
                </VCol>
                <VCol cols="12" md="6">
                  <VCheckbox
                    v-model="form.is_shared"
                    label="Shared with all staff"
                    hint="When unchecked, only you can see this response"
                    persistent-hint
                  />
                </VCol>
              </VRow>

              <div class="d-flex justify-end mt-4">
                <VBtn
                  type="submit"
                  color="primary"
                  :loading="form.processing"
                >
                  Create Response
                </VBtn>
              </div>
            </VForm>
          </VCardText>
        </VCard>
      </VCol>

      <VCol cols="12" lg="4">
        <VCard>
          <VCardTitle>Available Variables</VCardTitle>
          <VCardText>
            <p class="text-body-2 text-medium-emphasis mb-3">
              Use these variables in your content. They will be substituted when the response is used.
            </p>
            <VList density="compact" class="pa-0">
              <VListItem v-for="hint in variableHints" :key="hint.variable">
                <template #prepend>
                  <code class="text-primary me-2">{{ hint.variable }}</code>
                </template>
                <VListItemTitle class="text-body-2">
                  {{ hint.description }}
                </VListItemTitle>
              </VListItem>
            </VList>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </div>
</template>
