<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">{{ maskedContact }} · {{ replyTime }}</text>
      </view>
    </view>

    <view class="chat-panel">
      <view class="chat-time">{{ replyTime }}</view>

      <view class="message-row sent-row">
        <view class="message-meta">
          <text>发送内容</text>
        </view>
        <view class="chat-bubble sent-bubble">
          <text>{{ currentReply.originalMessage }}</text>
        </view>
      </view>

      <view class="message-row reply-row">
        <view class="reply-avatar">回</view>
        <view>
          <view class="message-meta reply-meta">
            <text>回复内容</text>
          </view>
          <view class="chat-bubble reply-bubble">
            <text>{{ currentReply.replyMessage }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="info-panel">
      <view class="info-row">
        <text class="info-label">联系人</text>
        <text class="info-value">{{ maskedContact }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">回复时间</text>
        <text class="info-value">{{ replyTime }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">记录编号</text>
        <text class="info-value">#{{ currentReply.id }}</text>
      </view>
    </view>
  </view>
</template>

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

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

const fallbackReply: ReplyItem = {
  id: "RP000000000",
  contactPhone: "13800138000",
  originalMessage: "这是一条原短信内容。",
  replyMessage: "这是一条回复内容。",
  replyTime: "2026-05-03 20:12:00",
  source: "sms",
  unread: false,
};

const reply = ref<ReplyItem>(fallbackReply);

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

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

const currentReply = computed(() => reply.value);
const maskedContact = computed(() => maskRecipient(currentReply.value.contactPhone));
const replyTime = computed(() => formatMailTime(currentReply.value.replyTime));

const goBack = () => {
  uni.navigateBack({
    delta: 1,
    fail: () => {
      uni.navigateTo({
        url: "/pages/reply/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(239, 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,
.chat-panel,
.info-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,
.info-label,
.info-value {
  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;
}

.chat-panel {
  min-height: 520rpx;
  box-sizing: border-box;
  padding: 26rpx 20rpx 30rpx;
  border-radius: 30rpx;
  background:
    linear-gradient(180deg, rgba(247, 251, 255, 0.8), rgba(255, 248, 252, 0.72)),
    rgba(255, 255, 255, 0.64);
  border: 1rpx solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 18rpx 42rpx rgba(93, 107, 139, 0.08);
}

.chat-time {
  width: 310rpx;
  margin: 0 auto 30rpx;
  padding: 8rpx 16rpx;
  border-radius: 999rpx;
  color: #9aa3b2;
  font-size: 22rpx;
  text-align: center;
  background: rgba(238, 243, 250, 0.88);
}

.message-row {
  display: flex;
  margin-bottom: 30rpx;
}

.sent-row {
  flex-direction: column;
  align-items: flex-end;
}

.reply-row {
  align-items: flex-start;
}

.message-meta {
  margin-bottom: 10rpx;
  color: #9aa3b2;
  font-size: 22rpx;
}

.reply-meta {
  margin-left: 2rpx;
}

.chat-bubble {
  max-width: 560rpx;
  box-sizing: border-box;
  padding: 22rpx 24rpx;
  border-radius: 28rpx;
  font-size: 29rpx;
  line-height: 1.68;
  word-break: break-all;
}

.sent-bubble {
  color: #fff;
  border-bottom-right-radius: 8rpx;
  background: linear-gradient(135deg, #ff78a2 0%, #83c6ff 100%);
  box-shadow: 0 12rpx 28rpx rgba(255, 120, 162, 0.16);
}

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

.reply-bubble {
  color: #333b4f;
  border-bottom-left-radius: 8rpx;
  background: #fff;
  border: 1rpx solid rgba(232, 238, 248, 0.88);
  box-shadow: 0 10rpx 24rpx rgba(93, 107, 139, 0.06);
}

.info-panel {
  margin-top: 24rpx;
  padding: 8rpx 26rpx;
  border-radius: 28rpx;
  background: rgba(255, 255, 255, 0.74);
  border: 1rpx solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 18rpx 42rpx rgba(93, 107, 139, 0.08);
}

.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 {
  flex-shrink: 0;
  color: #8c96a8;
  font-size: 24rpx;
}

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