<script setup lang="ts">
import { ref } from 'vue'
import ApplicationSelectionModal from './application-selection-modal.vue'
import { useI18n } from 'vue-i18n'
import { fetchPluginCategoryKeyList, fetchPluginCategoryDetailInfoList } from '@/apis/plugin-center'

interface PluginCategoryKeyItemInterface {
  classificationName: string
  classification: string
}

interface PluginCategoryDetailInfo {
  pluginInfos: {
    pluginId: string
    title: string
    description: string
    icon: string
    points: number
  }[]
  classification: string
  classificationName: string
}

const { t } = useI18n()

const defaultIconUrl = 'https://gsst-poe-sit.gz.bcebos.com/data/20250114/1736844964077.png'

const currentActiveCategory = ref('all')
const isShowApplicationSelectionModal = ref(false)
const pluginCategoryKeyList = ref<PluginCategoryKeyItemInterface[]>([])
const pluginCategoryKeyListLoading = ref(true)

const pluginCategoryDetailInfoList = ref<PluginCategoryDetailInfo[]>([])
const pluginCategoryDetailInfoListLoading = ref(true)

const currentSelectPluginId = ref('')

/* created */
;(function () {
  getPluginCategoryKeyList()
  getPluginCategoryDetailInfoList()
})()

function getPluginCategoryKeyList() {
  pluginCategoryKeyListLoading.value = true

  fetchPluginCategoryKeyList<PluginCategoryKeyItemInterface[]>()
    .then((res) => {
      if (res.code !== 0) return ''

      pluginCategoryKeyList.value = [{ classificationName: t('common_module.all'), classification: 'all' }, ...res.data]
    })
    .finally(() => {
      pluginCategoryKeyListLoading.value = false
    })
}

function getPluginCategoryDetailInfoList() {
  const payload = {
    classification: currentActiveCategory.value === 'all' ? '' : currentActiveCategory.value,
    pluginIds: '',
  }

  pluginCategoryDetailInfoListLoading.value = true

  fetchPluginCategoryDetailInfoList<PluginCategoryDetailInfo[]>(payload)
    .then((res) => {
      if (res.code !== 0) return ''

      pluginCategoryDetailInfoList.value = res.data
    })
    .finally(() => {
      pluginCategoryDetailInfoListLoading.value = false
    })
}

function handleCurrentPluginCategorySwitch(key: string) {
  currentActiveCategory.value = key

  getPluginCategoryDetailInfoList()
}

function handlePluginUse(pluginId: string) {
  currentSelectPluginId.value = pluginId

  isShowApplicationSelectionModal.value = true
}
</script>

<template>
  <div class="flex h-full flex-col">
    <section>
      <h2 class="flex items-center">
        <i class="iconfont icon-plugin text-theme-color text-[20px]"></i>
        <span class="font-600 ml-[4px] text-[18px]">{{ t('plugin_center_module.plugin_center') }}</span>
      </h2>

      <nav class="mt-[26px]">
        <n-scrollbar x-scrollable>
          <div v-show="!pluginCategoryKeyListLoading" class="h-[33px] whitespace-nowrap pb-[14px]">
            <button
              v-for="categoryItemInfo in pluginCategoryKeyList"
              :key="categoryItemInfo.classification"
              class="font-600 mr-[10px] rounded-[5px] px-[22px] py-[6px] text-[14px]"
              :class="
                currentActiveCategory === categoryItemInfo.classification ? 'bg-theme-color text-white' : 'text-[#999]'
              "
              @click="handleCurrentPluginCategorySwitch(categoryItemInfo.classification)"
            >
              {{ categoryItemInfo.classificationName }}
            </button>
          </div>
          <div v-show="pluginCategoryKeyListLoading" class="h-[33px] pb-[14px]">
            <n-skeleton width="80%" :sharp="false" size="medium" />
          </div>
        </n-scrollbar>
      </nav>
    </section>

    <section v-show="!pluginCategoryDetailInfoListLoading" class="flex-1 overflow-hidden pt-[20px]">
      <n-scrollbar>
        <div
          v-for="categoryDetailInfoItem in pluginCategoryDetailInfoList"
          :key="categoryDetailInfoItem.classification"
          class="mb-[30px]"
        >
          <h2 class="flex items-center">
            <i class="bg-theme-color inline-block h-[14px] w-[4px] rounded-[2px]"></i>
            <span class="font-600 ml-[6px] text-[16px]">{{ categoryDetailInfoItem.classificationName }}</span>
          </h2>

          <ul
            class="mt-[24px] grid grid-flow-row-dense gap-[20px]"
            style="grid-template-columns: repeat(auto-fill, minmax(310px, 1fr))"
          >
            <li
              v-for="pluginInfoItem in categoryDetailInfoItem.pluginInfos"
              :key="pluginInfoItem.pluginId"
              class="rounded-[10px] bg-white px-[23px] py-[20px]"
            >
              <div class="flex">
                <img
                  class="h-[50px] w-[50px] rounded-[6px] object-cover"
                  :src="pluginInfoItem.icon || defaultIconUrl"
                  alt="plugin-cover"
                />

                <div class="ml-[14px] flex flex-col justify-between overflow-hidden">
                  <div class="text-[16px]">
                    <n-ellipsis :tooltip="{ 'content-style': 'max-width: 600px;' }">
                      {{ pluginInfoItem.title }}
                    </n-ellipsis>
                  </div>
                  <div class="text-[14px] text-[#999]">
                    <n-ellipsis :tooltip="{ 'content-style': 'max-width: 600px;' }">
                      {{ pluginInfoItem.description }}
                    </n-ellipsis>
                  </div>
                </div>
              </div>

              <div class="mt-[24px] text-end">
                <button
                  class="hover:bg-theme-color rounded-[5px] bg-[#eeefff] px-[15px] py-[9px] text-[14px] text-[#000DFF] transition hover:text-white"
                  @click="handlePluginUse(pluginInfoItem.pluginId)"
                >
                  {{ t('applications_square_module.immediate_use_btn_text') }}
                </button>
              </div>
            </li>
          </ul>
        </div>
      </n-scrollbar>
    </section>
    <section v-show="pluginCategoryDetailInfoListLoading" class="flex-center flex flex-1 overflow-hidden pt-[20px]">
      <n-spin size="large" />
    </section>

    <ApplicationSelectionModal
      v-model:show-modal="isShowApplicationSelectionModal"
      :current-select-plugin-id="currentSelectPluginId"
    />
  </div>
</template>
