<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 class="w-full h-full" src="https://picsum.photos/seed/header/750/544" mode="aspectFill" />
      <view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view>
    </view>

    <view class="relative z-10 px-[32rpx] pt-[180rpx]">
      <text class="block text-white text-[44rpx] font-bold mb-[40rpx] text-center">臻奇智荟圈</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="bg-white rounded-[32rpx] shadow-sm p-[40rpx] mb-[24rpx]">
        <view class="flex flex-wrap">
          <view
            class="flex flex-col items-center w-1/3 mb-[40rpx]"
            v-for="(item, index) in loopData0"
            :key="index"
            @tap="handleGridNav(item)"
          >
            <view class="w-[88rpx] h-[88rpx] rounded-[24rpx] bg-blue-50 flex items-center justify-center mb-[16rpx]">
              <IconFont :name="item.icon" class="text-blue-600" size="24" />
            </view>
            <text class="text-gray-800 text-[26rpx]">{{ item.lanhutext0 }}</text>
          </view>
        </view>
      </view>

      <!-- Hot Products -->
      <view class="bg-white rounded-[32rpx] shadow-sm p-[32rpx] mb-[24rpx]">
        <view class="flex justify-between items-center mb-[24rpx]">
          <text class="text-gray-900 text-[32rpx] font-bold">热卖产品</text>
          <view class="flex items-center text-blue-600" @tap="go('/pages/knowledge-base/index')">
            <text class="text-[26rpx] mr-[4rpx]">查看更多</text>
            <IconFont name="rectRight" size="12" />
          </view>
        </view>

        <!-- Product Card 1 -->
        <view class="bg-gray-50 rounded-[24rpx] p-[28rpx] mb-[24rpx]">
          <text class="block text-gray-800 text-[28rpx] font-medium mb-[20rpx]">家庭财富传承保障计划（分红）</text>
          <view class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
            <view class="bg-red-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
              <text class="text-red-600 text-[22rpx]">收益率3.5%</text>
            </view>
            <view class="bg-orange-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
              <text class="text-orange-600 text-[22rpx]">5年超值</text>
            </view>
            <view class="bg-green-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
              <text class="text-green-600 text-[22rpx]">保证收益万能</text>
            </view>
          </view>
          <view class="flex justify-between gap-[24rpx]">
            <nut-button
              plain
              color="#2563EB"
              class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600"
              @tap="goToProductDetail(1)"
            >
              产品详情
            </nut-button>
            <nut-button
              color="#2563EB"
              class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
              @tap="openPlanPopup('A')"
            >
              计划书
            </nut-button>
          </view>
        </view>

        <!-- Product Card 2 -->
        <view class="bg-gray-50 rounded-[24rpx] p-[28rpx]">
          <text class="block text-gray-800 text-[28rpx] font-medium mb-[20rpx]">儿童教育金储备方案（分红）</text>
          <view class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
            <view class="bg-red-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
              <text class="text-red-600 text-[22rpx]">收益率4.2%</text>
            </view>
            <view class="bg-orange-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
              <text class="text-orange-600 text-[22rpx]">10年期</text>
            </view>
            <view class="bg-green-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
              <text class="text-green-600 text-[22rpx]">教育专属</text>
            </view>
          </view>
          <view class="flex justify-between gap-[24rpx]">
            <nut-button
              plain
              color="#2563EB"
              class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600"
              @tap="goToProductDetail(2)"
            >
              产品资料
            </nut-button>
            <nut-button
              color="#2563EB"
              class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
              @tap="openPlanPopup('B')"
            >
              计划书
            </nut-button>
          </view>
        </view>
      </view>

      <!-- Hot Materials -->
      <view class="bg-white rounded-[32rpx] shadow-sm p-[32rpx] mb-[48rpx]">
        <view class="flex justify-between items-center mb-[24rpx]">
          <text class="text-gray-900 text-[32rpx] font-bold">本周热门资料</text>
          <view class="flex items-center text-blue-600" @tap="go('/pages/material-list/index')">
            <text class="text-[26rpx] mr-[4rpx]">查看更多</text>
            <IconFont name="rectRight" size="12" />
          </view>
        </view>

        <!-- Material List -->
        <view class="flex flex-col gap-[24rpx]">
          <!-- Material Items -->
          <view v-for="(item, index) in hotMaterials" :key="index"
            class="flex flex-row bg-white rounded-[24rpx] p-[24rpx] border border-gray-50">

            <!-- 左侧图标 -->
            <view class="w-[88rpx] h-[88rpx] mr-[24rpx] flex-shrink-0 flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100 rounded-[20rpx] shadow-inner self-start">
              <image :src="getDocumentIcon(item.fileName)" class="w-[48rpx] h-[48rpx]" mode="aspectFit" />
            </view>

            <!-- 内容区域 -->
            <view class="flex-1 min-w-0">
              <text class="text-[#1F2937] text-[30rpx] font-bold leading-[1.4] line-clamp-2 mb-[8rpx]">
                {{ item.title }}
              </text>
              <view class="flex items-center gap-[12rpx] mb-[16rpx]">
                <view class="inline-flex items-center justify-center px-[12rpx] py-[4rpx] bg-gray-100 text-gray-500 text-[20rpx] font-medium rounded-[8rpx]">
                  <text>{{ getDocumentLabel(item.fileName) }}</text>
                </view>
                <text class="text-[#9CA3AF] text-[22rpx]">{{ item.learners }}</text>
              </view>

              <!-- 分割线 -->
              <view class="h-[1rpx] bg-gray-100 my-[20rpx]"></view>

              <!-- 操作按钮 -->
              <ListItemActions
                :viewable="true"
                :collectable="true"
                :deletable="false"
                :collected="item.collected"
                @view="onViewMaterial(item)"
                @collect="toggleMaterialCollect(item)"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

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

    <!-- Plan Popup -->
    <PlanPopup v-model:visible="showPlanPopup">
      <SchemeA
        v-if="currentScheme === 'A'"
        @close="showPlanPopup = false"
        @submit="handlePlanSubmit"
      />
      <SchemeB
        v-if="currentScheme === 'B'"
        @close="showPlanPopup = false"
        @submit="handlePlanSubmit"
      />
    </PlanPopup>
  </view>
</template>

<script setup>
import { ref, shallowRef } from 'vue';
import Taro, { useShareAppMessage } from '@tarojs/taro';
import { useGo } from '@/hooks/useGo';
import { useListItemClick, ListType } from '@/composables/useListItemClick';
import { getDocumentIcon, getDocumentLabel } from '@/utils/documentIcons';
import TabBar from '@/components/TabBar.vue';
import IconFont from '@/components/IconFont.vue';
import PlanPopup from '@/components/PlanPopup/index.vue';
import SchemeA from '@/components/PlanSchemes/SchemeA.vue';
import SchemeB from '@/components/PlanSchemes/SchemeB.vue';
import ListItemActions from '@/components/ListItemActions/index.vue';

// Plan Popup State
const showPlanPopup = ref(false);
const currentScheme = ref('A');

const openPlanPopup = (scheme) => {
  currentScheme.value = scheme;
  showPlanPopup.value = true;
};

const handlePlanSubmit = (formData) => {
  console.log(`方案${currentScheme.value}提交:`, formData);
  showPlanPopup.value = false;
  Taro.showToast({
    title: '提交成功',
    icon: 'success'
  });
};

// Grid navigation data with routes
const loopData0 = shallowRef([
  { icon: 'order', lanhutext0: '计划书', route: '/pages/plan/index' },
  { icon: 'my', lanhutext0: '入职相关', route: '/pages/onboarding/index' },
  { icon: 'cart', lanhutext0: '签单相关', route: '/pages/signing/index' },
  { icon: 'home', lanhutext0: '家办相关', route: '/pages/family-office/index' },
  { icon: 'category', lanhutext0: '产品知识库', route: '/pages/knowledge-base/index' },
  { icon: 'star', lanhutext0: '工具箱', route: null }, // 待开发
]);

/**
 * 热门资料数据
 *
 * @description 本周热门资料列表数据，包含不同类型的文件
 */
const hotMaterials = ref([
  {
    title: '2024年保险市场趋势分析报告',
    learners: '256人学习',
    progress: '78%',
    collected: false,
    // PDF 文件
    fileName: '2024年保险市场趋势分析报告.pdf',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E%E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '高净值客户产品配置方案模板',
    learners: '189人学习',
    progress: '65%',
    collected: true,
    // Word 文件
    fileName: '高净值客户产品配置方案模板.docx',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E%E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  },
  {
    title: '产品收益率测算表（2024版）',
    learners: '142人学习',
    progress: '52%',
    collected: false,
    // Excel 文件
    fileName: '产品收益率测算表.xlsx',
    downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E%E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
  }
]);

// Navigation
const go = useGo();

/**
 * 使用文件列表点击处理器
 *
 * @description 配置为文件类型列表，点击时打开文件预览
 */
const { handleClick: onViewMaterial } = useListItemClick({
  listType: ListType.FILE,
  onAfterClick: (item) => {
    console.log('用户打开了资料:', item.title);
  }
});

/**
 * 切换资料收藏状态
 *
 * @description 切换热门资料的收藏状态
 * @param {Object} item - 资料项
 */
const toggleMaterialCollect = (item) => {
  item.collected = !item.collected;
  Taro.showToast({
    title: item.collected ? '已收藏' : '已取消收藏',
    icon: 'success',
    duration: 1000
  });
};

// Handle grid navigation click
const handleGridNav = (item) => {
  if (!item.route) {
    Taro.showToast({
      title: '功能开发中',
      icon: 'none',
      duration: 2000
    });
    return;
  }

  go(item.route);
};

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

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

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