<template>
  <view
    class="mail-card"
    :class="[statusMeta.className, { 'new-card': mail.isNew }]"
    hover-class="card-hover"
    @tap="$emit('detail', mail)"
  >
    <view class="card-glow"></view>

    <view class="card-header tui-skeleton-rect">
      <view class="status-badge" :class="statusMeta.className">
        <text class="status-dot"></text>
        <text>{{ statusMeta.text }}</text>
      </view>
      <text class="order-number">#{{ mail.orderNumber }}</text>
    </view>

    <view class="card-content">
      <view class="recipient-row">
        <text class="label-text">联系人</text>
        <text class="recipient-value tui-skeleton-rect">{{ maskedRecipient }}</text>
      </view>

      <view class="message-bubble tui-skeleton-rect">
        <text class="content-value">{{ mail.content }}</text>
      </view>

      <view class="time-row tui-skeleton-rect">
        <text class="time-label">{{ mail.status === sentStatus ? "发送" : "提交" }}于</text>
        <text class="time-value">{{ displayTime }}</text>
      </view>
    </view>
  </view>
</template>

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

import { MailStatus, MAIL_STATUS_META, formatMailTime, maskRecipient, type Mail } from "@/config/mail";

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

defineEmits(["detail"]);

const sentStatus = MailStatus.SENT;

const statusMeta = computed(() => MAIL_STATUS_META[props.mail.status]);

const maskedRecipient = computed(() => maskRecipient(props.mail.recipient));

const displayTime = computed(() => {
  const time = props.mail.status === MailStatus.SENT ? props.mail.sendTime : props.mail.submitTime;
  return formatMailTime(time);
});
</script>

<style scoped lang="scss">
.mail-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 22rpx;
  padding: 22rpx;
  border-radius: 26rpx;
  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);
  }

  &.new-card {
    animation: fadeSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

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

@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18rpx;
}

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

  &.status-pending {
    background: linear-gradient(135deg, #ffb75e 0%, #f59e0b 100%);
    box-shadow: 0 8rpx 18rpx rgba(245, 158, 11, 0.18);
  }

  &.status-sent {
    background: linear-gradient(135deg, #7ee0a3 0%, #34b878 100%);
    box-shadow: 0 8rpx 18rpx rgba(52, 184, 120, 0.18);
  }

  &.status-failed {
    background: linear-gradient(135deg, #ff8daf 0%, #e85b7f 100%);
    box-shadow: 0 8rpx 18rpx rgba(232, 91, 127, 0.18);
  }
}

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

.order-number {
  flex: 1;
  color: #9aa3b2;
  font-size: 22rpx;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-content {
  position: relative;
  z-index: 1;
  padding-top: 22rpx;
  display: flex;
  flex-direction: column;
}

.recipient-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

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

.recipient-value {
  flex: 1;
  color: #263044;
  font-size: 30rpx;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-bubble {
  padding: 20rpx 22rpx;
  border-radius: 22rpx;
  background: rgba(255, 255, 255, 0.62);
  border: 1rpx solid rgba(242, 231, 239, 0.9);
}

.content-value {
  display: block;
  color: #586174;
  font-size: 27rpx;
  line-height: 1.65;
  max-height: 90rpx;
  overflow: hidden;
}

.time-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 18rpx;
}

.time-label {
  color: #a0a9b8;
  font-size: 22rpx;
  margin-right: 6rpx;
  flex-shrink: 0;
}

.time-value {
  color: #737d90;
  font-size: 22rpx;
}
</style>
