'use client'

import Image from 'next/image'

interface DisplayImageUploadProps {
  displayImageUrl: string
  isDisplayImageDragging: boolean
  displayImageDropZoneRef: React.RefObject<HTMLDivElement>
  onDisplayImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  onDisplayImageDragEnter: (e: React.DragEvent) => void
  onDisplayImageDragLeave: (e: React.DragEvent) => void
  onDisplayImageDragOver: (e: React.DragEvent) => void
  onDisplayImageDrop: (e: React.DragEvent) => void
  materialType?: string // 素材类型，用于显示不同的提示文字
}

export default function DisplayImageUpload({
  displayImageUrl,
  isDisplayImageDragging,
  displayImageDropZoneRef,
  onDisplayImageChange,
  onDisplayImageDragEnter,
  onDisplayImageDragLeave,
  onDisplayImageDragOver,
  onDisplayImageDrop,
  materialType = '',
}: DisplayImageUploadProps) {
  // 根据素材类型显示不同的标签和提示
  const isBrandVI = materialType === '品牌VI灵感'
  const labelText = isBrandVI ? '展示图片（可选）' : '详情页展示图片 *'
  const hintText = isBrandVI 
    ? '上传品牌VI的展示图片，用于详情页预览。如果不上传，将直接显示PDF预览。'
    : '上传详情页/详情模板的展示图片，或拖拽图片到此区域'
  
  return (
    <div>
      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
        {labelText}
      </label>
      <div
        ref={displayImageDropZoneRef}
        className={`border-2 border-dashed rounded-apple p-4 transition-colors ${
          isDisplayImageDragging
            ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
            : 'border-gray-300 dark:border-gray-600'
        }`}
        onDragEnter={onDisplayImageDragEnter}
        onDragLeave={onDisplayImageDragLeave}
        onDragOver={onDisplayImageDragOver}
        onDrop={onDisplayImageDrop}
      >
        <div className="flex items-center space-x-4">
          {displayImageUrl ? (
            <div className="relative w-32 h-32 rounded-apple overflow-hidden border-2 border-gray-200 dark:border-gray-600">
              <Image
                src={displayImageUrl}
                alt="Display"
                fill
                unoptimized
                className="object-cover"
              />
            </div>
          ) : (
            <div className="w-32 h-32 rounded-apple bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
              <svg className="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>
          )}
          <div className="flex-1">
            <input
              type="file"
              onChange={onDisplayImageChange}
              accept="image/*"
              className="hidden"
              id="displayImageInput"
            />
            <button
              type="button"
              onClick={() => document.getElementById('displayImageInput')?.click()}
              className="btn-secondary"
            >
              选择展示图片
            </button>
            <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
              {hintText}
            </p>
            {!isBrandVI && (
              <p className="text-xs text-blue-600 dark:text-blue-400 mt-1">
                💡 上传原图即可，系统会自动压缩和切片（高度超过1500px会自动切割）
              </p>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}