<template>
  <view class="reports-screen">
    <view class="reports-bg"></view>

    <!-- 状态栏占位 -->
    <view class="status-bar-placeholder"></view>

    <!-- Header -->
    <view class="reports-header">
      <view class="reports-back-btn" @click="$emit('back')">
        <text class="reports-back-icon">‹</text>
      </view>
      <text class="reports-title">已解锁报告</text>
      <view class="reports-header-placeholder"></view>
    </view>

    <!-- Content -->
    <scroll-view scroll-y class="reports-list">
      <template v-if="reports.length > 0">
        <view v-for="(item, index) in reports" :key="item.id" class="reports-item"
          :style="{ animationDelay: index * 0.1 + 's' }">
          <!-- Card Header accent -->
          <view class="reports-item-accent"
            :class="item.type === 'fortune' ? 'reports-item-accent-gold' : 'reports-item-accent-red'"></view>

          <view class="reports-item-body">
            <!-- Icon -->
            <view class="reports-item-icon"
              :class="item.type === 'fortune' ? 'reports-item-icon-gold' : 'reports-item-icon-red'">
              <text class="reports-item-icon-text">报</text>
            </view>

            <view class="reports-item-content">
              <text class="reports-item-title">{{ item.title }}</text>
              <view class="reports-item-meta">
                <text class="reports-item-date">{{ item.date }}</text>
                <view class="reports-item-divider"></view>
                <text class="reports-item-price">已支付 {{ item.price }}</text>
              </view>

              <view class="reports-item-actions">
                <view class="reports-btn-download">
                  <text class="reports-btn-download-icon">↓</text>
                  <text class="reports-btn-download-text">下载PDF</text>
                </view>
                <view class="reports-btn-preview">
                  <text class="reports-btn-preview-text">在线预览</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>

      <template v-else>
        <view class="reports-empty">
          <text class="reports-empty-icon">🔒</text>
          <text class="reports-empty-text">暂无解锁报告</text>
        </view>
      </template>

      <!-- Upsell Banner -->
      <view class="reports-upsell">
        <view class="reports-upsell-glow"></view>
        <view class="reports-upsell-content">
          <view class="reports-upsell-left">
            <view class="reports-upsell-title-row">
              <text class="reports-upsell-crown">👑</text>
              <text class="reports-upsell-title">解锁更多财运玄机</text>
            </view>
            <text class="reports-upsell-desc">助您掌握流年运势，趋吉避凶</text>
          </view>
          <view class="reports-upsell-btn" @click="$emit('navigate', 'test')">
            <text class="reports-upsell-btn-text">去测算</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
interface ReportItem {
  id: string;
  title: string;
  type: 'fortune' | 'naming' | 'renaming';
  date: string;
  price: string;
}

defineEmits<{
  back: [];
  navigate: [screen: string];
}>();

const reports: ReportItem[] = [
  { id: '1', title: '2024年度个人财运深度解析', type: 'fortune', date: '2023-12-12', price: '¥666' },
  { id: '2', title: '"宏图科技"品牌改名运势报告', type: 'renaming', date: '2023-11-20', price: '¥888' },
];
</script>

<style scoped>
.reports-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f0efe9;
  position: relative;
}

.status-bar-placeholder {
  height: var(--status-bar-height, 0);
  width: 100%;
  flex-shrink: 0;
}

.reports-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image: url("https://www.transparenttextures.com/patterns/rice-paper.png");
}

/* Header */
.reports-header {
  position: relative;
  z-index: 10;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-bottom: 1rpx solid #dcd3c9;
  background-color: rgba(253, 251, 247, 0.8);
}

.reports-back-btn {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  margin-left: -16rpx;
}

.reports-back-icon {
  font-size: 48rpx;
  color: #5a5a5a;
  font-weight: 300;
}

.reports-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #2c2c2c;
  letter-spacing: 0.2em;
}

.reports-header-placeholder {
  width: 64rpx;
}

/* List */
.reports-list {
  flex: 1;
  height: 0;
  position: relative;
  z-index: 10;
}

.reports-item {
  background-color: #fffdf9;
  border-radius: 24rpx;
  border: 1rpx solid #e5e5e5;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 24rpx;
  overflow: hidden;
  animation: fadeInUp 0.3s ease-out forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reports-item-accent {
  height: 8rpx;
  width: 100%;
}

.reports-item-accent-gold {
  background-color: #d4af37;
}

.reports-item-accent-red {
  background-color: #8b2323;
}

.reports-item-body {
  padding: 32rpx;
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
}

.reports-item-icon {
  width: 96rpx;
  height: 112rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.reports-item-icon-gold {
  background: linear-gradient(180deg, #d4af37 0%, #c4a130 100%);
}

.reports-item-icon-red {
  background: linear-gradient(180deg, #8b2323 0%, #701c1c 100%);
}

.reports-item-icon-text {
  font-size: 40rpx;
  color: #fff;
  font-weight: 700;
  font-family: SimSun, "Songti SC", serif;
}

.reports-item-content {
  flex: 1;
  min-width: 0;
}

.reports-item-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #2c2c2c;
  line-height: 1.4;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-item-meta {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-top: 8rpx;
  margin-bottom: 24rpx;
}

.reports-item-date,
.reports-item-price {
  font-size: 20rpx;
  color: #999;
}

.reports-item-divider {
  width: 2rpx;
  height: 20rpx;
  background-color: #e5e5e5;
}

.reports-item-actions {
  display: flex;
  gap: 16rpx;
}

.reports-btn-download {
  flex: 1;
  background-color: #2c2c2c;
  color: #f2e6d8;
  padding: 16rpx 0;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  border: none;
}

.reports-btn-download-icon {
  font-size: 24rpx;
}

.reports-btn-download-text {
  font-size: 24rpx;
}

.reports-btn-preview {
  flex: 1;
  background-color: transparent;
  border: 1rpx solid #e5e5e5;
  padding: 16rpx 0;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reports-btn-preview-text {
  font-size: 24rpx;
  color: #5a5a5a;
}

/* Empty State */
.reports-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;
  color: #999;
}

.reports-empty-icon {
  font-size: 96rpx;
  opacity: 0.2;
  margin-bottom: 24rpx;
}

.reports-empty-text {
  font-size: 28rpx;
}

/* Upsell Banner */
.reports-upsell {
  margin-top: 48rpx;
  padding: 32rpx;
  background-color: #2c2c2c;
  border-radius: 24rpx;
  position: relative;
  overflow: hidden;
}

.reports-upsell-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 200rpx;
  height: 200rpx;
  background-color: #d4af37;
  border-radius: 50%;
  filter: blur(100rpx);
  opacity: 0.2;
  pointer-events: none;
}

.reports-upsell-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reports-upsell-left {
  flex: 1;
}

.reports-upsell-title-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 8rpx;
}

.reports-upsell-crown {
  font-size: 32rpx;
}

.reports-upsell-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #d4af37;
}

.reports-upsell-desc {
  font-size: 24rpx;
  color: rgba(242, 230, 216, 0.7);
}

.reports-upsell-btn {
  background-color: #d4af37;
  padding: 16rpx 32rpx;
  border-radius: 8rpx;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.reports-upsell-btn-text {
  font-size: 24rpx;
  font-weight: 700;
  color: #2c2c2c;
}
</style>
