<template>
  <div class="rounded-lg overflow-x-auto border border-white/35 max-md:[webkit-overflow-scrolling:touch]">
    <table class="table bg-white/45 max-md:min-w-[580px]">
      <thead>
        <tr class="bg-white/70 border-b-2 border-white/35">
          <th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted max-md:px-2.5 max-md:py-2 max-md:text-xs">商品</th>
          <th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted max-md:px-2.5 max-md:py-2 max-md:text-xs">价格</th>
          <th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted text-center max-md:px-2.5 max-md:py-2 max-md:text-xs">库存 / 方式</th>
          <th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted text-center max-md:px-2.5 max-md:py-2 max-md:text-xs">浏览量</th>
          <th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted max-md:px-2.5 max-md:py-2 max-md:text-xs">状态</th>
          <th class="px-4 py-3 text-sm font-semibold uppercase tracking-[0.6px] text-muted max-md:px-2.5 max-md:py-2 max-md:text-xs">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="item in products"
          :key="item.id"
          class="border-b border-white/35 last:border-b-0 transition-colors hover:bg-white/70"
          :class="{ 'opacity-55': !item.active }"
        >
          <td class="px-4 py-3.5 align-middle max-md:px-2.5 max-md:py-2">
            <div class="flex items-center gap-3">
              <img
                class="w-12 h-12 rounded-md object-cover border border-white/35 flex-shrink-0 shadow-[0_4px_10px_rgba(33,33,40,0.1)] max-md:w-9 max-md:h-9"
                :src="item.coverUrl" :alt="item.name"
              />
              <div class="flex flex-col gap-0.5">
                <span class="text-base font-semibold text-apptext max-md:text-[13px]">{{ item.name }}</span>
                <span class="text-[13px] text-muted font-mono max-md:text-[11px]">{{ item.id }}</span>
              </div>
            </div>
          </td>
          <td class="px-4 py-3.5 align-middle max-md:px-2.5 max-md:py-2">
            <div v-if="item.price === 0" class="font-black text-[#3a9a68] text-[17px]">免费</div>
            <div v-else-if="item.discountPrice > 0 && item.discountPrice < item.price" class="flex flex-col gap-0.5">
              <span class="line-through text-muted text-sm">¥{{ item.price.toFixed(2) }}</span>
              <span class="font-bold text-[#e8826a] text-[17px]">¥{{ item.discountPrice.toFixed(2) }}</span>
            </div>
            <span v-else class="font-semibold text-apptext">¥{{ item.price.toFixed(2) }}</span>
          </td>
          <td class="px-4 py-3.5 text-center align-middle max-md:px-2.5 max-md:py-2">
            <span
              class="inline-block px-2.5 py-0.5 rounded-full text-[13px] font-semibold"
              :class="stockBadgeClass(item)"
            >{{ stockLabel(item) }}</span>
            <div class="text-[11px] text-muted mt-1">{{ fulfillmentHint(item) }}</div>
          </td>
          <td class="px-4 py-3.5 text-center text-[15px] text-muted align-middle max-md:px-2.5 max-md:py-2">{{ item.viewCount || 0 }}</td>
          <td class="px-4 py-3.5 align-middle max-md:px-2.5 max-md:py-2">
            <span
              class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-semibold tracking-[0.3px]"
              :class="item.active ? 'bg-[rgba(100,185,140,0.15)] text-[#3a9a68]' : 'bg-[rgba(140,140,145,0.12)] text-muted'"
            >{{ item.active ? '上架' : '下架' }}</span>
          </td>
          <td class="px-4 py-3.5 align-middle max-md:px-2.5 max-md:py-2">
            <div class="flex gap-1.5 items-center">
              <button
                class="px-3 py-1.5 rounded text-sm font-semibold border-none cursor-pointer transition bg-[rgba(145,168,208,0.15)] text-accent2 hover:bg-[rgba(145,168,208,0.28)] max-md:px-2 max-md:py-1 max-md:text-xs"
                style="font-family: var(--font-serif);"
                @click="$emit('edit', item)"
              >编辑</button>
              <button
                class="px-3 py-1.5 rounded text-sm font-semibold border-none cursor-pointer transition bg-[rgba(180,154,203,0.12)] text-accent hover:bg-[rgba(180,154,203,0.24)] max-md:px-2 max-md:py-1 max-md:text-xs"
                style="font-family: var(--font-serif);"
                @click="$emit('toggle', item)"
              >{{ item.active ? '下架' : '上架' }}</button>
              <button
                class="px-3 py-1.5 rounded text-sm font-semibold border-none cursor-pointer transition bg-[rgba(201,90,106,0.1)] text-[#c95a6a] hover:bg-[rgba(201,90,106,0.2)] max-md:px-2 max-md:py-1 max-md:text-xs"
                style="font-family: var(--font-serif);"
                @click="$emit('remove', item)"
              >删除</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { isFixedFulfillment, stockLabel as stockLabelText } from '../../shared/fulfillment'

defineProps({ products: { type: Array, default: () => [] } })
defineEmits(['edit', 'toggle', 'remove'])

const stockLabel = (item) => stockLabelText(item)

const stockBadgeClass = (item) => {
  if (isFixedFulfillment(item)) return 'bg-[rgba(100,185,140,0.15)] text-[#3a9a68]'
  return (item.quantity ?? 0) === 0
    ? 'bg-[rgba(201,90,106,0.12)] text-[#c95a6a]'
    : 'bg-[rgba(100,185,140,0.15)] text-[#3a9a68]'
}

const fulfillmentHint = (item) => (isFixedFulfillment(item) ? '固定内容' : '卡密')
</script>
