import React, { ReactNode } from 'react'
import { View } from '@tarojs/components'
import { TabBar, TabBarItem } from '@/components/ui/tab-bar'
import Taro from '@tarojs/taro'

export interface YongrenTabBarLayoutProps {
  children: ReactNode
  activeKey: string
}

const yongrenTabBarItems: TabBarItem[] = [
  {
    key: 'dashboard',
    title: '首页',
    iconClass: 'i-heroicons-home-20-solid',
    selectedIconClass: 'i-heroicons-home-20-solid',
  },
  {
    key: 'talent',
    title: '人才',
    iconClass: 'i-heroicons-user-group-20-solid',
    selectedIconClass: 'i-heroicons-user-group-20-solid',
  },
  {
    key: 'order',
    title: '订单',
    iconClass: 'i-heroicons-document-text-20-solid',
    selectedIconClass: 'i-heroicons-document-text-20-solid',
  },
  {
    key: 'statistics',
    title: '数据',
    iconClass: 'i-heroicons-chart-bar-20-solid',
    selectedIconClass: 'i-heroicons-chart-bar-20-solid',
  },
  {
    key: 'settings',
    title: '设置',
    iconClass: 'i-heroicons-cog-6-tooth-20-solid',
    selectedIconClass: 'i-heroicons-cog-6-tooth-20-solid',
  },
]

const YongrenTabBarLayout: React.FC<YongrenTabBarLayoutProps> = ({ children, activeKey }) => {
  const handleTabChange = (key: string) => {
    // 使用 Taro 的导航 API 进行页面跳转
    switch (key) {
      case 'dashboard':
        Taro.switchTab({ url: '/pages/yongren/dashboard/index' })
        break
      case 'talent':
        Taro.switchTab({ url: '/pages/yongren/talent/list/index' })
        break
      case 'order':
        Taro.switchTab({ url: '/pages/yongren/order/list/index' })
        break
      case 'statistics':
        Taro.switchTab({ url: '/pages/yongren/statistics/index' })
        break
      case 'settings':
        Taro.switchTab({ url: '/pages/profile/index' })
        break
      default:
        break
    }
  }

  return (
    <View className="min-h-screen bg-gray-50 flex flex-col">
      <View className="flex-1 flex flex-col">
        {children}
      </View>
      <TabBar
        items={yongrenTabBarItems}
        activeKey={activeKey}
        onChange={handleTabChange}
        fixed={true}
        safeArea={true}
        color="#999"
        selectedColor="#3b82f6"
        backgroundColor="white"
      />
    </View>
  )
}

export default YongrenTabBarLayout