import { ReactNode } from 'react';
import { Button, Tooltip } from 'antd';
import {
    FileTextOutlined,
    SearchOutlined,
    SettingOutlined,
    ArrowLeftOutlined,
    DatabaseOutlined,
} from '@ant-design/icons';
import type { Dataset } from '~/api/dify-dataset/type/datasetTypes';

/**
 * 菜单项类型
 */
export type MenuTab = 'documents' | 'retrieve' | 'settings';

interface DatasetLayoutProps {
    /** 知识库信息 */
    dataset: Dataset | null;
    /** 当前激活的菜单 */
    activeTab: MenuTab;
    /** 菜单切换回调 */
    onTabChange: (tab: MenuTab) => void;
    /** 是否显示返回按钮（在文档详情页时显示） */
    showBackButton?: boolean;
    /** 返回按钮点击回调 */
    onBack?: () => void;
    /** 子组件 */
    children: ReactNode;
}

/**
 * 知识库布局组件
 * 包含左侧菜单栏和右侧内容区
 */
export default function DatasetLayout({
    dataset,
    activeTab,
    onTabChange,
    showBackButton = false,
    onBack,
    children,
}: DatasetLayoutProps) {
    const menuItems: { key: MenuTab; icon: ReactNode; label: string }[] = [
        { key: 'documents', icon: <FileTextOutlined />, label: '文档' },
        { key: 'retrieve', icon: <SearchOutlined />, label: '召回测试' },
        { key: 'settings', icon: <SettingOutlined />, label: '设置' },
    ];

    return (
        <div className="dataset-layout">
            {/* 左侧侧边栏 */}
            <aside className="dataset-sidebar">
                {/* 知识库信息 */}
                <div className="sidebar-header">
                    <div className="dataset-icon">
                        <DatabaseOutlined />
                    </div>
                    <div className="dataset-info">
                        <Tooltip title={dataset?.name} placement="right">
                            <h2 className="dataset-name">{dataset?.name || '知识库'}</h2>
                        </Tooltip>
                        <span className="dataset-type">本地文档</span>
                    </div>
                </div>

                {/* 统计信息 */}
                <div className="sidebar-stats">
                    <span className="stat-item">
                        {dataset?.document_count || 0} 个文档
                    </span>
                </div>

                {/* 导航菜单 */}
                <nav className="sidebar-menu">
                    {menuItems.map((item) => (
                        <button
                            key={item.key}
                            className={`menu-item ${activeTab === item.key ? 'active' : ''}`}
                            onClick={() => onTabChange(item.key)}
                        >
                            <span className="menu-icon">{item.icon}</span>
                            <span className="menu-label">{item.label}</span>
                        </button>
                    ))}
                </nav>
            </aside>

            {/* 右侧内容区 */}
            <main className="dataset-main">
                {/* 返回按钮 */}
                {showBackButton && onBack && (
                    <div className="sidebar-back">
                        <Button
                            type="text"
                            icon={<ArrowLeftOutlined />}
                            onClick={onBack}
                            className="back-btn"
                        >
                            返回文档列表
                        </Button>
                    </div>
                )}
                {children}
            </main>
        </div>
    );
}