"use client"

import { useRef, useState } from "react"
import { ImagePlus, X, Upload } from "lucide-react"
import { MEDIA_FILE_BASE } from "@/lib/media-manager/file-names"
import { stageImage } from "@/lib/media-manager/stage"
import type { StagedImage } from "@/lib/media-manager/types"

interface ImageUploaderProps {
  value: string
  imagePublicId: string
  onChange: (url: string, publicId: string) => void
  disabled?: boolean
  getArticleSlug?: () => string
  onStageCoverImage?: (staged: StagedImage) => void
  onClearStagedCoverImage?: () => void
}

const MAX_IMAGE_SIZE_BYTES = 1 * 1024 * 1024

export function ImageUploader({
  value,
  imagePublicId: _imagePublicId,
  onChange,
  disabled = false,
  getArticleSlug,
  onStageCoverImage,
  onClearStagedCoverImage,
}: ImageUploaderProps) {
  const inputRef = useRef<HTMLInputElement>(null)
  const [dragOver, setDragOver] = useState(false)
  const [error, setError] = useState<string | null>(null)

  function handleFile(file: File) {
    setError(null)
    if (!file.type.startsWith("image/")) {
      setError("Please upload a valid image file.")
      return
    }
    const articleSlug = getArticleSlug?.().trim() ?? ""
    if (!articleSlug) {
      setError("Please enter the article slug before selecting an image.")
      return
    }
    try {
      const staged = stageImage(file, {
        maxBytes: MAX_IMAGE_SIZE_BYTES,
        fileBaseName: MEDIA_FILE_BASE.coverImage,
      })
      onStageCoverImage?.(staged)
      onChange(staged.previewUrl, "")
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to prepare image.")
    }
  }

  function handleRemove() {
    onClearStagedCoverImage?.()
    onChange("", "")
  }

  function handleDrop(e: React.DragEvent) {
    e.preventDefault()
    setDragOver(false)
    const file = e.dataTransfer.files[0]
    if (file) handleFile(file)
  }

  return (
    <div className="flex flex-col gap-1.5">
      <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
        Article Image
      </label>

      {value ? (
        <div className="relative rounded-xl overflow-hidden border border-border bg-card">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={value} alt="Article preview" className="w-full h-52 object-cover" />
          <button
            type="button"
            onClick={handleRemove}
            disabled={disabled}
            className="absolute cursor-pointer top-2 right-2 w-8 h-8 rounded-lg bg-black/60 flex items-center justify-center text-white hover:bg-black/80 transition-colors"
            aria-label="Remove image"
          >
            <X className="w-4 h-4" aria-hidden="true" />
          </button>
        </div>
      ) : (
        <div
          role="button"
          tabIndex={0}
          onClick={() => !disabled && inputRef.current?.click()}
          onKeyDown={(e) => !disabled && e.key === "Enter" && inputRef.current?.click()}
          onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
          onDragLeave={() => setDragOver(false)}
          onDrop={(e) => { if (!disabled) handleDrop(e) }}
          className="flex flex-col items-center justify-center gap-3 h-52 rounded-xl border-2 border-dashed cursor-pointer transition-all"
          style={{
            borderColor: dragOver ? "var(--brand-green)" : "var(--border)",
            background: dragOver ? "rgba(43,182,115,0.04)" : "var(--card)",
            opacity: disabled ? 0.6 : 1,
          }}
          aria-label="Upload article image"
        >
          <div className="w-12 h-12 rounded-2xl flex items-center justify-center" style={{ background: "rgba(43,182,115,0.10)" }}>
            <ImagePlus className="w-6 h-6" style={{ color: "var(--brand-green)" }} aria-hidden="true" />
          </div>
          <div className="text-center">
            <p className="text-sm font-semibold text-foreground font-sans flex items-center gap-1.5 justify-center">
              <Upload className="w-3.5 h-3.5" aria-hidden="true" />
              Click or drag to upload
            </p>
            <p className="text-xs text-muted-foreground font-sans mt-1">
              PNG, JPG, WEBP up to 1 MB — saved when you publish or save draft
            </p>
          </div>
        </div>
      )}
      {error && (
        <p className="text-xs font-sans text-red-500" role="alert">{error}</p>
      )}
      <input
        ref={inputRef}
        type="file"
        accept="image/*"
        className="sr-only"
        aria-hidden="true"
        onChange={(e) => {
          if (disabled) return
          const file = e.target.files?.[0]
          if (file) handleFile(file)
          e.target.value = ""
        }}
      />
    </div>
  )
}