<template>
  <div
    class="block no-underline text-inherit h-full"
    :class="isSoldOut ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'"
    @click="$emit('click', item)"
  >
    <article class="flex flex-col flex-1 gap-3 h-full bg-white/72 border border-white/35 rounded-lg p-[18px] shadow-[0_12px_30px_rgba(33,33,40,0.1)] max-md:p-2.5">
      <!-- Cover image -->
      <div class="relative rounded-md overflow-hidden">
        <img
          :src="item.coverUrl"
          :alt="item.name"
          class="w-full h-[140px] object-cover block max-md:h-[100px]"
        />
        <div
          v-if="isSoldOut"
          class="absolute inset-0 flex items-center justify-center bg-[rgba(20,18,22,0.52)] backdrop-blur-sm text-white text-[22px] font-semibold tracking-[4px] pointer-events-none"
          style="font-family: var(--font-serif);"
        >已售空</div>
        <div
          v-else-if="item.requireLogin"
          class="absolute top-2 right-2 px-2.5 py-0.5 rounded-full bg-accent/85 text-white text-[13px] font-bold pointer-events-none backdrop-blur-sm tracking-[0.5px]"
        >需登录</div>
        <button
          v-if="loggedIn"
          class="absolute bottom-2 right-2 p-0 w-auto h-auto border-none bg-transparent shadow-none text-xl leading-none text-white/90 [text-shadow:0_1px_4px_rgba(0,0,0,0.5)] transition-transform hover:scale-125"
          :class="inWishlist ? 'text-[#ffb347] [text-shadow:0_1px_6px_rgba(255,140,0,0.6)]' : ''"
          type="button"
          @click="onWishlistClick"
          :title="inWishlist ? '取消收藏' : '加入收藏'"
        >{{ inWishlist ? '★' : '☆' }}</button>
      </div>

      <!-- Name + price -->
      <div class="flex items-baseline justify-between gap-3 max-md:flex-row max-md:items-start max-md:gap-1">
        <h3 class="text-[18px] font-bold text-apptext leading-[1.2] max-md:text-sm max-md:leading-[1.3] max-md:flex-1 max-md:min-w-0 max-md:break-all">{{ item.name }}</h3>
        <div class="flex items-center justify-end max-md:flex-shrink-0 max-md:text-[13px]">
          <span v-if="isFree" class="text-[#3a9a68] font-black max-md:text-[13px]">免费</span>
          <span v-else-if="item.discountPrice > 0 && item.discountPrice < item.price" class="text-accent2 font-semibold">
            <span class="line-through text-muted mr-1.5 text-[15px] max-md:text-[11px] max-md:mr-0.5">¥ {{ item.price.toFixed(2) }}</span>
            ¥ {{ item.discountPrice.toFixed(2) }}
          </span>
          <span v-else class="text-accent2 font-semibold">¥ {{ item.price.toFixed(2) }}</span>
        </div>
      </div>

      <!-- Description -->
      <div class="flex-1 flex items-center justify-center text-center">
        <div
          class="markdown text-center text-[15px] text-muted leading-relaxed line-clamp-3 overflow-hidden max-md:text-xs max-md:line-clamp-2"
          v-html="renderedDescription"
        ></div>
      </div>

      <!-- Tags + meta -->
      <div class="flex flex-col gap-1.5 items-start max-md:gap-1 max-md:text-xs">
        <div v-if="item.tags && item.tags.length" class="flex flex-wrap gap-2 mt-2 max-md:gap-1 max-md:mt-1">
          <span
            v-for="tag in item.tags"
            :key="tag"
            class="px-2.5 py-1 rounded-full text-sm font-bold text-accent2 bg-[rgba(145,168,208,0.08)] border border-[rgba(145,168,208,0.18)] max-md:text-[11px] max-md:px-1.5 max-md:py-0.5"
          >{{ tag }}</span>
        </div>
        <div class="flex gap-2.5 items-center flex-wrap">
          <div class="text-sm text-muted max-md:text-[11px]">库存：{{ stockLabel(item) }}</div>
          <div class="text-sm text-muted max-md:text-[11px]">浏览量：{{ item.viewCount || 0 }}</div>
        </div>
      </div>
    </article>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import MarkdownIt from 'markdown-it'
import { isLoggedIn } from '../../shared/auth'
import { isSoldOutProduct, stockLabel } from '../../shared/fulfillment'
import { isInWishlist, toggleWishlist } from '../../shared/useWishlist'

const md = new MarkdownIt()

const props = defineProps({
  item: { type: Object, required: true }
})

const emit = defineEmits(['click'])

const inWishlist = computed(() => isInWishlist(props.item.id))
const loggedIn = computed(() => isLoggedIn())

const onWishlistClick = (e) => {
  e.stopPropagation()
  toggleWishlist(props.item.id)
}

const payPrice = computed(() => {
  if (!props.item) return 0
  if (props.item.price === 0) return 0
  if (props.item.discountPrice > 0 && props.item.discountPrice < props.item.price) {
    return props.item.discountPrice
  }
  return props.item.price
})

const isFree = computed(() => payPrice.value === 0)
const isSoldOut = computed(() => isSoldOutProduct(props.item))
const renderedDescription = computed(() => md.render(props.item.description || ''))
</script>
