<template>
  <view class="reply-card" :class="{ unread: reply.unread }" hover-class="card-hover" @tap="$emit('open', reply)">
    <view class="card-glow"></view>

    <view class="card-top">
      <view class="source-pill" :class="sourceMeta.className">
        <text class="source-dot"></text>
        <text>{{ sourceMeta.text }}</text>
      </view>
      <text class="reply-time">{{ displayTime }}</text>
    </view>

    <view class="contact-row">
      <text class="contact-label">来自</text>
      <text class="contact-phone">{{ maskedPhone }}</text>
      <text v-if="reply.unread" class="unread-dot"></text>
    </view>

    <view class="reply-bubble">
      <text class="reply-content">{{ reply.replyMessage }}</text>
    </view>

    <view class="card-footer">
      <text class="original-label">原短信</text>
      <text class="original-text">{{ reply.originalMessage }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";

import { formatMailTime, maskRecipient } from "@/config/mail";
import { REPLY_SOURCE_META, type ReplyItem } from "@/config/reply";

const props = defineProps({
  reply: {
    type: Object as () => ReplyItem,
    required: true,
  },
});

defineEmits(["open"]);

const sourceMeta = computed(() => REPLY_SOURCE_META[props.reply.source]);
const maskedPhone = computed(() => maskRecipient(props.reply.contactPhone));
const displayTime = computed(() => formatMailTime(props.reply.replyTime));
</script>

<style scoped lang="scss">
.reply-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 22rpx;
  padding: 24rpx;
  border-radius: 28rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.88);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 248, 252, 0.84) 54%, rgba(241, 249, 255, 0.88) 100%),
    rgba(255, 255, 255, 0.8);
  box-shadow: 0 18rpx 42rpx rgba(93, 107, 139, 0.09);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover {
  transform: scale(0.98);
  box-shadow: 0 12rpx 26rpx rgba(93, 107, 139, 0.06);
}

.card-glow {
  position: absolute;
  top: -82rpx;
  right: -72rpx;
  width: 210rpx;
  height: 210rpx;
  border-radius: 50%;
  background: rgba(255, 192, 216, 0.25);
  pointer-events: none;
}

.card-top,
.contact-row,
.reply-bubble,
.card-footer {
  position: relative;
  z-index: 1;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rpx;
}

.source-pill {
  display: flex;
  align-items: center;
  height: 46rpx;
  padding: 0 18rpx;
  border-radius: 999rpx;
  color: #fff;
  font-size: 22rpx;
  font-weight: 700;
}

.source-sms {
  background: linear-gradient(135deg, #ff78a2 0%, #ed6f9b 100%);
  box-shadow: 0 8rpx 18rpx rgba(237, 111, 155, 0.18);
}

.source-manual {
  background: linear-gradient(135deg, #8bcfff 0%, #6caef5 100%);
  box-shadow: 0 8rpx 18rpx rgba(108, 174, 245, 0.18);
}

.source-dot {
  width: 10rpx;
  height: 10rpx;
  margin-right: 10rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.reply-time {
  flex: 1;
  color: #9aa3b2;
  font-size: 22rpx;
  text-align: right;
}

.contact-row {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.contact-label {
  height: 40rpx;
  line-height: 40rpx;
  padding: 0 14rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.72);
  color: #8c96a8;
  font-size: 21rpx;
  border: 1rpx solid rgba(232, 238, 248, 0.9);
}

.contact-phone {
  margin-left: 14rpx;
  color: #263044;
  font-size: 30rpx;
  font-weight: 700;
}

.unread-dot {
  width: 14rpx;
  height: 14rpx;
  margin-left: 12rpx;
  border-radius: 50%;
  background: #ff5d8d;
  box-shadow: 0 0 0 8rpx rgba(255, 93, 141, 0.12);
}

.reply-bubble {
  margin-top: 18rpx;
  padding: 22rpx 24rpx;
  border-radius: 24rpx;
  background: rgba(255, 255, 255, 0.66);
  border: 1rpx solid rgba(242, 231, 239, 0.9);
}

.reply-content {
  display: block;
  color: #333b4f;
  font-size: 29rpx;
  line-height: 1.62;
  max-height: 94rpx;
  overflow: hidden;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-top: 18rpx;
}

.original-label {
  flex-shrink: 0;
  color: #a0a9b8;
  font-size: 22rpx;
}

.original-text {
  flex: 1;
  color: #7a8496;
  font-size: 23rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
