import * as React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import './sidebar.less';

interface NavItem {
    key: string;
    icon: string;
    label: string;
    path: string;
}

const Sidebar: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();

    // 应用矩阵菜单
    const appMenuItems: NavItem[] = [
        { key: '/appCenter', icon: 'solar:widget-add-bold-duotone', label: '全部 RAG 应用', path: '/appCenter' },
        { key: '/appCenter/category?category=professional', icon: 'solar:book-2-bold-duotone', label: '专业知识', path: '/appCenter/category?category=professional' },
        { key: '/appCenter/category?category=functional', icon: 'solar:star-bold-duotone', label: '职能管理', path: '/appCenter/category?category=functional' },
        { key: '/appCenter/category?category=project', icon: 'solar:notebook-bookmark-bold-duotone', label: '项目级应用', path: '/appCenter/category?category=project' },
        { key: '/otherApps', icon: 'solar:gallery-add-bold-duotone', label: '其他非 RAG 应用', path: '/otherApps' },
    ];

    // 管理控制台菜单
    const adminMenuItems: NavItem[] = [
        { key: '/appCenter/questionAnswer', icon: 'solar:add-circle-bold-duotone', label: '我创建的应用', path: '/appCenter/questionAnswer' },
        { key: '/knowledge/knowledgeLib', icon: 'solar:database-bold-duotone', label: '知识库管理', path: '/knowledge/knowledgeLib' },
        { key: '/system/apiKey', icon: 'solar:key-bold-duotone', label: 'API 管理', path: '/system/apiKey' },
        { key: '/system/audit', icon: 'solar:clipboard-check-bold-duotone', label: '应用审核', path: '/system/audit' },
    ];

    // 检查是否为当前激活的路由（支持带参数的路由）
    const isActive = (itemPath: string, currentPath: string, currentSearch: string) => {
        // 完整路径比较（包括 query 参数）
        const itemUrl = new URL(itemPath, 'http://localhost');
        const currentUrl = new URL(currentPath + (currentSearch ? '?' + currentSearch : ''), 'http://localhost');
        
        return itemUrl.pathname === currentUrl.pathname && 
               itemUrl.searchParams.get('category') === currentUrl.searchParams.get('category');
    };

    const handleNavClick = (path: string) => {
        console.log('导航到:', path);
        navigate(path);
    };

    return (
        <aside className='sidebar'>
            <div className='sidebar-content'>
                {/* 应用矩阵 */}
                <div>
                    <h3 className='section-title'>应用矩阵</h3>
                    <nav className='nav-menu'>
                        {appMenuItems.map((item) => (
                            <button
                                key={item.key}
                                className={`nav-item ${isActive(item.path, location.pathname, location.search) ? 'active' : ''}`}
                                onClick={() => handleNavClick(item.path)}
                            >
                                <span className='iconify' data-icon={item.icon}></span>
                                <span>{item.label}</span>
                            </button>
                        ))}
                    </nav>
                </div>

                {/* 管理控制台 */}
                <div>
                    <h3 className='section-title'>管理控制台</h3>
                    <nav className='nav-menu'>
                        {adminMenuItems.map((item) => (
                            <button
                                key={item.key}
                                className={`nav-item ${location.pathname === item.path ? 'active' : ''}`}
                                onClick={() => handleNavClick(item.path)}
                            >
                                <span className='iconify' data-icon={item.icon}></span>
                                <span>{item.label}</span>
                            </button>
                        ))}
                    </nav>
                </div>
            </div>
        </aside>
    );
};

export default Sidebar;
