import React from 'react'
import { Music, Upload } from 'lucide-react'
import { AudioFile } from '../services/audioService'
import AudioCard from './AudioCard'

interface AudioListProps {
  audioFiles: AudioFile[]
  loading: boolean
  searchTerm: string
  onDelete: (audioId: string) => void
  onShowChart: (audio: AudioFile) => void
  onUpload: () => void
}

const AudioList: React.FC<AudioListProps> = ({
  audioFiles,
  loading,
  searchTerm,
  onDelete,
  onShowChart,
  onUpload
}) => {
  const filteredAudioFiles = audioFiles.filter(audio =>
    audio.filename.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="p-4 bg-gray-200 animate-pulse">
              <div className="h-16 bg-gray-300 rounded"></div>
            </div>
            <div className="p-4 space-y-3">
              <div className="h-4 bg-gray-200 rounded animate-pulse"></div>
              <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3"></div>
              <div className="h-4 bg-gray-200 rounded animate-pulse w-1/2"></div>
            </div>
          </div>
        ))}
      </div>
    )
  }

  // 空状态
  if (filteredAudioFiles.length === 0) {
    return (
      <div className="text-center py-12">
        <Music className="mx-auto text-gray-400 mb-4" size={64} />
        <div className="text-gray-400 mb-4">
          {searchTerm ? '没有找到匹配的音频文件' : '暂无音频文件'}
        </div>
        {!searchTerm && (
          <button
            onClick={onUpload}
            className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            <Upload size={16} className="mr-2" />
            上传第一个音频文件
          </button>
        )}
      </div>
    )
  }

  // 音频文件列表
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {filteredAudioFiles.map((audio) => (
        <AudioCard
          key={audio.id}
          audio={audio}
          onDelete={onDelete}
          onShowChart={onShowChart}
        />
      ))}
    </div>
  )
}

export default AudioList
