<template>
  <div
    :class="['product-link', { 'is-disabled': isSoldOut }]"
    @click="$emit('click', item)"
  >
    <article class="product-card">
      <div class="cover-wrap">
        <img :src="item.coverUrl" :alt="item.name" />
        <div v-if="isSoldOut" class="soldout-badge">已售空</div>
        <div v-else-if="item.requireLogin" class="require-login-badge">需登录</div>
        <button
          v-if="loggedIn"
          class="wishlist-btn"
          :class="{ 'in-wishlist': inWishlist }"
          type="button"
          @click="onWishlistClick"
          :title="inWishlist ? '取消收藏' : '加入收藏'"
        >
          {{ inWishlist ? '★' : '☆' }}
        </button>
      </div>
      <div class="card-top">
        <h3 class="card-name">{{ item.name }}</h3>
        <div class="card-price">
          <span v-if="isFree" class="product-price free-price">免费</span>
          <span
            v-else-if="item.discountPrice > 0 && item.discountPrice < item.price"
            class="product-price"
          >
            <span class="price-original">¥ {{ item.price.toFixed(2) }}</span>
            <span class="price-discount">¥ {{ item.discountPrice.toFixed(2) }}</span>
          </span>
          <span v-else class="product-price">¥ {{ item.price.toFixed(2) }}</span>
        </div>
      </div>

      <div class="card-mid">
        <div class="markdown" v-html="renderedDescription"></div>
      </div>

      <div class="card-bottom">
        <div v-if="item.tags && item.tags.length" class="tag-row">
          <span v-for="tag in item.tags" :key="tag" class="tag-chip">{{ tag }}</span>
        </div>
        <div class="meta-row">
          <div class="tag">库存：{{ item.quantity }}</div>
          <div class="tag">浏览量：{{ 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 { 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(() => props.item && props.item.quantity === 0)
const renderedDescription = computed(() => md.render(props.item.description || ''))
</script>

<style scoped>
.product-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.product-link.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.product-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  height: 100%;
}

.card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.card-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.card-price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.card-mid {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card-mid .markdown {
  text-align: center;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.meta-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.cover-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.cover-wrap img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.soldout-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 22, 0.52);
  backdrop-filter: blur(3px);
  color: #fff;
  font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 4px;
  pointer-events: none;
}

.require-login-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(180, 154, 203, 0.85);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
  backdrop-filter: blur(4px);
  letter-spacing: 0.5px;
}

.wishlist-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: auto;
  height: auto;
  border-radius: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: color 0.2s ease, transform 0.15s ease;
  padding: 0;
  box-shadow: none;
}

.wishlist-btn:hover {
  transform: scale(1.2);
}

.wishlist-btn.in-wishlist {
  color: #ffb347;
  text-shadow: 0 1px 6px rgba(255, 140, 0, 0.6);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.tag-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-2);
  background: rgba(145, 168, 208, 0.08);
  border: 1px solid rgba(145, 168, 208, 0.18);
}

.tag {
  font-size: 14px;
  color: var(--muted);
}

.free-price {
  color: #3a9a68;
  font-weight: 900;
}

.price-original {
  text-decoration: line-through;
  color: var(--muted);
  margin-right: 6px;
  font-size: 15px;
}

.price-discount {
  color: var(--accent-2);
  font-weight: 600;
}

@media (max-width: 900px) {
  .cover-wrap img {
    height: 100px;
  }

  /* Name + price on one line, compressed */
  .card-top {
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
  }

  .card-name {
    font-size: 14px;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    word-break: break-all;
  }

  .card-price {
    flex-shrink: 0;
    font-size: 13px;
  }

  .price-original {
    font-size: 11px;
    margin-right: 2px;
  }

  .free-price {
    font-size: 13px;
  }

  .card-mid {
    display: flex;
  }

  .card-mid .markdown {
    font-size: 12px;
    -webkit-line-clamp: 2;
  }

  .card-bottom {
    gap: 4px;
    font-size: 12px;
  }

  .tag-row {
    display: flex;
    gap: 4px;
    margin-top: 4px;
  }

  .tag-chip {
    font-size: 11px;
    padding: 2px 7px;
  }

  .tag {
    font-size: 11px;
  }
}
</style>
