import React from 'react'
import { Edit, Trash2, FolderOpen, Settings, ArrowRight } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { Project } from '../services/projectService'
import ProjectImage from './ProjectImage'

interface ProjectManageCardProps {
  project: Project
  onEdit: (project: Project) => void
  onDelete: (projectId: string) => void
  onOpenDirectory: (projectId: string) => void
}

const ProjectManageCard: React.FC<ProjectManageCardProps> = ({
  project,
  onEdit,
  onDelete,
  onOpenDirectory
}) => {
  const navigate = useNavigate()

  const handleEnterProject = () => {
    navigate(`/projects/${project.id}`)
  }
  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
      {/* 商品图片 */}
      <div
        className="h-32 bg-gray-100 overflow-hidden cursor-pointer relative group"
        onClick={handleEnterProject}
      >
        <ProjectImage
          imagePath={project.product_image}
          alt={project.product_name || project.name}
          className="w-full h-full object-cover"
        />
        {/* 悬停时显示进入提示 */}
        <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all flex items-center justify-center">
          <div className="opacity-0 group-hover:opacity-100 transition-opacity">
            <div className="bg-white/90 rounded-full p-2">
              <ArrowRight size={20} className="text-gray-800" />
            </div>
          </div>
        </div>
      </div>
      
      <div className="p-6">
        {/* 项目标题 */}
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold text-gray-900">{project.name}</h3>
          
          <div className="flex items-center space-x-2">
            <button
              onClick={handleEnterProject}
              className="p-2 text-gray-400 hover:text-purple-600 transition-colors"
              title="管理项目"
            >
              <Settings size={16} />
            </button>
            <button
              onClick={() => onOpenDirectory(project.id)}
              className="p-2 text-gray-400 hover:text-green-600 transition-colors"
              title="打开目录"
            >
              <FolderOpen size={16} />
            </button>
            <button
              onClick={() => onEdit(project)}
              className="p-2 text-gray-400 hover:text-blue-600 transition-colors"
              title="编辑"
            >
              <Edit size={16} />
            </button>
            <button
              onClick={() => onDelete(project.id)}
              className="p-2 text-gray-400 hover:text-red-600 transition-colors"
              title="删除"
            >
              <Trash2 size={16} />
            </button>
          </div>
        </div>

        {/* 项目信息 */}
        <div className="space-y-3">
          {/* 商品信息 */}
          {project.product_name && (
            <div>
              <p className="text-sm text-gray-600">商品名:</p>
              <p className="text-sm text-gray-900">{project.product_name}</p>
            </div>
          )}

          {/* 进入项目按钮 */}
          <button
            onClick={handleEnterProject}
            className="w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center space-x-2"
          >
            <Settings size={16} />
            <span>管理项目</span>
            <ArrowRight size={16} />
          </button>

          {/* 创建时间 */}
          <div className="text-xs text-gray-400 pt-2 border-t border-gray-100">
            创建于 {new Date(project.created_at).toLocaleDateString()}
          </div>
        </div>
      </div>
    </div>
  )
}

export default ProjectManageCard
