<template>
  <view class="card-root" :class="['tpl-' + template, 'photos-' + photoLayout]">
    <!-- 装饰背景层 -->
    <view class="card-bg-deco">
      <view class="bg-circle bg-circle-1"></view>
      <view class="bg-circle bg-circle-2"></view>
    </view>

    <!-- ====== 无照片: 纯文字排版 ====== -->
    <view v-if="photos.length === 0" class="card-no-photo">
      <view class="no-photo-header">
        <view class="date-badge">
          <text class="date-text">{{ record.date }}</text>
        </view>
        <view class="feeling-tag" v-if="record.feeling">
          <text>{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
        </view>
      </view>

      <view class="no-photo-hero">
        <view class="hero-drink-list">
          <view v-for="(drink, i) in record.drinks" :key="i" class="hero-drink-item">
            <text class="hero-emoji">{{ getCatEmoji(drink.category) }}</text>
            <view class="hero-drink-info">
              <text class="hero-brand">{{ drink.brand }}</text>
              <text class="hero-product">{{ drink.product }} · {{ drink.amount }}{{ drink.unit }}</text>
            </view>
            <text class="hero-cups">{{ drink.standardCups }}杯</text>
          </view>
        </view>
      </view>

      <view class="no-photo-stats">
        <view class="stat-pill">
          <text class="stat-num">{{ record.standardCupsTotal }}</text>
          <text class="stat-label">标准杯</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-pill" v-if="record.food">
          <text class="stat-icon">🍲</text>
          <text class="stat-label">{{ getFoodName() }}</text>
        </view>
      </view>

      <view class="no-photo-quote">
        <text class="quote-mark">"</text>
        <text class="quote-text">{{ quote }}</text>
      </view>
    </view>

    <!-- ====== 1张照片: 全屏沉浸式 ====== -->
    <view v-else-if="photos.length === 1" class="card-one-photo">
      <image class="one-photo-bg" :src="photos[0]" mode="aspectFill"></image>
      <view class="one-photo-overlay"></view>

      <view class="one-photo-top">
        <view class="date-badge light">
          <text class="date-text">{{ record.date }}</text>
        </view>
      </view>

      <view class="one-photo-bottom">
        <view class="photo-drink-chips">
          <view v-for="(drink, i) in record.drinks" :key="i" class="drink-chip">
            <text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} {{ drink.standardCups }}杯</text>
          </view>
        </view>

        <view class="photo-stats-row">
          <text class="photo-total-cups">{{ record.standardCupsTotal }} 标准杯</text>
          <text v-if="record.feeling" class="photo-feeling">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
        </view>

        <view class="photo-quote-line">
          <text class="quote-mark light">"</text>
          <text class="quote-text light">{{ quote }}</text>
        </view>
      </view>
    </view>

    <!-- ====== 多张照片: 拼贴布局 ====== -->
    <view v-else class="card-multi-photo">
      <!-- 顶部信息条 -->
      <view class="multi-top">
        <view class="date-badge">
          <text class="date-text">{{ record.date }}</text>
        </view>
        <view class="multi-cups-badge">
          <text class="cups-badge-num">{{ record.standardCupsTotal }}</text>
          <text class="cups-badge-label">标准杯</text>
        </view>
      </view>

      <!-- 照片拼贴区域 -->
      <view class="photo-collage" :class="'collage-' + photoLayout">
        <!-- 2张: 左大右小 -->
        <template v-if="photos.length === 2">
          <view class="collage-item collage-large">
            <image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
          </view>
          <view class="collage-item collage-small">
            <image :src="photos[1]" mode="aspectFill" class="collage-img"></image>
          </view>
        </template>

        <!-- 3张: 左大右两小 -->
        <template v-else-if="photos.length === 3">
          <view class="collage-item c3-left">
            <image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
          </view>
          <view class="c3-right">
            <view class="collage-item c3-right-top">
              <image :src="photos[1]" mode="aspectFill" class="collage-img"></image>
            </view>
            <view class="collage-item c3-right-bottom">
              <image :src="photos[2]" mode="aspectFill" class="collage-img"></image>
            </view>
          </view>
        </template>

        <!-- 4张: 田字格 -->
        <template v-else-if="photos.length === 4">
          <view v-for="(p, i) in photos.slice(0, 4)" :key="i" class="collage-item collage-quarter">
            <image :src="p" mode="aspectFill" class="collage-img"></image>
          </view>
        </template>

        <!-- 5+张: 瀑布流 -->
        <template v-else>
          <view class="collage-item collage-hero">
            <image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
          </view>
          <view class="collage-strip">
            <view v-for="(p, i) in photos.slice(1, 5)" :key="i" class="collage-item collage-strip-item">
              <image :src="p" mode="aspectFill" class="collage-img"></image>
            </view>
            <view v-if="photos.length > 5" class="collage-more">
              <text>+{{ photos.length - 5 }}</text>
            </view>
          </view>
        </template>
      </view>

      <!-- 底部酒水+感受 -->
      <view class="multi-bottom">
        <view class="multi-drinks-row">
          <view v-for="(drink, i) in record.drinks" :key="i" class="multi-drink-tag">
            <text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} · {{ drink.standardCups }}杯</text>
          </view>
        </view>

        <view class="multi-meta-row">
          <text v-if="record.food" class="multi-meta-item">🍲 {{ getFoodName() }}</text>
          <text v-if="record.feeling" class="multi-meta-item">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
        </view>

        <view class="multi-quote">
          <text class="quote-mark">"</text>
          <text class="quote-text">{{ quote }}</text>
        </view>
      </view>
    </view>

    <!-- 统一底部品牌 -->
    <view class="card-brand-bar">
      <text class="brand-name">🍻 喝酒了么</text>
      <view class="brand-dot"></view>
      <text class="brand-slogan">记录每一杯的故事</text>
    </view>
  </view>
</template>

<script>
import { DRINK_CATEGORIES, FOOD_CATEGORIES, FEELINGS, DRINK_QUOTES } from '../common/constants'

export default {
  props: {
    record: { type: Object, required: true },
    template: { type: String, default: 'amber' }
  },
  data() {
    return {
      quote: DRINK_QUOTES[Math.floor(Math.random() * DRINK_QUOTES.length)]
    }
  },
  computed: {
    photos() {
      return (this.record && this.record.photos) || []
    },
    photoLayout() {
      const len = this.photos.length
      if (len === 0) return 'none'
      if (len === 1) return 'one'
      if (len === 2) return 'two'
      if (len === 3) return 'three'
      if (len === 4) return 'four'
      return 'many'
    }
  },
  methods: {
    getCatEmoji(catId) {
      const cat = DRINK_CATEGORIES.find(c => c.id === catId)
      return cat ? cat.emoji : '🥃'
    },
    getFoodName() {
      const food = FOOD_CATEGORIES.find(f => f.id === this.record.food?.category)
      if (!food) return ''
      return this.record.food.name ? `${food.name}·${this.record.food.name}` : food.name
    },
    getFeelingEmoji() {
      const f = FEELINGS.find(f => f.id === this.record.feeling)
      return f ? f.emoji : ''
    },
    getFeelingName() {
      const f = FEELINGS.find(f => f.id === this.record.feeling)
      return f ? f.name : ''
    }
  }
}
</script>

<style lang="scss" scoped>
/* ========== 根容器 ========== */
.card-root {
  position: relative;
  width: 100%;
  border-radius: $radius-xl;
  overflow: hidden;
  padding: $sp-lg;
  min-height: 700rpx;
  display: flex;
  flex-direction: column;
}

/* --- 模板: 琥珀流光 --- */
.tpl-amber {
  background: linear-gradient(160deg, #1A1308 0%, #0F0B06 40%, #1A1308 100%);
  border: 2rpx solid rgba(232, 168, 56, 0.25);
}
.tpl-amber .bg-circle-1 {
  background: radial-gradient(circle, rgba(232, 168, 56, 0.12), transparent 70%);
}
.tpl-amber .bg-circle-2 {
  background: radial-gradient(circle, rgba(245, 197, 99, 0.08), transparent 70%);
}

/* --- 模板: 暗夜极光 --- */
.tpl-aurora {
  background: linear-gradient(160deg, #0A0E1A 0%, #0B0B14 40%, #0E0A1A 100%);
  border: 2rpx solid rgba(139, 133, 184, 0.2);
}
.tpl-aurora .bg-circle-1 {
  background: radial-gradient(circle, rgba(94, 198, 160, 0.1), transparent 70%);
}
.tpl-aurora .bg-circle-2 {
  background: radial-gradient(circle, rgba(139, 133, 184, 0.1), transparent 70%);
}
.tpl-aurora .date-badge {
  background: rgba(139, 133, 184, 0.15);
  border-color: rgba(139, 133, 184, 0.2);
}
.tpl-aurora .stat-pill .stat-num,
.tpl-aurora .cups-badge-num,
.tpl-aurora .hero-cups,
.tpl-aurora .photo-total-cups {
  color: $mint;
}

/* --- 模板: 胶片记忆 --- */
.tpl-film {
  background: linear-gradient(160deg, #141210 0%, #0D0C0A 40%, #141210 100%);
  border: 2rpx solid rgba(200, 180, 140, 0.15);
}
.tpl-film .bg-circle-1 {
  background: radial-gradient(circle, rgba(200, 180, 140, 0.08), transparent 70%);
}
.tpl-film .bg-circle-2 {
  background: radial-gradient(circle, rgba(180, 160, 120, 0.06), transparent 70%);
}
.tpl-film .date-badge {
  background: rgba(200, 180, 140, 0.1);
  border-color: rgba(200, 180, 140, 0.15);
}

/* 装饰背景 */
.card-bg-deco {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.bg-circle {
  position: absolute;
  border-radius: 50%;
}
.bg-circle-1 {
  width: 400rpx;
  height: 400rpx;
  top: -100rpx;
  right: -100rpx;
}
.bg-circle-2 {
  width: 300rpx;
  height: 300rpx;
  bottom: 100rpx;
  left: -80rpx;
}

/* ========== 公共元素 ========== */
.date-badge {
  display: inline-flex;
  align-items: center;
  padding: $sp-xs $sp-md;
  background: rgba(232, 168, 56, 0.1);
  border: 1rpx solid rgba(232, 168, 56, 0.15);
  border-radius: $radius-full;
}
.date-badge.light {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}
.date-text {
  font-size: $fs-xs;
  color: $text-secondary;
  font-family: $font-num;
}
.date-badge.light .date-text {
  color: rgba(255, 255, 255, 0.85);
}

.feeling-tag {
  display: inline-flex;
  align-items: center;
  padding: $sp-xs $sp-md;
  background: rgba(255, 255, 255, 0.05);
  border-radius: $radius-full;
  font-size: $fs-xs;
  color: $text-secondary;
}

.quote-mark {
  font-size: $fs-3xl;
  color: $amber;
  opacity: 0.3;
  line-height: 1;
  margin-right: $sp-xs;
}
.quote-mark.light {
  color: rgba(255, 255, 255, 0.4);
}
.quote-text {
  font-size: $fs-sm;
  color: $text-secondary;
  font-style: italic;
  flex: 1;
  line-height: $lh-loose;
}
.quote-text.light {
  color: rgba(255, 255, 255, 0.7);
}

/* 品牌底栏 */
.card-brand-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $sp-sm;
  padding-top: $sp-lg;
  margin-top: auto;
}
.brand-name {
  font-size: $fs-xs;
  color: $text-tertiary;
}
.brand-dot {
  width: 4rpx;
  height: 4rpx;
  border-radius: $radius-full;
  background: $text-tertiary;
}
.brand-slogan {
  font-size: $fs-xs;
  color: $text-tertiary;
}

/* ========== 无照片布局 ========== */
.card-no-photo {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: $sp-lg;
}

.no-photo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.no-photo-hero {
  padding: $sp-md 0;
}

.hero-drink-list {
  display: flex;
  flex-direction: column;
  gap: $sp-md;
}

.hero-drink-item {
  display: flex;
  align-items: center;
  gap: $sp-md;
  padding: $sp-md;
  background: rgba(255, 255, 255, 0.03);
  border-radius: $radius-lg;
  border: 1rpx solid rgba(255, 255, 255, 0.04);
}

.hero-emoji {
  font-size: 56rpx;
  flex-shrink: 0;
}

.hero-drink-info {
  flex: 1;
}

.hero-brand {
  display: block;
  font-size: $fs-base;
  font-weight: $fw-bold;
  color: $text-primary;
}

.hero-product {
  display: block;
  font-size: $fs-xs;
  color: $text-secondary;
  margin-top: 4rpx;
}

.hero-cups {
  font-size: $fs-lg;
  font-weight: $fw-black;
  color: $amber;
  font-family: $font-num;
  flex-shrink: 0;
}

.no-photo-stats {
  display: flex;
  align-items: center;
  gap: $sp-lg;
  padding: $sp-md;
  background: rgba(255, 255, 255, 0.03);
  border-radius: $radius-lg;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: $sp-xs;
}

.stat-num {
  font-size: $fs-2xl;
  font-weight: $fw-black;
  color: $amber;
  font-family: $font-num;
}

.stat-label {
  font-size: $fs-xs;
  color: $text-secondary;
}

.stat-icon {
  font-size: $fs-base;
}

.stat-divider {
  width: 2rpx;
  height: 40rpx;
  background: rgba(255, 255, 255, 0.08);
}

.no-photo-quote {
  display: flex;
  align-items: flex-start;
  padding: $sp-sm 0;
}

/* ========== 1张照片布局 ========== */
.card-one-photo {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 600rpx;
  border-radius: $radius-lg;
  overflow: hidden;
  margin: -#{$sp-lg};
  /* 把 padding 加回来让品牌栏有空间 */
  padding: $sp-lg;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.one-photo-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.one-photo-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 30%,
    transparent 50%,
    rgba(0, 0, 0, 0.75) 100%
  );
  z-index: 1;
}

.one-photo-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  padding-top: $sp-sm;
}

.one-photo-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: $sp-md;
  padding-bottom: $sp-md;
}

.photo-drink-chips {
  display: flex;
  flex-wrap: wrap;
  gap: $sp-sm;
}

.drink-chip {
  display: inline-flex;
  align-items: center;
  padding: $sp-xs $sp-md;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  border-radius: $radius-full;
  border: 1rpx solid rgba(255, 255, 255, 0.1);
  font-size: $fs-xs;
  color: rgba(255, 255, 255, 0.9);
}

.photo-stats-row {
  display: flex;
  align-items: center;
  gap: $sp-lg;
}

.photo-total-cups {
  font-size: $fs-xl;
  font-weight: $fw-black;
  color: $amber-light;
  font-family: $font-num;
}

.photo-feeling {
  font-size: $fs-sm;
  color: rgba(255, 255, 255, 0.7);
}

.photo-quote-line {
  display: flex;
  align-items: flex-start;
}

/* ========== 多张照片布局 ========== */
.card-multi-photo {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: $sp-lg;
}

.multi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.multi-cups-badge {
  display: flex;
  align-items: baseline;
  gap: $sp-xs;
  padding: $sp-xs $sp-md;
  background: rgba(232, 168, 56, 0.1);
  border: 1rpx solid rgba(232, 168, 56, 0.2);
  border-radius: $radius-full;
}

.cups-badge-num {
  font-size: $fs-lg;
  font-weight: $fw-black;
  color: $amber;
  font-family: $font-num;
}

.cups-badge-label {
  font-size: $fs-xs;
  color: $text-secondary;
}

/* 照片拼贴 */
.photo-collage {
  border-radius: $radius-lg;
  overflow: hidden;
}

/* 2张: 左大右小 */
.collage-two {
  display: flex;
  gap: 6rpx;
  height: 420rpx;
}
.collage-two .collage-large {
  flex: 3;
}
.collage-two .collage-small {
  flex: 2;
}

/* 3张: 左大右两小 */
.collage-three {
  display: flex;
  gap: 8rpx;
  height: 440rpx;
}
.collage-three .c3-left {
  flex: 1;
  height: 100%;
  border-radius: $radius-md;
}
.collage-three .c3-right {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.collage-three .c3-right-top,
.collage-three .c3-right-bottom {
  flex: 1;
  border-radius: $radius-md;
}

/* 4张: 田字格 */
.collage-four {
  display: flex;
  flex-wrap: wrap;
  gap: 6rpx;
  height: 460rpx;
}
.collage-four .collage-quarter {
  width: calc(50% - 3rpx);
  height: calc(50% - 3rpx);
}

/* 5+张: 瀑布流 */
.collage-many {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}
.collage-many .collage-hero {
  height: 320rpx;
  border-radius: $radius-md;
  overflow: hidden;
}
.collage-strip {
  display: flex;
  gap: 6rpx;
  height: 160rpx;
}
.collage-strip-item {
  flex: 1;
  border-radius: $radius-sm;
  overflow: hidden;
}
.collage-more {
  width: 100rpx;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: $radius-sm;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $fs-sm;
  color: $text-secondary;
  font-weight: $fw-bold;
}

.collage-item {
  overflow: hidden;
  border-radius: $radius-sm;
}

.collage-img {
  width: 100%;
  height: 100%;
}

/* 底部信息 */
.multi-bottom {
  display: flex;
  flex-direction: column;
  gap: $sp-md;
}

.multi-drinks-row {
  display: flex;
  flex-wrap: wrap;
  gap: $sp-sm;
}

.multi-drink-tag {
  display: inline-flex;
  padding: $sp-xs $sp-md;
  background: rgba(255, 255, 255, 0.04);
  border: 1rpx solid rgba(255, 255, 255, 0.06);
  border-radius: $radius-full;
  font-size: $fs-xs;
  color: $text-secondary;
}

.multi-meta-row {
  display: flex;
  gap: $sp-lg;
}

.multi-meta-item {
  font-size: $fs-sm;
  color: $text-secondary;
}

.multi-quote {
  display: flex;
  align-items: flex-start;
}
</style>
