<template>
  <view class="relative w-full min-h-screen overflow-y-auto overflow-x-hidden bg-[#F9FAFB] pb-[200rpx]">
    <!-- Header Section -->
    <view class="absolute left-0 top-0 w-full h-[544rpx] z-0">
      <!-- 正常加载: 显示图片 -->
      <image
        v-if="!headerImageError"
        class="w-full h-full"
        src="https://cdn.ipadbiz.cn/manulife/images/iwEeAqNwbmcDAQTRBGUF0QMwBrBn6x1ac5y9nAllf7fKAXkAB9IHbb6MCAAJomltCgAL0gAYx7U.png?imageMogr2/thumbnail/300x/strip/quality/90"
        mode="aspectFill"
        @error="handleHeaderImageError"
      />
      <!-- 降级处理: 图片加载失败时显示纯色背景 -->
      <view
        v-else
        class="w-full h-full bg-gradient-to-br from-blue-600 to-blue-800 flex items-center justify-center"
      >
        <!-- <view class="text-center">
          <text class="text-white/50 text-[24rpx]">背景图片加载失败</text>
        </view> -->
      </view>
      <!-- 渐变遮罩始终显示 -->
      <view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view>
      <!-- 底部过渡效果: 让图片底部平滑融入背景，增加模糊感 -->
      <view class="absolute bottom-0 left-0 w-full h-[240rpx] bg-gradient-to-t from-[#F9FAFB] via-[#F9FAFB]/80 to-transparent backdrop-blur-[2px] pointer-events-none"></view>
    </view>

    <view class="relative z-10 px-[32rpx] pt-[128rpx]">
      <text class="block text-white text-[44rpx] font-bold mb-[40rpx] text-left">臻奇荟</text>

      <!-- Search Bar -->
      <view
        class="flex items-center w-full h-[88rpx] bg-white/20 backdrop-blur-md rounded-full px-[32rpx] border border-white/30"
        @tap="go('/pages/search/index')"
      >
        <IconFont name="search" class="text-white/80 mr-[16rpx]" size="18" />
        <text class="text-white/80 text-[28rpx]">搜索培训资料、案例...</text>
      </view>
    </view>

    <!-- Main Content -->
    <view class="relative z-10 mt-[40rpx] px-[24rpx]">
      <!-- Grid Icons -->
      <view class="relative bg-white rounded-[32rpx] p-[40rpx] mb-[24rpx] border border-gray-100 overflow-hidden" style="box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.04);">
        <!-- 背景装饰 -->
        <view class="absolute -right-[60rpx] -top-[60rpx] w-[200rpx] h-[200rpx] bg-blue-50 rounded-full opacity-40 blur-[40rpx] pointer-events-none"></view>

        <view class="relative z-10 flex flex-wrap">
          <view
            class="flex flex-col items-center w-1/3 mb-[40rpx] group"
            v-for="(item, index) in loopNav"
            :key="index"
            @tap="handleGridNav(item)"
          >
            <!-- 图标容器优化: 增加渐变背景和点击效果 -->
            <view
              class="w-[110rpx] h-[110rpx] rounded-[30rpx] bg-gradient-to-br from-blue-50 to-white flex items-center justify-center mb-[20rpx] shadow-sm transition-all duration-200 active:scale-95 border border-blue-50"
            >
              <IconFont :name="item.icon" class="text-blue-600 drop-shadow-sm" size="32" />
            </view>
            <text class="text-gray-800 text-[28rpx] font-medium">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- Hot Products -->
      <view class="relative bg-white rounded-[32rpx] p-[32rpx] mb-[24rpx] border border-gray-100 overflow-hidden" style="box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.04);">
        <!-- 背景装饰 -->
        <view class="absolute -right-[60rpx] -top-[60rpx] w-[200rpx] h-[200rpx] bg-blue-50 rounded-full opacity-40 blur-[40rpx] pointer-events-none"></view>

        <view class="relative z-10 flex justify-between items-center mb-[32rpx]">
          <!-- 标题带装饰 -->
          <view class="flex items-center">
            <view class="w-[8rpx] h-[32rpx] bg-blue-600 rounded-full mr-[16rpx]"></view>
            <text class="text-gray-900 text-[34rpx] font-bold tracking-tight">热卖产品</text>
          </view>

          <!-- 查看更多按钮优化 -->
          <view
            class="flex items-center px-[12rpx] py-[6rpx] rounded-full active:bg-gray-50 transition-colors"
            @tap="go('/pages/product-center/index')"
          >
            <text class="text-[26rpx] text-gray-500 mr-[2rpx]">全部</text>
            <IconFont name="rectRight" size="12" color="#9CA3AF" />
          </view>
        </view>

        <!-- 动态产品列表 -->
        <view class="relative z-10">
          <ProductCard
            v-for="(product, index) in hotProducts"
            :key="product.id"
            :product-id="product.id"
            :product-name="product.product_name"
            :tags="product.tags"
            :class="{ 'mb-[24rpx]': index < hotProducts.length - 1 }"
            @detail="goToProductDetail"
            @plan="(productId) => requireLogin(
            () => openPlanPopup(productId),
            { content: '请先登录后制作专属计划书', confirmText: '立即登录' }
          )"
          />
        </view>
      </view>

      <!-- Hot Materials -->
      <view v-if="hotMaterials.length > 0" class="relative bg-white rounded-[32rpx] p-[32rpx] mb-[48rpx] border border-gray-100 overflow-hidden" style="box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.04);">
        <!-- 背景装饰 -->
        <view class="absolute -right-[60rpx] -top-[60rpx] w-[200rpx] h-[200rpx] bg-blue-50 rounded-full opacity-40 blur-[40rpx] pointer-events-none"></view>

        <view class="relative z-10 flex justify-between items-center mb-[32rpx]">
          <!-- 标题带装饰 -->
          <view class="flex items-center">
            <view class="w-[8rpx] h-[32rpx] bg-blue-600 rounded-full mr-[16rpx]"></view>
            <text class="text-gray-900 text-[34rpx] font-bold tracking-tight">本周热门资料</text>
          </view>

          <!-- 查看更多按钮优化 -->
          <view
            class="flex items-center px-[12rpx] py-[6rpx] rounded-full active:bg-gray-50 transition-colors"
            @tap="go('/pages/week-hot-material/index')"
          >
            <text class="text-[26rpx] text-gray-500 mr-[2rpx]">全部</text>
            <IconFont name="rectRight" size="12" color="#9CA3AF" />
          </view>
        </view>

        <!-- Material List -->
        <view class="relative z-10 flex flex-col gap-[24rpx]">
          <!-- Material Items -->
          <MaterialCard
            v-for="item in hotMaterials"
            :key="item.id"
            :id="item.id"
            :title="item.title"
            :file-name="item.fileName"
            :file-size="item.fileSize"
            :learners="item.learners"
            :read-people-percent="item.readPeoplePercent"
            :collected="item.collected"
            :extension="item.extension"
            :download-url="item.downloadUrl"
            @collect-changed="handleCollectChanged(item, $event)"
          />
        </view>
      </view>
    </view>

    <!-- Bottom Tab Bar -->
    <TabBar current="home" />

    <!-- Plan Form Container -->
    <!-- 测试数据：后端接口和字段还没有准备好，使用 PlanFormContainer 进行的前端测试 -->
    <!-- 仅当 selectedProduct 不为 null 时才渲染组件，避免 product prop required 警告 -->
    <PlanFormContainer
      v-if="selectedProduct"
      v-model:visible="showPlanPopup"
      :product="selectedProduct"
      @close="handlePlanClose"
      @submit="handlePlanSubmit"
    />
  </view>
</template>

<script setup>
import { ref, shallowRef, nextTick } from 'vue';
import Taro, { useShareAppMessage, useLoad, useDidShow } from '@tarojs/taro';
import { useGo } from '@/hooks/useGo';
import { useUserStore } from '@/stores/user';
import TabBar from '@/components/navigation/TabBar.vue';
import IconFont from '@/components/icons/IconFont.vue';
import PlanFormContainer from '@/components/plan/PlanFormContainer.vue';
import ProductCard from '@/components/cards/ProductCard.vue';
import MaterialCard from '@/components/cards/MaterialCard.vue';
import { listAPI } from '@/api/get_product';
import { weekHotAPI } from '@/api/file';
import { homeIconAPI } from '@/api/home';
import { usePlanSubmit } from '@/composables/usePlanSubmit';
import { usePermission } from '@/composables/usePermission';

// 初始化权限检查
const { requireLogin } = usePermission()

// User Store
const userStore = useUserStore();

// Header Image Error State
/**
 * 头部图片加载失败状态
 * @description 用于控制降级UI的显示
 */
const headerImageError = ref(false);

/**
 * 处理头部图片加载失败
 * @description 图片加载失败时触发，显示降级UI
 */
const handleHeaderImageError = () => {
  console.warn('Header image failed to load, showing fallback');
  headerImageError.value = true;
};

// Plan Popup State
const showPlanPopup = ref(false);
const selectedProduct = ref(null);

/**
 * 打开计划书弹窗
 * @description 根据产品ID找到对应的产品对象，并打开计划书表单
 * @param {number} productId - 产品ID
 */
const openPlanPopup = (productId) => {
  // 从热卖产品列表中找到对应的产品
  const product = hotProducts.value.find(p => p.id === productId);

  if (!product) {
    Taro.showToast({
      title: '产品不存在',
      icon: 'none',
      duration: 2000
    });
    return;
  }

  // 设置选中的产品
  selectedProduct.value = product;
  showPlanPopup.value = true;
};

// 使用 composable 统一处理计划书提交后逻辑
const { handlePlanSubmit } = usePlanSubmit({
  getPopupState: () => showPlanPopup.value,
  setPopupState: (state) => { showPlanPopup.value = state },
  clearSelectedProduct: () => { selectedProduct.value = null },
  useGoUtil: true,
  pageName: 'Home Page'
})

const handlePlanClose = async () => {
  showPlanPopup.value = false;

  await nextTick();

  selectedProduct.value = null;
};

/**
 * 首页网格导航数据
 *
 * @description 从 API 动态获取，包含图标、名称、路由等信息
 */
const loopNav = shallowRef([]);

/**
 * 获取首页图标列表
 *
 * @description 从 API 获取首页网格导航数据，并解析 link 字段
 */
const fetchHomeIcons = async () => {
  try {
    const res = await homeIconAPI();

    if (res.code === 1 && res.data) {
      // 将 API 数据映射为 loopNav 格式
      loopNav.value = res.data
        .filter(item => item.link)  // 过滤掉 link 为空的项
        .map(item => {
          // 解析 link 字段，格式: "/pages/category-list/index?cid=3129684"
          const [route, queryStr] = item.link.split('?');
          const params = {};

          // 如果有查询参数，解析为对象
          if (queryStr) {
            queryStr.split('&').forEach(param => {
              const [key, value] = param.split('=');
              params[key] = decodeURIComponent(value);
            });
          }

          // 返回导航项对象
          return {
            id: String(item.id),
            icon: item.icon,
            name: item.name,
            route,
            ...params  // 展开参数（如 cid）
          };
        });
    }
  } catch (err) {
    console.error('获取首页图标失败:', err);
    // 如果 API 调用失败，使用默认配置
    loopNav.value = [
      { id: 'plan', icon: 'order', name: '计划书', route: '/pages/plan/index' },
      { id: 'product-center', icon: 'category', name: '产品中心', route: '/pages/product-center/index' }
    ];
  }
};

/**
 * 热卖产品数据
 *
 * @description 从服务器获取的热卖产品列表
 */
const hotProducts = ref([]);

/**
 * 获取热卖产品列表
 *
 * @description 调用 listAPI 获取真实的热卖产品数据
 */
const fetchHotProducts = async () => {
  try {
    console.log('[Index] 获取热卖产品');

    // 调用真实 API
    const res = await listAPI({
      recommend: 'hot'
    });

    if (res.code === 1 && res.data && res.data.list) {
      hotProducts.value = res.data.list;
      console.log('[Index] 热卖产品加载成功，数量:', res.data.list.length);
    } else {
      console.warn('[Index] 热卖产品返回数据格式不正确:', res);
      hotProducts.value = [];
    }
  } catch (err) {
    console.error('[Index] 获取热卖产品失败:', err);
    hotProducts.value = [];
  }
};

/**
 * 热门资料数据
 *
 * @description 本周热门资料列表数据，从 API 获取
 */
const hotMaterials = ref([]);

/**
 * 热门资料加载状态
 *
 * @description 用于控制加载状态和空状态显示
 */
const hotMaterialsLoading = ref(false);

/**
 * 获取本周热门资料
 *
 * @description 调用 weekHotAPI 获取热门资料列表
 */
const fetchHotMaterials = async () => {
  try {
    hotMaterialsLoading.value = true;
    const res = await weekHotAPI({
      page: 0,
      limit: 10
    });

    if (res.code === 1 && res.data && res.data.list) {
      // 转换 API 数据格式为组件所需格式
      hotMaterials.value = res.data.list.map(item => {
        return {
          id: item.meta_id,
          title: item.name || '未命名资料',
          fileName: item.name || '未命名文件',
          downloadUrl: item.src,
          fileSize: item.size,
          // 不在这里提取扩展名，让 MaterialCard 内部使用 extractExtensionFromFile 自动从 URL 解析
          learners: `${item.read_people_count}人学习`,
          readPeoplePercent: item.read_people_percent,
          collected: item.is_favorite
        }
      });
    } else {
      hotMaterials.value = [];
    }
  } catch (err) {
    console.error('获取本周热门资料失败:', err);
    hotMaterials.value = [];
  } finally {
    hotMaterialsLoading.value = false;
  }
};

// Navigation
const go = useGo();

/**
 * 处理收藏状态改变
 *
 * @description 当用户点击收藏按钮时，更新本地状态
 * @param {Object} item - 资料对象
 * @param {Object} newStatus - 新的状态
 */
const handleCollectChanged = (item, newStatus) => {
  console.log('[Index] 收藏状态改变:', item.title, newStatus.collected)
  // 找到对应的项并更新状态
  const material = hotMaterials.value.find(m => m.id === item.id)
  if (material) {
    material.collected = newStatus.collected
  }
};

/**
 * 处理网格导航点击
 *
 * @description 根据导航项的路由和参数进行跳转
 * @param {Object} item - 导航项对象
 * @param {string} item.route - 目标路由
 * @param {string} item.name - 导航名称
 * @param {Object} [item.cid] - 可选的分类 ID 参数
 */
const handleGridNav = (item) => {
  if (!item.route) {
    Taro.showToast({
      title: '功能开发中',
      icon: 'none',
      duration: 2000
    });
    return;
  }

  // 提取除 route 以外的所有参数（如 cid）
  const params = { ...item };
  delete params.id;
  delete params.icon;
  delete params.name;
  delete params.route;

  // 定义导航执行函数
  const navigate = () => {
    if (Object.keys(params).length > 0) {
      go(item.route, {
        ...params,
        title: item.name  // 将导航名称作为页面标题
      });
    } else {
      go(item.route);
    }
  };

  // 特殊处理：计划书页面需要登录权限
  if (item.route === '/pages/plan/index') {
    requireLogin(
      () => navigate(),
      { content: '请先登录后查看专属计划书', confirmText: '立即登录' }
    );
  } else {
    // 其他页面直接导航
    navigate();
  }
};

// 跳转到产品详情页
const goToProductDetail = (productId) => {
  go('/pages/product-detail/index', {
    id: productId
  });
};

// Open webview with URL
const openWebView = (url) => {
  go('/pages/webview/index', {
    url: encodeURIComponent(url)
  });
};

// 页面加载时获取首页图标、热卖产品和热门资料
useLoad(() => {
  fetchHomeIcons();
  fetchHotProducts();
  fetchHotMaterials();
});

// 页面显示时刷新用户信息（更新 TabBar 红点状态）
useDidShow(() => {
  // 只在已登录状态下刷新
  if (userStore.isLoggedIn) {
    userStore.fetchUserInfo().catch(err => {
      console.error('刷新用户信息失败:', err);
    });
  }
});

useShareAppMessage(() => {
  return {
    title: '臻奇智荟圈',
    path: '/pages/index/index'
  };
});
</script>

<style lang="less">
// 样式已移到各组件内部
</style>