<template>
  <div class="compose-container">
    <!-- 深空背景 -->
    <div class="space-background">
      <div class="stars" ref="stars"></div>
    </div>
    
    <!-- 顶部导航 -->
    <div class="header glass-card">
      <van-icon name="arrow-left" size="24" @click="goBack" />
      <h2>撰写未来邮件</h2>
      <div></div>
    </div>
    
    <!-- 撰写表单 -->
    <div class="compose-content">
      <div class="form-section glass-card p-20">
        <!-- 收件人选择 -->
        <div class="form-group">
          <h3 class="font-semibold">收件人</h3>
          <van-radio-group v-model="recipientType" direction="horizontal">
            <van-radio name="SELF">自己</van-radio>
            <van-radio name="SPECIFIC">他人</van-radio>
            <van-radio name="PUBLIC">任意有缘人</van-radio>
          </van-radio-group>
          
          <van-field
            v-if="recipientType === 'SPECIFIC'"
            v-model="recipientEmail"
            placeholder="收件人邮箱"
            class="custom-field mt-10"
          />
        </div>
        
        <!-- 发送时间选择 -->
        <div class="form-group mt-20">
          <h3 class="font-semibold">发送时间</h3>
          <van-radio-group v-model="timeType" direction="horizontal">
            <van-radio name="preset">预设时间</van-radio>
            <van-radio name="custom">自定义</van-radio>
            <van-radio name="condition">条件触发</van-radio>
          </van-radio-group>
          
          <div v-if="timeType === 'preset'" class="preset-options mt-10">
            <van-button
              v-for="option in presetTimeOptions"
              :key="option.value"
              :type="selectedPresetTime === option.value ? 'primary' : 'default'"
              round
              size="small"
              class="preset-button"
              @click="selectPresetTime(option.value)"
            >
              {{ option.label }}
            </van-button>
          </div>
          
          <van-datetime-picker
            v-if="timeType === 'custom'"
            v-model="customDeliveryDate"
            type="date"
            :min-date="minDate"
            class="custom-date-picker mt-10"
          />
          
          <div v-if="timeType === 'condition'" class="condition-options mt-10">
            <van-cell-group>
              <van-cell title="地点触发" is-link @click="showLocationPicker = true" />
              <van-cell title="事件触发" is-link @click="showEventPicker = true" />
            </van-cell-group>
          </div>
        </div>
        
        <!-- 邮件内容 -->
        <div class="form-group mt-20">
          <h3 class="font-semibold">邮件内容</h3>
          <van-field
            v-model="subject"
            placeholder="标题"
            class="custom-field"
          />
          <van-field
            v-model="content"
            type="textarea"
            placeholder="写下你想对未来的自己说的话..."
            rows="8"
            autosize
            class="custom-field mt-10"
          />
          
          <!-- 附件和多媒体 -->
          <div class="media-options mt-10">
            <van-uploader :after-read="afterRead" class="media-uploader">
              <van-button icon="photo-o" type="primary" plain round size="small">
                添加图片
              </van-button>
            </van-uploader>
            <van-button icon="volume-o" type="primary" plain round size="small" class="ml-10">
              添加语音
            </van-button>
            <van-button icon="video-o" type="primary" plain round size="small" class="ml-10">
              添加视频
            </van-button>
          </div>
        </div>
        
        <!-- AI助手 -->
        <div class="form-group mt-20">
          <h3 class="font-semibold">AI写作助手</h3>
          <van-cell-group>
            <van-cell title="生成开头" is-link @click="generateOpening" />
            <van-cell title="内容建议" is-link @click="generateSuggestions" />
            <van-cell title="情感分析" is-link @click="analyzeEmotion" />
          </van-cell-group>
        </div>
      </div>
    </div>
    
    <!-- 底部操作按钮 -->
    <div class="footer-actions">
      <van-button round block class="save-button" @click="saveDraft">
        存入胶囊
      </van-button>
      <van-button round block type="primary" class="send-button" @click="sendMail">
        发送至未来
      </van-button>
    </div>
    
    <!-- 地点选择弹窗 -->
    <van-popup v-model:show="showLocationPicker" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onLocationConfirm"
        @cancel="showLocationPicker = false"
      />
    </van-popup>
    
    <!-- 事件选择弹窗 -->
    <van-popup v-model:show="showEventPicker" position="bottom" :style="{ height: '50%' }">
      <div class="event-picker">
        <h3>选择触发事件</h3>
        <van-cell-group>
          <van-cell
            v-for="event in triggerEvents"
            :key="event.id"
            :title="event.name"
            :label="event.description"
            @click="selectEvent(event)"
          />
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showLoadingToast, showSuccessToast, showFailToast, closeToast, Dialog } from 'vant'

export default {
  name: 'Compose',
  setup() {
    const router = useRouter()
    const stars = ref(null)
    
    // 表单数据
    const recipientType = ref('SELF') // 对应API的SELF, SPECIFIC, PUBLIC
    const recipientEmail = ref('')
    const timeType = ref('preset') // preset, custom, condition
    const selectedPresetTime = ref('1year')
    const customDeliveryDate = ref(new Date(Date.now() + 365 * 24 * 60 * 60 * 1000))
    const subject = ref('')
    const content = ref('')
    const attachments = ref([]) // 附件列表
    const isEncrypted = ref(false) // 是否加密
    const capsuleStyle = ref('default') // 胶囊样式
    
    // 弹窗控制
    const showLocationPicker = ref(false)
    const showEventPicker = ref(false)
    const selectedLocation = ref(null) // 选中的地点
    const selectedEvent = ref(null) // 选中的触发事件
    
    // 最小日期为明天
    const minDate = computed(() => {
      const tomorrow = new Date()
      tomorrow.setDate(tomorrow.getDate() + 1)
      return tomorrow
    })
    
    // 预设时间选项
    const presetTimeOptions = [
      { label: '1天后', value: '1day' },
      { label: '1周后', value: '1week' },
      { label: '1个月后', value: '1month' },
      { label: '1年后', value: '1year' },
      { label: '5年后', value: '5years' },
      { label: '10年后', value: '10years' }
    ]
    
    // 触发事件选项
    const triggerEvents = [
      {
        id: 1,
        name: '人类登陆火星',
        description: '当检测到相关新闻时触发',
        keywords: ['火星', '登陆', '太空探索'],
        type: 'SPACE_EVENT'
      },
      {
        id: 2,
        name: '获得理想工作',
        description: '当您更新个人资料为在职状态时触发',
        keywords: ['工作', '职业', '就业'],
        type: 'CAREER_EVENT'
      },
      {
        id: 3,
        name: '结婚纪念日',
        description: '在每年的结婚纪念日触发',
        keywords: ['结婚', '纪念日', '婚礼'],
        type: 'PERSONAL_EVENT'
      },
      {
        id: 4,
        name: '孩子出生',
        description: '当您添加家庭成员信息时触发',
        keywords: ['孩子', '出生', '家庭'],
        type: 'FAMILY_EVENT'
      }
    ]
    
    // 模拟地区数据
    const areaList = {
      province_list: {
        110000: '北京市',
        120000: '天津市',
        310000: '上海市',
        440000: '广东省',
        330000: '浙江省',
        320000: '江苏省'
      },
      city_list: {
        110100: '北京市',
        120100: '天津市',
        310100: '上海市',
        440100: '广州市',
        440300: '深圳市',
        330100: '杭州市',
        320100: '南京市'
      },
      county_list: {
        110101: '东城区',
        110102: '西城区',
        440103: '荔湾区',
        440304: '福田区',
        330102: '上城区',
        320102: '玄武区'
      }
    }
    
    // 生成星空背景
    const generateStars = () => {
      if (!stars.value) return
      
      const starsContainer = stars.value
      const starCount = 100
      
      for (let i = 0; i < starCount; i++) {
        const star = document.createElement('div')
        star.className = 'star'
        
        // 随机位置
        const left = Math.random() * 100
        const top = Math.random() * 100
        
        // 随机大小
        const size = Math.random() * 3 + 1
        
        // 随机动画延迟
        const delay = Math.random() * 4
        
        star.style.left = `${left}%`
        star.style.top = `${top}%`
        star.style.width = `${size}px`
        star.style.height = `${size}px`
        star.style.animationDelay = `${delay}s`
        
        starsContainer.appendChild(star)
      }
    }
    
    // 返回上一页
    const goBack = () => {
      router.back()
    }
    
    // 选择预设时间
    const selectPresetTime = (value) => {
      selectedPresetTime.value = value
    }
    
    // 地点选择确认
    const onLocationConfirm = (values) => {
      showLocationPicker.value = false
      const locationName = values.map(item => item.name).join('/')
      selectedLocation.value = {
        city: values[1]?.name || '',
        province: values[0]?.name || '',
        district: values[2]?.name || ''
      }
      showFailToast(`已选择地点: ${locationName}`)
    }
    
    // 选择触发事件
    const selectEvent = (event) => {
      showEventPicker.value = false
      selectedEvent.value = event
      showFailToast(`已选择触发事件: ${event.name}`)
    }
    
    // 文件上传后处理
    const afterRead = (file) => {
      // 这里应该调用文件上传API
      // 模拟上传成功
      const attachment = {
        type: 'IMAGE',
        url: URL.createObjectURL(file.file),
        thumbnail: URL.createObjectURL(file.file),
        size: file.file.size
      }
      attachments.value.push(attachment)
      showSuccessToast(`已添加图片: ${file.file.name}`)
    }
    
    // AI生成开头
    const generateOpening = async () => {
      try {
        showLoadingToast({
          message: '生成中...',
          forbidClick: true,
        })
        
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 2000))
        
        // 模拟AI生成的开头
        const opennings = [
          "亲爱的未来的我，",
          "时光荏苒，当你读到这封信时，",
          "写给多年后的自己，",
          "未来的我，你好！",
          "此刻的我，想对未来的你说："
        ]
        
        const randomIndex = Math.floor(Math.random() * opennings.length)
        content.value = opennings[randomIndex] + "\n\n"
        
        closeToast()
        showSuccessToast('已生成开头')
      } catch (error) {
        closeToast()
        showFailToast('生成失败，请重试')
      }
    }
    
    // AI生成内容建议
    const generateSuggestions = async () => {
      try {
        showLoadingToast({
          message: '生成中...',
          forbidClick: true,
        })
        
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 2000))
        
        // 模拟AI生成的内容建议
        const suggestions = [
          "你可以分享当前的生活状态、工作情况，以及对未来的期望和梦想。也可以记录下此刻的心情和思考，让未来的你能够回忆起这段时光。",
          "考虑写下你现在的目标和计划，以及希望未来的自己已经实现了哪些。也可以询问未来的你某些问题的答案，比如'你幸福吗？'、'你成为想成为的人了吗？'。",
          "你可以描述当前的世界、科技、文化等，让未来的你能够对比时代的变迁。也可以分享一些珍贵的回忆和瞬间，这些对你来说可能意义非凡。",
          "写下你对未来的预测和想象，无论是对个人生活还是对整个世界。这些预测在将来读来会非常有趣，看看你猜对了多少。"
        ]
        
        const randomIndex = Math.floor(Math.random() * suggestions.length)
        
        closeToast()
        Dialog.alert({
          title: '内容建议',
          message: suggestions[randomIndex],
        })
      } catch (error) {
        closeToast()
        showFailToast('生成失败，请重试')
      }
    }
    
    // AI情感分析
    const analyzeEmotion = async () => {
      if (!content.value) {
        showFailToast('请先填写邮件内容')
        return
      }
      
      try {
        showLoadingToast({
          message: '分析中...',
          forbidClick: true,
        })
        
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 模拟情感分析结果
        const sentiments = ['POSITIVE', 'NEUTRAL', 'EMOTIONAL', 'HOPEFUL']
        const emotions = [
          { type: 'HAPPY', score: 0.7 },
          { type: 'HOPEFUL', score: 0.8 },
          { type: 'NOSTALGIC', score: 0.5 }
        ]
        
        const randomSentiment = sentiments[Math.floor(Math.random() * sentiments.length)]
        const emotionTypes = emotions.map(e => e.type).join('、')
        
        const summaries = [
          "这封信充满了对未来的期待和希望，表达了积极向上的情感。",
          "文字中透露出对过去时光的怀念和对未来的思考。",
          "这封信情感真挚，表达了内心深处的感受和想法。",
          "文字中既有对现实的思考，也有对未来的憧憬和规划。"
        ]
        
        const randomSummary = summaries[Math.floor(Math.random() * summaries.length)]
        
        closeToast()
        Dialog.alert({
          title: '情感分析',
          message: `情感倾向: ${randomSentiment}\n主要情感: ${emotionTypes}\n分析: ${randomSummary}`,
        })
      } catch (error) {
        closeToast()
        showFailToast('分析失败，请重试')
      }
    }
    
    // 构建邮件数据
    const buildMailData = () => {
      // 计算发送时间
      let sendTime
      let triggerType = 'TIME'
      let triggerCondition = {}
      
      if (timeType.value === 'preset') {
        const now = new Date()
        sendTime = new Date(now)
        
        switch (selectedPresetTime.value) {
          case '1day':
            sendTime.setDate(now.getDate() + 1)
            break
          case '1week':
            sendTime.setDate(now.getDate() + 7)
            break
          case '1month':
            sendTime.setMonth(now.getMonth() + 1)
            break
          case '1year':
            sendTime.setFullYear(now.getFullYear() + 1)
            break
          case '5years':
            sendTime.setFullYear(now.getFullYear() + 5)
            break
          case '10years':
            sendTime.setFullYear(now.getFullYear() + 10)
            break
        }
      } else if (timeType.value === 'custom') {
        sendTime = customDeliveryDate.value
      } else if (timeType.value === 'condition') {
        triggerType = selectedLocation.value ? 'LOCATION' : 'EVENT'
        
        if (selectedLocation.value) {
          triggerCondition.location = selectedLocation.value
        }
        
        if (selectedEvent.value) {
          triggerCondition.event = {
            keywords: selectedEvent.value.keywords,
            type: selectedEvent.value.type
          }
        }
      }
      
      // 格式化收件人类型
      let recipientTypeFormatted = recipientType.value
      
      return {
        title: subject.value,
        content: content.value,
        recipientType: recipientTypeFormatted,
        recipientEmail: recipientType.value === 'SPECIFIC' ? recipientEmail.value : undefined,
        sendTime: sendTime ? sendTime.toISOString() : undefined,
        triggerType,
        triggerCondition,
        attachments: attachments.value,
        isEncrypted: isEncrypted.value,
        capsuleStyle: capsuleStyle.value
      }
    }
    
    // 保存草稿
    const saveDraft = async () => {
      if (!subject.value) {
        showFailToast('请填写邮件标题')
        return
      }
      
      try {
        showLoadingToast({
          message: '保存中...',
          forbidClick: true,
        })
        
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 保存到本地存储作为草稿
        const mailData = buildMailData()
        const drafts = JSON.parse(localStorage.getItem('draftMails') || '[]')
        drafts.push({
          ...mailData,
          id: Date.now().toString(),
          status: 'DRAFT',
          createdAt: new Date().toISOString()
        })
        localStorage.setItem('draftMails', JSON.stringify(drafts))
        
        closeToast()
        showSuccessToast('草稿已保存')
        router.back()
      } catch (error) {
        closeToast()
        const errorMessage = error.response?.data?.message || '保存失败，请重试'
        showFailToast(errorMessage)
      }
    }
    
    // 发送邮件
    const sendMail = async () => {
      if (!subject.value) {
        showFailToast('请填写邮件标题')
        return
      }
      
      if (!content.value) {
        showFailToast('请填写邮件内容')
        return
      }
      
      if (recipientType.value === 'SPECIFIC' && !recipientEmail.value) {
        showFailToast('请填写收件人邮箱')
        return
      }
      
      try {
        showLoadingToast({
          message: '发送中...',
          forbidClick: true,
        })
        
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        const mailData = buildMailData()
        
        // 保存到本地存储作为已发送邮件
        const sentMails = JSON.parse(localStorage.getItem('sentMails') || '[]')
        sentMails.push({
          ...mailData,
          id: Date.now().toString(),
          status: 'PENDING',
          createdAt: new Date().toISOString()
        })
        localStorage.setItem('sentMails', JSON.stringify(sentMails))
        
        closeToast()
        
        // 计算发送时间用于显示
        let deliveryDate
        if (timeType.value === 'preset' || timeType.value === 'custom') {
          deliveryDate = new Date(mailData.sendTime)
        } else {
          deliveryDate = new Date()
          deliveryDate.setFullYear(deliveryDate.getFullYear() + 1) // 默认显示一年后
        }
        
        Dialog.confirm({
          title: '邮件已发送',
          message: `您的邮件将在${deliveryDate.toLocaleDateString()}送达，是否返回首页？`,
          confirmButtonText: '返回首页',
          cancelButtonText: '继续撰写',
        })
          .then(() => {
            router.push('/home')
          })
          .catch(() => {
            // 继续撰写
          })
      } catch (error) {
        closeToast()
        const errorMessage = error.response?.data?.message || '发送失败，请重试'
        showFailToast(errorMessage)
      }
    }
    
    onMounted(() => {
      generateStars()
    })
    
    return {
      stars,
      recipientType,
      recipientEmail,
      timeType,
      selectedPresetTime,
      customDeliveryDate,
      minDate,
      presetTimeOptions,
      subject,
      content,
      showLocationPicker,
      showEventPicker,
      triggerEvents,
      areaList,
      goBack,
      selectPresetTime,
      onLocationConfirm,
      selectEvent,
      afterRead,
      generateOpening,
      generateSuggestions,
      analyzeEmotion,
      saveDraft,
      sendMail
    }
  }
}
</script>

<style scoped>
.compose-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  margin: 15px;
  z-index: 10;
}

.header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.compose-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 15px;
}

.form-section {
  margin-bottom: 20px;
}

.form-group h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: bold;
}

.custom-field {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.custom-field :deep(.van-field__control) {
  color: var(--text-primary);
}

/* 单选按钮选中样式 */
:deep(.van-radio-group) {
  margin-bottom: 10px;
}

:deep(.van-radio) {
  margin-right: 15px;
}

:deep(.van-radio__icon) {
  font-size: 18px;
}

:deep(.van-radio__icon--checked .van-icon) {
  background-color: #4285f4;
  border-color: #4285f4;
  box-shadow: 0 0 8px rgba(66, 133, 244, 0.5);
}

:deep(.van-radio__label) {
  color: var(--text-primary);
  font-size: 14px;
}

.preset-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preset-button {
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.preset-button.van-button--primary {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4);
}

.custom-date-picker {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.media-options {
  display: flex;
  align-items: center;
}

.media-uploader {
  display: inline-block;
}

.footer-actions {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.save-button {
  height: 50px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.send-button {
  height: 50px;
  font-size: 16px;
  font-weight: bold;
}

.preset-button {
  margin: 5px;
}

.media-uploader .van-button {
  /* 按钮样式已由全局样式处理 */
}

.event-picker {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.event-picker h3 {
  margin: 0 0 15px;
  font-size: 18px;
}
</style>