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

interface TabBarProps {
    current?: number;
}

interface TabBarItem {
    pagePath: string;
    text: string;
    icon: string;
    isSpecial?: boolean;
}

const tabBarData: TabBarItem[] = [
    {
        pagePath: 'pages/index/index',
        text: '首页',
        icon: 'https://oss.wsdns.cn/20250711/3f000045aac44a0480b4be0a2c225fe1.png',
    },
    {
        pagePath: 'pages/ai/index',
        text: 'AI问答',
        icon: 'https://oss.wsdns.cn/20250711/86fdc1ad45a041d797b582ba42c34698.png',
        isSpecial: true,
    },
    {
        pagePath: 'pages/user/user',
        text: '我的',
        icon: 'https://oss.wsdns.cn/20250711/2baaec717bca49e7b58f36a3bd75fc14.png',
    },
];

function SimpleH5TabBar({current}: TabBarProps) {
    const [selected, setSelected] = useState(current || 0);

    useEffect(() => {
        console.log('SimpleH5TabBar 组件已挂载, current:', current);
        if (typeof current === 'number') {
            setSelected(current);
        }
    }, [current]);

    const switchTab = (index: number) => {
        console.log('SimpleH5TabBar 点击项目:', index);
        setSelected(index);

        const urls = [
            '/pages/index/index',
            '/pages/ai/index',
            '/pages/user/user'
        ];

        Taro.switchTab({
            url: urls[index],
            success: () => console.log('跳转成功:', urls[index]),
            fail: (error) => console.error('跳转失败:', error)
        });
    };

    return (
        <View className="simple-h5-tabbar">
            <View className="h5-tabbar-container">
                {tabBarData.map((item, index) => (
                    <View
                        key={index}
                        className={`h5-tabbar-item ${selected === index ? 'selected' : ''} ${item.isSpecial ? 'special' : ''}`}
                        onClick={() => switchTab(index)}
                    >
                        {item.isSpecial ? (
                            <View className="h5-special-icon">
                                <View className="h5-ai-circle">
                                    <Image src={item.icon} width={'24px'} height={'24px'}/>
                                </View>
                            </View>
                        ) : (
                            <View className="h5-normal-icon">
                              <Image src={item.icon} width={'24px'} height={'24px'}/>
                            </View>
                        )}
                        <Text
                            className={`h5-tabbar-text ${selected === index ? 'selected' : ''} ${item.isSpecial ? 'special-text' : ''}`}>
                            {item.text}
                        </Text>
                    </View>
                ))}
            </View>
        </View>
    );
}

export default SimpleH5TabBar;
