import { useRef, useState } from 'react'
import { ImagePlusIcon, Loader2Icon } from 'lucide-react'
import { adminApi } from '../../admin/adminClient'
import { useAdmin } from '../../admin/AdminContext'

type ImageFieldProps = {
  label: string
  value: string
  onSave: (url: string) => Promise<boolean>
}

/**
 * انتخاب و آپلود تصویر به MinIO — در کشوهای ویرایش استفاده می‌شود.
 * پس از آپلود موفق، URL نسبی /media/... ذخیره می‌شود.
 */
export function ImageField({ label, value, onSave }: ImageFieldProps) {
  const { runSave, isAuthenticated, isEditMode } = useAdmin()
  const inputRef = useRef<HTMLInputElement>(null)
  const [uploading, setUploading] = useState(false)

  if (!isAuthenticated || !isEditMode) return null

  const pick = async (file: File | undefined) => {
    if (!file) return
    setUploading(true)
    try {
      await runSave(async () => {
        const { url } = await adminApi.upload(file)
        const ok = await onSave(url)
        if (!ok) throw new Error('ذخیره نشد')
      })
    } finally {
      setUploading(false)
    }
  }

  return (
    <div>
      <p className="text-xs font-bold text-ivory/80">{label}</p>
      <div className="mt-2 flex items-center gap-3">
        {value ? (
          <img
            src={value}
            alt={label}
            className="h-16 w-24 border border-ivory/15 object-cover"
          />
        ) : (
          <div className="flex h-16 w-24 items-center justify-center border border-dashed border-ivory/20 text-ivory/30">
            —
          </div>
        )}
        <div className="min-w-0 flex-1">
          <button
            type="button"
            onClick={() => inputRef.current?.click()}
            disabled={uploading}
            className="flex items-center gap-2 border border-ivory/20 px-4 py-2 text-xs font-light text-ivory/80 transition-colors duration-200 hover:border-copper hover:text-copper disabled:opacity-50"
          >
            {uploading ? (
              <Loader2Icon className="h-3.5 w-3.5 animate-spin" />
            ) : (
              <ImagePlusIcon className="h-3.5 w-3.5" />
            )}
            {uploading ? 'در حال آپلود…' : 'انتخاب تصویر'}
          </button>
          {value && <p className="mt-1.5 truncate text-[10px] font-light text-ivory/35" dir="ltr">{value}</p>}
        </div>
      </div>
      <input
        ref={inputRef}
        type="file"
        accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
        className="hidden"
        onChange={(e) => {
          void pick(e.target.files?.[0])
          e.target.value = ''
        }}
      />
    </div>
  )
}