"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(
              "relative group aspect-square rounded-lg overflow-hidden border-2 transition-all cursor-pointer",
              selectedImageUrl === image.url
                ? "border-primary-variant-normal ring-2 ring-primary-variant-normal ring-opacity-20"
                : "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="w-6 h-6 bg-primary-variant-normal rounded-full flex items-center justify-center">
                  <i className="iconfont icon-check text-xs text-txt-on-primary" />
                </div>
              </div>
            )}

            {/* 类型标签 */}
            <div className="absolute top-2 right-2">
              <div className={cn(
                "px-2 py-1 rounded 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="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100">
              <div className="flex gap-2">
                {/* 删除按钮 */}
                {onDelete && (
                  <IconButton
                    size="small"
                    variant="ghost"
                    onClick={(e) => {
                      e.stopPropagation()
                      onDelete(image.id)
                    }}
                    className="bg-black bg-opacity-50 text-white hover:bg-opacity-70"
                  >
                    <i className="iconfont icon-delete" />
                  </IconButton>
                )}

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

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

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