import React from 'react'
import { Plus, Package } from 'lucide-react'
import { Project } from '../services/projectService'
import ProjectManageCard from './ProjectManageCard'

interface ProjectListProps {
  projects: Project[]
  loading: boolean
  searchTerm: string
  onEdit: (project: Project) => void
  onDelete: (projectId: string) => void
  onOpenDirectory: (projectId: string) => void
  onCreateNew: () => void
}

const ProjectList: React.FC<ProjectListProps> = ({
  projects,
  loading,
  searchTerm,
  onEdit,
  onDelete,
  onOpenDirectory,
  onCreateNew
}) => {
  const filteredProjects = projects.filter(project =>
    project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    project.product_name.toLowerCase().includes(searchTerm.toLowerCase())
  )

  // 加载状态
  if (loading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {Array.from({ length: 6 }).map((_, index) => (
          <div key={index} className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div className="h-32 bg-gray-200 animate-pulse"></div>
            <div className="p-6">
              <div className="h-6 bg-gray-200 rounded animate-pulse mb-4"></div>
              <div className="space-y-2">
                <div className="h-4 bg-gray-200 rounded animate-pulse"></div>
                <div className="h-3 bg-gray-200 rounded animate-pulse w-2/3"></div>
              </div>
            </div>
          </div>
        ))}
      </div>
    )
  }

  // 空状态
  if (filteredProjects.length === 0) {
    return (
      <div className="text-center py-12">
        <Package className="mx-auto text-gray-400 mb-4" size={64} />
        <div className="text-gray-400 mb-4">
          {searchTerm ? '没有找到匹配的项目' : '暂无项目'}
        </div>
        {!searchTerm && (
          <button
            onClick={onCreateNew}
            className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            <Plus size={16} className="mr-2" />
            创建第一个项目
          </button>
        )}
      </div>
    )
  }

  // 项目列表
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {filteredProjects.map((project) => (
        <ProjectManageCard
          key={project.id}
          project={project}
          onEdit={onEdit}
          onDelete={onDelete}
          onOpenDirectory={onOpenDirectory}
        />
      ))}
    </div>
  )
}

export default ProjectList
