<script setup lang="ts">
import { computed } from 'vue';
import { type DemoProduct, getProductHealthType, getProductStatusType } from '@/constants/product-demo';

defineOptions({ name: 'ProductEntryCard' });

interface Props {
  product: DemoProduct;
  entering?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  entering: false
});

interface Emits {
  (e: 'enter', product: DemoProduct): void;
}

const emit = defineEmits<Emits>();

const quickFacts = computed(() => [
  { label: '版本', value: props.product.version },
  { label: '目标发版', value: props.product.releaseTarget },
  { label: '团队规模', value: `${props.product.teamCount} 人` }
]);

function handleEnter() {
  emit('enter', props.product);
}
</script>

<template>
  <ElCard class="product-entry-card h-full">
    <div class="mb-14px flex items-start justify-between gap-12px">
      <div class="min-w-0">
        <div class="mb-8px flex flex-wrap items-center gap-8px">
          <span class="product-entry-card__code">{{ product.code }}</span>
          <ElTag :type="getProductStatusType(product.status)" round>{{ product.status }}</ElTag>
          <ElTag :type="getProductHealthType(product.health)" effect="dark" round>{{ product.health }}</ElTag>
        </div>
        <h3 class="mb-6px text-18px text-[#0f172a] font-700">{{ product.name }}</h3>
        <p class="text-13px text-[#64748b]">负责人：{{ product.owner }} / 阶段：{{ product.stage }}</p>
      </div>
      <div class="product-entry-card__pulse"></div>
    </div>

    <p class="mb-14px min-h-[66px] text-14px text-[#475569] leading-22px">{{ product.summary }}</p>

    <div class="mb-14px flex flex-wrap gap-8px">
      <ElTag v-for="tag in product.tags" :key="tag" effect="plain" round>{{ tag }}</ElTag>
    </div>

    <div class="grid mb-14px gap-10px sm:grid-cols-3">
      <div v-for="item in quickFacts" :key="item.label" class="product-entry-card__fact">
        <span class="product-entry-card__fact-label">{{ item.label }}</span>
        <strong class="product-entry-card__fact-value">{{ item.value }}</strong>
      </div>
    </div>

    <div class="mb-16px rounded-16px bg-[#f8fafc] p-12px">
      <p class="mb-8px text-12px text-[#94a3b8] tracking-[0.08em] uppercase">当前聚焦</p>
      <div class="flex flex-wrap gap-8px">
        <span v-for="item in product.focus" :key="item" class="product-entry-card__focus-chip">
          {{ item }}
        </span>
      </div>
    </div>

    <div class="flex items-center justify-between gap-12px">
      <div class="text-13px text-[#64748b]">
        <span>需求 {{ product.requirementCount }}</span>
        <span class="mx-8px text-[#cbd5e1]">|</span>
        <span>缺陷 {{ product.bugCount }}</span>
      </div>
      <ElButton type="primary" :loading="entering" @click="handleEnter">进入产品</ElButton>
    </div>
  </ElCard>
</template>

<style scoped>
.product-entry-card {
  border: 1px solid rgb(226 232 240 / 92%);
  background:
    radial-gradient(circle at top right, rgb(16 185 129 / 7%), transparent 28%),
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(248 250 252 / 96%));
}

.product-entry-card__code {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background-color: rgb(15 23 42 / 92%);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.product-entry-card__pulse {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgb(14 165 233 / 82%), rgb(14 165 233 / 16%));
  box-shadow: 0 0 0 6px rgb(14 165 233 / 8%);
}

.product-entry-card__fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background-color: rgb(241 245 249 / 88%);
}

.product-entry-card__fact-label {
  color: rgb(100 116 139 / 88%);
  font-size: 12px;
}

.product-entry-card__fact-value {
  color: rgb(15 23 42 / 90%);
  font-size: 15px;
}

.product-entry-card__focus-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px dashed rgb(125 211 252 / 80%);
  border-radius: 999px;
  color: rgb(14 116 144 / 92%);
  font-size: 12px;
  background-color: rgb(236 254 255 / 88%);
}
</style>
