<template>
  <base-card class="review-card" :clickable="false">
    <view class="review-header">
      <image class="avatar" :src="review.userAvatar || '/static/default-avatar.png'" mode="aspectFill" />
      <view class="user-info">
        <text class="username">{{ review.userName }}</text>
        <rating-stars :rating="review.rating" size="small" :show-count="false" />
      </view>
      <text class="date">{{ formatDate(review.createdAt) }}</text>
    </view>

    <view class="review-content">
      <text class="content-text">{{ review.content }}</text>
    </view>

    <view v-if="review.images && review.images.length > 0" class="review-images">
      <image
        v-for="(img, index) in review.images"
        :key="index"
        class="review-image"
        :src="img"
        mode="aspectFill"
        @click="previewImage(index)"
      />
    </view>

    <view v-if="review.reply" class="merchant-reply">
      <view class="reply-header">
        <u-icon name="chat" size="16" color="#FF6B35" />
        <text class="reply-label">商家回复</text>
      </view>
      <text class="reply-content">{{ review.reply }}</text>
    </view>
  </base-card>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import BaseCard from '../base/BaseCard.vue';
import RatingStars from './RatingStars.vue';

interface Review {
  id: number;
  userName: string;
  userAvatar?: string;
  rating: number;
  content: string;
  images?: string[];
  reply?: string;
  createdAt: string;
}

const props = defineProps<{
  review: Review;
}>();

function formatDate(dateStr: string) {
  const date = new Date(dateStr);
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));

  if (days === 0) return '今天';
  if (days === 1) return '昨天';
  if (days < 7) return `${days}天前`;
  if (days < 30) return `${Math.floor(days / 7)}周前`;
  if (days < 365) return `${Math.floor(days / 30)}个月前`;
  return `${Math.floor(days / 365)}年前`;
}

function previewImage(index: number) {
  if (!props.review.images) return;
  uni.previewImage({
    current: index,
    urls: props.review.images
  });
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';

.review-card {
  margin-bottom: $spacing-md;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: $spacing-md;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: $radius-round;
  margin-right: $spacing-md;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: $spacing-xs;
}

.username {
  font-size: 28rpx;
  font-weight: 500;
  color: $gray-900;
}

.date {
  font-size: 24rpx;
  color: $gray-500;
}

.review-content {
  margin-bottom: $spacing-md;
}

.content-text {
  font-size: 28rpx;
  line-height: 1.6;
  color: $gray-800;
}

.review-images {
  display: flex;
  gap: $spacing-sm;
  margin-bottom: $spacing-md;
  flex-wrap: wrap;
}

.review-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: $radius-md;
}

.merchant-reply {
  background: linear-gradient(135deg, rgba($primary-500, 0.05) 0%, rgba($primary-400, 0.05) 100%);
  padding: $spacing-md;
  border-radius: $radius-md;
  border-left: 4rpx solid $primary-500;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: $spacing-xs;
  margin-bottom: $spacing-sm;
}

.reply-label {
  font-size: 24rpx;
  font-weight: 500;
  color: $primary-600;
}

.reply-content {
  font-size: 26rpx;
  line-height: 1.5;
  color: $gray-700;
}
</style>
