// Initialize GSAP ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

// Function to create or update the background elements
function updateBackgroundElements() {
  // Remove any existing background container
  const existingContainer = document.querySelector(".background-container");
  if (existingContainer) {
    existingContainer.remove();
  }

  // Get all sections and their positions/heights
  const sections = document.querySelectorAll(".section");
  const sectionInfo = [];

  // Calculate the total document height for proper scaling
  let totalHeight = 0;

  sections.forEach((section) => {
    const rect = section.getBoundingClientRect();
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const sectionTop = rect.top + scrollTop;
    const sectionHeight = rect.height;

    sectionInfo.push({
      top: sectionTop,
      height: sectionHeight,
      gradient: section.dataset.gradient,
      id: section.id,
    });

    totalHeight += sectionHeight;
  });

  // Create a new background container
  const backgroundContainer = document.createElement("div");
  backgroundContainer.className = "background-container";
  backgroundContainer.style.height = totalHeight + "px";

  // Create background sections with correct proportional heights
  sectionInfo.forEach((info) => {
    const bgSection = document.createElement("div");
    bgSection.dataset.id = info.id;
    bgSection.style.background = info.gradient;
    bgSection.style.height = info.height + "px";
    bgSection.style.width = "100%";
    bgSection.dataset.sectionTop = info.top;
    bgSection.dataset.sectionHeight = info.height;
    backgroundContainer.appendChild(bgSection);
  });

  // Add the background container to the fixed element
  document
    .querySelector(".fixed-element-container")
    .appendChild(backgroundContainer);

  //Get body background color and set it to the first child element
  const bodyColor = getComputedStyle(document.body).backgroundColor;
  const firstBgChild = backgroundContainer.firstChild;
  console.log(bodyColor);
  if (bodyColor != "rgba(0, 0, 0, 0)" && firstBgChild) {
    firstBgChild.style.background = bodyColor;
  } else {
    // document.body.style.background = firstBgChild.style.background;
  }

  return sectionInfo;
}

function changeBackgroundColor(id, color) {
  const bgSection = document.querySelector(`[data-id="${id}"]`);
  if (bgSection) {
    console.log(`Background color changed for section ${id} to: ${color}`);
    bgSection.style.background = color;
  } else {
    console.error(`No background section found with ID ${id}`);
  }
}

// Initial creation of background elements
let sectionInfo = updateBackgroundElements();

// Update on window resize to handle dynamic content changes
window.addEventListener("resize", () => {
  sectionInfo = updateBackgroundElements();
});

const bodyObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === "attributes" && mutation.attributeName === "style") {
      sectionInfo = updateBackgroundElements();
    }
  });
});

bodyObserver.observe(document.body, {
  attributes: true,
  attributeFilter: ["style"],
  subtree: false,
});

// Set up the scroll synchronization function that works with dynamic heights
function updateBackgroundPosition() {
  const scrollY = window.scrollY;

  // Calculate the top position based on the scroll position
  gsap.set(".background-container", {
    y: -scrollY + 0,
  });
}

// Initial position
updateBackgroundPosition();

// Update on scroll
window.addEventListener("scroll", updateBackgroundPosition);

function getBackgroundColor(section) {
  const computedStyle = getComputedStyle(section);
  const backgroundColor = computedStyle
    .getPropertyValue("--background-color")
    .trim();

  if (!backgroundColor) {
    return "No background color set";
  }

  // Check if it's a gradient
  if (
    backgroundColor.includes("linear-gradient") ||
    backgroundColor.includes("radial-gradient")
  ) {
    // Extract the first color from the gradient
    const colorMatch = backgroundColor.match(
      /rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}|\w+/
    );
    return colorMatch ? colorMatch[0] : backgroundColor;
  }

  return backgroundColor;
}

// Add click event listener to main element
document.querySelector("main").addEventListener("click", function () {
  const navToggle = document.querySelector("#nav-toggle");
  if (navToggle && navToggle.checked) {
    navToggle.checked = false;
  }
});

// Set initial theme color for the first section immediately
const firstSection = document.querySelector(".section");
if (firstSection) {
  const initialBgColor = getBackgroundColor(firstSection);
  console.log(`Initial theme color set to: ${initialBgColor}`);
  document.querySelector("header").style.backgroundColor = initialBgColor;
  document
    .querySelector('meta[name="theme-color"]')
    .setAttribute("content", initialBgColor);
  document
    .querySelector('meta[name="apple-mobile-web-app-status-bar-style"]')
    .setAttribute("content", initialBgColor);
}

document.querySelectorAll(".section").forEach((section, i) => {
  ScrollTrigger.create({
    trigger: section,
    start: "top top", // when section hits top of viewport
    end: "bottom top", // until its bottom hits top
    onEnter: () => {
      const bgColor = getBackgroundColor(section);
      console.log(`Entered section ${i + 1} - Background: ${bgColor}`);
    },
    onEnterBack: () => {
      const bgColor = getBackgroundColor(section);
      console.log(`Back to section ${i + 1} - Background: ${bgColor}`);
    },
    onToggle: (self) => {
      if (self.isActive) {
        const bgColor = getBackgroundColor(section);
        console.log(`Section ${i + 1} is at the top - Background: ${bgColor}`);
        document.querySelector("header").style.backgroundColor = bgColor;
        document
          .querySelector('meta[name="theme-color"]')
          .setAttribute("content", bgColor);
        document
          .querySelector('meta[name="apple-mobile-web-app-status-bar-style"]')
          .setAttribute("content", bgColor);
      }
    },
  });
});