import { GetGallery } from "@/utils";
import { UploadCloud } from "lucide-react";
import React, { useEffect, useRef, useState } from "react";
import { BsTrash3Fill } from "react-icons/bs";

interface InputImgProps {
  onInputEvent?: any;
  defaultImg?: any;
  typeFile?: string | undefined;
  onRemoveFile?: Function;
  isImportScreen?: boolean;
}
type ImgItem = {
  id: string | number;
  src: string;
  name?: string;
};

const InputMultipleImg: React.FC<InputImgProps> = ({
  onInputEvent,
  typeFile = null,
  defaultImg,
  onRemoveFile,
}) => {
  const [preview, setPreview] = useState<ImgItem | null>(null);
  const [images, setImages] = useState<ImgItem[]>([]);
  const [hoveredId, setHoveredId] = useState<any>(null);
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const { openGallery, setGallery } = GetGallery();
  useEffect(() => {
    if (defaultImg && Array.isArray(defaultImg)) {
      const formattedImages: ImgItem[] = defaultImg.map((imgBase64) => {
        const hasMime = imgBase64.startsWith("data:image");
        const src = hasMime ? imgBase64 : `data:image/jpeg;base64,${imgBase64}`;

        return {
          id: src, // ← base64 como id (ou src diretamente)
          src,
        };
      });
      setImages(formattedImages);
    }
  }, [defaultImg]);

  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape" && preview) setPreview(null);
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [preview]);

  const handleReadImage = (file: File) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      const newImage = {
        id: Date.now() + Math.random(),
        src: reader.result as string,
      };
      setImages((prev) => [...prev, newImage]);
    };
    reader.readAsDataURL(file);
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const target = e.target;
    if (target.files && target.files.length > 0) {
      Array.from(target.files).forEach(handleReadImage);
    }
    target.value = ""; // necessário para permitir reenvio do mesmo arquivo
  };

  const handleDeleteImage = (id: string | number) => {
    setImages((prev) => prev.filter((img) => img.id !== id));
    if (onRemoveFile) onRemoveFile(id);
  };

  const handleAddMoreClick = () => {
    if (images.length > 0) {
      fileInputRef.current?.click();
    }
  };
  function renderDragFilesArea() {
    return (
      <div className="drag-file-area" onClick={handleAddMoreClick}>
        <label className="label">
          <span className="browse-files">
            <div className="flex justify-center">
              <UploadCloud height={60} className="w-9" />
            </div>
            <p className="dynamic-message text-lg">
              Arraste e solte qualquer arquivo aqui
            </p>
            ou{" "}
            <input
              id="fileInput"
              type="file"
              multiple={true}
              onChange={handleFileChange}
              className="default-file-input w-[300px]"
              accept={typeFile != null ? typeFile : "image/*"}
              onInput={onInputEvent}
            />
            <span className="browse-files-text">abra arquivos </span>
            <span>do computador</span>
          </span>
        </label>
      </div>
    );
  }
  return (
    <div className="flex flex-col items-center justify-center w-full gap-4">
      <label
        htmlFor="dropzone-file"
        className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
      >
        <div className="flex flex-col items-center justify-center pt-5 pb-6">
          <input
            ref={fileInputRef}
            type="file"
            multiple
            onChange={handleFileChange}
            className="hidden"
            accept={typeFile != null ? typeFile : "image/*"}
            onInput={onInputEvent}
          />

          {images.length > 0 ? (
            <div className="flex gap-4 overflow-x-auto max-w-full py-2 px-1">
              {images.map((image, index) => (
                <figure
                  key={image.id}
                  className="relative overflow-hidden p-2 shrink-0"
                  onMouseEnter={() => setHoveredId(image.id)}
                  onMouseLeave={() => setHoveredId(null)}
                  onClick={() => {
                    openGallery(index);
                    setGallery(
                      images.map((img) => ({
                        src: img.src,
                        name: img.name || `imagem-${index + 1}.jpg`,
                        cover: true,
                      }))
                    );
                  }}
                >
                  <img
                    src={image.src}
                    alt="Imagem selecionada"
                    className={`w-40 h-40 object-contain rounded ${
                      hoveredId === image.id ? "brightness-50" : ""
                    }`}
                  />
                  {hoveredId === image.id && (
                    <BsTrash3Fill
                      className="absolute top-2 right-2 text-danger z-10 cursor-pointer"
                      onClick={(e: any) => {
                        e.stopPropagation();
                        handleDeleteImage(image.id);
                      }}
                      size={24}
                    />
                  )}
                </figure>
              ))}
            </div>
          ) : (
            renderDragFilesArea()
          )}

          {images.length > 0 && (
            <button
              type="button"
              className="mt-4 px-4 py-2 text-white bg-blue-600 bg-primary rounded"
              onClick={handleAddMoreClick}
            >
              Adicionar mais imagens
            </button>
          )}
        </div>
      </label>
    </div>
  );
};

export default InputMultipleImg;