<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-[#1e3a8a] 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] bg-blue-50">
          <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 {
  Edit,
  Find,
  Order,
  Clock,
  Checklist,
  Check,
  Star,
  Top,
  PlayCircleFill,
  RectRight,
  Home,
  Service,
  My
} from '@nutui/icons-vue-taro'

const go = useGo()

const sections = ref([
  {
    title: '入职前',
    items: [
      {
        title: '考试报名',
        subtitle: '资格考试报名入口',
        icon: Edit
      },
      {
        title: '考试资料及刷题',
        subtitle: '历年真题及模拟题库',
        icon: Find
      },
      {
        title: '签合约锁人规则',
        subtitle: '合约条款详解',
        icon: Order
      }
    ]
  },
  {
    title: '入职中',
    items: [
      {
        title: '各个进度时间线表格',
        subtitle: '入职进度跟踪表',
        icon: Clock
      },
      {
        title: '各个财务计划盘及对数',
        subtitle: '财务计划配置指南',
        icon: Checklist
      },
      {
        title: '基本法对比',
        subtitle: '公司制度对比分析',
        icon: Check
      }
    ]
  },
  {
    title: '入职后',
    items: [
      {
        title: '公司拿钱必修课',
        subtitle: '薪酬体系培训',
        icon: Star
      },
      {
        title: '升职流程条件',
        subtitle: '晋升通道说明',
        icon: Top
      },
      {
        title: '必修课程',
        subtitle: '岗位技能课程',
        icon: PlayCircleFill
      }
    ]
  }
])

/**
 * 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: 'OnboardingIndex'
}
</script>