<template>
  <article class="autumn-card" :class="{ 'autumn-card--popular': isPopular }">
    <!-- 头部 -->
    <div class="card-header">
      <div v-if="isPopular" class="popular-badge">推荐</div>
      <div class="card-duration">
        <span class="duration-num">{{ product.days }}</span>
        <span class="duration-unit">天</span>
        <span class="duration-num">{{ product.nights }}</span>
        <span class="duration-unit">晚</span>
      </div>
      <span class="card-tag">{{ product.tag }}</span>
      <span class="card-line">{{ product.line }} · {{ product.route }}</span>
    </div>

    <!-- 主体 -->
    <div class="card-body">
      <h3 class="card-name">{{ shortName }}</h3>
      <p class="card-audience">适合：{{ product.audience }}</p>
      <p class="card-desc">{{ product.description }}</p>
      <ul class="card-highlights">
        <li v-for="(h, i) in product.highlights" :key="i">
          <span class="check" aria-hidden="true">&#10003;</span>
          {{ itineraryText(h) }}
        </li>
      </ul>
    </div>

    <!-- 价格区间 -->
    <div v-if="priceRange" class="card-price">
      <div class="price-main">
        <span class="price-label">成人价</span>
        <span class="price-value">¥{{ priceRange.min }}</span>
        <span v-if="priceRange.max > priceRange.min" class="price-range">
          &nbsp;起 · 旺季 ¥{{ priceRange.max }}
        </span>
        <span v-else class="price-range">&nbsp;起</span>
      </div>
      <div v-if="priceRange.childMin" class="price-sub">
        儿童 ¥{{ priceRange.childMin }} 起
      </div>
    </div>

    <!-- 行程 + 报价展开 -->
    <details v-if="hasItinerary || hasPricing" class="card-itinerary">
      <summary class="itinerary-toggle">
        <span v-if="hasItinerary && hasPricing">查看每日行程 + 分日期报价 ▾</span>
        <span v-else-if="hasItinerary">查看每日行程 ▾</span>
        <span v-else>查看分日期报价 ▾</span>
      </summary>
      <div v-if="hasItinerary" class="itinerary-section">
        <div class="section-head">每日行程</div>
        <ol class="itinerary-list">
          <li v-for="(day, i) in product.itinerary" :key="i">{{ itineraryText(day) }}</li>
        </ol>
      </div>
      <div v-if="hasPricing" class="pricing-section">
        <div class="section-head">分日期报价</div>
        <div class="pricing-table">
          <div class="pricing-row pricing-head">
            <span class="col-date">出行日期</span>
            <span class="col-price">成人价</span>
            <span class="col-price">儿童价</span>
          </div>
          <div v-for="(row, i) in product.pricing" :key="i" class="pricing-row">
            <span class="col-date">{{ row.date }}</span>
            <span class="col-price">¥{{ row.adult }}</span>
            <span class="col-price">¥{{ row.child }}</span>
          </div>
        </div>
      </div>
    </details>

    <!-- 底部 CTA -->
    <NuxtLink to="/contact" class="card-cta">
      咨询该行程 <span aria-hidden="true">→</span>
    </NuxtLink>
  </article>
</template>

<script setup>
const props = defineProps({ product: { type: Object, required: true } })

const isPopular = computed(() => props.product.id === 'autumn-south-5d4n')

const shortName = computed(() => {
  return props.product.name.replace(/^游牧的森林V3·/, '')
})

const hasItinerary = computed(() => Array.isArray(props.product.itinerary) && props.product.itinerary.length > 0)
const hasPricing = computed(() => Array.isArray(props.product.pricing) && props.product.pricing.length > 0)

const priceRange = computed(() => {
  if (!hasPricing.value) return null
  const adults = props.product.pricing.map(p => Number(p.adult)).filter(n => n > 0)
  const children = props.product.pricing.map(p => Number(p.child)).filter(n => n > 0)
  if (!adults.length) return null
  return {
    min: Math.min(...adults),
    max: Math.max(...adults),
    childMin: children.length ? Math.min(...children) : null,
  }
})

function itineraryText(item) {
  if (typeof item === 'string') return item
  if (item && typeof item === 'object') return item.title || ''
  return ''
}
</script>

<style lang="less" scoped>
.autumn-card {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow @transition-base, transform @transition-base;

  &:hover {
    box-shadow: @shadow-lg;
    transform: translateY(-4px);
  }

  &--popular {
    border: 2px solid #D97706;
    box-shadow: @shadow-md;

    .card-header {
      background: #D97706;
    }

    .duration-num,
    .duration-unit,
    .card-tag,
    .card-line {
      color: #fff;
    }

    .card-tag {
      background: rgba(255, 255, 255, 0.2);
    }
  }
}

.card-header {
  padding: @space-lg @space-lg @space-md;
  background: #FEF3C7;
  text-align: center;
  position: relative;
}

.popular-badge {
  position: absolute;
  top: @space-sm;
  right: @space-sm;
  padding: @space-xs @space-sm;
  font-size: @font-size-xs;
  font-weight: @font-weight-bold;
  color: #fff;
  background: @color-accent;
  border-radius: @border-radius-sm;
}

.card-duration {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: @space-sm;
}

.duration-num {
  font-size: @font-size-3xl;
  font-weight: @font-weight-bold;
  color: #D97706;
  line-height: 1;
}

.duration-unit {
  font-size: @font-size-sm;
  color: #D97706;
  font-weight: @font-weight-medium;
}

.card-tag {
  display: inline-block;
  padding: @space-xs @space-md;
  font-size: @font-size-xs;
  font-weight: @font-weight-medium;
  color: #D97706;
  background: @color-bg-white;
  border-radius: @border-radius-full;
}

.card-line {
  display: block;
  font-size: @font-size-xs;
  color: #64748B;
  margin-top: @space-xs;
}

.card-body {
  padding: @space-lg;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-name {
  font-size: @font-size-lg;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin-bottom: @space-xs;
}

.card-audience {
  font-size: @font-size-sm;
  color: @color-text-muted;
  margin-bottom: @space-md;
}

.card-desc {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-base;
  margin-bottom: @space-md;
  .text-clamp(3);
}

.card-highlights {
  display: flex;
  flex-direction: column;
  gap: @space-sm;
  margin-top: auto;

  li {
    display: flex;
    align-items: flex-start;
    gap: @space-sm;
    font-size: @font-size-sm;
    color: @color-text-secondary;
    line-height: @line-height-base;
  }
}

.check {
  flex-shrink: 0;
  color: #D97706;
  font-size: @font-size-sm;
  font-weight: @font-weight-bold;
  margin-top: 2px;
}

// 价格区间
.card-price {
  padding: @space-md @space-lg;
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
  border-top: 1px solid rgba(217, 119, 6, 0.15);
  border-bottom: 1px solid rgba(217, 119, 6, 0.15);
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.price-label {
  font-size: @font-size-xs;
  color: #92400E;
  margin-right: @space-xs;
}

.price-value {
  font-size: @font-size-2xl;
  font-weight: @font-weight-bold;
  color: #B45309;
  line-height: 1;
}

.price-range {
  font-size: @font-size-xs;
  color: #92400E;
}

.price-sub {
  margin-top: 4px;
  font-size: @font-size-xs;
  color: #92400E;
  opacity: 0.85;
}

// 行程概览 + 分日期报价
.card-itinerary {
  border-top: 1px solid @color-border;
}

.itinerary-toggle {
  display: block;
  padding: @space-md @space-lg;
  font-size: @font-size-sm;
  color: @color-text-muted;
  cursor: pointer;
  text-align: center;
  transition: background @transition-fast;
  list-style: none;

  &::-webkit-details-marker { display: none; }

  &:hover {
    background: @color-bg-gray;
    color: @color-text-primary;
  }
}

.section-head {
  padding: 0 @space-lg @space-xs;
  font-size: @font-size-xs;
  font-weight: @font-weight-medium;
  color: #D97706;
  letter-spacing: 0.5px;
}

.itinerary-section + .pricing-section {
  margin-top: @space-md;
  padding-top: @space-md;
  border-top: 1px dashed @color-border;
}

.itinerary-list {
  padding: 0 @space-lg @space-md;
  display: flex;
  flex-direction: column;
  gap: @space-xs;

  li {
    font-size: @font-size-xs;
    color: @color-text-secondary;
    line-height: @line-height-base;
    padding-left: @space-sm;
  }
}

.pricing-table {
  padding: 0 @space-lg @space-md;
  display: flex;
  flex-direction: column;
  font-size: @font-size-xs;
}

.pricing-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: @space-sm;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
  color: @color-text-secondary;

  &:last-child { border-bottom: none; }

  .col-date { color: @color-text-primary; }
  .col-price { text-align: right; color: #B45309; font-weight: @font-weight-medium; font-variant-numeric: tabular-nums; }
}

.pricing-head {
  font-weight: @font-weight-medium;
  color: @color-text-muted;
  border-bottom: 1px solid @color-border;

  .col-date, .col-price { color: @color-text-muted; font-weight: @font-weight-medium; }
}

// 底部 CTA
.card-cta {
  display: block;
  text-align: center;
  padding: @space-md @space-lg;
  font-size: @font-size-sm;
  font-weight: @font-weight-medium;
  color: #D97706;
  background: @color-bg-gray;
  text-decoration: none;
  transition: all @transition-fast;

  &:hover {
    background: #D97706;
    color: #fff;
  }
}
</style>
