<script setup lang="ts">
import {useRoute} from "vue-router";
import {computed, onMounted, ref} from "vue";
import {useToolbarStore} from "@/stores/toolbar-store";
import {useToast} from "primevue/usetoast";
import {Divider, InputNumber} from "primevue";
import {categoriesService} from "@/services/categories-service";
import {useSpaceStore} from "@/stores/spaceStore";
import {recurrentsService} from "@/services/recurrents-service";
import {Category} from "@/models/category";
import router from "@/router";
import {useRecurrentsStore} from "@/stores/recurrent-store";
import {CreateRecurrentOperationDTO, UpdateRecurrentOperationDTO} from "@/models/recurrent-operation";
import ConfirmDialog from "@/components/ConfirmDialog.vue";

const route = useRoute()
const toolbar = useToolbarStore();
const toast = useToast();
const spaceStore = useSpaceStore();
const recurrentsStore = useRecurrentsStore();

const isCategorySelectorOpened = ref(false);

const categorySearchQuery = ref<String>("");
const categories = ref<Category[]>([]);
const filteredCategories = computed(() => {
  return categorySearchQuery.value === '' ? categories.value : categories.value.filter(i =>
      i.name.toLowerCase().includes(categorySearchQuery.value.toLowerCase())
  );
});
const recurrentId = ref<number | undefined>(route.params.id)
const mode = computed(() => {
  return recurrentId.value ? "edit" : "create"
})
const recurrentCategory = ref<Category>({} as Category)
const isCategoryError = ref(false)
const recurrentName = ref<string>('')
const isNameError = ref(false)
const recurrentAmount = ref<number>(0)
const isAmountError = ref(false)
const recurrentDate = ref<number>(Math.floor(Math.random() * 31))
const isDateError = ref(false)


const fetchData = async () => {
  try {
    if (spaceStore.selectedSpaceId) {
      categories.value = await categoriesService.fetchCategories(spaceStore.selectedSpaceId)
      if (categories.value.length > 0) {
        if (mode.value === "edit") {
          let recurrent = await recurrentsService.fetchRecurrent(spaceStore.selectedSpaceId, Number(recurrentId.value))
          recurrentCategory.value = recurrent.category
          recurrentName.value = recurrent.name
          recurrentAmount.value = recurrent.amount
          recurrentDate.value = recurrent.date
        } else {
          recurrentCategory.value = categories.value[0]
        }
      }
    }
  } catch (err) {
    console.log(err)
    toast.add({
      severity: "error",
      summary: "Error while fetching category",
      detail: err.detail.message,
      life: 3000,
    })
  }
}

function handleInput(e: Event) {
  const el = e.target as HTMLInputElement
  const val = el.value.trim()

  // если пусто — сбрасываем
  if (!val) {
    recurrentAmount.value = 0
    return
  }

  // пробуем преобразовать в число
  const num = Number(val)
  recurrentAmount.value = isNaN(num) ? 0 : num
}

function handlePaste(e: ClipboardEvent) {
  e.preventDefault() // предотвратить стандартную вставку
  const text = e.clipboardData?.getData('text')?.trim() ?? ''

  if (!text) {
    recurrentAmount.value = 0
    return
  }

  const num = Number(text)
  recurrentAmount.value = isNaN(num) ? 0 : num
}

const tgApp = (window as any)?.Telegram?.WebApp;
const insetTop = ref(54)
const resetForm = () => {
  isAmountError.value = false
  isCategoryError.value = false
  isNameError.value = false
  isDateError.value = false
}

const validateForm = (): boolean => {
  if (!recurrentCategory.value) {
    isCategoryError.value = true
    return false
  }
  if (recurrentAmount.value <= 0) {
    isAmountError.value = true
    return false
  }
  if (recurrentName.value.length == 0) {
    isNameError.value = true
    return false
  }

  if (recurrentDate.value < 1 && recurrentDate.value > 31) {
    isDateError.value = true
    return false
  }
  return true
}

const buildUpdate = (): UpdateRecurrentOperationDTO => {
  if (validateForm()) {
    if (mode.value === "edit") {
      return {
        categoryId: recurrentCategory.value.id,
        name: recurrentName.value,
        amount: recurrentAmount.value,
        date: recurrentDate.value,
      } as UpdateRecurrentOperationDTO
    } else {
      toast.add({
        severity: "warn",
        summary: "You cannot create while edit",
        detail: "Editing only available when recurrent id is provided.",
      })
      throw new Error("Editing only available when recurrent id is provided.")
    }
  } else {
    throw new Error("Form is not valid")
  }

}

const buildCreate = (): CreateRecurrentOperationDTO => {
  if (validateForm()) {
    if (mode.value === "create") {
      return {
        categoryId: recurrentCategory.value.id,
        name: recurrentName.value,
        amount: recurrentAmount.value,
        date: recurrentDate.value,
      } as CreateRecurrentOperationDTO
    } else {
      toast.add({
        severity: "warn",
        summary: "You cannot edit while creating",
        detail: "Creating only available when no recurrent id is provided.",
      })
      throw new Error("Creating only available when creating")
    }
  } else {
    throw new Error("Form is not valid")
  }
}

const isDeleteAlertVisible = ref(false)
const deleteAlertMessage = ref('Do you want to delete recurrent?')
const deleteRecurrent = async () => {
  await recurrentsService.deleteRecurrent(spaceStore.selectedSpaceId, recurrentId.value)
  // await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
  if (window.history.length > 1) {
    router.back()
  } else {
    await router.push('/categories')
  }
}

onMounted(async () => {
  if (tgApp && ['ios', 'android'].includes(tgApp.platform)) {
    insetTop.value = tgApp.contentSafeAreaInset.top + tgApp.safeAreaInset.top
  }

  await fetchData()
  if (mode.value === "edit") {

    toolbar.registerHandler('deleteRecurrent', async () => {
      console.log('deleteRecurrent1')

      if (spaceStore.selectedSpaceId && recurrentId.value) {
        console.log('deleteRecurrent2')
        if (tgApp.initData) {
          console.log('deleteRecurrent3')
          tgApp.showConfirm(deleteAlertMessage.value, async (confirmed: boolean) => {
            if (confirmed) {
              console.log("recurrent id is deleted")
              await deleteRecurrent()
            }
          })
        } else {
          console.log('deleteRecurrent4')
          isDeleteAlertVisible.value = true
        }
      }
    })
    toolbar.registerHandler('updateRecurrent', async () => {
      if (spaceStore.selectedSpaceId) {
        try {
          await recurrentsService.updateRecurrent(spaceStore.selectedSpaceId, Number(recurrentId.value),  buildUpdate())
          // await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
          router.back()
        } catch (error) {
          toast.add({
            severity: "error",
            summary: "Error while updating recurrent",
            detail: error.message,
            life: 3000,
          })
        }

      }
    })
  } else {
    toolbar.registerHandler('createRecurrent', async () => {
      if (spaceStore.selectedSpaceId) {
        await recurrentsService.createRecurrent(spaceStore.selectedSpaceId, buildCreate())
        // await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
        router.back()
      }
    })
  }
})
</script>

<template>
  <div v-if="categories.length===0" class="card !gap-4 !p-10">
    <span class="">No categories available.</span>
    <span class="text-center">Maybe you want to <router-link to="/categories" class="!text-blue-700">create a new category</router-link> first?</span>
  </div>
  <div v-else class="flex flex-col w-full justify-items-start gap-1">
    <ConfirmDialog
        v-if="isDeleteAlertVisible"
        :message="deleteAlertMessage"
        :callback="(confirmed) => { if (confirmed) deleteRecurrent(); isDeleteAlertVisible = false; }"
    />
    <!-- Fixed modal container -->
    <div v-if="isCategorySelectorOpened" class="fixed inset-0 z-50 flex items-start justify-center p-4 overflow-y-auto"
         style="background-color: var(--primary-color); "
         :style="tgApp ? `padding-top: ${insetTop}px !important` : 'padding-top: 2rem !important'">
      <div class="flex w-full max-w-md !pb-24">
        <div class="flex card justify-items-start justify-start gap-2">
          <input class="p-2 rounded-xl border border-gray-100  w-full" placeholder="Search categories" v-model="categorySearchQuery">
          <div v-for="(cat, idx) in filteredCategories" :key="cat.id"
               @click="recurrentCategory = cat; isCategorySelectorOpened = false"
               class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold cursor-pointer hover:bg-gray-50 transition-colors">
            <div class="flex flex-row w-full items-center justify-between py-3">
              <div class="flex flex-row items-center gap-2">
                <span class="text-3xl">{{ cat.icon }} </span>
                <div class="flex flex-col justify-between">
                  <div class="flex flex-row"> {{ cat.name }}</div>
                  <div class="flex flex-row text-sm text-gray-600">{{ cat.description }}</div>
                </div>
              </div>
              <i class="pi pi-angle-right !font-extralight"/>
            </div>
            <Divider v-if="idx + 1 !== filteredCategories.length" class="!m-0"/>
          </div>
        </div>
      </div>
    </div>

    <div class="flex flex-col w-full  ">
      <div class="flex flex-col w-full">
        <InputNumber
            v-model="recurrentAmount"
            @input=" isAmountError = false"
            @paste="handlePaste"
            type="text"
            inputmode="numeric"
            placeholder="Amount"
            suffix="₽"
            class="text-7xl font-bold w-full text-center focus:outline-none !p-0 !m-0"

        />
        <span v-if="isAmountError" class="text-sm !text-red-500 font-extralight">Amount couldn't be less then 1</span>
        <!--          <span class="absolute right-2 top-1/2 -translate-y-1/2 text-7xl font-bold">₽</span>-->

        <label class="!justify-items-center !justify-center !font-extralight text-gray-600 text-center">Amount</label>
      </div>


    </div>
    <div class="flex flex-col w-full justify-items-start">
      <label class="!font-semibold  text-gray-600 pl-2">Recurrent category</label>
      <div class="flex card !justify-start !items-start !p-4 !pl-5 cursor-pointer"
           @click="isCategorySelectorOpened = true; isCategoryError=false;">
        <div class="flex flex-row w-full gap-2 items-center justify-between">
          <div class="flex flex-row gap-2 items-center">
            <span class="!text-3xl ">{{ recurrentCategory.icon }}</span>
            <div class="flex flex-col ">
              <span class=" !">{{ recurrentCategory.name }}
              </span>
            </div>
          </div>
          <i class="pi pi-angle-right  !font-extralight"/>
        </div>
      </div>
      <span v-if="isCategoryError" class="text-sm text-red-500 font-extralight">Category should be selected</span>
    </div>
    <div class="flex flex-col w-full justify-items-start">
      <label class="!font-semibold  text-gray-600 pl-2">Recurrent name</label>
      <div class="flex card !justify-start !items-start !p-4 !pl-5 ">
        <input class="font-extralight  w-full focus:outline-0" placeholder="Name"
               @input="recurrentName?.length ==0 ? isNameError = true : isNameError=false" v-model="recurrentName"/>
      </div>
      <span v-if="isNameError" class="text-sm !text-red-500 font-extralight">Name couldn't be empty.</span>

    </div>
    <div class="flex flex-col w-full justify-items-start">
      <label class="!font-semibold  text-gray-600 !pl-2">Recurrent date</label>
      <div class="flex card !justify-start !items-start !pl-2">
        <div class="flex !grid !grid-cols-7 gap-2">
          <div v-for="i in 31"
               class="!w-12 !h-12 !items-center !justify-items-center !justify-center rounded-full cursor-pointer flex"
               :class="recurrentDate == i ? 'bg-green-200' : 'bg-gray-100'"
               @click="recurrentDate=i; isDateError=false">
            {{ i }}
          </div>
        </div>
      </div>
      <span v-if="isDateError" class="text-sm text-red-500 font-extralight">Date couldn't be empty or less than 1 and greater than 31.</span>
      <label class="!font-extralight text-gray-600 !pl-2">recurrent every N day of month</label>

    </div>

  </div>

</template>

<style scoped>

</style>