import * as React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Breadcrumb as AntdBreadcrumb, Button, Tooltip } from 'antd';
import { PlusOutlined, TagOutlined, ReadOutlined } from '@ant-design/icons';
import { State } from '../types';
import router from '@/router';

interface Props {
    routerMatchList: State['routerMatchList'],
    onKnowledgeLibCreate?: () => void; // 知识库创建回调
};

// 按钮配置类型
interface ButtonConfig {
    text: string;
    icon: React.ReactNode;
    tooltip: string;
    onClick: () => void;
    type?: 'default' | 'primary';
    className?: string;
}

// 页面按钮配置
interface PageButtonConfig {
    pattern: string | RegExp;
    matcher?: (path: string) => boolean;
    buttons: ButtonConfig[];
}

const Breadcrumb: React.FC<Props> = (props: Props) => {
    const { routerMatchList, onKnowledgeLibCreate } = props;
    const location = useLocation();

    // 创建帮助按钮的工厂函数
    const createHelpButton = (helpPath: string, tooltipText: string): ButtonConfig => ({
        text: '使用说明',
        icon: <ReadOutlined />,
        tooltip: tooltipText,
        onClick: () => window.open(helpPath, '_blank'),
        className: 'help-button'
    });

    // 创建主要操作按钮的工厂函数
    const createPrimaryButton = (text: string, onClick: () => void): ButtonConfig => ({
        text,
        icon: <PlusOutlined />,
        tooltip: '',
        onClick,
        type: 'primary'
    });

    // 页面按钮配置
    const pageConfigs: PageButtonConfig[] = [
        {
            pattern: '/deepseek/questionAnswer',
            matcher: (path) => path === '/deepseek/questionAnswer' || path === '/zhipu/questionAnswer',
            buttons: [
                createHelpButton('/help/questionAnswer/intro', '查看问答应用使用说明文档'),
                createPrimaryButton('创建问答应用', () => {
                    const basePath = location.pathname.startsWith('/deepseek') ? '/deepseek' : '/zhipu';
                    router.navigate(`${basePath}/questionAnswer/create`);
                })
            ]
        },
        {
            pattern: '/deepseek/knowledgeLib',
            matcher: (path) => path === '/deepseek/knowledgeLib' || path === '/zhipu/knowledgeLib',
            buttons: [
                createHelpButton('/help/knowledge/intro', '查看知识库使用说明文档'),
                createPrimaryButton('创建知识库', () => {
                    const event = new CustomEvent('knowledgeLibCreate', {
                        detail: { platform: location.pathname.startsWith('/deepseek') ? 'deepseek' : 'zhipu' }
                    });
                    window.dispatchEvent(event);
                })
            ]
        },
        {
            pattern: /^\/(deepseek|zhipu)\/knowledgeLib\/[^/]+/,
            matcher: (path) => !!path.match(/^\/(deepseek|zhipu)\/knowledgeLib\/[^/]+/) && !path.includes('/slice/'),
            buttons: [
                createHelpButton('/help/knowledge/intro#上传文档', '查看知识库上传文档使用说明')
            ]
        },
        {
            pattern: /^\/(deepseek|zhipu)\/knowledgeLib\/[^/]+\/[^/]+\/slice\/[^/]+\/[^/]+$/,
            matcher: (path) => !!path.match(/^\/(deepseek|zhipu)\/knowledgeLib\/[^/]+\/[^/]+\/slice\/[^/]+\/[^/]+$/) && path.includes('/slice/'),
            buttons: [
                createHelpButton('/help/knowledge/intro#切片精修', '查看切片精修使用说明')
            ]
        },
        {
            pattern: /^\/(deepseek|zhipu)\/knowledgeLib\/[^/]+\/[^/]+\/slice\/[^/]+\/[^/]+\/[^/]+$/,
            matcher: (path) => !!path.match(/^\/(deepseek|zhipu)\/knowledgeLib\/[^/]+\/[^/]+\/slice\/[^/]+\/[^/]+\/[^/]+$/),
            buttons: [
                createHelpButton('/help/knowledge/intro#切片精修-图片处理方法', '查看切片精修-图片处理方法使用说明')
            ]
        },
        {
            pattern: '/questionAnswer/create',
            matcher: (path) => path === '/deepseek/questionAnswer/create' || path === '/zhipu/questionAnswer/create',
            buttons: [
                createHelpButton('/help/questionAnswer/intro#创建应用', '查看创建应用使用说明')
            ]
        },
        {
            pattern: '/questionAnswer/modify',
            matcher: (path) => path === '/deepseek/questionAnswer/modify' || path === '/zhipu/questionAnswer/modify',
            buttons: [
                createHelpButton('/help/questionAnswer/intro#编辑修改应用', '查看编辑修改应用使用说明')
            ]
        }
    ];

    // 渲染按钮组件
    const renderButton = (config: ButtonConfig, index: number) => {
        const button = (
            <Button
                key={index}
                type={config.type}
                icon={config.icon}
                className={config.className}
                onClick={config.onClick}
            >
                {config.text}
            </Button>
        );

        return config.tooltip ? (
            <Tooltip key={index} title={config.tooltip}>
                {button}
            </Tooltip>
        ) : button;
    };

    // 根据当前路由生成动态按钮
    const getDynamicButton = () => {
        const path = location.pathname;
        
        for (const config of pageConfigs) {
            if (config.matcher && config.matcher(path)) {
                const buttons = config.buttons.map(renderButton);
                return buttons.length > 1 ? (
                    <div style={{ display: 'flex', gap: '8px' }}>
                        {buttons}
                    </div>
                ) : buttons[0];
            }
        }
        
        return null;
    };

    const items = routerMatchList.map((item, index) => {
        const color = (index === 0 || index < routerMatchList.length - 1) ? '#595959' : '#1a1a1a';
        return {
            key: index,
            title: <Link
                style={{ color: color }}
                to={item.path}>
                {item.breadcrumbName}
            </Link>,
        }
    });

    return (
        <div className='breadcrumb-container'>
            <AntdBreadcrumb className='breadcrumb' items={items} />
            <div className='breadcrumb-actions'>
                {getDynamicButton()}
            </div>
        </div>
    );
};

export default Breadcrumb;