<!--
 * @Date: 2025-08-27 17:43:45
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-23 11:08:57
 * @FilePath: /lls_program/src/pages/Dashboard/index.vue
 * @Description: 首页
-->
<template>
  <view class="min-h-screen flex flex-col bg-white pb-16" :style="pageStyle">
    <!-- Hero section with family name and background image -->
    <view class=" bg-white rounded-xl shadow-md mx-4 mt-4 relative" :style="{ height: isTabletDevice ? '40vh' : '30vh' }">
      <image :src="familyCover" mode="aspectFill" alt="Family background" class="w-full h-full object-cover rounded-xl" />
      <view class="absolute inset-0 flex flex-col justify-end rounded-xl bg-black bg-opacity-10">
        <view class="m-5">
          <view v-if="familyOwner" class="absolute top-4 right-4 text-white flex items-center" @click="goToProfile">
            <Setting size="20" />
            <text class="ml-2 text-sm">家庭设置</text>
          </view>
          <!-- <h1 class="text-white text-2xl font-bold">{{ familyName }}</h1>
          <p class="text-white opacity-90">{{ familySlogn }}</p> -->
        </view>
      </view>
    </view>
    <view class=" mx-4 mt-4 px-2 py-2">
      <h1 class="text-gray-800 text-xl font-bold mb-1">{{ familyName }}</h1>
      <p class="text-gray-600 opacity-90">{{ familySlogn }}</p>
    </view>

    <!-- 微信步数授权组件 -->
    <WeRunAuth
      ref="weRunAuthRef"
      :auto-check="false"
      @auth-change="handleAuthChange"
      @steps-synced="handleStepsSynced"
      @sync-failed="handleSyncFailed"
    >
      <template #default>
        <!-- 合并的大卡片：今日步数 + 积分收集器 + 拍照留念 -->
        <template v-if="!showTotalPointsOnly">
          <PointsCollector
            ref="pointsCollectorRef"
            height="30vh"
            :total-points="finalTotalPoints"
            :pending-points="pendingPoints"
            :family-id="family_id"
            :is-owner="familyOwner"
            @collection-complete="handleCollectionComplete"
          >
            <!-- 头部：今日步数 -->
            <template #header>
              <view class="flex justify-between items-center mb-1 relative">
                <span class="text-white">今日</span>
                <!-- 积分规则提示 -->
                <view class="points-rule-tip" @tap="handleGoToPointsRule">
                  <!-- <view class="tip-icon">💡</view> -->
                  <text class="tip-text text-gray-600">积分攻略</text>
                </view>
              </view>
              <view class="flex justify-between items-center">
                <view class="flex items-baseline">
                  <span class="text-4xl font-bold text-white">
                    {{ todaySteps?.toLocaleString() }}
                  </span>
                  <span class="ml-1 text-white">步</span>
                </view>
                <view class="flex gap-2">
                  <view class="bg-white text-blue-500 opacity-80 px-4 py-2 rounded-full text-sm" @click="handleCollectAll">
                    一键收取
                  </view>
                </view>
              </view>
            </template>

            <!-- 底部：拍照留念 -->
            <template #footer>
              <view @tap="openCamera" class="w-full bg-blue-500 text-white py-3 rounded-lg flex flex-col items-center justify-center">
                <view class="flex items-center justify-center text-sm">
                  <Photograph :size="isTabletDevice ? 35 : 20" class="mr-2" />
                  拍照留念，奖励积分
                </view>
              </view>
            </template>
          </PointsCollector>
        </template>
        <template v-else>
          <TotalPointsDisplay
            :total-points="finalTotalPoints"
            :is-owner="familyOwner"
            height="20vh"
          >
            <!-- 头部：今日步数 -->
            <template #header>
              <view class="flex justify-between items-center mb-1 relative">
                <span class="text-white">今日</span>
                <!-- 积分规则提示 -->
                <view class="points-rule-tip" @tap="handleGoToPointsRule">
                  <!-- <view class="tip-icon">💡</view> -->
                  <text class="tip-text text-gray-600">积分攻略</text>
                </view>
              </view>
              <view class="flex justify-between items-center">
                <view class="flex items-baseline">
                  <span class="text-4xl font-bold text-white">
                    {{ todaySteps?.toLocaleString() }}
                  </span>
                  <span class="ml-1 text-white">步</span>
                </view>
                <view class="flex gap-2">
                  <view class="bg-white text-blue-500 opacity-80 px-4 py-2 rounded-full text-sm" @click="handleCollectAll">
                    一键收取
                  </view>
                </view>
              </view>
            </template>

            <!-- 底部：拍照留念 -->
            <template #footer>
              <view @tap="openCamera" class="w-full bg-blue-500 text-white py-3 rounded-lg flex flex-col items-center justify-center">
                <view class="flex items-center justify-center">
                  <Photograph size="20" class="mr-2" />
                  拍照留念，奖励积分
                </view>
              </view>
            </template>
          </TotalPointsDisplay>
        </template>

        <!-- Family step ranking -->
        <view class="p-5 bg-white rounded-xl shadow-md mx-4">
          <view class="flex justify-between items-center mb-4">
            <h2 class="font-medium text-lg flex items-center">
              <IconFont size="20" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%A5%96%E6%9D%AF.png" />
              <text class="ml-2">今日家庭步数排行</text>
            </h2>
            <span class="text-sm text-gray-500">
              总计 {{ getTotalSteps() }} 步
            </span>
          </view>
          <view class="grid grid-cols-4 gap-2">
            <view v-for="member in familyMembers" :key="member.user_id" class="flex flex-col items-center">
              <image :src="member.avatar_url || defaultAvatar" mode="aspectFill" :alt="member.role" class="w-16 h-16 rounded-full mb-1" />
              <span class="text-sm text-gray-700">
                {{ member?.today_step?.toLocaleString() }}步
              </span>
            </view>
          </view>
        </view>
      </template>
    </WeRunAuth>

    <!-- 排行榜卡片 -->
    <RankingCard ref="rankingCardRef" :onViewMore="openFamilyRank" />

    <!-- Family album -->
    <FamilyAlbum
      ref="familyAlbumRef"
      @popup-open="lockPageScroll"
      @popup-close="unlockPageScroll"
    />

    <BottomNav />

    <!-- 广告遮罩层 -->
    <AdOverlay
      ref="adOverlayRef"
      @close="handleAdClose"
      @click="handleAdClick"
    />
  </view>
</template>

<script setup>
import "./index.less";
import { ref, computed, onMounted, onUnmounted } from 'vue';
import Taro, { useDidShow, useReady, useLoad } from '@tarojs/taro';
import { handleSharePageAuth, addShareFlag } from '@/utils/authRedirect';
import { Setting, Photograph, IconFont } from '@nutui/icons-vue-taro';
import BottomNav from '@/components/BottomNav.vue';
import TotalPointsDisplay from '@/components/TotalPointsDisplay.vue';
import PointsCollector from '@/components/PointsCollector.vue'
import WeRunAuth from '@/components/WeRunAuth.vue'
import RankingCard from '@/components/RankingCard.vue'
import AdOverlay from '@/components/AdOverlay.vue'
import FamilyAlbum from '@/components/FamilyAlbum.vue';
// 默认家庭封面图
const defaultFamilyCover = 'https://cdn.ipadbiz.cn/lls_prog/images/default-family-cover.png';
// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
// 接口信息
import { getFamilyDashboardAPI } from '@/api/family'
import { silentAuth, checkUserHasFamily } from '@/utils/authRedirect'

const todaySteps = ref(0);
const isWeRunAuthorized = ref(false);
const pointsCollectorRef = ref(null)
const weRunAuthRef = ref(null)
const rankingCardRef = ref(null)
const showTotalPointsOnly = ref(false)
const finalTotalPoints = ref(0)
const pendingPoints = ref([]) // 待收集的积分数据
const familyAlbumRef = ref(null)

// 页面锁定相关状态
const isPageLocked = ref(false)
const pageHeight = ref(0)

const familyName = ref('')
const familySlogn = ref('')
const familyCover = ref('')
const familyOwner = ref(false);

// 广告遮罩层数据
const adOverlayRef = ref(null)

// 页面样式计算属性
const pageStyle = computed(() => {
  const baseStyle = {
    'background-color': '#F9FAFB'
  }

  if (isPageLocked.value && pageHeight.value > 0) {
    return {
      ...baseStyle,
      height: `${pageHeight.value}px`,
      overflow: 'hidden'
    }
  }

  return baseStyle
})

/**
 * 锁定页面滚动
 */
const lockPageScroll = () => {
  // 获取当前视窗高度
  Taro.getSystemInfo({
    success: (res) => {
      pageHeight.value = res.windowHeight
      isPageLocked.value = true
    }
  })
}

/**
 * 解锁页面滚动
 */
const unlockPageScroll = () => {
  isPageLocked.value = false
  pageHeight.value = 0

  // 解锁后滚动到页面底部
  setTimeout(() => {
    Taro.pageScrollTo({
      scrollTop: 99999, // 使用一个很大的数值确保滚动到底部
      duration: 50 // 滚动动画时长100ms
    })
  }, 50) // 延迟50ms确保页面解锁完成
}

/**
 * 触发积分收集组件的一键收取
 */
const handleCollectAll = () => {
  if (pointsCollectorRef.value) {
    pointsCollectorRef.value.collectAll()
  }
}

/**
 * 处理积分收集完成事件
 * @param {number} points - 最终的积分
 */
const handleCollectionComplete = (points) => {
  finalTotalPoints.value = points;
  showTotalPointsOnly.value = true;
};

/**
 * 处理微信步数授权状态变化
 * @param {boolean} authorized - 授权状态
 */
const handleAuthChange = (authorized) => {
  isWeRunAuthorized.value = authorized
  console.log('微信步数授权状态:', authorized)
}

/**
 * 处理微信步数同步完成事件
 */
const handleStepsSynced = async () => {
  console.log('微信步数同步完成，开始刷新Dashboard页面数据')
  // 步数同步完成后，调用统一的数据刷新函数
  await refreshDashboardData();
}

/**
 * 处理微信步数同步失败事件
 * @param {Object} data - 失败返回的数据
 */
const handleSyncFailed = (data) => {
  console.log('微信步数同步失败:', data)
}

// 监听全局的微信步数同步成功事件（用于处理401重试后的成功情况）
onMounted(() => {
  if (Taro.eventCenter) {
    Taro.eventCenter.on('wx-steps-sync-success', handleStepsSynced);
  }
});

onUnmounted(() => {
  if (Taro.eventCenter) {
    Taro.eventCenter.off('wx-steps-sync-success', handleStepsSynced);
  }
});

/**
 * 计算总步数（包含用户步数和家庭成员步数）
 * @returns {string} 格式化后的总步数
 */
const getTotalSteps = () => {
  return familyMembers.value.reduce((sum, member) => sum + member.today_step, 0).toLocaleString()
}

const familyMembers = ref([]);

const goToProfile = () => {
  Taro.navigateTo({ url: '/pages/EditFamily/index' });
};

/**
 * 打开拍照上传页面
 */
const openCamera = () => {
  Taro.navigateTo({ url: '/pages/UploadMedia/index' });
}

/**
 * 打开活动排行榜
 */
const openFamilyRank = () => {
  Taro.navigateTo({ url: '/pages/FamilyRank/index' });
}

/**
 * 处理积分规则点击事件
 */
const handleGoToPointsRule = () => {
  Taro.navigateTo({
    url: '/pages/PointsList/index'
  })
}

/**
 * 处理广告遮罩层关闭事件
 */
const handleAdClose = () => {
  console.log('广告遮罩层已关闭')
}

/**
 * 处理广告遮罩层点击事件
 * @param {string} targetPage - 跳转的目标页面
 */
const handleAdClick = (targetPage) => {
  console.log('广告被点击，跳转到:', targetPage)
  // 如果跳转路径是欢迎页和首页，不跳转直接关闭弹框
  if (targetPage === '/pages/Dashboard/index' || targetPage === '/pages/Welcome/index') {
    handleAdClose()
    return
  }
  // 跳转到目标页面
  Taro.navigateTo({ url: targetPage });
}

const family_id = ref('');
const totalFamilySteps = ref(0);

// 防抖标志，防止重复跳转
let isRedirecting = false;

/**
 * 刷新Dashboard页面数据
 */
const refreshDashboardData = async () => {
  try {
    console.log('开始刷新Dashboard页面数据');
    const { code, data } = await getFamilyDashboardAPI({ silent: true });
    if (code) {
      // 获取家庭ID
      family_id.value = data.family.id;

      // 设置页面数据
      pendingPoints.value = data.pending_points || [];
      familyMembers.value = data.step_ranking || [];
      showTotalPointsOnly.value = !data.pending_points?.length;
      finalTotalPoints.value = data.family.total_points || 0;
      familyName.value = data.family.name;
      familySlogn.value = data.family.note;
      familyCover.value = data.family.avatar_url || defaultFamilyCover;
      familyOwner.value = data.family.is_my;
      todaySteps.value = data.my_today_step;
      totalFamilySteps.value = data.family_today_step;

      console.log('Dashboard页面数据刷新成功:', {
        familyName: familyName.value,
        todaySteps: todaySteps.value,
        totalPoints: finalTotalPoints.value
      });

      // 更严格的家庭状态检查：只有在明确没有家庭数据且不在跳转过程中时才跳转
      if (!family_id.value && !isRedirecting && (!data.family || !data.family.name)) {
        console.warn('用户未加入家庭，跳转到欢迎页面');
        isRedirecting = true;
        await Taro.redirectTo({
          url: '/pages/Welcome/index'
        })
        return
      }
    } else {
      console.error('获取Dashboard数据失败:', data);
      
      // 只有在明确的错误情况下才进行家庭状态检查
      if (!isRedirecting && (data?.msg?.includes('家庭') || data?.code === 404)) {
        // 检查用户是否已加入家庭
        const hasFamily = await checkUserHasFamily()

        // 如果用户没有加入家庭，跳转到欢迎页面
        if (!hasFamily) {
          console.warn('用户未加入家庭，跳转到欢迎页面');
          isRedirecting = true;
          await Taro.redirectTo({
            url: '/pages/Welcome/index'
          })
          return
        }
      }
    }
  } catch (error) {
    console.error('刷新Dashboard数据异常:', error);
    // 网络错误等异常情况不应该触发页面跳转
  }
};

/**
 * 页面加载时执行静默授权
 */
useLoad(async () => {
  console.log('Dashboard页面加载，开始静默授权');

  // 进行静默授权
  try {
    await silentAuth(
      async (result) => {
        console.log('Dashboard onLoad - 静默授权成功:', result);
        // 静默授权成功后立即刷新页面数据
        await refreshDashboardData();

      },
      (error) => {
        console.error('Dashboard onLoad - 静默授权失败:', error);
      }
    );
  } catch (error) {
    console.error('Dashboard onLoad - 静默授权异常:', error);
  }
});

useDidShow(async () => {
  // 重置跳转标志
  isRedirecting = false;
  
  // 获取系统信息
  getSystemInfo();

  // 刷新页面数据
  await refreshDashboardData();

  // 正常刷新微信步数数据
  if (weRunAuthRef.value) {
    weRunAuthRef.value.checkAuthStatus(true);
  }

  // 刷新排行榜数据
  if (rankingCardRef.value) {
    rankingCardRef.value.refreshData();
  }

  // 刷新相册数据
  if (familyAlbumRef.value) {
    familyAlbumRef.value.refreshData();
  }
})

useReady(async () => {
  // 版本更新检查
  if (!Taro.canIUse("getUpdateManager")) {
    Taro.showModal({
      title: "提示",
      content: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试",
      showCancel: false,
    });
    return;
  }

  // https://developers.weixin.qq.com/miniprogram/dev/api/base/update/UpdateManager.html
  const updateManager = Taro.getUpdateManager();

  updateManager.onCheckForUpdate((res) => {
    // 请求完新版本信息的回调
    if (res.hasUpdate) {
      updateManager.onUpdateReady(function () {
        Taro.showModal({
          title: "更新提示",
          content: "新版本已经准备好，是否重启应用？",
          success: function (res) {
            if (res.confirm) {
              // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
              updateManager.applyUpdate();
            }
          },
        });
      });

      updateManager.onUpdateFailed(function () {
        // 新版本下载失败
        Taro.showModal({
          title: "更新提示",
          content: "新版本已上线，请删除当前小程序，重新搜索打开",
        });
      });
    }
  });
})

useLoad((options) => {
    // 处理分享页面的授权逻辑
    handleSharePageAuth(options);
});

/**
 * 定义分享给朋友的内容
 * @returns {Object} 分享配置对象
 */
const onShareAppMessage = (res) => {
    const shareData = {
        title: '和家人一起走路、一起打卡、一起兑换',
        path: `/pages/Dashboard/index`,
        imageUrl: ''
    };

    return shareData;
}

// 使用Taro的useShareAppMessage Hook来处理分享
Taro.useShareAppMessage((res) => {
    return onShareAppMessage(res);
});

// 系统信息
const systemInfo = ref({});

/**
 * 获取系统信息
 */
const getSystemInfo = () => {
  try {
    const info = Taro.getWindowInfo();
    systemInfo.value = info;
  } catch (error) {
    console.error('获取系统信息失败:', error);
  }
};

/**
 * 检测是否为 iPad 类型设备
 */
const isTabletDevice = computed(() => {
  if (!systemInfo.value.screenWidth) {
    return false;
  }

  const { screenWidth, screenHeight } = systemInfo.value;
  const screenRatio = screenWidth / screenHeight;

  // iPad 类型设备通常屏幕比例在 0.7-0.8 之间（4:3 约为 0.75）
  // 普通手机设备比例通常在 0.4-0.6 之间
  return screenRatio > 0.65;
});
</script>