<template>
  <div class="px-6 font-sans">
    <h2 class="mb-1 text-center text-2xl font-bold">套餐选择</h2>
    <p class="mb-4 text-center text-sm font-[100] text-gray-600">*所有套餐均不限流量不限速度</p>

    <div class="space-y-4">
      <template v-for="(plan, index) in plans" :key="plan.id">
        <!-- Special Trial Card -->
        <div
          v-if="index === 0 && trialPlan"
          @click="$emit('select', trialPlan.id)"
          class="relative h-[126px] cursor-pointer overflow-hidden rounded-[40px] border-4 border-black bg-[#A8FF53] transition-all"
        >
          <!-- Left content (Original Plan but dimmed/struck) -->
          <div class="py-4 pl-[45px] opacity-60">
            <div class="text-2xl font-bold text-black">{{ plan.days }}天</div>
            <div class="relative w-fit text-[40px] leading-none font-semibold text-black">
              ${{ plan.price }}
              <div class="absolute top-1/2 left-0 h-1 w-full -translate-y-1/2 bg-black/60"></div>
            </div>
            <div class="text-sm text-black">约${{ plan.daily }}/天</div>
          </div>

          <!-- Right overlay (Trial Info) -->
          <div
            class="absolute top-0 right-0 bottom-0 flex h-[120px] w-[126px] flex-col justify-center rounded-bl-[40px] bg-black/60 text-[#ADFF5B]"
          >
            <div class="ml-[4px] flex h-full w-full flex-col rounded-bl-[40px] bg-black">
              <div class="pt-2 pl-1">
                <div class="text-lg font-bold">新客尝鲜价</div>
                <div class="mb-1 text-xs">{{ trialCountdown }}</div>
              </div>
              <div
                class="flex h-full flex-1 items-center justify-center rounded-bl-[40px] border-4 border-black bg-[#ADFF5B] text-4xl font-semibold"
                :class="isTrialSelected ? 'bg-black text-white' : 'bg-[#ADFF5B] text-black'"
              >
                ${{ trialPlan.price }}
              </div>
            </div>
          </div>
        </div>

        <!-- Normal Card -->
        <div
          v-else
          @click="$emit('select', plan.id)"
          :class="[
            'relative h-[126px] cursor-pointer overflow-hidden rounded-[40px] border-4 border-black py-4 pl-[45px] transition-all',
            currentPlanIndex === index ? 'bg-black text-white' : 'bg-[#A8FF53] text-black',
          ]"
        >
          <div class="flex items-center gap-2 text-2xl font-bold">
            <Goods90Icon
              v-if="plan.days === 90"
              :class="[currentPlanIndex === index ? 'text-[#ADFF5B]' : 'text-black']"
            />
            {{ plan.days }}天
          </div>
          <div class="text-[40px] leading-none font-semibold">${{ plan.price }}</div>
          <div :class="'text-sm'">约${{ plan.daily }}/天</div>
          <div
            v-if="plan.discount"
            :class="[
              currentPlanIndex === index ? 'bg-[#A8FF53]! text-black' : ' ',
              index > 1 ? 'top-[15px] -right-[30px] h-[35px]' : 'top-[20px] -right-[40px] h-[16px]',
            ]"
            class="absolute h-[16px] w-[126px] origin-center rotate-45 bg-black text-center text-[14px] leading-[16px] font-[200] font-semibold text-[#ADFF5B]"
          >
            <span
              v-html="
                plan.discount + (index === 2 ? '<br>年销百万' : index === 3 ? '<br>最划算' : '')
              "
            ></span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import Goods90Icon from './goods-90-icon.svg'
const props = defineProps({
  plans: Array,
  currentPlanIndex: Number,
  trialPlan: Object,
  trialCountdown: String,
  selectedPlanId: [String, Number],
})
defineEmits(['select'])

const isTrialSelected = computed(() => {
  return props.trialPlan && props.selectedPlanId === props.trialPlan.id
})
</script>
