<template>
  <view class="home-page page-enter theme-transition" :style="{ background: themeConfig.bgColor }">
    <view class="page-content">
      <view class="top-bar">
        <view class="greeting-area" @click="goToMine">
          <view class="avatar-circle" :style="{ background: themeConfig.gradientSoft }">
            <image v-if="userAvatar" class="avatar-image" :src="userAvatar" mode="aspectFill" />
            <text v-else class="avatar-letter" :style="{ color: '#fff' }">{{ (userName || '记')[0] }}</text>
          </view>
          <view class="greeting-texts">
            <text class="greeting-line" :style="{ color: themeConfig.textSecondary }">{{ greetingText }}</text>
            <text class="user-name" :style="{ color: themeConfig.textPrimary }">{{ userName || '记录每一天' }}</text>
          </view>
        </view>

        <view class="date-display" @click="toggleCalendar" :style="{ background: themeConfig.cardBgColor }">
          <text class="date-big" :style="{ color: themeConfig.primaryColor }">{{ currentDay }}</text>
          <view class="date-info">
            <text class="date-month" :style="{ color: themeConfig.textPrimary }">{{ currentMonth }}月</text>
            <text class="date-week" :style="{ color: themeConfig.textSecondary }">{{ isToday ? '今天' : currentWeekFull }}</text>
          </view>
        </view>
      </view>

      <InlineCalendar
        v-if="showCalendar"
        :value="currentDate"
        :mark-dates="markedDates"
        @change="onCalendarDateChange"
        class="calendar-card"
      />

      <view class="section-header">
        <view class="section-title-row">
          <view class="section-accent" :style="{ background: themeConfig.gradientSoft }"></view>
          <text class="section-title" :style="{ color: themeConfig.textPrimary }">智能记录</text>
          <text class="section-subtitle" :style="{ color: themeConfig.textSecondary }">一句话自动归类</text>
        </view>
      </view>

      <AppCard :padding="24" :radius="20" :margin-bottom="8" class="card-enter">
        <view class="ai-textarea-wrap">
          <textarea
            class="ai-textarea"
            v-model="aiContent"
            placeholder="记录今日点滴..."
            :placeholder-style="{ color: themeConfig.textDisabled }"
            :maxlength="500"
            auto-height
          />
          <view class="ai-char-count" :style="{ color: themeConfig.textDisabled }">{{ aiContent.length }}/500</view>
        </view>
        <view class="ai-quick-tags">
          <text class="quick-tag" v-for="(tag, idx) in quickTags" :key="idx"
            :style="{ background: themeConfig.primaryColor + '12', color: themeConfig.primaryColor }"
            @click="addQuickTag(tag)">{{ tag }}</text>
        </view>
        <view class="ai-actions">
          <view class="ai-submit-btn btn btn--primary btn--pill" @click="submitAiContent">
            <FaIcon icon="sparkles" :size="22" color="#fff" />
            <text class="ai-submit-text">{{ aiSubmitting ? '分析中...' : '智能识别' }}</text>
          </view>
        </view>

      </AppCard>

      <view class="section-header">
        <view class="section-title-row">
          <view class="section-accent" :style="{ background: themeConfig.gradientSoft }"></view>
          <text class="section-title" :style="{ color: themeConfig.textPrimary }">快捷入口</text>
          <text class="section-subtitle" :style="{ color: themeConfig.textSecondary }">今日一览</text>
        </view>
      </view>

      <view class="entry-grid card-enter">
        <view
          class="entry-card"
          v-for="(entry, idx) in entryCards"
          :key="idx"
          :style="{ background: themeConfig.cardBgColor, boxShadow: `0 6rpx 20rpx ${themeConfig.shadowLight}`, borderColor: themeConfig.borderLight }"
          @click="entry.action"
        >
          <view class="entry-icon-wrap" :style="{ background: entry.bgColor }">
            <FaIcon :icon="entry.icon" :size="22" :color="entry.color" />
          </view>
          <view class="entry-info">
            <text class="entry-label" :style="{ color: themeConfig.textPrimary }">{{ entry.label }}</text>
            <text class="entry-count" :style="{ color: themeConfig.textSecondary }">{{ entry.count }}</text>
          </view>
          <view class="entry-badge" v-if="entry.badge > 0" :style="{ background: themeConfig.primaryColor }">
            <text class="badge-num">{{ entry.badge }}</text>
          </view>
        </view>
      </view>

      <view class="section-header">
        <view class="section-title-row">
          <view class="section-accent" :style="{ background: themeConfig.gradientSoft }"></view>
          <text class="section-title" :style="{ color: themeConfig.textPrimary }">今日概览</text>
          <text class="section-subtitle" :style="{ color: themeConfig.textSecondary }">完成进度</text>
        </view>
      </view>

      <AppCard :padding="24" :radius="20" class="card-enter">
        <SkeletonScreen v-if="loading && !firstLoadDone" type="dashboard" :count="2" />

        <template v-else>
          <view class="overview-header">
            <view class="overview-ring" :style="{ background: `conic-gradient(${themeConfig.primaryColor} ${progressPercent * 3.6}deg, ${themeConfig.borderColor} 0deg)` }">
              <view class="ring-inner" :style="{ background: themeConfig.cardBgColor }">
                <text class="ring-text" :style="{ color: themeConfig.primaryColor }">{{ progressPercent }}%</text>
              </view>
            </view>
            <view class="overview-stats">
              <view class="stat-item">
                <text class="stat-val" :style="{ color: themeConfig.textPrimary }">{{ doneCount }}</text>
                <text class="stat-label" :style="{ color: themeConfig.textSecondary }">已完成</text>
              </view>
              <view class="stat-divider"></view>
              <view class="stat-item">
                <text class="stat-val" :style="{ color: themeConfig.textPrimary }">{{ totalCount - doneCount }}</text>
                <text class="stat-label" :style="{ color: themeConfig.textSecondary }">待完成</text>
              </view>
              <view class="stat-divider"></view>
              <view class="stat-item">
                <text class="stat-val" :style="{ color: themeConfig.textPrimary }">{{ totalCount }}</text>
                <text class="stat-label" :style="{ color: themeConfig.textSecondary }">总计</text>
              </view>
            </view>
          </view>

          <view class="todo-list" v-if="todoList.length">
            <view class="todo-row" v-for="(item, idx) in todoList.slice(0, 2)" :key="item.ID" :style="{ borderColor: themeConfig.borderColor + '40' }">
              <view
                class="check-box"
                :class="{ done: item.done === 1 }"
                :style="{
                  borderColor: item.done === 1 ? themeConfig.primaryColor : themeConfig.borderColor,
                  background: item.done === 1 ? themeConfig.gradientSoft : 'transparent'
                }"
                @click.stop="toggleTodo(item)"
              >
                <FaIcon v-if="item.done === 1" icon="check" :size="20" color="#fff" />
              </view>
              <view class="todo-body">
                <text class="todo-text" :class="{ crossed: item.done === 1 }" :style="{ color: item.done === 1 ? themeConfig.textDisabled : themeConfig.textPrimary }">{{ item.title }}</text>
                <view class="todo-tags" v-if="item.start_time || item.category">
                  <text class="todo-tag" v-if="item.start_time" :style="{ background: themeConfig.primaryColor + '12', color: themeConfig.primaryColor }">{{ item.start_time }}</text>
                  <text class="todo-tag" v-if="item.category" :style="{ background: themeConfig.secondaryColor + '15', color: themeConfig.secondaryColor }">{{ getTodoCateLabel(item.category) }}</text>
                </view>
              </view>
            </view>
            <view class="view-all-btn" @click="goToTodo" :style="{ color: themeConfig.primaryColor }">
              <text>查看全部</text>
              <FaIcon icon="chevron-right" :size="20" :color="themeConfig.primaryColor" />
            </view>
          </view>

          <EmptyState
            v-else
            type="todo"
            title="今日暂无待办"
            desc="在上方输入，小记帮你记录"
          />
        </template>
      </AppCard>
    </view>

    <!-- AI 识别结果弹窗 -->
    <CenterModal
      :visible="showAiResultModal"
      :title="''"
      :show-cancel="false"
      :show-confirm="false"
    >
      <template #header>
        <view class="ai-modal-header">
          <text class="ai-modal-title" :style="{ color: themeConfig.textPrimary }">识别结果</text>
          <view class="ai-modal-close" @click="closeAiResultModal">
            <FaIcon icon="xmark" :size="20" :color="themeConfig.textSecondary" :solid="true" />
          </view>
        </view>
      </template>

      <view class="ai-result-modal">
        <view class="ai-result-icon-wrap" :style="{ background: themeConfig.primaryColor + '18' }">
          <FaIcon icon="circle-check" :size="36" :color="themeConfig.primaryColor" :solid="true" />
        </view>
        <text class="ai-result-modal-msg" :style="{ color: themeConfig.textPrimary }">{{ aiResultMessage }}</text>
        <view class="ai-result-list">
          <view
            class="ai-result-item"
            v-for="(item, idx) in aiResults"
            :key="idx"
            :style="{ background: getItemBg(item.category) }"
          >
            <view class="ai-item-icon" :style="{ background: getItemColor(item.category) }">
              <FaIcon :icon="getItemIcon(item.category)" :size="20" color="#fff" :solid="true" />
            </view>
            <view class="ai-item-info">
              <text class="ai-item-label" :style="{ color: themeConfig.textPrimary }">{{ getItemLabel(item.category) }}</text>
              <text class="ai-item-summary" :style="{ color: themeConfig.textSecondary }">{{ getItemSummary(item) }}</text>
            </view>
          </view>
        </view>
        <view
          class="ai-modal-btn btn btn--block btn--pill"
          :style="{ background: themeConfig.gradientSoft, boxShadow: `0 6rpx 20rpx ${themeConfig.shadowColor || 'rgba(198,142,63,0.35)'}` }"
          @click="closeAiResultModal"
        >
          <text class="ai-modal-btn-text">完成</text>
        </view>
      </view>
    </CenterModal>

    <GrowthModal
      :visible="growthModalVisible"
      :title="growthModalTitle"
      :message="growthModalMessage"
      :icon="growthModalIcon"
      :confirm-text="growthModalConfirmText"
      @close="growthModalVisible = false"
    />
  </view>
</template>

<script>
import {
  getTodoList,
  getBillList,
  getMoodByDate,
  getUserInfo,
  doneTodo,
  aiClassify,
  getDashboardDaily
} from '@/api'
import { TODO_BASE_CATE } from '@/utils/constants.js'
import GrowthModal from '@/components/GrowthModal.vue'
import CenterModal from '@/components/CenterModal.vue'
import FaIcon from '@/components/FaIcon.vue'
import PageHeader from '@/components/PageHeader.vue'
import AppCard from '@/components/AppCard.vue'
import InlineCalendar from '@/components/InlineCalendar.vue'
import EmptyState from '@/components/EmptyState.vue'
import SkeletonScreen from '@/components/SkeletonScreen.vue'
import growthModalMixin from '@/mixins/growthModalMixin.js'
import themeMixin from '@/mixins/themeMixin.js'
import { refreshNavBarTheme, forceApplyTabBarTheme } from '@/utils/themeGlobal'
import { isLogin } from '@/utils/auth'

const TYPE_MAP = {
  todo: { label: '待办', icon: 'check', color: '#5B9E6E', bgColor: '#eaf5ef' },
  bill: { label: '账单', icon: 'dollar-sign', color: '#C68E3F', bgColor: '#fdf3e7' },
  mood: { label: '心情', icon: 'heart', color: '#8B6FB0', bgColor: '#f0ecf7' },
  review: { label: '复盘', icon: 'chart-simple', color: '#5B8DB8', bgColor: '#e7f0f7' }
}

const CACHE_TTL = 30000

export default {
  components: {
    GrowthModal,
    CenterModal,
    FaIcon,
    PageHeader,
    AppCard,
    InlineCalendar,
    EmptyState,
    SkeletonScreen
  },
  mixins: [growthModalMixin, themeMixin],
  data() {
    return {
      currentDate: '',
      currentWeekFull: '',
      today: '',
      showCalendar: false,
      todoList: [],
      doneCount: 0,
      totalCount: 0,
      progressPercent: 0,
      billList: [],
      expend: 0,
      income: 0,
      balance: 0,
      todayMood: null,
      reviewRecorded: false,
      growthData: null,
      userName: '',
      userAvatar: '',
      aiContent: '',
      aiSubmitting: false,
      aiResults: [],
      showAiResultModal: false,
      aiResultMessage: '',
      quickTags: ['开会', '吃饭', '心情不好', '运动', '读书', '花钱'],
      loading: false,
      firstLoadDone: false,
      dashboardCache: null,
      dashboardCacheTime: 0,
      markedDates: []
    }
  },
  computed: {
    isToday() {
      return this.currentDate === this.today
    },
    greetingText() {
      const hour = new Date().getHours()
      if (hour >= 0 && hour < 6) return '夜深了 🌙'
      if (hour >= 6 && hour < 9) return '早上好 ☀️'
      if (hour >= 9 && hour < 12) return '上午好 ✨'
      if (hour >= 12 && hour < 14) return '中午好 🍱'
      if (hour >= 14 && hour < 18) return '下午好 ☕'
      if (hour >= 18 && hour < 21) return '傍晚好 🌆'
      return '晚上好 🌟'
    },
    currentDay() {
      if (!this.currentDate) return ''
      const parts = this.currentDate.split('-')
      return parseInt(parts[2])
    },
    currentMonth() {
      if (!this.currentDate) return ''
      const parts = this.currentDate.split('-')
      return parseInt(parts[1])
    },

    entryCards() {
      const undone = this.totalCount - this.doneCount
      return [
        {
          label: '待办',
          icon: 'check',
          color: '#5B9E6E',
          bgColor: '#eaf5ef',
          count: this.totalCount > 0 ? `${this.doneCount}/${this.totalCount}` : '暂无',
          badge: undone > 0 ? undone : 0,
          action: this.goToTodo
        },
        {
          label: '账单',
          icon: 'dollar-sign',
          color: '#C68E3F',
          bgColor: '#fdf3e7',
          count: this.balance >= 0 ? `+${this.balance.toFixed(0)}` : `${this.balance.toFixed(0)}`,
          badge: 0,
          action: this.goToBill
        },
        {
          label: '心情',
          icon: 'heart',
          color: '#8B6FB0',
          bgColor: '#f0ecf7',
          count: this.todayMood?.content ? '已记录' : '未记录',
          badge: this.todayMood?.content ? 0 : 1,
          action: this.goToMood
        },
        {
          label: '复盘',
          icon: 'chart-simple',
          color: '#5B8DB8',
          bgColor: '#e7f0f7',
          count: this.reviewRecorded ? '已完成' : '待复盘',
          badge: this.reviewRecorded ? 0 : 1,
          action: this.goToReview
        }
      ]
    }
  },
  onLoad() {
    if (!isLogin()) {
      uni.redirectTo({ url: '/pages/login/login' })
      return
    }
    this.initDate()
    this.loadAllData()
    this.loadUserInfo()
  },
  onShow() {
    if (!isLogin()) {
      uni.redirectTo({ url: '/pages/login/login' })
      return
    }
    refreshNavBarTheme()
    const latestTheme = getApp()?.globalData?.themeConfig
      || (uni.getStorageSync('user_current_theme') ? JSON.parse(uni.getStorageSync('user_current_theme')) : null)
    if (latestTheme) {
      forceApplyTabBarTheme(latestTheme)
    }
    this.syncUserInfoFromCache()
    this._onShowDebounce = Date.now()
    const debounceId = this._onShowDebounce
    setTimeout(() => {
      if (this._onShowDebounce !== debounceId) return
      this.initDate()
      this.loadAllData()
    }, 300)
  },
  onPullDownRefresh() {
    this.clearCache()
    this.initDate()
    this.loadAllData().finally(() => { uni.stopPullDownRefresh() })
  },
  methods: {
    clearCache() {
      this.dashboardCache = null
      this.dashboardCacheTime = 0
    },
    isCacheValid() {
      if (!this.dashboardCache) return false
      return Date.now() - this.dashboardCacheTime < CACHE_TTL
    },
    initDate() {
      const now = new Date()
      this.formatDate(now)
      this.today = this.currentDate
    },
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      this.currentDate = `${year}-${month}-${day}`
      const weekArrFull = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      this.currentWeekFull = weekArrFull[date.getDay()]
    },
    toggleCalendar() {
      this.showCalendar = !this.showCalendar
    },
    onCalendarDateChange(dateStr) {
      const date = new Date(dateStr)
      this.formatDate(date)
      this.showCalendar = false
      this.loadAllData()
    },
    addQuickTag(tag) {
      if (this.aiContent.length > 0) {
        this.aiContent += ' ' + tag
      } else {
        this.aiContent = tag
      }
    },
    async submitAiContent() {
      if (!this.aiContent.trim()) {
        uni.showToast({ title: '请输入内容', icon: 'none' })
        return
      }

      this.aiSubmitting = true
      this.aiResults = []

      try {
        const res = await aiClassify({
          content: this.aiContent.trim()
        })

        if (res && res.items && res.items.length > 0) {
          this.aiResults = res.items
          this.aiResultMessage = res.message || `成功识别并创建 ${res.items.length} 条记录`
          this.showAiResultModal = true

          this.aiContent = ''
          this.clearCache()
          this.loadAllData()
        }
      } catch (err) {
        console.error('分类失败:', err)
        uni.showToast({
          title: '分类失败，请重试',
          icon: 'none'
        })
      } finally {
        this.aiSubmitting = false
      }
    },
    closeAiResultModal() {
      this.showAiResultModal = false
      this.aiResults = []
      this.aiResultMessage = ''
    },
    getItemIcon(category) {
      return TYPE_MAP[category]?.icon || 'circle-check'
    },
    getItemLabel(category) {
      return TYPE_MAP[category]?.label || category
    },
    getItemColor(category) {
      return TYPE_MAP[category]?.color || '#999'
    },
    getItemBg(category) {
      return TYPE_MAP[category]?.bgColor || 'rgba(0,0,0,0.03)'
    },
    getItemSummary(item) {
      const { category, data } = item
      if (!data) return '新记录'
      switch (category) {
        case 'todo':
          return data.title || data.content || '新待办'
        case 'bill':
          const cateLabel = data.cate || data.cate_name || ''
          const moneyStr = data.money !== undefined ? `¥${Number(data.money).toFixed(2)}` : ''
          return [cateLabel, moneyStr].filter(Boolean).join(' · ') || '新账单'
        case 'mood':
          return data.content || data.emoji || '新心情'
        case 'review':
          return data.content || data.method || '新复盘'
        default:
          return '新记录'
      }
    },
    async toggleTodo(item) {
      try {
        const newDone = item.done === 1 ? 0 : 1
        await doneTodo({ id: item.ID, status: newDone })
        item.done = newDone
        this.doneCount = this.todoList.filter(t => t.done === 1).length
        this.progressPercent = this.totalCount > 0 ? Math.round((this.doneCount / this.totalCount) * 100) : 0
      } catch (err) {
        console.error('更新待办状态失败:', err)
      }
    },
    async loadAllData() {
      if (this.isCacheValid()) {
        this.applyDashboardData(this.dashboardCache)
        return
      }

      this.loading = true

      try {
        const data = await getDashboardDaily({ date: this.currentDate })
        this.dashboardCache = data
        this.dashboardCacheTime = Date.now()
        this.applyDashboardData(data)
      } catch (err) {
        console.warn('聚合接口失败，降级到并发请求:', err)
        await this.loadAllDataFallback()
      } finally {
        this.loading = false
        this.firstLoadDone = true
      }
    },
    applyDashboardData(data) {
      if (!data) return

      const todo = data.todo || {}
      if (todo.list) {
        this.todoList = todo.list
      }
      if (typeof todo.done === 'number') {
        this.doneCount = todo.done
      } else if (this.todoList.length) {
        this.doneCount = this.todoList.filter(t => t.done === 1).length
      }
      if (typeof todo.total === 'number') {
        this.totalCount = todo.total
      } else if (this.todoList.length) {
        this.totalCount = this.todoList.length
      }
      if (this.totalCount > 0) {
        this.progressPercent = Math.round((this.doneCount / this.totalCount) * 100)
      } else {
        this.progressPercent = 0
      }

      const bill = data.bill || {}
      if (bill.list) {
        this.billList = bill.list
      }
      if (typeof bill.balance === 'number') this.balance = bill.balance
      if (typeof bill.expend === 'number') this.expend = bill.expend
      if (typeof bill.income === 'number') this.income = bill.income
      if (!this.billList.length && (bill.expend || bill.income)) {
        this.balance = bill.income - bill.expend
      }

      const mood = data.mood
      if (mood) {
        this.todayMood = mood
      }

      const review = data.review
      if (review && typeof review.recorded === 'boolean') {
        this.reviewRecorded = review.recorded
      }

      const growth = data.growth
      if (growth) {
        this.growthData = growth
      }

      if (data.markedDates) this.markedDates = data.markedDates
    },
    recalcBillBalance() {
      let expend = 0
      let income = 0
      this.billList.forEach(item => {
        const money = Number(item.money) || 0
        if (item.type === 1) {
          expend += money
        } else {
          income += money
        }
      })
      this.expend = expend
      this.income = income
      this.balance = income - expend
    },
    async loadAllDataFallback() {
      try {
        await Promise.all([
          this.loadTodoData(),
          this.loadBillData(),
          this.loadMoodData()
        ])
      } catch (err) {
        console.error('数据加载失败:', err)
      }
    },
    async loadTodoData() {
      try {
        const res = await getTodoList({
          start_date: this.currentDate,
          end_date: this.currentDate
        })
        this.todoList = res || []
        this.totalCount = this.todoList.length
        this.doneCount = this.todoList.filter(item => item.done === 1).length
        this.progressPercent = this.totalCount > 0 ? Math.round((this.doneCount / this.totalCount) * 100) : 0
      } catch (err) {
        this.todoList = []
        this.doneCount = 0
        this.totalCount = 0
        this.progressPercent = 0
      }
    },
    async loadBillData() {
      try {
        const res = await getBillList({ date: this.currentDate })
        this.billList = res || []
        this.recalcBillBalance()
      } catch (err) {
        this.billList = []
        this.expend = 0
        this.income = 0
        this.balance = 0
      }
    },
    async loadMoodData() {
      try {
        const res = await getMoodByDate({ date: this.currentDate })
        this.todayMood = res || null
      } catch (err) {
        this.todayMood = null
      }
    },
    async loadUserInfo() {
      try {
        const res = await getUserInfo()
        this.userName = res?.nickname || ''
        this.userAvatar = res?.avatar || ''
      } catch (err) {
        this.userName = ''
        this.userAvatar = ''
      }
    },
    syncUserInfoFromCache() {
      const cachedName = uni.getStorageSync('userName')
      const cachedAvatar = uni.getStorageSync('userAvatar')
      if (cachedName) this.userName = cachedName
      if (cachedAvatar) this.userAvatar = cachedAvatar
    },
    getTodoCateLabel(cateValue) {
      const cate = TODO_BASE_CATE.find(item => item.value === cateValue)
      return cate ? cate.label : cateValue
    },
    goToTodo() {
      uni.navigateTo({ url: '/pages/todo/todo?date=' + this.currentDate })
    },
    goToBill() {
      uni.navigateTo({ url: '/pages/bill/bill?date=' + this.currentDate })
    },
    goToMood() {
      uni.navigateTo({ url: '/pages/mood/mood?date=' + this.currentDate })
    },
    goToReview() {
      uni.navigateTo({ url: '/pages/review/review?date=' + this.currentDate })
    },
    goToMine() {
      uni.switchTab({ url: '/pages/mine/mine' })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-page {
  min-height: 100vh;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.page-content {
  padding: 0 32rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));
}

.section-header {
  padding: 24rpx 4rpx 16rpx;
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.section-accent {
  width: 8rpx;
  height: 28rpx;
  border-radius: 4rpx;
  flex-shrink: 0;
}

.section-title {
  font-size: 30rpx;
  font-weight: 800;
  letter-spacing: 1rpx;
}

.section-subtitle {
  font-size: 22rpx;
  font-weight: 500;
  margin-left: auto;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0 4rpx;
}

.greeting-area {
  display: flex;
  align-items: center;
  gap: 14rpx;
}

.avatar-circle {
  width: 75rpx;
  height: 75rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-letter {
  font-size: 28rpx;
  font-weight: 700;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.greeting-texts {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.greeting-line {
  font-size: 22rpx;
  font-weight: 500;
}

.user-name {
  font-size: 30rpx;
  font-weight: 700;
}

.date-display {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 10rpx 18rpx;
  border-radius: 12rpx;
  margin-right: 4rpx;
}

.date-big {
  font-size: 40rpx;
  font-weight: 800;
  line-height: 1;
}

.date-info {
  display: flex;
  flex-direction: column;
  gap: 2rpx;
}

.date-month {
  font-size: 20rpx;
  font-weight: 700;
  line-height: 1.1;
}

.date-week {
  font-size: 18rpx;
  font-weight: 500;
  line-height: 1.1;
}

.calendar-card {
  margin: 12rpx 0 0;
}

.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.ai-badge {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 6rpx 14rpx;
  border-radius: 10rpx;
}

.ai-badge-text {
  font-size: 20rpx;
  font-weight: 700;
  color: #fff;
}

.ai-tip {
  font-size: 20rpx;
  font-weight: 500;
}

.ai-textarea-wrap {
  position: relative;
  margin-bottom: 16rpx;
}

.ai-textarea {
  width: 100%;
  min-height: 183rpx;
  max-height: 500rpx;
  padding: 20rpx;
  font-size: 26rpx;
  line-height: 1.5;
  border-radius: 12rpx;
  background: rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
}

.ai-char-count {
  position: absolute;
  right: 20rpx;
  bottom: 16rpx;
  font-size: 18rpx;
}

.ai-quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-bottom: 16rpx;
}

.quick-tag {
  font-size: 20rpx;
  padding: 8rpx 18rpx;
  border-radius: 8rpx;
  font-weight: 600;
}

.ai-actions {
  display: flex;
  gap: 12rpx;
}

.ai-submit-btn {
  flex: 1;
  gap: 10rpx;
  padding: 20rpx;
}

.ai-submit-text {
  font-size: 26rpx;
  font-weight: 700;
  color: #fff;
}

.ai-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28rpx 28rpx 16rpx;
}

.ai-modal-title {
  font-size: 30rpx;
  font-weight: 700;
}

.ai-modal-close {
  /* CenterModal 已内置右上角 X 按钮，关闭此按钮避免重叠；保留类供未来自定义使用 */
  display: none;
}

.ai-modal-close:active {
  background: rgba(0, 0, 0, 0.08);
}

.ai-result-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rpx 0 8rpx;
}

.ai-result-icon-wrap {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22rpx;
}

.ai-result-modal-msg {
  font-size: 28rpx;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 32rpx;
}

.ai-result-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14rpx;
  margin-bottom: 32rpx;
}

.ai-result-item {
  display: flex;
  align-items: center;
  gap: 18rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
}

.ai-item-icon {
  width: 44rpx;
  height: 44rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-item-info {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  flex: 1;
  min-width: 0;
}

.ai-item-label {
  font-size: 24rpx;
  font-weight: 600;
  line-height: 1.3;
}

.ai-item-summary {
  font-size: 22rpx;
  font-weight: 400;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-modal-btn {
  width: 100%;
  height: 84rpx;
}

.ai-modal-btn-text {
  color: #fff;
  font-size: 28rpx;
  font-weight: 600;
}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14rpx;
  margin-bottom: 8rpx;
}

.entry-card {
  border-radius: 16rpx;
  padding: 20rpx 12rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
  border: 2rpx solid transparent;
}

.entry-icon-wrap {
  width: 64rpx;
  height: 64rpx;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.entry-label {
  font-size: 24rpx;
  font-weight: 700;
}

.entry-count {
  font-size: 20rpx;
  font-weight: 500;
}

.entry-badge {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  min-width: 32rpx;
  height: 32rpx;
  padding: 0 8rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-num {
  font-size: 20rpx;
  font-weight: 700;
  color: #fff;
}

.skeleton-overview {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
}

.skeleton-ring {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  flex-shrink: 0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-stats {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20rpx;
}

.skeleton-stat {
  width: 80rpx;
  height: 48rpx;
  border-radius: 12rpx;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

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

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

.content-fade {
  transition: opacity 0.25s ease;
}

.theme-transition {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              opacity 0.25s ease,
              transform 0.25s ease;
}

.overview-header {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
}

.overview-ring {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.ring-inner {
  position: absolute;
  top: 12rpx;
  left: 12rpx;
  right: 12rpx;
  bottom: 12rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ring-text {
  font-size: 22rpx;
  font-weight: 700;
}

.overview-stats {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
}

.stat-val {
  font-size: 32rpx;
  font-weight: 800;
  line-height: 1;
}

.stat-label {
  font-size: 20rpx;
  font-weight: 500;
}

.stat-divider {
  width: 2rpx;
  height: 48rpx;
  background: rgba(0, 0, 0, 0.08);
}

.todo-list {
  display: flex;
  flex-direction: column;
}

.todo-row {
  display: flex;
  align-items: center;
  gap: 14rpx;
  padding: 16rpx 0;
  border-bottom: 1rpx solid;
}

.todo-row:last-of-type {
  border-bottom: none;
}

.check-box {
  width: 40rpx;
  height: 40rpx;
  border-radius: 8rpx;
  border: 3rpx solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.todo-body {
  flex: 1;
  min-width: 0;
}

.todo-text {
  font-size: 26rpx;
  font-weight: 500;
  display: block;
  line-height: 1.3;
}

.todo-text.crossed {
  text-decoration: line-through;
  text-decoration-color: currentColor;
}

.todo-tags {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-top: 6rpx;
}

.todo-tag {
  font-size: 18rpx;
  padding: 4rpx 10rpx;
  border-radius: 6rpx;
  font-weight: 600;
}

.view-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6rpx;
  padding: 16rpx 0 4rpx;
  font-size: 24rpx;
  font-weight: 600;
}
</style>