<template>
  <view class="record-page">
    <view class="space-bg"></view>
    <view class="safe-top" :style="{ height: safeAreaTop + 10 + 'px' }"></view>

    <view class="header">
      <view class="back-hit" @click="goBack"><view class="back-icon"></view></view>
      <view class="heading">
        <text class="title">记录人生经历</text>
        <text class="title-star">✦</text>
      </view>
      <text class="subtitle">记录每一个重要时刻，AI将帮你生成专属人生轨迹</text>
    </view>

    <scroll-view class="content" scroll-y :show-scrollbar="false">
      <view class="form-card">
        <view class="group time-group">
          <view class="group-title">
            <view class="clock-icon"></view>
            <text>时间</text>
          </view>

          <view class="segmented">
            <text
              v-for="item in timeModes"
              :key="item.value"
              class="seg"
              :class="{ active: form.timeMode === item.value }"
              @click="switchTimeMode(item.value)"
            >{{ item.label }}</text>
          </view>

          <picker
            v-if="form.timeMode === 'date'"
            mode="date"
            :value="form.time"
            @change="e => setDate(e.detail.value)"
          >
            <view class="picker-field">
              <view class="calendar-icon"></view>
              <text>{{ formatDate(form.time) }}</text>
              <text class="chevron">›</text>
            </view>
          </picker>

          <picker
            v-else-if="form.timeMode === 'month'"
            mode="multiSelector"
            :range="monthRange"
            :value="monthPickerValue"
            @change="onMonthChange"
          >
            <view class="picker-field">
              <view class="calendar-icon"></view>
              <text>{{ formatMonth(form.eventDateText) }}</text>
              <text class="chevron">›</text>
            </view>
          </picker>

          <picker
            v-else-if="form.timeMode === 'season'"
            mode="multiSelector"
            :range="seasonRange"
            :value="seasonPickerValue"
            @change="onSeasonChange"
          >
            <view class="picker-field">
              <view class="calendar-icon"></view>
              <text>{{ formatSeason(form.eventDateText) }}</text>
              <text class="chevron">›</text>
            </view>
          </picker>

          <view v-else class="range-fields">
            <picker mode="date" :value="form.time" @change="e => setRangeStart(e.detail.value)">
              <view class="picker-field compact">
                <view class="calendar-icon"></view>
                <text class="range-date-text">{{ formatShortDate(form.time) }}</text>
              </view>
            </picker>
            <text class="range-line">至</text>
            <picker mode="date" :value="form.endTime" @change="e => setRangeEnd(e.detail.value)">
              <view class="picker-field compact">
                <text class="range-date-text">{{ formatShortDate(form.endTime) }}</text>
                <text class="chevron">›</text>
              </view>
            </picker>
          </view>
        </view>

        <view class="divider"></view>

        <view class="group">
          <view class="label-row">
            <view class="group-title">
              <view class="pen-icon"></view>
              <text>事件标题</text>
              <text class="field-star">✦</text>
            </view>
            <text class="count">{{ form.title.length }}/30</text>
          </view>
          <input
            class="input-field"
            maxlength="30"
            v-model="form.title"
            placeholder="给这段经历起个标题吧..."
            placeholder-class="placeholder"
          />
        </view>

        <view class="group">
          <view class="label-row">
            <view class="group-title">
              <view class="note-icon"></view>
              <text>具体内容</text>
              <text class="field-star">✦</text>
            </view>
            <text class="count">{{ form.content.length }}/500</text>
          </view>
          <view class="textarea-wrap">
            <textarea
              class="textarea-field"
              maxlength="500"
              v-model="form.content"
              :placeholder="contentPlaceholder"
              placeholder-class="placeholder"
            />
            <view class="ai-btn" @click="assistWrite">
              <text class="sparkle">✦</text>
              <text>AI 帮我写</text>
            </view>
          </view>
        </view>

        <view class="group tag-section">
          <view class="label-row">
            <view class="group-title">
              <view class="heart-icon"></view>
              <text>相关标签</text>
              <text class="optional">（可多选）</text>
            </view>
            <view class="custom-tag" @click="addCustomTag">＋ 自定义标签</view>
          </view>

          <view class="tag-grid">
            <text
              v-for="tag in tags"
              :key="tag"
              class="tag"
              :class="{ active: form.tags.includes(tag) }"
              @click="toggleTag(tag)"
            >{{ tag }}</text>
          </view>
        </view>

        <button class="submit-btn" :loading="saving" @click="submit">
          <text class="submit-title">✦ 提交记录</text>
          <text class="submit-sub">记录后可在时间轴查看</text>
        </button>

        <view class="planet"></view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { useAppStore } from '../../stores/app.js'

const store = useAppStore()
const safeAreaTop = ref(20)
const saving = ref(false)
const currentYear = new Date().getFullYear()

const form = reactive({
  id: '',
  title: '',
  time: new Date().toISOString().slice(0, 10),
  endTime: new Date().toISOString().slice(0, 10),
  timeMode: 'date',
  eventDateText: new Date().toISOString().slice(0, 10),
  content: '',
  tags: [],
  eventType: 'daily_log'
})

const timeModes = [
  { label: '具体日期', value: 'date' },
  { label: '年月', value: 'month' },
  { label: '季节', value: 'season' },
  { label: '时间轴范围', value: 'range' }
]

const years = Array.from({ length: 81 }, (_, index) => String(currentYear - 60 + index))
const months = Array.from({ length: 12 }, (_, index) => `${String(index + 1).padStart(2, '0')}月`)
const seasons = [
  { label: '春季', value: 'spring' },
  { label: '夏季', value: 'summer' },
  { label: '秋季', value: 'autumn' },
  { label: '冬季', value: 'winter' }
]

const monthRange = [years, months]
const seasonRange = [years, seasons.map(item => item.label)]
const tags = ref(['成长', '学习', '工作', '旅行', '感情', '家庭', '友情', '挑战', '突破', '收获', '感动', '迷茫'])
const contentPlaceholder = '请详细记录这段经历的背景、发生的事情、你的感受和收获...'

const monthPickerValue = computed(() => {
  const [year, month] = (form.eventDateText || form.time).split('-')
  return [
    Math.max(0, years.indexOf(year)),
    Math.max(0, Number(month || '01') - 1)
  ]
})

const seasonPickerValue = computed(() => {
  const [year, season = 'spring'] = (form.eventDateText || `${currentYear}-spring`).split('-')
  return [
    Math.max(0, years.indexOf(year)),
    Math.max(0, seasons.findIndex(item => item.value === season))
  ]
})

onMounted(() => {
  const info = uni.getWindowInfo()
  safeAreaTop.value = info.safeAreaInsets?.top || info.statusBarHeight || 20
  const pages = getCurrentPages()
  const id = pages[pages.length - 1]?.options?.id || ''
  if (id) loadEvent(id)
})

const switchTimeMode = (mode) => {
  form.timeMode = mode
  if (mode === 'date') form.eventDateText = form.time
  if (mode === 'month') form.eventDateText = form.time.slice(0, 7)
  if (mode === 'season') form.eventDateText = `${form.time.slice(0, 4)}-spring`
  if (mode === 'range') {
    form.eventDateText = `${form.time} 至 ${form.endTime || form.time}`
    if (!form.endTime) form.endTime = form.time
  }
}

const setDate = (value) => {
  form.time = value
  form.eventDateText = value
}

const setRangeStart = (value) => {
  form.time = value
  form.eventDateText = `${form.time} 至 ${form.endTime || form.time}`
}

const setRangeEnd = (value) => {
  form.endTime = value
  form.eventDateText = `${form.time} 至 ${form.endTime}`
}

const onMonthChange = (event) => {
  const [yearIndex, monthIndex] = event.detail.value
  const year = years[yearIndex]
  const month = String(monthIndex + 1).padStart(2, '0')
  form.time = `${year}-${month}-01`
  form.eventDateText = `${year}-${month}`
}

const onSeasonChange = (event) => {
  const [yearIndex, seasonIndex] = event.detail.value
  const year = years[yearIndex]
  const season = seasons[seasonIndex]
  const monthMap = { spring: '03', summer: '06', autumn: '09', winter: '12' }
  form.time = `${year}-${monthMap[season.value]}-01`
  form.eventDateText = `${year}-${season.value}`
}

const formatDate = (value) => {
  if (!value) return '选择日期'
  const [year, month, day] = value.split('-')
  return `${year}年${month}月${day}日`
}

const formatShortDate = (value) => {
  if (!value) return '选择日期'
  return String(value).replaceAll('-', '.')
}

const formatMonth = (value) => {
  const [year, month] = (value || form.time.slice(0, 7)).split('-')
  return `${year}年${month}月`
}

const formatSeason = (value) => {
  const [year, season = 'spring'] = (value || `${currentYear}-spring`).split('-')
  const label = seasons.find(item => item.value === season)?.label || '春季'
  return `${year}年${label}`
}

const toggleTag = (tag) => {
  const index = form.tags.indexOf(tag)
  if (index >= 0) form.tags.splice(index, 1)
  else form.tags.push(tag)
}

const addCustomTag = () => {
  uni.showModal({
    title: '自定义标签',
    editable: true,
    placeholderText: '输入标签名称',
    success: (res) => {
      const value = String(res.content || '').trim()
      if (!res.confirm || !value) return
      if (!tags.value.includes(value)) tags.value.push(value)
      if (!form.tags.includes(value)) form.tags.push(value)
    }
  })
}

const loadEvent = async (id) => {
  if (!store.events?.length) await store.fetchEvents()
  const event = store.getEventById(id)
  if (!event) return
  form.id = event.id
  form.title = event.title || ''
  form.time = event.time || new Date().toISOString().slice(0, 10)
  form.endTime = event.endTime || form.time
  form.timeMode = event.timeMode || 'date'
  form.eventDateText = event.eventDateText || form.time
  form.content = event.content || ''
  form.tags = Array.isArray(event.tags) ? [...event.tags] : []
  form.eventType = event.eventType || 'daily_log'
  form.tags.forEach(tag => {
    if (!tags.value.includes(tag)) tags.value.push(tag)
  })
}

const assistWrite = async () => {
  const result = await store.assistEventWriting({ ...form })
  if (!result.success) {
    uni.showToast({ title: result.error || 'AI 帮写失败', icon: 'none' })
    return
  }
  if (result.data?.content) form.content = result.data.content
  if (Array.isArray(result.data?.tags)) {
    result.data.tags.forEach(tag => {
      if (!tags.value.includes(tag)) tags.value.push(tag)
      if (!form.tags.includes(tag)) form.tags.push(tag)
    })
  }
  uni.showToast({ title: result.data?.placeholder ? 'AI 占位内容已生成' : 'AI 已帮你优化', icon: 'none' })
}

const submit = async () => {
  if (!form.title || !form.content || saving.value) {
    uni.showToast({ title: '请填写标题和内容', icon: 'none' })
    return
  }
  saving.value = true
  const payload = { ...form, aiFeedback: buildAiFeedback() }
  const result = form.id ? await store.updateEvent(payload) : await store.createEvent(payload)
  saving.value = false
  if (result.success) {
    uni.navigateBack()
  } else {
    uni.showToast({ title: result.error || '保存失败', icon: 'none' })
  }
}

const buildAiFeedback = () => {
  return [
    '## 心理状态解读',
    '你正在认真整理这段经历，它会成为后续人生剧本的重要素材。',
    '',
    '---',
    '',
    '## 成长意义',
    '- 这段记录体现了你的自我观察能力。',
    '- 保留当时的细节，会帮助 AI 更准确地理解你的生命轨迹。'
  ].join('\n')
}

const goBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.record-page {
  position: relative;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: #050717;
}

.space-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 4%, rgba(63, 91, 255, 0.22), transparent 28%),
    radial-gradient(circle at 88% 92%, rgba(136, 63, 255, 0.36), transparent 30%),
    linear-gradient(180deg, #070b25 0%, #08031d 52%, #05020f 100%);
}

.space-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1rpx, transparent 2rpx),
    radial-gradient(circle, rgba(165,105,255,0.52) 0 1rpx, transparent 2rpx);
  background-size: 160rpx 190rpx, 250rpx 220rpx;
  background-position: 44rpx 44rpx, 10rpx 112rpx;
}

.safe-top,
.header,
.content {
  position: relative;
  z-index: 1;
}

.safe-top,
.header {
  flex-shrink: 0;
}

.header {
  min-height: 154rpx;
  display: grid;
  grid-template-columns: 90rpx 1fr 90rpx;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 4rpx 32rpx 24rpx;
  box-sizing: border-box;
}

.back-hit {
  grid-row: 1 / 3;
  width: 68rpx;
  height: 68rpx;
  display: flex;
  align-items: center;
}

.back-icon {
  width: 28rpx;
  height: 28rpx;
  border-left: 6rpx solid #fff;
  border-bottom: 6rpx solid #fff;
  transform: rotate(45deg);
  margin-left: 12rpx;
}

.heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14rpx;
}

.title {
  font-size: 42rpx;
  font-weight: 900;
}

.title-star,
.field-star {
  color: #ffd36e;
  text-shadow: 0 0 18rpx rgba(255, 198, 85, 0.8);
}

.subtitle {
  grid-column: 2;
  display: block;
  margin-top: 22rpx;
  color: rgba(210, 194, 242, 0.78);
  font-size: 25rpx;
  text-align: center;
}

.content {
  flex: 1;
  height: 0;
  min-height: 0;
  padding: 0 28rpx 28rpx;
  box-sizing: border-box;
}

.form-card {
  position: relative;
  overflow: hidden;
  border-radius: 30rpx;
  padding: 36rpx 26rpx 84rpx;
  border: 2rpx solid rgba(145, 70, 255, 0.76);
  background:
    radial-gradient(circle at 52% 8%, rgba(126, 72, 255, 0.13), transparent 35%),
    rgba(12, 13, 46, 0.72);
  box-shadow: 0 0 30rpx rgba(156, 73, 255, 0.24), inset 0 0 34rpx rgba(143, 92, 255, 0.08);
}

.group + .group {
  margin-top: 48rpx;
}

.group-title,
.label-row {
  display: flex;
  align-items: center;
}

.label-row {
  justify-content: space-between;
}

.group-title {
  gap: 14rpx;
  color: #d7bdff;
  font-size: 29rpx;
  font-weight: 900;
}

.clock-icon,
.pen-icon,
.note-icon,
.heart-icon,
.calendar-icon {
  position: relative;
  width: 32rpx;
  height: 32rpx;
  color: #a855ff;
  flex-shrink: 0;
}

.clock-icon {
  border: 4rpx solid currentColor;
  border-radius: 50%;
}

.clock-icon::before {
  content: '';
  position: absolute;
  left: 13rpx;
  top: 5rpx;
  width: 4rpx;
  height: 11rpx;
  background: currentColor;
}

.clock-icon::after {
  content: '';
  position: absolute;
  left: 13rpx;
  top: 14rpx;
  width: 10rpx;
  height: 4rpx;
  background: currentColor;
}

.pen-icon {
  border-left: 5rpx solid currentColor;
  border-bottom: 5rpx solid currentColor;
  transform: skew(-12deg);
}

.pen-icon::after {
  content: '';
  position: absolute;
  left: 4rpx;
  bottom: 7rpx;
  width: 31rpx;
  height: 5rpx;
  border-radius: 999rpx;
  background: currentColor;
  transform: rotate(-45deg);
}

.note-icon {
  border: 4rpx solid currentColor;
  border-radius: 5rpx;
  box-sizing: border-box;
}

.note-icon::after {
  content: '';
  position: absolute;
  right: -5rpx;
  bottom: 4rpx;
  width: 15rpx;
  height: 5rpx;
  border-radius: 999rpx;
  background: currentColor;
  transform: rotate(-45deg);
}

.heart-icon::before,
.heart-icon::after {
  content: '';
  position: absolute;
  top: 6rpx;
  width: 18rpx;
  height: 26rpx;
  border: 4rpx solid currentColor;
  border-bottom: 0;
  border-radius: 18rpx 18rpx 0 0;
}

.heart-icon::before {
  left: 2rpx;
  transform: rotate(-45deg);
}

.heart-icon::after {
  right: 2rpx;
  transform: rotate(45deg);
}

.segmented {
  height: 68rpx;
  margin-top: 26rpx;
  border-radius: 999rpx;
  padding: 5rpx;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1rpx solid rgba(151, 111, 255, 0.3);
  background: rgba(8, 10, 34, 0.72);
}

.seg {
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(224, 214, 243, 0.78);
  font-size: 22rpx;
  font-weight: 600;
}

.seg.active {
  color: #fff;
  background: linear-gradient(135deg, #a843ff, #7b31ff);
  box-shadow: 0 0 26rpx rgba(168, 67, 255, 0.58);
}

.picker-field,
.input-field,
.textarea-field {
  width: 100%;
  box-sizing: border-box;
  border-radius: 22rpx;
  border: 1rpx solid rgba(151, 111, 255, 0.28);
  background: rgba(12, 15, 46, 0.74);
  color: #fff;
  font-size: 25rpx;
}

.picker-field {
  height: 78rpx;
  margin-top: 26rpx;
  padding: 0 22rpx;
  display: flex;
  align-items: center;
  gap: 14rpx;
}

.picker-field text:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-field.compact {
  margin-top: 0;
  min-width: 0;
  height: 72rpx;
  padding: 0 16rpx;
}

.calendar-icon {
  width: 28rpx;
  height: 28rpx;
  border: 4rpx solid #a855ff;
  border-radius: 6rpx;
  box-sizing: border-box;
}

.calendar-icon::before {
  content: '';
  position: absolute;
  left: 3rpx;
  right: 3rpx;
  top: 8rpx;
  height: 3rpx;
  background: #a855ff;
}

.chevron {
  flex: none !important;
  color: rgba(224, 214, 243, 0.7);
  font-size: 42rpx;
  line-height: 1;
}

.range-fields {
  margin-top: 26rpx;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10rpx;
}

.range-fields picker {
  min-width: 0;
}

.range-line {
  color: rgba(224, 214, 243, 0.7);
  font-size: 22rpx;
  font-weight: 700;
}

.range-date-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.divider {
  height: 1rpx;
  margin: 34rpx 34rpx 34rpx;
  background: linear-gradient(90deg, transparent, rgba(153, 89, 255, 0.34), transparent);
}

.count,
.optional,
.custom-tag {
  color: #b58bff;
  font-size: 22rpx;
  font-weight: 600;
}

.optional {
  color: rgba(217, 201, 244, 0.78);
}

.input-field {
  height: 92rpx;
  margin-top: 22rpx;
  padding: 0 24rpx;
}

.textarea-wrap {
  position: relative;
  margin-top: 22rpx;
}

.textarea-field {
  height: 276rpx;
  padding: 26rpx 24rpx 82rpx;
  line-height: 1.6;
}

.ai-btn,
.custom-tag {
  border-radius: 999rpx;
  border: 1rpx solid rgba(151, 111, 255, 0.34);
  background: rgba(27, 18, 64, 0.72);
}

.ai-btn {
  position: absolute;
  right: 18rpx;
  bottom: 18rpx;
  height: 54rpx;
  padding: 0 18rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #d5b3ff;
  font-size: 23rpx;
}

.sparkle {
  color: #d783ff;
}

.custom-tag {
  height: 50rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
}

.tag-section {
  margin-top: 52rpx !important;
}

.tag-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18rpx 16rpx;
  margin-top: 28rpx;
}

.tag {
  height: 58rpx;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(224, 214, 243, 0.74);
  font-size: 22rpx;
  border: 1rpx solid rgba(151, 111, 255, 0.2);
  background: rgba(20, 22, 58, 0.58);
}

.tag.active {
  color: #fff;
  border-color: rgba(192, 100, 255, 0.86);
  background: rgba(137, 51, 255, 0.35);
  box-shadow: 0 0 22rpx rgba(168, 67, 255, 0.34);
}

.submit-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 116rpx;
  margin-top: 38rpx;
  border: 0;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #a843ff, #7330ff 58%, #3121ed);
  box-shadow: 0 0 34rpx rgba(168, 67, 255, 0.55);
}

.submit-btn::after {
  border: 0;
}

.submit-title,
.submit-sub {
  display: block;
  color: #fff;
}

.submit-title {
  font-size: 31rpx;
  font-weight: 900;
}

.submit-sub {
  margin-top: 8rpx;
  color: rgba(255, 255, 255, 0.72);
  font-size: 23rpx;
  font-weight: 500;
}

.planet {
  position: absolute;
  right: -26rpx;
  bottom: -44rpx;
  width: 166rpx;
  height: 112rpx;
  border-radius: 50%;
  border: 3rpx solid rgba(177, 89, 255, 0.62);
  box-shadow: 0 0 38rpx rgba(171, 72, 255, 0.48);
  transform: rotate(-22deg);
  opacity: 0.7;
}

.planet::before {
  content: '';
  position: absolute;
  left: -20rpx;
  right: -20rpx;
  top: 48rpx;
  height: 18rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(195, 111, 255, 0.66);
}

.placeholder {
  color: rgba(213, 199, 239, 0.52);
}
</style>
