<template>
  <view class="explore-cards">
    <scroll-view class="explore-scroll" scroll-x show-scrollbar="false">
      <view class="explore-track">
        <view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="explore-card"
          :class="`is-${item.tone}`" hover-class="is-pressed" hover-stay-time="80"
          @tap="handleCardTap(item.raw, index)">
          <video
            v-if="item.coverImage && isMp4Video(item.coverImage)"
            class="explore-card-image"
            :src="item.coverImage"
            autoplay
            loop
            muted
            :controls="false"
            :show-center-play-btn="false"
            :show-play-btn="false"
            :show-fullscreen-btn="false"
            :show-mute-btn="false"
            :enable-progress-gesture="false"
            object-fit="cover"
          />
          <image
            v-else-if="item.coverImage"
            class="explore-card-image"
            :src="item.coverImage"
            mode="aspectFill"
          />

          <view class="explore-card-gradient" />

          <view class="explore-card-content box-border w-full min-w-0">
            <text class="explore-card-tag block w-full truncate">{{ item.tag }}</text>
            <text class="explore-card-title block w-full truncate">{{ item.title }}</text>
            <text v-if="item.subTitle" class="explore-card-desc block w-full truncate">
              {{ item.subTitle }}
            </text>
          </view>

          <view class="explore-card-arrow">
            <text>→</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["didSelectItem"]);

const FALLBACK_TAGS = ["MUST VISIT", "CULTURE", "ADVENTURE", "NIGHTLIFE"];
const TONES = ["default", "culture", "adventure", "nightlife"];

const normalizedList = computed(() =>
  props.list.map((item, index) => ({
    raw: item,
    id: item.id ?? item.tabContentId,
    title: item.title || "",
    subTitle: item.subTitle || "",
    tag: item.tag || FALLBACK_TAGS[index % FALLBACK_TAGS.length],
    coverImage: item.coverImage || "",
    tone: TONES[index % TONES.length],
  }))
);

const getItemKey = (item, index) => item.id ?? item.title ?? index;

const isMp4Video = (url) => {
  if (typeof url !== "string") return false;
  const resourcePath = url.trim().split(/[?#]/)[0];
  return resourcePath.toLowerCase().endsWith(".mp4");
};

const handleCardTap = (item, index) => {
  emit("didSelectItem", item, index);
};
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
