import React from 'react'
import { Plus, User } from 'lucide-react'
import { Model } from '../services/modelService'
import ModelCard from './ModelCard'

interface ModelListProps {
  models: Model[]
  loading: boolean
  searchTerm: string
  onEdit: (model: Model) => void
  onDelete: (modelId: string) => void
  onCreateNew: () => void
}

const ModelList: React.FC<ModelListProps> = ({
  models,
  loading,
  searchTerm,
  onEdit,
  onDelete,
  onCreateNew
}) => {
  const filteredModels = models.filter(model =>
    model.model_number.toLowerCase().includes(searchTerm.toLowerCase())
  )

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

  // 空状态
  if (filteredModels.length === 0) {
    return (
      <div className="text-center py-12">
        <User 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 xl:grid-cols-4 gap-6">
      {filteredModels.map((model) => (
        <ModelCard
          key={model.id}
          model={model}
          onEdit={onEdit}
          onDelete={onDelete}
        />
      ))}
    </div>
  )
}

export default ModelList
