import React from 'react';
import { ModuleType } from '../../App';
import './Sidebar.css';

interface SidebarProps {
	activeModule: ModuleType;
	onModuleChange: (module: ModuleType) => void;
}

// 功能模块配置
const modules: { id: ModuleType; label: string; icon: React.ReactNode }[] = [
	{
		id: 'intent',
		label: '意图编制',
		icon: (
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
				<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
				<polyline points="14 2 14 8 20 8" />
				<line x1="16" y1="13" x2="8" y2="13" />
				<line x1="16" y1="17" x2="8" y2="17" />
				<polyline points="10 9 9 9 8 9" />
			</svg>
		),
	},
	{
		id: 'task',
		label: '任务规划',
		icon: (
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
				<path d="M9 11l3 3L22 4" />
				<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
			</svg>
		),
	},
	{
		id: 'simulation',
		label: '逻辑仿真',
		icon: (
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
				<polyline points="23 4 23 10 17 10" />
				<polyline points="1 20 1 14 7 14" />
				<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
			</svg>
		),
	},
	{
		id: 'code',
		label: '代码生成',
		icon: (
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
				<polyline points="16 18 22 12 16 6" />
				<polyline points="8 6 2 12 8 18" />
			</svg>
		),
	},
	{
		id: 'data',
		label: '数据服务',
		icon: (
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
				<ellipse cx="12" cy="5" rx="9" ry="3" />
				<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
				<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
			</svg>
		),
	},
	{
		id: 'knowledge',
		label: '知识库',
		icon: (
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
				<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
				<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
			</svg>
		),
	},
];

const Sidebar: React.FC<SidebarProps> = ({ activeModule, onModuleChange }) => {
	return (
		<div className="sidebar">
			{modules.map((module) => (
				<button
					key={module.id}
					className={`sidebar-item ${activeModule === module.id ? 'active' : ''}`}
					onClick={() => onModuleChange(module.id)}
					title={module.label}
				>
					<div className="sidebar-icon">{module.icon}</div>
					<span className="sidebar-label">{module.label}</span>
				</button>
			))}
		</div>
	);
};

export default Sidebar;
