'use client'

import { useRef } from 'react'
import Image from 'next/image'
import { Plus } from 'lucide-react'
import {
  dropZoneActiveClass,
  dropZoneIdleClass,
  fieldHintClass,
  fieldLabelClass,
  uploadAreaButtonClass,
  uploadAreaEmptyButtonClass,
  uploadAreaTileClass,
} from './upload-field-styles'

interface DisplayImageUploadProps {
  displayImageUrl: string
  isDisplayImageDragging: boolean
  displayImageDropZoneRef: React.RefObject<HTMLDivElement>
  disabled?: boolean
  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,
  disabled = false,
  onDisplayImageChange,
  onDisplayImageDragEnter,
  onDisplayImageDragLeave,
  onDisplayImageDragOver,
  onDisplayImageDrop,
  materialType = '',
}: DisplayImageUploadProps) {
  const inputRef = useRef<HTMLInputElement>(null)
  const isBrandVI = materialType === '品牌VI灵感'

  return (
    <div>
      <label className={fieldLabelClass}>{isBrandVI ? '展示图片（可选）' : '详情页展示图片 *'}</label>
      <div
        ref={displayImageDropZoneRef}
        aria-disabled={disabled}
        className={`${displayImageUrl ? 'flex flex-wrap items-center gap-3 p-3' : 'p-3'} ${disabled ? 'cursor-not-allowed opacity-60' : ''} ${isDisplayImageDragging ? dropZoneActiveClass : dropZoneIdleClass}`}
        onDragEnter={onDisplayImageDragEnter}
        onDragLeave={onDisplayImageDragLeave}
        onDragOver={onDisplayImageDragOver}
        onDrop={onDisplayImageDrop}
      >
        {displayImageUrl && (
          <div className={uploadAreaTileClass}>
            <Image src={displayImageUrl} alt="已选择的详情页展示图片" fill unoptimized className="object-cover" />
          </div>
        )}
        <input ref={inputRef} type="file" accept="image/*" onChange={onDisplayImageChange} className="hidden" disabled={disabled} />
        <button type="button" onClick={() => inputRef.current?.click()} className={displayImageUrl ? uploadAreaButtonClass : uploadAreaEmptyButtonClass} disabled={disabled}>
          <Plus className="h-5 w-5" aria-hidden="true" />
          {displayImageUrl ? '更换展示图片' : '选择展示图片'}
        </button>
      </div>
      <p className={`mt-1.5 ${fieldHintClass}`}>
        {isBrandVI ? '不上传时直接显示 PDF 预览' : '支持拖入图片 · 原图会自动压缩，高图会自动切片'}
      </p>
    </div>
  )
}