<template>
  <view class="history-container" :style="{ paddingTop: statusBarHeight + 'px' }">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="iconfont icon-fanhui"></text>
      </view>
      <view class="nav-title">饮食记录</view>
      <view class="nav-right"> </view>
    </view>
    
    <!-- Tab切换 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab-item', selectedTab === tab.value ? 'active' : '']"
        @click="switchTab(tab.value)"
      >
        <text class="tab-text">{{ tab.label }}</text>
      </view>
    </view>

    <!-- 内容区 -->
    <scroll-view scroll-y class="content-scroll" :style="{ height: scrollViewHeight }" @scrolltolower="loadMore">
      <!-- 空状态 -->
      <view class="empty-state" v-if="historyList.length === 0 && !isLoading">
        <text class="empty-icon">🍽️</text>
        <text class="empty-text">暂无饮食记录</text>
        <button class="empty-btn" @click="goToCheckin">去打卡</button>
      </view>

      <!-- 历史列表 -->
      <view class="history-list" v-else>
        <view 
          v-for="(item, index) in historyList" 
          :key="index"
          class="history-item"
          @click="viewDetail(item)"
        >
          <!-- 左侧图片预览 -->
          <view class="item-images">    
            <image 
              v-if="item.photos && item.photos.length > 0"
              :src="item.photos[0]" 
              mode="aspectFill" 
              class="preview-image"
            ></image>
            <view class="no-image" v-else>
              <text>无图</text>
            </view>
            
            <view class="image-count" v-if="item.photos && item.photos.length > 1">
              <text class="count-text">+{{ item.photos.length - 1 }}</text>
            </view>
            
            <!-- 餐次标识 -->
            <view class="status-badge status-completed">
              <text class="status-text">{{ getMealTypeText(item.mealType) }}</text>
            </view>
            
            <!-- 视频状态标记 -->
            <view class="video-status-badge" v-if="item.enableAIVideo">
              <text v-if="item.videoUrl || item.videoStatus === 1" class="status-success">📹</text>
              <text v-else-if="item.videoStatus === 2" class="status-failed">❌</text>
              <text v-else class="status-pending">⏳</text>
            </view>
          </view>

          <!-- 右侧信息 -->
          <view class="item-info">
            <view class="info-header">
              <text class="item-prompt">{{ item.notes || '健康饮食打卡' }}</text>
              <!-- <view class="item-actions" @click.stop="showItemMenu(item)">
                <text class="iconfont icon-gengduo">⋮</text>
              </view> -->
            </view>
            
            <view class="info-meta">
              <view class="meta-tags">
                <text class="meta-tag">{{ item.date }}</text>
                <text class="meta-tag" v-if="item.points > 0">+{{ item.points }}积分</text>
                <!-- 视频状态文字提示 -->
                <text class="meta-tag video-tag" v-if="item.videoUrl || item.videoStatus === 1">有视频</text>
                <text class="meta-tag video-tag generating" v-else-if="item.enableAIVideo && item.taskId && item.videoStatus === 0">生成中</text>
                <text class="meta-tag video-tag failed" v-else-if="item.videoStatus === 2">视频失败</text>
              </view>
            </view>
            
            <!-- AI分析状态 -->
            <view class="item-remark" v-if="item.aiAnalysis">
              <text class="remark-text">{{ item.aiAnalysis }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore && historyList.length > 0">
        <text class="load-text">{{ isLoading ? '加载中...' : '加载更多' }}</text>
      </view>
    </scroll-view>

    <!-- 操作菜单 -->
    <view class="action-sheet" v-if="showActionSheet" @click="showActionSheet = false">
      <view class="action-content" @click.stop>
        <view class="action-title">操作</view>
        <view 
          v-for="(action, index) in currentActions" 
          :key="index"
          class="action-item"
          @click="handleAction(action.value)"
        >
          <text class="action-text">{{ action.label }}</text>
        </view>
        <view class="action-cancel" @click="showActionSheet = false">
          <text>取消</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCheckinList, getVideoTaskStatus } from '@/api/tool.js';
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['userInfo', 'uid'])
  },
  data() {
    return {
      statusBarHeight: 0,
      scrollViewHeight: '100vh',
      
      // Tab
      selectedTab: '',
      tabs: [
        { label: '全部', value: '' },
        { label: '早餐', value: 'breakfast' },
        { label: '午餐', value: 'lunch' },
        { label: '晚餐', value: 'dinner' },
        { label: '加餐', value: 'snack' },
      ],
      
      // 历史记录
      historyList: [],
      
      // 分页
      currentPage: 1,
      pageSize: 10,
      hasMore: true,
      isLoading: false,
      
      // 视频轮询
      pollingTimer: null,
      pollingCount: 0,
      maxPollingCount: 60, // 最多轮询60次(5分钟)
      
      // 操作菜单
      showActionSheet: false,
      currentItem: null,
      currentActions: []
    };
  },
  
  onLoad() {
    this.initPage();
    this.loadHistoryList();
  },
  
  onShow() {
    // 从其他页面返回时重新检查
    if (this.historyList.length > 0) {
      this.loadHistoryList(true);
    }
    this.startPolling();
  },
  
  onUnload() {
    this.stopPolling();
  },
  
  methods: {
    initPage() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 0;
      
      // 计算滚动区域高度
      const navHeight = 44 + 44; // 导航+Tab
      this.scrollViewHeight = `calc(100vh - ${this.statusBarHeight + navHeight}px)`;
    },
    
    // 返回
    goBack() {
      uni.navigateBack();
    },
    
    // 切换Tab
    switchTab(tabValue) {
      if (this.selectedTab === tabValue) return;
      this.selectedTab = tabValue;
      this.loadHistoryList(true);
    },
    
    // 加载历史记录列表
    async loadHistoryList(refresh = false) {
      if (this.isLoading) return;
      
      if (refresh) {
        this.currentPage = 1;
        this.hasMore = true;
        this.historyList = [];
      }
      
      if (!this.hasMore) return;
      
      this.isLoading = true;
      
      try {
        const res = await getCheckinList({
          mealType: this.selectedTab,
          page: this.currentPage,
          limit: this.pageSize
        });
        
        if (res && res.code === 200) {
          const list = (res.data.list || res.data || []).map(item => {
            // 解析photos
            let photos = [];
            if (item.photos) {
              try {
                // 如果是字符串，尝试解析JSON
                if (typeof item.photos === 'string') {
                  photos = JSON.parse(item.photos);
                } else if (Array.isArray(item.photos)) {
                  photos = item.photos;
                }
              } catch (e) {
                console.error('解析图片数据失败:', e);
                // 如果解析失败，可能是单个URL字符串，或者是无法解析的字符串
                if (typeof item.photos === 'string' && item.photos.startsWith('http')) {
                  photos = [item.photos];
                }
              }
            }
            
            return {
              ...item,
              photos: photos,
              date: item.createTime, // 使用 createTime 作为显示日期
              points: item.points || 0, // 接口可能没有返回积分，默认0
              aiAnalysis: item.aiAnalysis || item.nutritionScore, // AI分析结果
              taskId: item.taskId || null, // 视频任务ID
              videoUrl: item.videoUrl || null, // 视频URL
              videoStatus: item.videoStatus !== undefined ? item.videoStatus : null, // 视频状态
              enableAIVideo: item.enableAIVideo || false // 是否启用AI视频
            };
          });
          
          if (refresh) {
            this.historyList = list;
          } else {
            this.historyList = [...this.historyList, ...list];
          }
          
          // 判断是否还有更多
          if (list.length < this.pageSize) {
            this.hasMore = false;
          } else {
            this.currentPage++;
          }
          
          // 启动轮询检查视频任务
          this.startPolling();
        } else {
          throw new Error(res?.message || '获取记录失败');
        }
      } catch (error) {
        console.error('加载历史记录失败:', error);
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
      }
    },
    
    // 加载更多
    loadMore() {
      if (this.hasMore && !this.isLoading) {
        this.loadHistoryList(false);
      }
    },
    
    // 去打卡
    goToCheckin() {
      uni.navigateTo({
        url: '/pages/tool/checkin-publish'
      });
    },
    
    // 查看详情
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/tool/checkin-detail?id=${item.id}`
      });
    },
    
    // 显示管理菜单
    showManageMenu() {
      this.currentActions = [
        { label: '刷新列表', value: 'refresh' }
      ];
      this.showActionSheet = true;
    },
    
    // 显示单项菜单
    showItemMenu(item) {
      this.currentItem = item;
      this.currentActions = [
        { label: '查看详情', value: 'view' },
        // { label: '删除', value: 'delete' } // 暂未实现删除接口
      ];
      this.showActionSheet = true;
    },
    
    // 处理操作
    handleAction(action) {
      this.showActionSheet = false;
      
      switch (action) {
        case 'view':
          this.viewDetail(this.currentItem);
          break;
        case 'refresh':
          this.loadHistoryList(true);
          break;
        case 'delete':
          uni.showToast({ title: '删除功能开发中', icon: 'none' });
          break;
      }
    },
    
    getMealTypeText(type) {
      const map = {
        breakfast: '早餐',
        lunch: '午餐',
        dinner: '晚餐',
        snack: '加餐'
      };
      return map[type] || type;
    },
    
    // 启动视频任务轮询
    startPolling() {
      if (this.pollingTimer) return;
      
      const tasksToCheck = this.historyList.filter(item => 
        item.enableAIVideo && item.taskId && !item.videoUrl && item.videoStatus !== 2
      );
      
      if (tasksToCheck.length === 0) {
        return;
      }
      
      this.pollingTimer = setInterval(() => {
        this.pollVideoTasks();
      }, 5000); // 每5秒查询一次
    },
    
    // 轮询视频任务状态
    async pollVideoTasks() {
      const tasksToCheck = this.historyList.filter(item => 
        item.enableAIVideo && item.taskId && !item.videoUrl && item.videoStatus !== 2
      );
      
      if (tasksToCheck.length === 0 || this.pollingCount >= this.maxPollingCount) {
        this.stopPolling();
        return;
      }
      
      this.pollingCount++;
      
      for (const task of tasksToCheck) {
        try {
          const res = await getVideoTaskStatus(task.taskId);
          if (res.code === 200 && res.data) {
            const status = res.data.state;
            if (status === 'success') {
              // 任务成功，刷新列表获取最新视频URL
              this.loadHistoryList(true);
              this.pollingCount = 0; // 重置计数
              break;
            } else if (status === 'fail') {
              // 任务失败，刷新列表以更新失败状态，停止对该任务的轮询
              this.loadHistoryList(true);
              this.pollingCount = 0; // 重置计数
              break;
            }
          }
        } catch (error) {
          console.error('查询视频任务失败:', error);
        }
      }
    },
    
    // 停止轮询
    stopPolling() {
      if (this.pollingTimer) {
        clearInterval(this.pollingTimer);
        this.pollingTimer = null;
      }
      this.pollingCount = 0;
    }
  }
};
</script>

<style lang="scss" scoped>
.history-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f4f5f7;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

// 顶部导航
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .nav-left,
  .nav-right {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 20px;
      color: #333333;
    }
  }
  
  .nav-title {
    font-size: 14px;
    color: #333333;
  }
}

// Tab栏
.tab-bar {
  display: flex;
  height: 44px;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  z-index: 99;
  
  .tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    .tab-text {
      font-size: 15px;
      color: #999999;
      transition: all 0.3s;
    }
    
    &.active {
      .tab-text {
        color: #ff6b35;
        font-weight: 500;
        font-size: 16px;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        background: #ff6b35;
        border-radius: 2px;
      }
    }
  }
}

// 内容滚动区
.content-scroll {
  flex: 1;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  
  .empty-icon {
    font-size: 60px;
    margin-bottom: 24px;
  }
  
  .empty-text {
    font-size: 15px;
    color: #999999;
    margin-bottom: 32px;
  }
  
  .empty-btn {
    width: 160px;
    height: 44px;
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
    border-radius: 22px;
    font-size: 16px;
    color: #ffffff;
    border: none;
    line-height: 44px;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    
    &:active {
      transform: scale(0.98);
    }
  }
}

// 历史列表
.history-list {
  padding-bottom: 20px;

  .history-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    border-radius: 16px;
    margin-bottom: 16px;
    min-height: 100px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.99);
      background: #fafafa;
    }
    
    .item-images {
      width: 96px;
      height: 96px;
      flex-shrink: 0;
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      background: #f5f5f5;
      
      .preview-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .no-image {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #cccccc;
        font-size: 12px;
        background-color: #f0f0f0;
      }
      
      .image-count {
        position: absolute;
        bottom: 4px;
        right: 4px;
        padding: 2px 6px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 4px;
        
        .count-text {
          font-size: 10px;
          color: #ffffff;
        }
      }
      
      .status-badge {
        position: absolute;
        top: 4px;
        left: 4px;
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(4px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        
        .status-text {
          font-size: 10px;
          font-weight: 500;
          color: #ff6b35;
        }
      }
      
      .video-status-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        
        text {
          font-size: 12px;
        }
      }
    }
    
    .item-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
      padding: 2px 0;
      
      .info-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        
        .item-prompt {
          flex: 1;
          font-size: 16px;
          color: #333333;
          line-height: 1.4;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        
        .item-actions {
          width: 24px;
          height: 24px;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          margin-top: -2px;
          
          .iconfont {
            font-size: 18px;
            color: #999999;
          }
        }
      }
      
      .info-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
        
        .meta-tags {
          display: flex;
          gap: 8px;
          align-items: center;
          
          .meta-tag {
            font-size: 12px;
            color: #999999;
            background: #f5f5f5;
            padding: 2px 8px;
            border-radius: 4px;
            
            &:last-child {
              color: #ff6b35;
              background: rgba(255, 107, 53, 0.1);
            }
            
            &.video-tag {
              color: #52c41a;
              background: rgba(82, 196, 26, 0.1);
              
              &.generating {
                color: #1890ff;
                background: rgba(24, 144, 255, 0.1);
              }
              
              &.failed {
                color: #ff4d4f;
                background: rgba(255, 77, 79, 0.1);
              }
            }
          }
        }
      }
      
      .item-remark {
        margin-top: 8px;
        padding: 8px;
        background: #f9f9f9;
        border-radius: 8px;
        
        .remark-text {
          font-size: 12px;
          color: #666666;
          line-height: 1.4;
        }
      }
    }
  }
}

// 加载更多
.load-more {
  padding: 20px;
  text-align: center;
  
  .load-text {
    font-size: 13px;
    color: #999999;
  }
}

// 操作菜单
.action-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 9999;
  
  .action-content {
    width: 100%;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
    
    .action-title {
      padding: 16px;
      text-align: center;
      font-size: 14px;
      color: #999999;
      border-bottom: 1px solid #eeeeee;
    }
    
    .action-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      border-bottom: 1px solid #eeeeee;
      background: #ffffff;
      
      &:active {
        background: #f9f9f9;
      }
      
      .action-text {
        font-size: 16px;
        color: #333333;
      }
    }
    
    .action-cancel {
      margin-top: 8px;
      padding: 16px;
      text-align: center;
      font-size: 16px;
      color: #333333;
      background: #ffffff;
      border-top: 1px solid #eeeeee;
      
      &:active {
        background: #f9f9f9;
      }
    }
  }
}
</style>