'use client'

import { useState, useRef, useCallback } from 'react'
import { Upload, X, ImageIcon, Loader2, CheckCircle2 } from 'lucide-react'

type Props = {
  name?: string
  defaultValue?: string
  onChange?: (url: string) => void
}

export function ImageUploader({ name = 'imageUrl', defaultValue = '', onChange }: Props) {
  const [preview, setPreview] = useState<string>(defaultValue)
  const [uploading, setUploading] = useState(false)
  const [error, setError] = useState<string>('')
  const [dragOver, setDragOver] = useState(false)
  const [uploadedUrl, setUploadedUrl] = useState<string>(defaultValue)
  const inputRef = useRef<HTMLInputElement>(null)

  const handleFile = useCallback(async (file: File) => {
    if (!file) return
    setError('')
    setUploading(true)

    // Show local preview immediately
    const reader = new FileReader()
    reader.onload = (e) => setPreview(e.target?.result as string)
    reader.readAsDataURL(file)

    // Upload to server
    const fd = new FormData()
    fd.append('file', file)

    try {
      const res = await fetch('/api/upload', { method: 'POST', body: fd })
      const data = await res.json()
      if (!res.ok) throw new Error(data.error || 'Upload failed')
      setUploadedUrl(data.url)
      onChange?.(data.url)
    } catch (err: any) {
      setError(err.message)
      setPreview('')
      setUploadedUrl('')
    } finally {
      setUploading(false)
    }
  }, [onChange])

  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    setDragOver(false)
    const file = e.dataTransfer.files[0]
    if (file) handleFile(file)
  }, [handleFile])

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) handleFile(file)
  }

  const clearImage = () => {
    setPreview('')
    setUploadedUrl('')
    setError('')
    if (inputRef.current) inputRef.current.value = ''
    onChange?.('')
  }

  return (
    <div className="space-y-2">
      {/* Hidden input carrying the final URL for form submission */}
      <input type="hidden" name={name} value={uploadedUrl} />

      {preview ? (
        // Preview state
        <div className="relative rounded-xl overflow-hidden border border-border bg-muted/20 group">
          <img
            src={preview}
            alt="Product preview"
            className="w-full h-48 object-contain bg-muted/30"
          />
          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all flex items-center justify-center">
            <div className="opacity-0 group-hover:opacity-100 transition-opacity flex gap-2">
              <button
                type="button"
                onClick={() => inputRef.current?.click()}
                className="h-9 px-3 rounded-lg bg-white text-sm font-medium flex items-center gap-2 hover:bg-gray-100 transition-colors"
              >
                <Upload className="w-4 h-4" />
                Change
              </button>
              <button
                type="button"
                onClick={clearImage}
                className="h-9 w-9 rounded-lg bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition-colors"
              >
                <X className="w-4 h-4" />
              </button>
            </div>
          </div>
          {uploading && (
            <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
              <Loader2 className="w-8 h-8 text-white animate-spin" />
            </div>
          )}
          {uploadedUrl && !uploading && (
            <div className="absolute top-2 right-2">
              <div className="bg-emerald-500 text-white rounded-full p-1">
                <CheckCircle2 className="w-4 h-4" />
              </div>
            </div>
          )}
        </div>
      ) : (
        // Drop zone
        <div
          onDrop={handleDrop}
          onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
          onDragLeave={() => setDragOver(false)}
          onClick={() => inputRef.current?.click()}
          className={`relative flex flex-col items-center justify-center h-40 rounded-xl border-2 border-dashed cursor-pointer transition-all ${
            dragOver
              ? 'border-primary bg-primary/5 scale-[1.01]'
              : 'border-border hover:border-primary/50 hover:bg-muted/50'
          }`}
        >
          {uploading ? (
            <div className="flex flex-col items-center gap-2">
              <Loader2 className="w-8 h-8 text-primary animate-spin" />
              <p className="text-sm text-muted-foreground">Uploading...</p>
            </div>
          ) : (
            <div className="flex flex-col items-center gap-3 text-center px-4">
              <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
                <ImageIcon className="w-6 h-6 text-primary" />
              </div>
              <div>
                <p className="text-sm font-medium text-foreground">
                  Drop image here, or <span className="text-primary underline">browse</span>
                </p>
                <p className="text-xs text-muted-foreground mt-1">Supports JPG, PNG, WebP · Max 5MB</p>
              </div>
            </div>
          )}
        </div>
      )}

      {error && (
        <p className="text-xs text-red-500 flex items-center gap-1.5">
          <X className="w-3.5 h-3.5" /> {error}
        </p>
      )}

      {/* Hidden file input */}
      <input
        ref={inputRef}
        type="file"
        accept="image/jpeg,image/jpg,image/png,image/webp,image/gif"
        className="hidden"
        onChange={handleInputChange}
      />
    </div>
  )
}