<template>
  <view class="review-list-page" :style="{ backgroundColor: themeConfig.bgColor }">
    <PageHeader
      title="复盘历史"
      subtitle="回顾与成长"
      :showBack="false"
      :showRight="true"
    >
      <template #right>
        <view class="header-actions">
          <view
            class="action-btn"
            :class="{ 'action-btn--active': searchVisible }"
            :style="{ backgroundColor: themeConfig.cardBgColor }"
            @click="toggleSearch"
          >
            <FaIcon :icon="searchVisible ? 'times' : 'search'" :size="18" :color="searchVisible ? themeConfig.primaryColor : themeConfig.textPrimary" />
          </view>
          <view
            class="action-btn"
            :class="{ 'action-btn--active': calendarVisible }"
            :style="{ backgroundColor: themeConfig.cardBgColor }"
            @click="toggleCalendar"
          >
            <FaIcon :icon="calendarVisible ? 'times' : 'calendar'" :size="18" :color="calendarVisible ? themeConfig.primaryColor : themeConfig.textPrimary" />
          </view>
        </view>
      </template>
    </PageHeader>

    <!-- 筛选区域 -->
    <view class="filter-section" v-if="searchVisible || calendarVisible" :style="{ backgroundColor: themeConfig.bgColor }">
      <!-- 搜索栏 -->
      <view v-if="searchVisible" class="search-bar" :style="{ backgroundColor: themeConfig.cardBgColor }">
        <FaIcon icon="search" :size="16" :color="themeConfig.textSecondary" />
        <input
          class="search-input"
          :style="{ color: themeConfig.textPrimary }"
          v-model="searchKeyword"
          placeholder="搜索复盘内容..."
          :placeholder-style="{ color: themeConfig.textDisabled }"
          confirm-type="search"
          @confirm="onSearch"
        />
        <view v-if="searchKeyword" class="clear-btn" @click="clearSearch">
          <FaIcon icon="times-circle" :size="16" :color="themeConfig.textSecondary" />
        </view>
      </view>

      <!-- 日历范围选择 -->
      <view v-if="calendarVisible" class="calendar-section">
        <InlineCalendar
          rangeSelect
          :startDate="dateRange.start"
          :endDate="dateRange.end"
          @rangeChange="onDateRangeChange"
        />
        <view v-if="dateRange.start" class="date-range-info">
          <text class="range-text" :style="{ color: themeConfig.textSecondary }">
            {{ dateRange.start }} ~ {{ dateRange.end || '至今' }}
          </text>
          <view class="clear-range-btn" @click="clearDateRange">
            <text class="clear-range-text" :style="{ color: themeConfig.primaryColor }">清除</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 列表 -->
    <scroll-view
      class="list-scroll"
      scroll-y
      refresher-enabled
      :refresher-triggered="refresherTriggered"
      @refresherrefresh="onRefresh"
      :show-scrollbar="false"
      @scrolltolower="loadMore"
    >
      <view class="list-content" v-if="reviewList.length > 0">
        <SwipeableItem
          v-for="item in reviewList"
          :key="item.id"
          :actions="swipeActions"
          :index="item.id"
          @action="(key) => onSwipeAction(key, item)"
          @open="onSwipeOpen"
        >
          <AppCard
            :padding="24"
            :radius="20"
            :clickable="true"
            :marginBottom="16"
            @click="goToDetail(item)"
          >
            <view class="review-item">
              <!-- 头部：日期 + 时间 -->
              <view class="item-header">
                <view class="date-wrap">
                  <text class="item-date" :style="{ color: themeConfig.textPrimary }">{{ formatDate(item.date) }}</text>
                  <text class="item-weekday" :style="{ color: themeConfig.textSecondary }">{{ getWeekday(item.date) }}</text>
                </view>
                <text class="item-time" :style="{ color: themeConfig.textDisabled }">{{ formatTime(item.created_at || item.date) }}</text>
              </view>

              <!-- KPT 三字段 -->
              <view class="kpt-fields">
                <view
                  class="kpt-field"
                  :style="{ backgroundColor: themeConfig.successColor + '10' }"
                  v-if="item.kpt && item.kpt.keep"
                >
                  <view class="kpt-label" :style="{ backgroundColor: themeConfig.successColor, color: '#fff' }">
                    <text>Keep</text>
                  </view>
                  <text class="kpt-text" :style="{ color: themeConfig.textSecondary }">{{ item.kpt.keep }}</text>
                </view>

                <view
                  class="kpt-field"
                  :style="{ backgroundColor: themeConfig.warningColor + '10' }"
                  v-if="item.kpt && item.kpt.problem"
                >
                  <view class="kpt-label" :style="{ backgroundColor: themeConfig.warningColor, color: '#fff' }">
                    <text>Problem</text>
                  </view>
                  <text class="kpt-text" :style="{ color: themeConfig.textSecondary }">{{ item.kpt.problem }}</text>
                </view>

                <view
                  class="kpt-field"
                  :style="{ backgroundColor: (themeConfig.infoColor || themeConfig.primaryColor) + '10' }"
                  v-if="item.kpt && item.kpt.try"
                >
                  <view class="kpt-label" :style="{ backgroundColor: (themeConfig.infoColor || themeConfig.primaryColor), color: '#fff' }">
                    <text>Try</text>
                  </view>
                  <text class="kpt-text" :style="{ color: themeConfig.textSecondary }">{{ item.kpt.try }}</text>
                </view>
              </view>
            </view>
          </AppCard>
        </SwipeableItem>

        <!-- 底部状态 -->
        <view class="list-footer" v-if="loading && hasMore">
          <view class="loading-dot" :style="{ backgroundColor: themeConfig.primaryColor }"></view>
          <text class="footer-text" :style="{ color: themeConfig.textSecondary }">加载中...</text>
        </view>
        <view class="list-footer" v-else-if="!hasMore">
          <text class="footer-text" :style="{ color: themeConfig.textDisabled }">— 没有更多了 —</text>
        </view>
        <view class="bottom-spacer"></view>
      </view>

      <!-- 空状态 -->
      <view class="empty-wrap" v-else-if="!loading">
        <EmptyState
          type="review"
          title="还没有复盘记录"
          desc="坚持每日复盘，见证成长轨迹"
          actionText="开始复盘"
          @action="goToTodayReview"
        />
      </view>

      <!-- 首次加载中 -->
      <view class="initial-loading" v-if="loading && reviewList.length === 0">
        <view class="loading-spinner" :style="{ borderColor: themeConfig.primaryColor }"></view>
        <text :style="{ color: themeConfig.textSecondary }">加载中...</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getReviewList, deleteReview } from '@/api'
import themeMixin from '@/mixins/themeMixin.js'
import PageHeader from '@/components/PageHeader.vue'
import AppCard from '@/components/AppCard.vue'
import EmptyState from '@/components/EmptyState.vue'
import InlineCalendar from '@/components/InlineCalendar.vue'
import SwipeableItem from '@/components/SwipeableItem.vue'
import FaIcon from '@/components/FaIcon.vue'

export default {
  name: 'ReviewList',
  mixins: [themeMixin],
  components: {
    PageHeader,
    AppCard,
    EmptyState,
    InlineCalendar,
    SwipeableItem,
    FaIcon
  },
  data() {
    return {
      reviewList: [],
      searchKeyword: '',
      searchVisible: false,
      calendarVisible: false,
      dateRange: {
        start: '',
        end: ''
      },
      page: 1,
      pageSize: 10,
      hasMore: true,
      loading: false,
      loaded: false,
      refresherTriggered: false,
      swipeActions: [
        { key: 'delete', label: '删除' }
      ]
    }
  },
  onLoad() {
    this.loadList(true)
  },
  onShow() {
    this.syncThemeConfig()
    // 从编辑页返回时刷新列表
    if (this.loaded) {
      this.loadList(true)
    }
  },
  methods: {
    async loadList(reset = false) {
      if (this.loading) return
      this.loading = true

      if (reset) {
        this.page = 1
        this.hasMore = true
        this.reviewList = []
      }

      try {
        const res = await getReviewList({
          keyword: this.searchKeyword,
          startDate: this.dateRange.start,
          endDate: this.dateRange.end,
          page: this.page,
          pageSize: this.pageSize
        })

        const data = res
        const list = (data && data.list) ? data.list : (Array.isArray(data) ? data : [])
        const total = (data && data.total) != null ? data.total : list.length

        if (reset) {
          this.reviewList = list
        } else {
          this.reviewList = [...this.reviewList, ...list]
        }

        this.hasMore = this.reviewList.length < total
        this.page++
        this.loaded = true
      } catch (e) {
        console.error('加载复盘列表失败:', e)
        if (!this.loaded) {
          uni.showToast({ title: '加载失败，下拉刷新重试', icon: 'none' })
        }
      } finally {
        this.loading = false
        this.refresherTriggered = false
      }
    },

    loadMore() {
      if (!this.hasMore || this.loading) return
      this.loadList(false)
    },

    async onRefresh() {
      this.refresherTriggered = true
      await this.loadList(true)
    },

    onSearch() {
      this.loadList(true)
    },

    clearSearch() {
      this.searchKeyword = ''
      this.loadList(true)
    },

    toggleSearch() {
      this.searchVisible = !this.searchVisible
      if (!this.searchVisible && this.searchKeyword) {
        this.searchKeyword = ''
        this.loadList(true)
      }
    },

    toggleCalendar() {
      this.calendarVisible = !this.calendarVisible
    },

    onDateRangeChange(range) {
      this.dateRange.start = range.start || ''
      this.dateRange.end = range.end || ''
      this.searchVisible = false
      this.calendarVisible = false
      this.loadList(true)
    },

    clearDateRange() {
      this.dateRange.start = ''
      this.dateRange.end = ''
      this.loadList(true)
    },

    onSwipeOpen() {},

    async onSwipeAction(actionKey, item) {
      if (actionKey === 'delete') {
        uni.showModal({
          title: '确认删除',
          content: '确定要删除这条复盘记录吗？删除后不可恢复。',
          success: async (res) => {
            if (res.confirm) {
              await this.handleDelete(item.id)
            }
          }
        })
      }
    },

    async handleDelete(itemId) {
      try {
        await deleteReview({ id: itemId })
        this.reviewList = this.reviewList.filter(item => item.id !== itemId)
        uni.showToast({ title: '删除成功', icon: 'success' })
      } catch (e) {
        console.error('删除失败:', e)
        uni.showToast({ title: '删除失败，请重试', icon: 'none' })
      }
    },

    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/review/review?date=${item.date}`
      })
    },

    goToTodayReview() {
      const now = new Date()
      const y = now.getFullYear()
      const m = String(now.getMonth() + 1).padStart(2, '0')
      const d = String(now.getDate()).padStart(2, '0')
      const today = `${y}-${m}-${d}`
      uni.navigateTo({
        url: `/pages/review/review?date=${today}`
      })
    },

    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      const m = date.getMonth() + 1
      const d = date.getDate()
      return `${m}月${d}日`
    },

    getWeekday(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      return weekdays[date.getDay()]
    },

    formatTime(dateStr) {
      if (!dateStr) return ''
      // 处理 '2026-07-28 20:30' 或 '2026-07-28' 格式
      const parts = dateStr.split(' ')
      if (parts.length > 1) {
        const timeParts = parts[1].split(':')
        return `${timeParts[0]}:${timeParts[1]}`
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.review-list-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

// 头部操作按钮
.header-actions {
  display: flex;
  gap: 12rpx;
}

.action-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.action-btn--active {
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.action-btn:active {
  transform: scale(0.92);
}

// 筛选区域
.filter-section {
  padding: 16rpx 32rpx 24rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx 24rpx;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  background: transparent;
  border: none;
  outline: none;
}

.clear-btn {
  flex-shrink: 0;
  padding: 4rpx;
}

.calendar-section {
  margin-top: 8rpx;
}

.date-range-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 24rpx 0;
}

.range-text {
  font-size: 24rpx;
}

.clear-range-btn {
  padding: 8rpx 16rpx;
}

.clear-range-text {
  font-size: 24rpx;
}

// 列表
.list-scroll {
  flex: 1;
  height: 0;
}

.list-content {
  padding: 8rpx 32rpx 0;
}

// 复盘卡片
.review-item {
  padding: 4rpx 0;
}

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

.date-wrap {
  display: flex;
  align-items: baseline;
  gap: 12rpx;
}

.item-date {
  font-size: 32rpx;
  font-weight: 600;
}

.item-weekday {
  font-size: 24rpx;
}

.item-time {
  font-size: 22rpx;
}

// KPT 字段
.kpt-fields {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.kpt-field {
  display: flex;
  align-items: flex-start;
  gap: 12rpx;
  padding: 14rpx 16rpx;
  border-radius: 12rpx;
}

.kpt-label {
  flex-shrink: 0;
  padding: 4rpx 14rpx;
  border-radius: 8rpx;
  font-size: 20rpx;
  font-weight: 600;
  line-height: 1.4;
  min-width: 80rpx;
  text-align: center;
}

.kpt-text {
  flex: 1;
  font-size: 26rpx;
  line-height: 1.6;
  word-break: break-all;
}

// 底部状态
.list-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 36rpx 0;
}

.loading-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  animation: loadingPulse 1s ease-in-out infinite;
}

@keyframes loadingPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

.footer-text {
  font-size: 24rpx;
}

.bottom-spacer {
  height: 60rpx;
}

// 空状态
.empty-wrap {
  padding: 120rpx 32rpx;
}

// 首次加载
.initial-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
  gap: 20rpx;
  font-size: 26rpx;
}

.loading-spinner {
  width: 48rpx;
  height: 48rpx;
  border: 4rpx solid;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>
