<!-- src/pages/admin/promo/edit.vue -->
<template>
  <div class="flex">

    <div class=" w-full px-10">
      <div class="text-sm breadcrumbs">
        <ul>
          <li>
            <router-link :to="{ name: 'home' }">
              Home
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'promo' }">
              Promotions
            </router-link>
          </li>
        </ul>
      </div>

      <div class="grid grid-cols-1 rounded-md p-6 ">
        <div class="text-[24px]">
          Edit Promo {{ promoName }}
        </div>
        <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="onSubmit">

          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
            <label class="block text-white text-sm font-bold cursor-pointer label">Promotion Name</label>
            <input v-model="form.name_of_promotion" class="input input-bordered input-sm w-full max-w-xs" id="title"
              type="text" placeholder="Name" />
          </div>
          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
            <label class="block text-white text-sm font-bold cursor-pointer label">Text on Ticket</label>
            <input v-model="form.text_on_ticket" class="input input-bordered input-sm w-full max-w-xs" id="title"
              type="text" placeholder="Text appears on ticket " />
          </div>

          <div class="mb-4">
            <label class="block text-white text-sm font-bold mb-2">How much off gallon (0.05 for
              example)</label>
            <input v-model="form.money_off_delivery" class="input input-bordered input-sm w-full max-w-xs" id="title"
              type="text" placeholder="0.01" />
          </div>

          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
            <textarea v-model="form.description" rows="4" class="textarea block p-2.5 w-full input-bordered "
              id="description" type="text" placeholder="Description of Promo" />
          </div>

          <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
            <button class="btn btn-secondary btn-sm" :disabled="isSubmitting">
              {{ isSubmitting ? 'Saving...' : 'Edit Promo' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { notify } from "@kyvg/vue3-notification"
import { adminService } from '../../../services/adminService'

const route = useRoute()
const router = useRouter()

// State
const promoId = ref<number>(0)
const promoName = ref('')
const isSubmitting = ref(false)
const form = ref({
  name_of_promotion: '',
  description: '',
  money_off_delivery: '',
  text_on_ticket: ''
})

// Methods
async function getCurrentPromo(id: number | string) {
  try {
    const response = await adminService.promos.getById(Number(id))
    if (response.data) {
      const data = response.data as any
      promoId.value = data.id
      promoName.value = data.name_of_promotion
      form.value.name_of_promotion = data.name_of_promotion
      form.value.description = data.description
      form.value.money_off_delivery = data.money_off_delivery
      form.value.text_on_ticket = data.text_on_ticket
    }
  } catch (error) {
    console.error('Failed to fetch promo:', error)
  }
}

async function onSubmit() {
  if (isSubmitting.value) return
  isSubmitting.value = true

  try {
    const response = await adminService.promos.update(promoId.value, {
      name_of_promotion: form.value.name_of_promotion,
      description: form.value.description,
      text_on_ticket: form.value.text_on_ticket,
      money_off_delivery: form.value.money_off_delivery,
    })

    if ((response.data as any).ok) {
      notify({
        title: "Success",
        text: "Promo has been edited!",
        type: "success",
      })
      router.push({ name: "promo" })
    } else if ((response.data as any).error) {
      notify({
        title: "Error",
        text: (response.data as any).error,
        type: "error",
      })
    }
  } catch (error) {
    notify({
      title: "Error",
      text: "Failed to update promo",
      type: "error",
    })
  } finally {
    isSubmitting.value = false
  }
}

// Watch for route changes
watch(() => route.params.id, (newId) => {
  if (newId) {
    getCurrentPromo(newId as string)
  }
})

// Lifecycle
onMounted(() => {
  if (route.params.id) {
    getCurrentPromo(route.params.id as string)
  }
})
</script>

<style scoped></style>