import { useState, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './TabBar.scss';

interface TabBarItem {
  pagePath: string;
  text: string;
  iconPath?: string;
  selectedIconPath?: string;
  isSpecial?: boolean; // 标记是否为特殊样式（中间的AI按钮）
}

const tabBarData: TabBarItem[] = [
  {
    pagePath: 'pages/index/index',
    text: '首页',
    iconPath: 'assets/tabbar/home.png',
    selectedIconPath: 'assets/tabbar/home-active.png',
  },
  {
    pagePath: 'pages/ai/index',
    text: 'AI问答',
    isSpecial: true, // 特殊样式
  },
  {
    pagePath: 'pages/user/user',
    text: '我的',
    iconPath: 'assets/tabbar/user.png',
    selectedIconPath: 'assets/tabbar/user-active.png',
  },
];

function CustomTabBar() {
  const [selected, setSelected] = useState(0);

  useEffect(() => {
    // 获取当前页面路径，设置对应的选中状态
    const updateSelected = () => {
      try {
        const pages = Taro.getCurrentPages();
        if (pages && pages.length > 0) {
          const currentPage = pages[pages.length - 1];
          const currentRoute = currentPage?.route || '';

          console.log('当前路由:', currentRoute);

          // 精确匹配页面路径
          let index = -1;
          if (currentRoute.includes('pages/index/index')) {
            index = 0; // 首页
          } else if (currentRoute.includes('pages/ai/index')) {
            index = 1; // AI问答
          } else if (currentRoute.includes('pages/user/user')) {
            index = 2; // 我的
          }

          if (index !== -1) {
            setSelected(index);
            console.log('设置选中索引:', index);
          }
        }
      } catch (error) {
        console.error('TabBar页面检测错误:', error);
      }
    };

    updateSelected();
  }, []);

  const switchTab = (index: number, item: TabBarItem) => {
    setSelected(index);
    Taro.switchTab({
      url: `/${item.pagePath}`,
    });
  };

  return (
    <View className="custom-tabbar">
      <View className="tabbar-container">
        {tabBarData.map((item, index) => (
          <View
            key={index}
            className={`tabbar-item ${selected === index ? 'selected' : ''} ${item.isSpecial ? 'special-item' : ''}`}
            onClick={() => switchTab(index, item)}
          >
            {item.isSpecial ? (
              // AI问答特殊样式
              <View className="special-icon">
                <View className="ai-circle">
                  <Text className="ai-text">AI</Text>
                </View>
              </View>
            ) : (
              // 普通图标
              <View className="normal-icon">
                <Text className={`icon-text ${selected === index ? 'selected' : ''}`}>
                  {index === 0 ? '🏠' : '👤'}
                </Text>
              </View>
            )}
            <Text className={`tabbar-text ${selected === index ? 'selected' : ''} ${item.isSpecial ? 'special-text' : ''}`}>
              {item.text}
            </Text>
          </View>
        ))}
      </View>
    </View>
  );
}

export default CustomTabBar;
