<template>
  <view class="guide-container">
    <!-- 背景图片 -->
    <image class="background-image" src="/static/background/starbook.jpg" mode="aspectFill"></image>

    <!-- 左上角返回按钮 -->
    <view class="back-button" :style="{ top: backButtonTop }" @click="handleBack">
      <image class="back-icon" src="/static/icon/back.png" mode="aspectFit" />
    </view>

    <!-- 页面标题 -->
    <view class="page-title">新手引导</view>

    <!-- 引导列表 -->
    <view class="guide-list">
      <view
        v-for="item in guideList"
        :key="item.key"
        class="guide-item"
        :class="{ 'in-progress': item.status === 'in_progress' }"
      >
        <view class="guide-item-header">
          <view class="guide-status-badge" :class="item.status">
            {{ item.statusText }}
          </view>
          <text class="guide-name">{{ item.name }}</text>
        </view>

        <view class="guide-item-body">
          <text class="guide-desc">{{ item.desc }}</text>
        </view>

        <!-- 进度条（进行中状态显示） -->
        <view v-if="item.status === 'in_progress'" class="guide-progress">
          <view class="progress-bar">
            <view
              class="progress-fill"
              :style="{ width: item.progress.percentage + '%' }"
            ></view>
          </view>
          <text class="progress-text">{{ item.progress.completed }}/{{ item.progress.total }} 步骤</text>
        </view>

        <view class="guide-item-footer">
          <!-- 未开始 -->
          <view
            v-if="item.buttonType === 'start'"
            class="guide-btn start-btn"
            @click="handleStartGuide(item.key)"
          >
            {{ item.buttonText }}
          </view>
          <!-- 进行中 -->
          <view
            v-else-if="item.buttonType === 'continue'"
            class="guide-btn continue-btn"
            @click="handleContinueGuide(item.key)"
          >
            {{ item.buttonText }}
          </view>
          <!-- 已完成（可领取） -->
          <view
            v-else-if="item.buttonType === 'claim'"
            class="guide-btn claim-btn"
            @click="handleClaimReward(item.key)"
          >
            {{ item.buttonText }}
          </view>
          <!-- 已领取 -->
          <view
            v-else
            class="guide-btn disabled-btn"
          >
            {{ item.buttonText }}
          </view>
        </view>
      </view>
    </view>

    <!-- 底部统计 -->
    <view class="guide-footer">
      <view class="footer-stats">
        已完成 {{ doneCount }}/{{ totalCount }}
      </view>
      <view v-if="claimableCount > 0" class="footer-claim-tip">
        有 {{ claimableCount }} 个奖励可领取
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getOnboardingStatus, advanceStage, claimOnboardingReward, completeGuide } from '@/utils/task-api.js'
import {
  guideConfig,
  getGuideConfig,
  getGuideStatusList,
  getStepProgress,
  hasGuideProgress,
  getNextIncompleteStep,
  getStepPage,
  clearSubStepProgress,
  resetGuide,
  claimGuideReward,
  markGuideDone,
  isGuideDone,
  isGuideRewardClaimed,
  onboardingStages
} from '@/utils/guideConfig.js'

const isAndroid = ref(false)

const backButtonTop = computed(() => {
  if (isAndroid.value) {
    return 'calc(env(safe-area-inset-top) + 80rpx)'
  }
  return 'calc(env(safe-area-inset-top) + 32rpx)'
})

const handleBack = () => {
  uni.navigateBack()
}

const loading = ref(true)
const guideList = ref([])

// 统计数据
const totalCount = computed(() => guideList.value.length)
const doneCount = computed(() => guideList.value.filter(item =>
  item.status === 'completed' || item.status === 'reward_claimed'
).length)
const claimableCount = computed(() => guideList.value.filter(item => item.status === 'completed').length)

// 刷新引导列表
function refreshList() {
  const rawList = getGuideStatusList()
  guideList.value = rawList.map(item => {
    const progress = getStepProgress(item.key)
    const status = calculateStatus(item.key, item.done, item.claimed)

    return {
      ...item,
      progress,
      status,
      statusText: getStatusText(status, progress),
      buttonText: getButtonText(status),
      buttonType: getButtonType(status)
    }
  })
}

function calculateStatus(key, done, claimed) {
  if (claimed) return 'reward_claimed'
  if (done && !claimed) return 'completed'
  if (hasGuideProgress(key)) return 'in_progress'
  return 'not_started'
}

function getStatusText(status, progress) {
  if (status === 'in_progress') {
    return `${progress.completed}/${progress.total} 步骤`
  }
  const map = {
    not_started: '未开始',
    completed: '已完成',
    reward_claimed: '已领取'
  }
  return map[status] || '未开始'
}

function getButtonText(status) {
  const map = {
    not_started: '开始',
    in_progress: '继续',
    completed: '领取奖励',
    reward_claimed: '已领取'
  }
  return map[status] || '开始'
}

function getButtonType(status) {
  const map = {
    not_started: 'start',
    in_progress: 'continue',
    completed: 'claim',
    reward_claimed: 'claimed'
  }
  return map[status] || 'start'
}

// 开始引导
function handleStartGuide(key) {
  console.log('[guide] handleStartGuide:', key)
  // 清除进度从头开始
  clearSubStepProgress(key)
  // 重置引导"已显示"状态，允许重新开始
  resetGuide(key)
  const targetPage = getStepPage(key, 0)

  if (targetPage) {
    uni.navigateTo({
      url: targetPage + '?guide_key=' + key + '&guide_step=0'
    })
  }
}

// 继续引导
function handleContinueGuide(key) {
  console.log('[guide] handleContinueGuide:', key)
  // 从第一个未完成步骤继续
  const resumeStep = getNextIncompleteStep(key)
  const targetPage = getStepPage(key, resumeStep)
  console.log('[guide] handleContinueGuide, resumeStep:', resumeStep, 'targetPage:', targetPage)

  if (targetPage) {
    uni.navigateTo({
      url: targetPage + '?guide_key=' + key + '&guide_step=' + resumeStep
    })
  }
}

// 完成引导并同步后端
async function completeGuideAndSync(key) {
  try {
    // 标记本地已完成
    markGuideDone(key)
    // 同步到后端
    await completeGuide(key, onboardingStages)
    console.log('[guide] completeGuideAndSync success:', key)
  } catch (err) {
    console.error('[guide] completeGuideAndSync error:', err)
  }
}

// 检查并同步所有完成的引导到后端
async function checkAndSyncCompletedGuides() {
  const rawList = getGuideStatusList()
  for (const item of rawList) {
    if (item.done && !item.claimed) {
      // 引导已完成但后端未同步
      await completeGuideAndSync(item.key)
    }
  }
}

// 领取奖励
async function handleClaimReward(key) {
  // 调用后端接口领取奖励
  try {
    // 找到对应的 stage
    const config = getGuideConfig(key)
    if (!config) return

    // 从 onboardingStages 找到对应 stage
    let stageNum = -1
    for (const s of onboardingStages) {
      if (s.required_task_keys.includes(key)) {
        stageNum = s.stage
        break
      }
    }

    if (stageNum >= 0) {
      const res = await claimOnboardingReward(stageNum)
      // 更新本地存储的余额并通知 Header 组件
      if (res.data?.crystal_balance !== undefined) {
        try {
          const userStr = uni.getStorageSync('user')
          if (userStr) {
            const user = JSON.parse(userStr)
            user.crystal_balance = parseInt(res.data.crystal_balance)
            uni.setStorageSync('user', JSON.stringify(user))
          }
        } catch (e) {
          console.error('更新本地存储失败:', e)
        }
        uni.$emit('balanceUpdated', { crystal_balance: res.data.crystal_balance, experience: res.data.experience })
      }
    }

    // 本地标记已领取
    claimGuideReward(key)

    // uni.showToast({
    //   title: `领取成功！${config.reward?.exp || 0}经验 ${config.reward?.diamond || 0}钻`,
    //   icon: 'none'
    // })

    refreshList()
  } catch (err) {
    console.error('handleClaimReward error:', err)
    uni.showToast({ title: '领取失败', icon: 'none' })
  }
}

// 初始化时同步后端
async function initBackend() {
  try {
    loading.value = true

    // 检查后端是否有配置
    const res = await getOnboardingStatus()
    const data = res.data || {}

    if (!data.stages || data.stages.length === 0) {
      // 后端没有配置，用前端配置初始化
      await completeGuide('init', onboardingStages)
    } else {
      // 后端有配置，根据后端的 stage 状态更新本地存储
      // 遍历后端返回的 stages，根据 allTasksCompleted 状态更新本地
      for (const stage of data.stages) {
        if (stage.allTasksCompleted && stage.required_task_keys) {
          for (const taskKey of stage.required_task_keys) {
            // 如果后端显示该任务已完成，标记本地为已完成
            if (!isGuideDone(taskKey)) {
              console.log('[Guide] 从后端同步任务完成状态:', taskKey)
              markGuideDone(taskKey)
            }
          }
        }
      }
    }

    // 刷新列表
    refreshList()
  } catch (err) {
    console.error('initBackend error:', err)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  const systemInfo = uni.getSystemInfoSync()
  isAndroid.value = systemInfo.platform === 'android'
  initBackend().then(() => {
    // 初始化后检查并同步已完成的引导
    checkAndSyncCompletedGuides()
    refreshList()
  })
})
</script>

<style scoped>
.guide-container {
  position: relative;
  min-height: 100vh;
  padding: 20rpx;
  padding-bottom: 200rpx;
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.back-button {
  position: fixed;
  left: 32rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
}

.back-icon {
  width: 64rpx;
  height: 64rpx;
}

.page-title {
  position: relative;
  z-index: 1;
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 20rpx 0;
}

.guide-list {
  position: relative;
  z-index: 1;
}

.guide-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.guide-item.in-progress {
  border-left: 4rpx solid #4a90e2;
}

.guide-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.guide-status-badge {
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-size: 22rpx;
  margin-right: 12rpx;
}

.guide-status-badge.not_started {
  background: #f0f0f0;
  color: #999;
}

.guide-status-badge.in_progress {
  background: #e6f0ff;
  color: #4a90e2;
}

.guide-status-badge.completed {
  background: #fff3e6;
  color: #ff9500;
}

.guide-status-badge.reward_claimed {
  background: #e8f5e9;
  color: #4caf50;
}

.guide-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  flex: 1;
}

.guide-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.guide-progress {
  margin-bottom: 16rpx;
}

.progress-bar {
  height: 8rpx;
  background: #eee;
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 8rpx;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 22rpx;
  color: #999;
}

.guide-item-footer {
  display: flex;
  justify-content: flex-end;
}

.guide-btn {
  padding: 12rpx 32rpx;
  color: #fff;
  border-radius: 30rpx;
  font-size: 26rpx;
}

.start-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.continue-btn {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
}

.claim-btn {
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.disabled-btn {
  background: #ddd;
  color: #999;
}

.guide-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx 32rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  z-index: 10;
}

.footer-stats {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  margin-bottom: 8rpx;
}

.footer-claim-tip {
  font-size: 26rpx;
  color: #ff6b6b;
  text-align: center;
}
</style>
