import React from 'react';
import { ModuleType } from '../../App';
import IntentEditor from '../IntentEditor/IntentEditor';
import TaskPlanner from '../TaskPlanner/TaskPlanner';
import './MainPanel.css';
import { IntentActionHandlers, IntentActionStatus } from '../../types/intentActions';
import { ExtractedStep } from '../../services/api';

interface MainPanelProps {
	activeModule: ModuleType;
	aiPanelMaximized: boolean;
	onRegisterIntentActions?: (handlers: IntentActionHandlers | null) => void;
	onIntentStatusChange?: (status: IntentActionStatus) => void;
	onIntentComplete?: (steps: ExtractedStep[]) => void;
	extractedSteps?: ExtractedStep[];
}

// 模块标题映射
const moduleTitles: Record<ModuleType, string> = {
	intent: '意图编制',
	task: '任务规划',
	simulation: '逻辑仿真',
	code: '代码生成',
	data: '数据服务',
	knowledge: '知识库',
};

// 占位组件
const PlaceholderPanel: React.FC<{ title: string }> = ({ title }) => (
	<div className="placeholder-panel">
		<div className="placeholder-icon">
			<svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" strokeWidth="1.5">
				<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
				<line x1="3" y1="9" x2="21" y2="9" />
				<line x1="9" y1="21" x2="9" y2="9" />
			</svg>
		</div>
		<h2>{title}</h2>
		<p>功能开发中，敬请期待...</p>
	</div>
);

const MainPanel: React.FC<MainPanelProps> = ({
	activeModule,
	aiPanelMaximized,
	onRegisterIntentActions,
	onIntentStatusChange,
	onIntentComplete,
	extractedSteps = [],
}) => {
	// 渲染占位组件（仅当前激活且非intent/task时）
	const renderPlaceholder = () => {
		if (activeModule === 'intent' || activeModule === 'task') {
			return null;
		}
		return <PlaceholderPanel title={moduleTitles[activeModule]} />;
	};

	return (
		<div className={`main-panel ${aiPanelMaximized ? 'minimized' : ''}`}>
			{/* IntentEditor 始终挂载，通过 CSS 控制显示/隐藏以保持状态 */}
			<div style={{ display: activeModule === 'intent' ? 'contents' : 'none' }}>
				<IntentEditor
					onRegisterActions={onRegisterIntentActions}
					onStatusChange={onIntentStatusChange}
					onComplete={onIntentComplete}
				/>
			</div>
			{/* TaskPlanner 始终挂载 */}
			<div style={{ display: activeModule === 'task' ? 'contents' : 'none' }}>
				<TaskPlanner extractedSteps={extractedSteps} />
			</div>
			{/* 其他占位模块 */}
			{renderPlaceholder()}
		</div>
	);
};

export default MainPanel;
