<script setup lang="ts">
import { SplideSlide } from '@splidejs/vue-splide'
import { globalDateFormat } from '@seed-next/date'
import {
  getComponentGroup,
  getComponentContainer,
} from '#layers/utils/dataUtil'
import { getYouTubeThumbnail } from '#layers/utils/youtubeUtil'
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
import type { OperateGroupItem } from '#layers/types/api/operateResources'

interface Props {
  id?: string
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
}

const props = defineProps<Props>()

const pageDataStore = usePageDataStore()
const modalStore = useModalStore()
const breakpoints = useResponsiveBreakpoints()
const { getOperateResources } = useOperateResources()

const { pageData } = storeToRefs(pageDataStore)

// Configuration
const runtimeConfig = useRuntimeConfig()
const dataResourcesUrl = runtimeConfig.public.dataResourcesUrl
const multilingualFileName = 'STOVE_PUBTEMPLATE_homepage_brand_video.json'

// Multilingual
const resultGetMultilingual = await useGetMultilingual({
  baseApiUrl: dataResourcesUrl,
  fileName: multilingualFileName,
})

const { tm, locale } = useI18n({
  useScope: 'local',
  messages: Object(resultGetMultilingual?.value?.multilingual),
})

const recommendHover = ref(false)

const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
)
const officialUrlData = computed(
  () => getComponentGroup(props.components, 'officialUrl')?.display?.text ?? ''
)

const { data: slideData } = await useAsyncData(
  `fx-video-01-resources-${pageData.value?.page_seq}-${pageData.value?.page_ver}-${props.pageVerTmplSeq}`,
  async () => {
    if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
      return []
    }

    const operateGroupList = await getOperateResources({
      pageSeq: pageData.value.page_seq,
      pageVer: pageData.value.page_ver,
      pageVerTmplSeq: props.pageVerTmplSeq,
      langCode: locale.value,
    })

    const mediaList = getComponentContainer(operateGroupList, 'mediaList', {
      isGroup: true,
    }) as OperateGroupItem[]

    return mediaList ?? []
  },
  {
    default: () => [],
    server: false,
  }
)

const VIDEO_TYPE = {
  RECOMMENDED: 1,
  RECENT: 0,
} as const
const ITEMS_PER_PAGE = {
  MOBILE: 8,
  DESKTOP: 12,
} as const

const currentRecommendedIndex = ref<number | null>(null)
const currentRecentPage = ref(1)

// 추천 영상 (option01 === 1)
const recommendedVideos = computed(
  () =>
    slideData.value?.filter(item => item.option01 === VIDEO_TYPE.RECOMMENDED) ||
    []
)
// 최근 영상 (option01 === 0)
const recentVideos = computed(
  () =>
    slideData.value?.filter(item => item.option01 === VIDEO_TYPE.RECENT) || []
)
// 페이지당 보여줄 개수 (PC: 12개, Mobile: 8개)
const itemsPerPage = computed(() =>
  breakpoints.value.isMobile ? ITEMS_PER_PAGE.MOBILE : ITEMS_PER_PAGE.DESKTOP
)
const visibleVideos = computed(() => {
  const endIndex = currentRecentPage.value * itemsPerPage.value
  return recentVideos.value.slice(0, endIndex)
})
const hasMore = computed(
  () => visibleVideos.value.length < recentVideos.value.length
)

const handleVideoClick = (url: string) => {
  modalStore.handleOpenYoutube({ youtubeUrl: url })
}

const handleLoadMoreRecent = () => {
  if (hasMore.value) {
    currentRecentPage.value++
  }
}
</script>

<template>
  <WidgetsFixMainTitle
    :id="props.id"
    :title="tm('Video_Page_Title')"
    :resources-data="backgroundData"
  />
  <div class="section-container static">
    <section class="section-static">
      <WidgetsFixSubTitle
        :title="tm('Video_Section_Recommendation_Title')"
        :description="tm('Video_Page_Link')"
        :link="officialUrlData"
      />
      <div
        class="relative content-static bg-[#fff] rounded-[12px] md:rounded-[16px]"
      >
        <BlocksSlideFade
          v-model:index="currentRecommendedIndex"
          :autoplay="recommendedVideos.length > 1"
          :interval="3000"
          :arrows="recommendedVideos.length > 1"
          :pagination="false"
          :drag="false"
        >
          <SplideSlide
            v-for="(item, index) in recommendedVideos"
            :key="`recommended-${item.url}-${index}`"
          >
            <div
              class="overflow-hidden relative aspect-[16/9] flex-shrink-0 w-full rounded-[4px] cursor-pointer group sm:w-[60.3%] sm:rounded-[8px] md:w-[56%] lg:w-[710px] lg:rounded-[12px]"
              @click="handleVideoClick(item.url)"
            >
              <img
                :src="getYouTubeThumbnail(item.url, 'maxres')"
                :alt="item.title || 'Video thumbnail'"
                loading="lazy"
                decoding="async"
                :class="[
                  'w-full h-full object-cover group-hover:scale-110 transition-transform duration-300',
                  { 'is-hover': recommendHover },
                ]"
              />
              <AtomsIconsPlayRoundFill
                class="drop-shadow-[0_0_6px_rgba(0,0,0,0.25)] absolute bottom-[14px] right-[14px] w-[20px] h-[20px] sm:bottom-[18px] sm:right-[18px] md:bottom-[23px] md:right-[23px] md:w-[33px] md:h-[33px]"
              />
            </div>
            <div
              class="w-full mx-[8px] pb-[20px] border-b border-[rgba(0,0,0,0.08)] cursor-pointer sm:mx-[0] sm:pt-[12px] sm:pr-[16px] sm:pb-[0] sm:border-none md:pt-[20px] md:pr-[28px] lg:pt-[40px] lg:pr-[48px]"
              @click="handleVideoClick(item.url)"
              @mouseenter="recommendHover = true"
              @mouseleave="recommendHover = false"
            >
              <h4
                class="h-[52px] text-[18px] font-[700] leading-[26px] tracking-[-0.54px] text-[#1F1F1F] line-clamp-2 sm:h-[auto] sm:text-[20px] sm:leading-[30px] sm:tracking-[-0.6px] sm:line-clamp-3 md:text-[32px] md:leading-[44px] md:tracking-[-0.96px]"
              >
                {{ item.title || '' }}
              </h4>
              <p
                class="mt-2 text-[14px] leading-[24px] tracking-[-0.42px] text-[#999] sm:mt-3.5 md:mt-4 md:text-[18px] md:font-[500] md:leading-[26px] md:tracking-[-0.54px] lg:mt-5 lg:text-[20px] lg:leading-[30px] lg:tracking-[-0.6px]"
              >
                {{ globalDateFormat(item.reg_dt, locale) }}
              </p>
            </div>
          </SplideSlide>
        </BlocksSlideFade>
        <div v-if="recommendedVideos.length > 1" class="splide-pagination">
          <span class="font-[700] text-[#1F1F1F]">
            {{ currentRecommendedIndex + 1 }}
          </span>
          /
          <span>{{ recommendedVideos.length }}</span>
        </div>
      </div>
    </section>
    <section class="section-static">
      <WidgetsFixSubTitle :title="tm('Video_Section_Recent_Title')" />
      <div class="content-static">
        <ul class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
          <li
            v-for="(item, index) in visibleVideos"
            :key="`recent-${item.url}-${index}`"
            class="p-3 rounded-[12px] bg-white md:p-4 md:rounded-[16px] lg:p-5 group cursor-pointer"
            @click="handleVideoClick(item.url)"
          >
            <div
              class="overflow-hidden relative aspect-[16/9] w-full rounded-[4px] sm:rounded-[8px] lg:rounded-[12px]"
            >
              <img
                :src="getYouTubeThumbnail(item.url)"
                :alt="item.title || 'Video thumbnail'"
                loading="lazy"
                decoding="async"
                class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
              />
              <AtomsIconsPlayRoundFill
                class="drop-shadow-[0_0_6px_rgba(0,0,0,0.25)] absolute bottom-[14px] right-[14px] w-[20px] h-[20px]"
              />
            </div>
            <div class="p-2 pt-5 md:p-3 md:pt-5">
              <h4
                class="h-[48px] text-[16px] font-[700] leading-[24px] tracking-[-0.48px] text-[#1F1F1F] line-clamp-2 md:h-[52px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px]"
              >
                {{ item.title || '' }}
              </h4>
              <p
                class="mt-2 text-[14px] leading-[24px] tracking-[-0.42px] text-[#999] md:text-[16px] md:leading-[26px] md:tracking-[-0.48px]"
              >
                {{ globalDateFormat(item.reg_dt, locale) }}
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div v-if="hasMore" class="mt-[40px] flex justify-center md:mt-[80px]">
        <AtomsButton
          type="action"
          button-size="size-small md:size-medium"
          background-color="#383838"
          text-color="#FFFFFF"
          @click="handleLoadMoreRecent"
        >
          {{ tm('Text_More') }}
        </AtomsButton>
      </div>
    </section>
  </div>
</template>

<style scoped>
.splide {
  @apply pb-[68px] sm:pb-[0];
}
.splide:deep(.splide-arrows) {
  @apply block;
}
.splide:deep(.splide-arrows) .splide-arrow {
  @apply block top-[unset] bottom-[20px] translate-y-0 bg-cover bg-center bg-no-repeat
  sm:bottom-[24px] md:bottom-[36px] lg:bottom-[60px];
}
.splide:deep(.splide-arrows) .arrow-prev {
  @apply left-[20px] bg-[image:url('/images/common/btn_system_arrow_prev.png')]
  sm:left-[calc(60.3%+21px)] 
  md:left-[calc(56%+39px)] 
  lg:left-[790px];
}
.splide:deep(.splide-arrows) .arrow-next {
  @apply right-[20px] bg-[image:url('/images/common/btn_system_arrow_next.png')]
  sm:right-[28px] 
  md:right-[unset] md:left-[calc(56%+99px)]
  lg:left-[850px];
}
.splide__slide {
  @apply flex flex-col items-start p-3 gap-4 sm:flex-row sm:gap-6 md:gap-10 md:p-4 lg:gap-[60px] lg:p-5;
}
.splide-pagination {
  @apply absolute bottom-[28px] left-[80px] right-[80px] text-center font-[500] text-[16px] leading-[24px] tracking-[-0.48px] text-[#999] 
  sm:bottom-[32px] sm:left-[calc(60.3%+73px)] sm:right-[80px]
  md:bottom-[47px] md:left-[calc(56%+167px)] md:right-[unset] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px]
  lg:bottom-[71px] lg:left-[918px];
}
.is-hover {
  @apply scale-110;
}
</style>
