<template>
  <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
    <!-- Navigation Header -->
    <div class="relative w-full h-[300rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] flex items-center justify-center pt-[40rpx]">
      <span class="text-white text-[44rpx] font-normal">签单相关</span>
    </div>

    <!-- Content List -->
    <div class="px-[40rpx] mt-[40rpx] relative z-10">
      <div v-for="(section, index) in sections" :key="index" class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm">
        <!-- Section Header -->
        <div class="px-[40rpx] py-[32rpx]" :style="{ background: section.bgGradient }">
          <span class="text-[#1f2937] text-[32rpx] font-normal">{{ section.title }}</span>
        </div>

        <!-- Section Items -->
        <div class="flex flex-col">
          <div v-for="(item, itemIndex) in section.items" :key="itemIndex" class="flex flex-col">
            <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)">
              <div class="flex items-center">
                <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
                  <component :is="item.icon" class="text-blue-600" size="32" />
                </div>
                <div class="flex flex-col">
                  <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
                  <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
                </div>
              </div>
              <RectRight class="text-gray-400" size="16" />
            </div>
            <!-- Divider -->
            <div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Tab Bar -->
    <div class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-100 pb-[env(safe-area-inset-bottom)] z-50">
      <div class="flex justify-around items-center h-[110rpx]">
        <div class="flex flex-col items-center justify-center w-1/3" @tap="switchTab('home')">
          <Home class="text-gray-400" size="24" />
          <span class="text-[#9ca3af] text-[24rpx] mt-[8rpx]">首页</span>
        </div>
        <div class="flex flex-col items-center justify-center w-1/3" @tap="switchTab('ai')">
          <Service class="text-gray-400" size="24" />
          <span class="text-[#9ca3af] text-[24rpx] mt-[8rpx]">AI答疑</span>
        </div>
        <div class="flex flex-col items-center justify-center w-1/3">
          <My class="text-[#007aff]" size="24" />
          <span class="text-[#007aff] text-[24rpx] mt-[8rpx]">我的</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useGo } from '@/hooks/useGo'
import {
  Shop,
  Category,
  Check,
  Edit,
  Checklist,
  Cart,
  People,
  Order,
  Clock,
  Refresh,
  Location,
  RectRight,
  Home,
  Service,
  My
} from '@nutui/icons-vue-taro'

const go = useGo()

const sections = ref([
  {
    title: '培训板块',
    bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
    items: [
      {
        title: '公司介绍',
        subtitle: '企业背景及发展历程',
        icon: Shop
      },
      {
        title: '产品介绍及更新',
        subtitle: '最新产品资料库',
        icon: Category
      }
    ]
  },
  {
    title: '签单前',
    bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
    items: [
      {
        title: '预核保',
        subtitle: '核保流程指引',
        icon: Check
      },
      {
        title: '做计划书',
        subtitle: '方案设计工具',
        icon: Edit
      }
    ]
  },
  {
    title: '签单中',
    bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
    items: [
      {
        title: '信息收集及健康告知模板',
        subtitle: '标准表格及注意事项',
        icon: Checklist
      },
      {
        title: '缴费方式银行开户',
        subtitle: '支付渠道办理指南',
        icon: Cart
      },
      {
        title: '体检经验',
        subtitle: '体检流程及常见问题',
        icon: People
      }
    ]
  },
  {
    title: '签单后',
    bgGradient: 'linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%)',
    items: [
      {
        title: '批单跟进',
        subtitle: '保单变更处理流程',
        icon: Order
      },
      {
        title: '核保/pending',
        subtitle: '核保进度查询',
        icon: Clock
      },
      {
        title: '续保',
        subtitle: '续期服务指引',
        icon: Refresh
      }
    ]
  },
  {
    title: '售后',
    bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
    items: [
      {
        title: '香港医生资源',
        subtitle: '专业医疗机构名录',
        icon: Location
      }
    ]
  }
])

/**
 * Handle item click
 * @param {Object} item - Clicked item data
 */
const handleItemClick = (item) => {
  console.log('Clicked:', item.title)
  // TODO: Navigate to respective page
}

/**
 * Switch tab
 * @param {string} tab - Tab key
 */
const switchTab = (tab) => {
  if (tab === 'home') {
    go('/pages/index/index')
  } else if (tab === 'ai') {
    // go('/pages/ai/index') // Assuming there is an AI page
    console.log('Switch to AI tab')
  }
}
</script>

<script>
export default {
  name: 'SigningIndex'
}
</script>