document.addEventListener("DOMContentLoaded", function () {
  const imagePreview = document.getElementById("imagePreview");
  const wrapper = document.getElementById("wrapper");
  const imageElement = document.getElementById("image");
  const stepsSlider = document.getElementById("steps");
  const hueSlider = document.getElementById("hue");
  const saturationSlider = document.getElementById("saturation");
  const brightnessSlider = document.getElementById("brightness");
  const flipToggle = document.getElementById("flip-toggle");
  const shimmerToggle = document.getElementById("shimmer-toggle");
  const baseFrequencySlider = document.getElementById("baseFrequency");
  const numOctavesSlider = document.getElementById("numOctaves");
  const scaleSlider = document.getElementById("scale");
  const downloadButton = document.getElementById("downloadButton");
  const addImageButton = document.getElementById("addImageButton");
  const uploadModal = document.getElementById("uploadModal");
  const closeModal = document.querySelector(".close");
  const dragDropArea = document.getElementById("dragDropArea");
  const fileUpload = document.getElementById("fileUpload");
  const loadFromDevice = document.getElementById("loadFromDevice");
  const imageUrlInput = document.getElementById("imageUrl");
  const loadFromUrl = document.getElementById("loadFromUrl");

  let selectedImage =
    "https://assets.lummi.ai/assets/QmYTMD4bKGJh1ZWLNDfBvFFrtLSgv2PCdqZYSTZsDtqqW7";
  const maxSteps = 64;
  const minSteps = 12;

  stepsSlider.min = minSteps;
  stepsSlider.max = maxSteps;

  function applyFractalGlassEffect() {
    const steps = stepsSlider.value;
    const hue = hueSlider.value;
    const saturation = saturationSlider.value;
    const brightness = brightnessSlider.value;
    const flipEnabled = flipToggle.checked;
    const shimmerEnabled = shimmerToggle.checked;
    const baseFrequency = baseFrequencySlider.value;
    const numOctaves = numOctavesSlider.value;
    const scale = scaleSlider.value;

    // Update the displacement filter settings
    const displacementFilter = document.querySelector("#displacementFilter feTurbulence");
    displacementFilter.setAttribute("baseFrequency", baseFrequency);

    const displacementMap = document.querySelector("#displacementFilter feDisplacementMap");
    displacementMap.setAttribute("scale", scale);

    const turbulence = document.querySelector("#displacementFilter feTurbulence");
    turbulence.setAttribute("numOctaves", numOctaves);

    wrapper.innerHTML = ""; // Clear previous cells
    const hueRotate = `hue-rotate(${hue}deg) saturate(${
      100 + parseInt(saturation)
    }%) brightness(${100 + parseInt(brightness)}%)`;

    for (let i = 0; i < steps; i++) {
      const flip = flipEnabled && i % 2 === 0 ? "scaleX(1)" : "scaleX(-1)";
      const cellWidth = (100 / steps) * (1 - (Math.abs(i - steps / 2) / (steps / 2)) * 0.2); // Narrower in the middle
      const cell = document.createElement("div");
      cell.classList.add("cell");
      cell.style.backgroundImage = `url(${selectedImage})`;
      cell.style.backgroundPosition = `${(i / steps) * 100}% 50%`;
      cell.style.transform = `${flip}`;
      cell.style.filter = hueRotate;
      cell.style.width = `${cellWidth}%`; // Dynamic width based on position

      if (shimmerEnabled) {
        const shimmer = document.createElement("div");
        shimmer.classList.add("shimmer");
        cell.appendChild(shimmer);
      }

      wrapper.appendChild(cell);
    }
  }

  stepsSlider.addEventListener("input", applyFractalGlassEffect);
  hueSlider.addEventListener("input", applyFractalGlassEffect);
  saturationSlider.addEventListener("input", applyFractalGlassEffect);
  brightnessSlider.addEventListener("input", applyFractalGlassEffect);
  flipToggle.addEventListener("change", applyFractalGlassEffect);
  shimmerToggle.addEventListener("change", applyFractalGlassEffect);
  baseFrequencySlider.addEventListener("input", applyFractalGlassEffect);
  numOctavesSlider.addEventListener("input", applyFractalGlassEffect);
  scaleSlider.addEventListener("input", applyFractalGlassEffect);

  document.querySelectorAll(".menu-image").forEach((image) => {
    image.addEventListener("click", function () {
      if (this.id !== "addImageButton") {
        selectedImage = this.src;
        imageElement.src = selectedImage;
        imageElement.style.width = "auto";
        imageElement.style.height = "auto";
        imageElement.style.maxWidth = "100%";
        imageElement.style.maxHeight = "100%";
        document.querySelectorAll(".menu-image").forEach((img) => img.classList.remove("active"));
        this.classList.add("active");
        applyFractalGlassEffect();
      }
    });
  });

  // Function to download the current image with effects applied
  downloadButton.addEventListener("click", function () {
    html2canvas(imagePreview, {
      backgroundColor: null,
      width: imagePreview.clientWidth - 16, // 8px margin on each side
      height: imagePreview.clientHeight - 16, // 8px margin on each side
      x: 8, // 8px margin on each side
      y: 8, // 8px margin on each side
    }).then((canvas) => {
      const link = document.createElement("a");
      link.href = canvas.toDataURL("image/png");
      link.download = "fractal_glass_effect.png";
      link.click();
    });
  });

  // Add image button click event
  addImageButton.addEventListener("click", function () {
    uploadModal.style.display = "block";
  });

  // Close modal event
  closeModal.addEventListener("click", function () {
    uploadModal.style.display = "none";
  });

  // Drag and drop event
  dragDropArea.addEventListener("dragover", function (event) {
    event.preventDefault();
    dragDropArea.classList.add("dragover");
  });

  dragDropArea.addEventListener("dragleave", function () {
    dragDropArea.classList.remove("dragover");
  });

  dragDropArea.addEventListener("drop", function (event) {
    event.preventDefault();
    dragDropArea.classList.remove("dragover");
    const files = event.dataTransfer.files;
    if (files.length > 0) {
      handleFileUpload(files[0]);
    }
  });

  // File upload button click event
  loadFromDevice.addEventListener("click", function () {
    fileUpload.click();
  });

  // File upload change event
  fileUpload.addEventListener("change", function (event) {
    const files = event.target.files;
    if (files.length > 0) {
      handleFileUpload(files[0]);
    }
  });

  // Load from URL button click event
  loadFromUrl.addEventListener("click", function () {
    const url = imageUrlInput.value;
    if (url) {
      addImageToMenu(url);
      uploadModal.style.display = "none";
    }
  });

  imageUrlInput.addEventListener("keypress", function (event) {
    if (event.key === "Enter") {
      const url = imageUrlInput.value;
      if (url) {
        addImageToMenu(url);
        uploadModal.style.display = "none";
      }
    }
  });

  function handleFileUpload(file) {
    const reader = new FileReader();
    reader.onload = function (event) {
      const url = event.target.result;
      addImageToMenu(url);
      uploadModal.style.display = "none";
    };
    reader.readAsDataURL(file);
  }

  function addImageToMenu(url) {
    const img = document.createElement("img");
    img.src = url;
    img.alt = "User Uploaded Image";
    img.classList.add("menu-image");
    document.querySelectorAll(".menu-image").forEach((img) => img.classList.remove("active"));
    img.classList.add("active");
    img.addEventListener("click", function () {
      selectedImage = this.src;
      imageElement.src = selectedImage;
      imageElement.style.width = "auto";
      imageElement.style.height = "auto";
      imageElement.style.maxWidth = "100%";
      imageElement.style.maxHeight = "100%";
      document.querySelectorAll(".menu-image").forEach((img) => img.classList.remove("active"));
      this.classList.add("active");
      applyFractalGlassEffect();
    });
    const imageMenu = document.querySelector(".image-menu");
    imageMenu.insertBefore(img, addImageButton.nextSibling);
    // Automatically select the newly added image
    selectedImage = url;
    imageElement.src = selectedImage;
    applyFractalGlassEffect();
  }

  applyFractalGlassEffect();
});