<template>
  <div
    class="w-full bg-white overflow-hidden rounded-[20px] flex flex-col min-h-[178px] my-4 border border-[rgba(15,23,42,0.04)] shadow-[0_12px_28px_rgba(15,23,42,0.04)] box-border transition-[transform,opacity] duration-150 ease-in-out active:scale-[0.985]">
    <!-- 占位撑开 -->
    <div class="w-full"></div>
    <div class="flex flex-col p-[16px]" @click="openDetail(item)">

      <div
        class="inline-flex w-fit items-center justify-center min-h-[26px] px-[10px] border rounded-full leading-[18px] text-[12px] font-bold"
        :class="getBadgeClass(item.badgeTone)">
        {{ item.badge }}
      </div>

      <div class="mt-[18px] leading-6 text-[#1e293b] text-[18px] font-bold">
        {{ item.title }}
      </div>
      <div class="mt-[10px] leading-[22px] text-[#94A3B8] text-[14px] font-medium ellipsis-2">
        {{ item.summary }}
      </div>
      <div class="mt-6 flex items-center justify-between">
        <span class="text-[#cbd5e1] text-[12px] font-bold">{{ item.footer }}</span>
        <van-icon name="arrow" size="16" color="#CBD5E1" />
      </div>

    </div>
  </div>

</template>

<script setup>
import { defineProps, computed } from "vue";
import { useI18n } from "vue-i18n";
import { getLongTextGuideDetailRoute } from "./detailRoutes.mjs";

const { t } = useI18n();
const props = defineProps({
  componentName: {
    type: String,
    default: 'longTextCard',
  },
});

const cardMap = computed(() => ({
  longTextCard: {
    type: 'longTextCard',
    badge: t("home.longTextCards.rafting.badge"),
    badgeTone: "amber",
    title: t("home.longTextCards.rafting.title"),
    summary: t("home.longTextCards.rafting.summary"),
    footer: t("home.longTextCards.rafting.footer"),
  },
  longTextCardScenicSpot: {
    type: 'longTextCardScenicSpot',
    badge: t("home.longTextCards.scenicSpot.badge"),
    badgeTone: "green",
    title: t("home.longTextCards.scenicSpot.title"),
    summary: t("home.longTextCards.scenicSpot.summary"),
    footer: t("home.longTextCards.scenicSpot.footer"),
  },
  longTextCardRoute: {
    type: 'longTextCardRoute',
    badge: t("home.longTextCards.route.badge"),
    badgeTone: "violet",
    title: t("home.longTextCards.route.title"),
    summary: t("home.longTextCards.route.summary"),
    footer: t("home.longTextCards.route.footer"),
  },
  longTextCardSnap: {
    type: 'longTextCardSnap',
    badge: t("home.longTextCards.photo.badge"),
    badgeTone: "blue",
    title: t("home.longTextCards.photo.title"),
    summary: t("home.longTextCards.photo.summary"),
    footer: t("home.longTextCards.photo.footer"),
  },
}));

const item = computed(() => {
  return cardMap.value[props.componentName] || cardMap.value.longTextCard;
});

const getBadgeClass = (tone) => {
  const toneMap = {
    amber: "text-[#d97706] bg-[#fffbeb] border-[#fde68a]",
    green: "text-[#059669] bg-[#ecfdf5] border-[#a7f3d0]",
    violet: "text-[#7c3aed] bg-[#f5f3ff] border-[#ddd6fe]",
    blue: "text-[#2563eb] bg-[#eff6ff] border-[#bfdbfe]",
  };
  return toneMap[tone] || "border-transparent";
};

const openDetail = (item) => {
  console.log("🚀 ~ openDetail ~ item:", item)
  const url = getLongTextGuideDetailRoute(item.type);
  if (!url) {
    showToast(t("home.longTextCards.missingDetail"));
    return;
  }

  uni.navigateTo({ url });
};

</script>
