import { useRef, useState } from "react";
import Swal from 'sweetalert2';
import IconUpload from "./Icon/IconUpload";
import IconTrash from "./Icon/IconTrash";

interface Props {
  images: string[];
  setImages: (imgs: string[]) => void;
  maxSizeKB?: number; // e.g. 500 = 500KB
  accept?: string; // e.g. "image/*"
}

const MultiImageUpload = ({
  images,
  setImages,
  maxSizeKB = 500,
  accept = "image/*",
}: Props) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [isDragging, setIsDragging] = useState(false);

  const validateFile = (file: File) => {
    const sizeKB = file.size / 1024;
    if (sizeKB > maxSizeKB) {
      Swal.fire({
          icon: 'error',
          title: `File too large. Max allowed is ${maxSizeKB}KB`,
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000,
          padding: '10px 20px',
      });
      return false;
    }
    return true;
  };

  const handleFiles = (files: FileList | File[]) => {
    const arr = Array.from(files);

    const urls = arr
      .filter(validateFile)
      .map((file) => URL.createObjectURL(file));

    setImages([...images, ...urls]);
  };

  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(false);

    if (e.dataTransfer.files) {
      handleFiles(e.dataTransfer.files);
    }
  };

  const removeImage = (index: number) => {
    const updated = [...images];
    updated.splice(index, 1);
    setImages(updated);
  };

  return (
    <div className="">
      <label className="text-sm font-medium text-gray-800">
        Product Gallery
      </label>

      {/* DROPZONE */}
      <div
        onClick={() => inputRef.current?.click()}
        onDragOver={(e) => {
          e.preventDefault();
          setIsDragging(true);
        }}
        onDragLeave={() => setIsDragging(false)}
        onDrop={onDrop}
        className={`w-full mt-2 border-2 border-dashed rounded-lg p-6 cursor-pointer transition
          flex flex-col items-center justify-center
          ${isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300"}
        `}
      >
        <IconUpload />

        <p className="mt-2 text-sm text-center text-gray-600">
          Drag & drop images here or click to upload
        </p>

        <p className="text-xs text-gray-400 mt-1">
          Max file size: {maxSizeKB}KB • JPG, PNG, WEBP
        </p>
      </div>

      {/* PREVIEW GRID */}
      {images.length > 0 && (
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-4">
          {images.map((img, i) => (
            <div key={i} className="relative group">
              <img
                src={img}
                className="w-20 h-20 object-cover rounded-md border"
              />

              <button
                onClick={() => removeImage(i)}
                className="absolute top-1 right-1 bg-red-500 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition"
              >
                <IconTrash />
              </button>
            </div>
          ))}
        </div>
      )}

      {/* FILE INPUT */}
      <input
        ref={inputRef}
        type="file"
        multiple
        accept={accept}
        className="hidden"
        onChange={(e) => {
          if (e.target.files) handleFiles(e.target.files);
        }}
      />
    </div>
  );
};

export default MultiImageUpload;