import React from 'react'
import { TemplateCard } from './TemplateCard'
import { TemplateListItem } from './TemplateListItem'
import type { TemplateInfo } from '../../hooks/useProgressCommand'

interface TemplateGridProps {
  templates: TemplateInfo[]
  viewMode: 'grid' | 'list'
  loading: boolean
  onView: (template: TemplateInfo) => void
  onDelete: (templateId: string) => void
  formatDuration: (duration: number) => string
  formatDate: (date: string) => string
}

export const TemplateGrid: React.FC<TemplateGridProps> = ({
  templates,
  viewMode,
  loading,
  onView,
  onDelete,
  formatDuration,
  formatDate
}) => {
  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <span className="ml-2 text-gray-600">加载中...</span>
      </div>
    )
  }

  if (templates.length === 0) {
    return (
      <div className="text-center py-12">
        <div className="text-gray-400 mb-4">
          <svg className="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m-9 0h10m-10 0a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2" />
          </svg>
        </div>
        <h3 className="text-lg font-medium text-gray-900 mb-2">暂无模板</h3>
        <p className="text-gray-600">点击"批量导入"按钮开始导入模板</p>
      </div>
    )
  }

  if (viewMode === 'grid') {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {templates.map((template) => (
          <TemplateCard
            key={template.id}
            template={template}
            onView={onView}
            onDelete={onDelete}
            formatDuration={formatDuration}
            formatDate={formatDate}
          />
        ))}
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {templates.map((template) => (
        <TemplateListItem
          key={template.id}
          template={template}
          onView={onView}
          onDelete={onDelete}
          formatDuration={formatDuration}
          formatDate={formatDate}
        />
      ))}
    </div>
  )
}
