import { useRef } from 'react'
import { PhotoIcon, XMarkIcon } from '@heroicons/react/24/outline'
import CoverImage from '~/components/CoverImage'

interface CoverImagePickerProps {
  previewUrl: string | null
  imageDid?: string
  imageCid?: string
  uploading: boolean
  error: string | null
  onSelect: (file: File) => void
  onRemove: () => void
}

export default function CoverImagePicker({
  previewUrl,
  imageDid,
  imageCid,
  uploading,
  error,
  onSelect,
  onRemove,
}: CoverImagePickerProps) {
  const inputRef = useRef<HTMLInputElement>(null)

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    e.target.value = ''
    if (!file) return
    if (!file.type.startsWith('image/')) return
    onSelect(file)
  }

  const hasImage = previewUrl || (imageDid && imageCid)

  return (
    <div className="space-y-1">
      {hasImage ? (
        <div className="relative rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700">
          {previewUrl ? (
            <img src={previewUrl} alt="Cover" className="max-h-64 w-auto mx-auto block" />
          ) : (
            <CoverImage did={imageDid!} cid={imageCid!} className="max-h-64 w-auto mx-auto block" alt="Cover" />
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent" />
          <div className="absolute bottom-0 right-0 flex gap-2 p-2">
            <button
              type="button"
              onClick={() => inputRef.current?.click()}
              disabled={uploading}
              className="rounded-md bg-white/90 dark:bg-stone-900/90 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-stone-200 hover:bg-white dark:hover:bg-stone-900 disabled:opacity-50 transition-colors shadow-sm"
            >
              Change
            </button>
            <button
              type="button"
              onClick={onRemove}
              disabled={uploading}
              className="rounded-md bg-white/90 dark:bg-stone-900/90 p-1.5 text-red-600 dark:text-red-400 hover:bg-white dark:hover:bg-stone-900 disabled:opacity-50 transition-colors shadow-sm"
              aria-label="Remove cover image"
            >
              <XMarkIcon className="size-4" />
            </button>
          </div>
          {uploading && (
            <div className="absolute inset-0 flex items-center justify-center bg-black/40">
              <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
            </div>
          )}
        </div>
      ) : (
        <button
          type="button"
          onClick={() => inputRef.current?.click()}
          disabled={uploading}
          className="w-full rounded-lg border border-dashed border-stone-300 dark:border-stone-600 bg-stone-50 dark:bg-stone-800/50 flex items-center justify-center gap-2 h-14 text-sm text-stone-500 dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-800 hover:border-stone-400 dark:hover:border-stone-500 disabled:opacity-50 transition-colors"
        >
          {uploading ? (
            <div className="w-4 h-4 border-2 border-stone-400 border-t-transparent rounded-full animate-spin" />
          ) : (
            <PhotoIcon className="size-4" />
          )}
          <span>{uploading ? 'Uploading…' : 'Add cover image'}</span>
        </button>
      )}
      {error && <p className="text-sm text-red-500">{error}</p>}
      <input
        ref={inputRef}
        type="file"
        accept="image/*"
        className="hidden"
        onChange={handleChange}
      />
    </div>
  )
}
