<template>
  <view class="detail-page">
    <view class="dream-bg dream-bg-one"></view>
    <view class="dream-bg dream-bg-two"></view>

    <view class="detail-header">
      <view class="back-button" hover-class="button-hover" @tap="goBack">‹</view>
      <view>
        <text class="detail-title">短信详情</text>
        <text class="detail-subtitle">查看这条匿名短信的发送进度</text>
      </view>
    </view>

    <view class="status-card" :class="statusMeta.className">
      <view class="status-top">
        <view class="status-pill" :class="statusMeta.className">
          <text class="status-dot"></text>
          <text>{{ statusMeta.text }}</text>
        </view>
        <text class="order-text">#{{ currentMail.orderNumber }}</text>
      </view>
      <text class="status-title">{{ statusTitle }}</text>
      <text class="status-desc">{{ statusDesc }}</text>
    </view>

    <view class="phone-preview">
      <view class="preview-header">
        <view class="avatar">匿</view>
        <view>
          <text class="preview-name">匿名短信</text>
          <text class="preview-recipient">发给 {{ maskedRecipient }}</text>
        </view>
      </view>

      <view class="imessage-area">
        <view class="sms-bubble">
          <text class="sms-content">{{ currentMail.content }}</text>
        </view>
      </view>
    </view>

    <view class="info-panel">
      <view class="info-row">
        <text class="info-label">联系人</text>
        <text class="info-value">{{ maskedRecipient }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">提交时间</text>
        <text class="info-value">{{ submitTime }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">发送时间</text>
        <text class="info-value">{{ sendTime }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">费用</text>
        <text class="info-value">¥{{ currentMail.price.toFixed(2) }}</text>
      </view>
    </view>

    <view class="timeline-panel">
      <view class="timeline-item done">
        <view class="timeline-dot"></view>
        <view class="timeline-content">
          <text class="timeline-title">已提交</text>
          <text class="timeline-time">{{ submitTime }}</text>
        </view>
      </view>
      <view class="timeline-item" :class="{ done: currentMail.status === sentStatus, failed: currentMail.status === failedStatus }">
        <view class="timeline-dot"></view>
        <view class="timeline-content">
          <text class="timeline-title">{{ currentMail.status === failedStatus ? "发送失败" : "等待发送" }}</text>
          <text class="timeline-time">{{ sendTime }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

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

const fallbackMail: Mail = {
  id: 0,
  orderNumber: "2503000000000000",
  recipient: "13800138000",
  content: "这是一条匿名短信记录，稍后会展示真实发送内容。",
  sendTime: "2025-03-18 20:00:00",
  submitTime: "2025-03-18 19:45:00",
  status: MailStatus.PENDING,
  price: 0,
  isNew: false,
};

const mail = ref<Mail>(fallbackMail);
const sentStatus = MailStatus.SENT;
const failedStatus = MailStatus.FAILED;

onLoad((query) => {
  const detail = deserializeMail(query?.mail as string | undefined);

  if (detail) {
    mail.value = detail;
  }
});

const currentMail = computed(() => mail.value);
const statusMeta = computed(() => MAIL_STATUS_META[currentMail.value.status]);
const maskedRecipient = computed(() => maskRecipient(currentMail.value.recipient));
const submitTime = computed(() => formatMailTime(currentMail.value.submitTime));
const sendTime = computed(() => formatMailTime(currentMail.value.sendTime));

const statusTitle = computed(() => {
  if (currentMail.value.status === MailStatus.SENT) return "短信已经送达";
  if (currentMail.value.status === MailStatus.FAILED) return "发送没有成功";
  return "短信正在等待发送";
});

const statusDesc = computed(() => {
  if (currentMail.value.status === MailStatus.SENT) return "对方收到后，如果有回复会在信箱中展示。";
  if (currentMail.value.status === MailStatus.FAILED) return "可以稍后重新提交，或检查联系人号码是否正确。";
  return "系统会按预约时间发送，请留意后续状态变化。";
});

const goBack = () => {
  uni.navigateBack({
    delta: 1,
    fail: () => {
      uni.switchTab({
        url: "/pages/mailbox/index",
      });
    },
  });
};
</script>

<style scoped lang="scss">
.detail-page {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 28rpx 26rpx 48rpx;
  background:
    linear-gradient(180deg, rgba(255, 244, 250, 0.98) 0%, rgba(238, 248, 255, 0.96) 48%, #f7f8fb 100%),
    linear-gradient(135deg, rgba(255, 204, 225, 0.22), rgba(199, 233, 255, 0.24));
  position: relative;
  overflow: hidden;
}

.dream-bg {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.dream-bg-one {
  width: 360rpx;
  height: 360rpx;
  right: -160rpx;
  top: 110rpx;
  background: rgba(255, 188, 214, 0.24);
}

.dream-bg-two {
  width: 320rpx;
  height: 320rpx;
  left: -140rpx;
  top: 620rpx;
  background: rgba(167, 218, 255, 0.22);
}

.detail-header,
.status-card,
.phone-preview,
.info-panel,
.timeline-panel {
  position: relative;
  z-index: 1;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 18rpx;
  margin-bottom: 24rpx;
}

.back-button {
  width: 68rpx;
  height: 68rpx;
  line-height: 62rpx;
  text-align: center;
  border-radius: 50%;
  color: #293247;
  font-size: 54rpx;
  background: rgba(255, 255, 255, 0.78);
  border: 1rpx solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10rpx 24rpx rgba(83, 96, 130, 0.07);
}

.button-hover {
  opacity: 0.72;
}

.detail-title,
.detail-subtitle,
.status-title,
.status-desc,
.preview-name,
.preview-recipient,
.sms-content,
.info-label,
.info-value,
.timeline-title,
.timeline-time {
  display: block;
}

.detail-title {
  color: #20273a;
  font-size: 42rpx;
  font-weight: 700;
  line-height: 1.2;
}

.detail-subtitle {
  margin-top: 8rpx;
  color: #687286;
  font-size: 24rpx;
  line-height: 1.4;
}

.status-card {
  overflow: hidden;
  padding: 26rpx;
  border-radius: 28rpx;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 248, 252, 0.82) 55%, rgba(240, 249, 255, 0.86) 100%),
    rgba(255, 255, 255, 0.78);
  border: 1rpx solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 18rpx 42rpx rgba(93, 107, 139, 0.09);
}

.status-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  margin-bottom: 26rpx;
}

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

.status-pill.status-pending {
  background: linear-gradient(135deg, #ffb75e 0%, #f59e0b 100%);
}

.status-pill.status-sent {
  background: linear-gradient(135deg, #7ee0a3 0%, #34b878 100%);
}

.status-pill.status-failed {
  background: linear-gradient(135deg, #ff8daf 0%, #e85b7f 100%);
}

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

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

.status-title {
  color: #263044;
  font-size: 36rpx;
  font-weight: 700;
  line-height: 1.35;
}

.status-desc {
  margin-top: 12rpx;
  color: #687286;
  font-size: 25rpx;
  line-height: 1.55;
}

.phone-preview,
.info-panel,
.timeline-panel {
  margin-top: 22rpx;
  border-radius: 28rpx;
  background: rgba(255, 255, 255, 0.78);
  border: 1rpx solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 18rpx 42rpx rgba(93, 107, 139, 0.08);
}

.phone-preview {
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  padding: 26rpx 28rpx 18rpx;
  border-bottom: 1rpx solid rgba(230, 236, 246, 0.78);
}

.avatar {
  width: 74rpx;
  height: 74rpx;
  line-height: 74rpx;
  margin-right: 16rpx;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-size: 28rpx;
  font-weight: 700;
  background: linear-gradient(135deg, #ff78a2 0%, #83c6ff 100%);
}

.preview-name {
  color: #263044;
  font-size: 30rpx;
  font-weight: 700;
}

.preview-recipient {
  margin-top: 6rpx;
  color: #8c96a8;
  font-size: 23rpx;
}

.imessage-area {
  padding: 28rpx;
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.76), rgba(255, 248, 252, 0.72));
}

.sms-bubble {
  max-width: 590rpx;
  padding: 22rpx 24rpx;
  border-radius: 28rpx 28rpx 28rpx 8rpx;
  background: #fff;
  border: 1rpx solid rgba(232, 238, 248, 0.88);
  box-shadow: 0 10rpx 24rpx rgba(93, 107, 139, 0.06);
}

.sms-content {
  color: #333b4f;
  font-size: 29rpx;
  line-height: 1.7;
}

.info-panel {
  padding: 8rpx 26rpx;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rpx;
  min-height: 82rpx;
  border-bottom: 1rpx solid rgba(230, 236, 246, 0.72);
}

.info-row:last-child {
  border-bottom: 0;
}

.info-label {
  color: #8c96a8;
  font-size: 24rpx;
  flex-shrink: 0;
}

.info-value {
  color: #263044;
  font-size: 25rpx;
  font-weight: 600;
  text-align: right;
}

.timeline-panel {
  padding: 26rpx 28rpx;
}

.timeline-item {
  position: relative;
  display: flex;
  padding-bottom: 30rpx;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::after {
  content: "";
  position: absolute;
  left: 11rpx;
  top: 28rpx;
  bottom: 0;
  width: 2rpx;
  background: rgba(200, 211, 226, 0.7);
}

.timeline-item:last-child::after {
  display: none;
}

.timeline-dot {
  width: 24rpx;
  height: 24rpx;
  margin-top: 4rpx;
  margin-right: 20rpx;
  border-radius: 50%;
  background: #d5dde9;
  flex-shrink: 0;
}

.timeline-item.done .timeline-dot {
  background: linear-gradient(135deg, #7ee0a3, #34b878);
}

.timeline-item.failed .timeline-dot {
  background: linear-gradient(135deg, #ff8daf, #e85b7f);
}

.timeline-content {
  flex: 1;
}

.timeline-title {
  color: #263044;
  font-size: 27rpx;
  font-weight: 700;
  line-height: 1.35;
}

.timeline-time {
  margin-top: 8rpx;
  color: #8c96a8;
  font-size: 23rpx;
}
</style>
