import React, { useEffect } from 'react';
import { useProjectStore } from '../store/projectStore';
import { useUIStore } from '../store/uiStore';
import { ProjectCard } from './ProjectCard';
import { EmptyState } from './EmptyState';
import { LoadingSpinner } from './LoadingSpinner';
import { ErrorMessage } from './ErrorMessage';
import { Plus } from 'lucide-react';

/**
 * 项目列表组件
 * 遵循 Tauri 开发规范的组件设计模式
 */
export const ProjectList: React.FC = () => {
  const {
    projects,
    isLoading,
    error,
    loadProjects,
    deleteProject,
    setCurrentProject,
    clearError
  } = useProjectStore();

  const {
    openCreateProjectModal,
    openEditProjectModal
  } = useUIStore();

  // 组件挂载时加载项目
  useEffect(() => {
    loadProjects();
  }, [loadProjects]);

  // 处理项目打开
  const handleProjectOpen = (project: any) => {
    setCurrentProject(project);
    // TODO: 导航到项目详情页面
    console.log('打开项目:', project);
  };

  // 处理项目编辑
  const handleProjectEdit = (project: any) => {
    openEditProjectModal(project);
  };

  // 处理项目删除
  const handleProjectDelete = async (id: string) => {
    if (window.confirm('确定要删除这个项目吗？此操作不可撤销。')) {
      try {
        await deleteProject(id);
      } catch (error) {
        console.error('删除项目失败:', error);
      }
    }
  };

  // 错误状态
  if (error) {
    return (
      <div className="w-full animate-fade-in">
        <div className="flex items-center justify-between mb-8 pb-4 border-b border-gray-200">
          <h1 className="text-3xl font-bold text-gray-900">我的项目</h1>
          <button
            className="btn btn-primary"
            onClick={openCreateProjectModal}
          >
            <Plus size={20} />
            新建项目
          </button>
        </div>
        <ErrorMessage
          message={error}
          onRetry={loadProjects}
          onDismiss={clearError}
        />
      </div>
    );
  }

  // 加载状态
  if (isLoading && projects.length === 0) {
    return (
      <div className="w-full animate-fade-in">
        <div className="flex items-center justify-between mb-8 pb-4 border-b border-gray-200">
          <h1 className="text-3xl font-bold text-gray-900">我的项目</h1>
          <button
            className="btn btn-primary"
            onClick={openCreateProjectModal}
          >
            <Plus size={20} />
            新建项目
          </button>
        </div>
        <div className="flex items-center justify-center py-16">
          <LoadingSpinner text="加载项目中..." />
        </div>
      </div>
    );
  }

  return (
    <div className="w-full">
      <div className="flex items-center justify-between mb-8 pb-4 border-b border-gray-200">
        <h1 className="text-3xl font-bold text-gray-900">我的项目</h1>
        <button
          className="btn btn-primary"
          onClick={openCreateProjectModal}
          disabled={isLoading}
        >
          <Plus size={20} />
          新建项目
        </button>
      </div>

      {projects.length === 0 ? (
        <EmptyState
          title="还没有项目"
          description="创建您的第一个项目开始使用 MixVideo"
          actionText="新建项目"
          onAction={openCreateProjectModal}
        />
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {projects.map((project) => (
            <ProjectCard
              key={project.id}
              project={project}
              onOpen={handleProjectOpen}
              onEdit={handleProjectEdit}
              onDelete={handleProjectDelete}
            />
          ))}
        </div>
      )}

      {isLoading && projects.length > 0 && (
        <div className="fixed inset-0 bg-black bg-opacity-20 flex items-center justify-center z-40">
          <LoadingSpinner size="small" />
        </div>
      )}
    </div>
  );
};