import { format } from 'date-fns'
import { Image, FileText, Film, Music, File, Download } from 'lucide-react'

const typeIcons = {
  image: Image,
  document: FileText,
  video: Film,
  audio: Music,
}

const formatFileSize = (bytes) => {
  if (!bytes) return '—'
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
}

export default function AssetCard({ asset, onClick }) {
  const TypeIcon = typeIcons[asset.type] || File
  const isImage = asset.type === 'image'

  return (
    <div
      onClick={() => onClick?.(asset)}
      className="bg-white rounded-xl border border-border overflow-hidden card-hover cursor-pointer group"
    >
      {/* Thumbnail */}
      <div className="aspect-square bg-surface-tertiary flex items-center justify-center overflow-hidden relative">
        {isImage && asset.url ? (
          <img
            src={asset.url}
            alt={asset.name}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
            onError={(e) => {
              e.target.style.display = 'none'
              e.target.nextSibling.style.display = 'flex'
            }}
          />
        ) : null}
        <div
          className={`flex flex-col items-center justify-center gap-2 ${isImage && asset.url ? 'hidden' : ''}`}
          style={{ display: isImage && asset.url ? 'none' : 'flex' }}
        >
          <TypeIcon className="w-10 h-10 text-text-tertiary" />
          <span className="text-xs text-text-tertiary uppercase font-medium">
            {asset.fileType || asset.type}
          </span>
        </div>
        
        {/* Hover overlay */}
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center">
          <button className="opacity-0 group-hover:opacity-100 bg-white/90 backdrop-blur-sm rounded-full p-2 shadow-lg transition-opacity">
            <Download className="w-4 h-4 text-text-primary" />
          </button>
        </div>
      </div>

      {/* Info */}
      <div className="p-3">
        <h5 className="text-sm font-medium text-text-primary truncate">{asset.name}</h5>
        <div className="flex items-center justify-between mt-1.5">
          <span className="text-xs text-text-tertiary">{formatFileSize(asset.size)}</span>
          {asset.createdAt && (
            <span className="text-xs text-text-tertiary">
              {format(new Date(asset.createdAt), 'MMM d')}
            </span>
          )}
        </div>
        {asset.tags && asset.tags.length > 0 && (
          <div className="flex flex-wrap gap-1 mt-2">
            {asset.tags.slice(0, 3).map((tag) => (
              <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded bg-surface-tertiary text-text-tertiary">
                {tag}
              </span>
            ))}
            {asset.tags.length > 3 && (
              <span className="text-[10px] px-1.5 py-0.5 text-text-tertiary">
                +{asset.tags.length - 3}
              </span>
            )}
          </div>
        )}
      </div>
    </div>
  )
}