"use client"
import React, { useRef, useState } from "react"
import { cn } from "@/lib/utils"
import { Button } from "../ui/button"

type UploadImageProps = {
  title: string
  className?: string
  name?: string
  onChange?: (file: File | null) => void
}
const UploadImage = ({ title, className, name="deedImage", onChange }: UploadImageProps) => {
  const [preview, setPreview] = useState<string | null>(null)
  const [isDragging, setIsDragging] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)

  const handleFiles = (file: File | null) => {
    onChange?.(file)
    if (file) {
      const url = URL.createObjectURL(file)
      setPreview(url)
    } else {
      setPreview(null)
    }
  }

  const clearFiles = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    handleFiles(null);
  }

  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0] || null
    handleFiles(file)
  }

  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
    setIsDragging(false)
    const file = e.dataTransfer.files?.[0] || null
    if (file) {
      handleFiles(file)
      if (inputRef.current) {
        const dt = new DataTransfer()
        dt.items.add(file)
        inputRef.current.files = dt.files
      }
    }
  }

  const onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
    setIsDragging(true)
  }

  const onDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
    setIsDragging(false)
  }

  return (
    <div
      className={cn(
        "py-4 px-2 rounded-lg border border-dashed cursor-pointer",
        isDragging ? "bg-[#DBEAFE] border-[#1D4ED8]" : "bg-[#EFF6FF] border-[#2B7FFF]",
        className
      )}
      onClick={() => inputRef.current?.click()}
      onDrop={onDrop}
      onDragOver={onDragOver}
      onDragLeave={onDragLeave}
    >
      <input
        ref={inputRef}
        type="file"
        name={name}
        accept="image/*"
        className="hidden"
        onChange={onInputChange}
      />

      {preview && (
        <div className="relative mb-2 w-fit flex items-center gap-3">
          <img src={preview} alt="preview" className="w-10 h-10 rounded object-cover" />
          <Button className="absolute -top-2 -left-2 w-4 h-4 p-0 cursor-pointer border border-[#CAD5E2] rounded-full" variant="ghost" onClick={clearFiles}>x</Button>
        </div>
      )}

      <div className="flex flex-col sm:flex-row items-center gap-3">
        <div className="shrink-0">
          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="#2B7FFF"/>
            <g clipPath="url(#clip0_4674_12187)">
              <path d="M24.0004 24L20.0004 20M20.0004 20L16.0004 24M20.0004 20V29M28.3904 26.39C29.3658 25.8583 30.1363 25.0169 30.5803 23.9986C31.0244 22.9804 31.1167 21.8432 30.8427 20.7667C30.5686 19.6901 29.9439 18.7355 29.0671 18.0534C28.1903 17.3714 27.1113 17.0007 26.0004 17H24.7404C24.4378 15.8292 23.8736 14.7423 23.0904 13.821C22.3072 12.8997 21.3253 12.1678 20.2185 11.6806C19.1118 11.1934 17.909 10.9634 16.7006 11.0079C15.4921 11.0524 14.3095 11.3703 13.2416 11.9377C12.1737 12.505 11.2484 13.3071 10.5351 14.2836C9.82178 15.2601 9.33914 16.3855 9.12343 17.5754C8.90772 18.7653 8.96455 19.9885 9.28966 21.1533C9.61477 22.318 10.1997 23.3939 11.0004 24.3" stroke="white" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round"/>
            </g>
            <defs>
              <clipPath id="clip0_4674_12187">
                <rect width="24" height="24" fill="white" transform="translate(8 8)"/>
              </clipPath>
            </defs>
          </svg>
        </div>
        <div className="flex-1 text-center sm:text-right">
          <div className="text-[#45556C] font-semibold text-sm sm:text-base">{title}</div>
          <p className="text-[#45556C] text-xs sm:text-sm mt-1">يرجى اختيار صورة ذات جودة عالية</p>
        </div>
      </div>
    </div>
  )
}

export default UploadImage