"use client";

import React, { useRef, useState } from "react";
import { cn } from "@/lib/utils";

interface UploadPropertyImagesProps {
  className?: string;
  name?: string;
  onChange?: (files: File[]) => void;
}

export default function UploadPropertyImages({
  className,
  name = "propertyImages",
  onChange,
}: UploadPropertyImagesProps) {
  const [previews, setPreviews] = useState<string[]>([]);
  const [isDragging, setIsDragging] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const handleFiles = (files: FileList | null) => {
    if (!files || files.length === 0) return;
    const fileArray = Array.from(files).filter((f) => f.type.startsWith("image/"));
    if (fileArray.length === 0) return;

    const newPreviews = fileArray.map((f) => URL.createObjectURL(f));
    setPreviews((prev) => [...prev, ...newPreviews].slice(0, 10));
    onChange?.(fileArray);
  };

  const removeImage = (index: number) => {
    setPreviews((prev) => {
      const next = prev.filter((_, i) => i !== index);
      URL.revokeObjectURL(prev[index]);
      return next;
    });
  };

  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    handleFiles(e.target.files);
    e.target.value = "";
  };

  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
    handleFiles(e.dataTransfer.files);
  };

  return (
    <div className={cn("space-y-3", className)}>
      <div
        className={cn(
          "py-6 px-4 rounded-lg border border-dashed cursor-pointer flex flex-col items-center justify-center gap-2 min-h-[120px]",
          isDragging ? "bg-[#DBEAFE] border-[#1D4ED8]" : "bg-[#EFF6FF] border-[#2B7FFF]"
        )}
        onClick={() => inputRef.current?.click()}
        onDrop={onDrop}
        onDragOver={(e) => {
          e.preventDefault();
          setIsDragging(true);
        }}
        onDragLeave={() => setIsDragging(false)}
      >
        <input
          ref={inputRef}
          type="file"
          name={name}
          accept="image/*"
          multiple
          className="hidden"
          onChange={onInputChange}
        />
        <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" />
          <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" />
        </svg>
        <div className="text-center">
          <p className="text-[#45556C] font-semibold">اضف صور مناسبة للعقار</p>
          <p className="text-[#62748E] text-sm">يرجى اختيار صورة ذات جودة عالية</p>
        </div>
      </div>
      {previews.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {previews.map((src, i) => (
            <div key={i} className="relative w-16 h-16 rounded overflow-hidden border border-[#CAD5E2]">
              <img src={src} alt="" className="w-full h-full object-cover" />
              <button
                type="button"
                onClick={() => removeImage(i)}
                className="absolute top-0.5 left-0.5 w-5 h-5 bg-red-500 text-white rounded-full text-xs flex items-center justify-center"
              >
                ×
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}