'use client'

import Image from 'next/image'
import { cn } from '@/lib/utils'
import { IconButton } from '@/components/ui/button'

interface ImageItem {
  id: string
  url: string
  file?: File
  type: 'upload' | 'generated'
}

interface ImagePreviewProps {
  images: ImageItem[]
  selectedImageUrl?: string
  onSelect?: (image: ImageItem) => void
  onDelete?: (imageId: string) => void
  className?: string
}

export default function ImagePreview({
  images,
  selectedImageUrl,
  onSelect,
  onDelete,
  className,
}: ImagePreviewProps) {
  if (images.length === 0) {
    return null
  }

  return (
    <div className={cn('w-full', className)}>
      <div className="grid grid-cols-3 gap-4">
        {images.map((image) => (
          <div
            key={image.id}
            className={cn(
              'group relative aspect-square cursor-pointer overflow-hidden rounded-lg border-2 transition-all',
              selectedImageUrl === image.url
                ? 'border-primary-variant-normal ring-primary-variant-normal ring-opacity-20 ring-2'
                : 'border-outline-normal hover:border-outline-hover'
            )}
            onClick={() => onSelect?.(image)}
          >
            {/* 图片 */}
            <Image
              src={image.url}
              alt="Character image"
              fill
              className="object-cover"
              sizes="(max-width: 768px) 33vw, 200px"
            />

            {/* 选中状态指示器 */}
            {selectedImageUrl === image.url && (
              <div className="absolute top-2 left-2">
                <div className="bg-primary-variant-normal flex h-6 w-6 items-center justify-center rounded-full">
                  <i className="iconfont icon-check text-txt-on-primary text-xs" />
                </div>
              </div>
            )}

            {/* 类型标签 */}
            <div className="absolute top-2 right-2">
              <div
                className={cn(
                  'rounded px-2 py-1 text-xs font-medium',
                  image.type === 'generated' ? 'bg-purple-500 text-white' : 'bg-blue-500 text-white'
                )}
              >
                {image.type === 'generated' ? 'AI' : 'Upload'}
              </div>
            </div>

            {/* 悬浮操作按钮 */}
            <div className="bg-opacity-0 group-hover:bg-opacity-30 absolute inset-0 flex items-center justify-center bg-black opacity-0 transition-all group-hover:opacity-100">
              <div className="flex gap-2">
                {/* 删除按钮 */}
                {onDelete && (
                  <IconButton
                    size="small"
                    variant="ghost"
                    onClick={(e) => {
                      e.stopPropagation()
                      onDelete(image.id)
                    }}
                    className="bg-opacity-50 hover:bg-opacity-70 bg-black text-white"
                  >
                    <i className="iconfont icon-delete" />
                  </IconButton>
                )}

                {/* 预览按钮 */}
                <IconButton
                  size="small"
                  variant="ghost"
                  onClick={(e) => {
                    e.stopPropagation()
                    // 可以实现放大预览功能
                    window.open(image.url, '_blank')
                  }}
                  className="bg-opacity-50 hover:bg-opacity-70 bg-black text-white"
                >
                  <i className="iconfont icon-eye" />
                </IconButton>
              </div>
            </div>

            {/* 文件信息 */}
            {image.file && (
              <div className="bg-opacity-50 absolute right-0 bottom-0 left-0 bg-black p-2 text-white">
                <p className="truncate text-xs">{image.file.name}</p>
                <p className="text-xs opacity-70">{(image.file.size / 1024 / 1024).toFixed(1)}MB</p>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* 图片数量和选中状态 */}
      <div className="text-txt-secondary-normal txt-body-s mt-4 flex items-center justify-between">
        <p>total {images.length} picture</p>
        {selectedImageUrl && <p>Main image selected</p>}
      </div>
    </div>
  )
}
