/**
 * ProjectResourceLinkDemo - 项目与素材库联动演示
 * 展示从项目面板切换到素材库的联动功能
 */
import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { useUIStore } from '@/stores/uiStore';

export function ProjectResourceLinkDemo() {
  const [lastEvent, setLastEvent] = useState<{ projectId: string; projectName: string } | null>(null);
  const { switchToLibraryWithProject, leftPanelActiveTab } = useUIStore();

  // 监听项目选择事件
  useEffect(() => {
    const handleSelectProjectInLibrary = (event: CustomEvent) => {
      const { projectId, projectName } = event.detail;
      setLastEvent({ projectId, projectName });
    };

    window.addEventListener('selectProjectInLibrary', handleSelectProjectInLibrary as EventListener);
    
    return () => {
      window.removeEventListener('selectProjectInLibrary', handleSelectProjectInLibrary as EventListener);
    };
  }, []);

  // 模拟项目数据
  const mockProjects = [
    { id: 'project-1', name: '西游记之大圣归来 - 2015第一部' },
    { id: 'project-2', name: '琅琊榜 - 第一集' },
    { id: 'project-3', name: '琅琊榜 - 第二集' },
    { id: 'project-4', name: '琅琊榜 - 第三集' },
  ];

  const handleTestProjectLink = (projectId: string, projectName: string) => {
    switchToLibraryWithProject(projectId, projectName);
  };

  return (
    <div className="p-6 max-w-2xl mx-auto space-y-6">
      <h2 className="text-lg font-semibold">项目与素材库联动演示</h2>
      
      <div className="space-y-4">
        <div>
          <h3 className="text-sm font-medium mb-2">当前状态</h3>
          <div className="p-3 bg-muted rounded-md text-sm space-y-1">
            <p><strong>当前面板:</strong> {leftPanelActiveTab === 'project' ? '项目面板' : '素材库面板'}</p>
            {lastEvent && (
              <>
                <p><strong>最后选择的项目ID:</strong> {lastEvent.projectId}</p>
                <p><strong>最后选择的项目名称:</strong> {lastEvent.projectName}</p>
              </>
            )}
          </div>
        </div>

        <div>
          <h3 className="text-sm font-medium mb-2">测试联动功能</h3>
          <p className="text-xs text-muted-foreground mb-3">
            点击下面的按钮模拟在项目面板中右键点击"展开素材"
          </p>
          <div className="grid grid-cols-1 gap-2">
            {mockProjects.map((project) => (
              <Button
                key={project.id}
                variant="outline"
                size="sm"
                className="justify-start text-left"
                onClick={() => handleTestProjectLink(project.id, project.name)}
              >
                📁 {project.name} → 展开素材
              </Button>
            ))}
          </div>
        </div>

        <div className="text-xs text-muted-foreground">
          <p><strong>联动流程:</strong></p>
          <ol className="list-decimal list-inside space-y-1 mt-1">
            <li>用户在项目面板右键点击项目</li>
            <li>选择"展开素材"菜单项</li>
            <li>自动切换到素材库面板</li>
            <li>智能搜索框显示项目名称</li>
            <li>自动加载该项目的素材</li>
          </ol>
        </div>

        <div className="text-xs text-muted-foreground">
          <p><strong>技术实现:</strong></p>
          <ul className="list-disc list-inside space-y-1 mt-1">
            <li>UIStore 中的 switchToLibraryWithProject 方法</li>
            <li>自定义事件 'selectProjectInLibrary' 进行组件间通信</li>
            <li>ProjectResourcePanel 和 ProjectSmartSearchInput 监听事件并响应</li>
            <li>自动切换面板并填充搜索框</li>
          </ul>
        </div>
      </div>
    </div>
  );
}