document.addEventListener("DOMContentLoaded", function () {
  // --- Select DOM elements ---
  const referralsDisplay = document.querySelector('[referals-value][if-lib="rangeslider-value-display"]');
  const monthDisplay = document.querySelector('[month-value][if-lib="rangeslider-value-display"]');
  const referralsInput = document.querySelector('[referrals] [if-lib="rangeslider-value-input"]');
  const monthInput = document.querySelector('[month-plan] [if-lib="rangeslider-value-input"]');
  const outputTexts = document.querySelectorAll(".output-text, .text-dollar");

  // --- Find SVG paths ONLY inside #semi-circle ---
  let svgPaths = Array.from(document.querySelectorAll("#semi-circle path"));

  // Reverse order so paths fill from bottom to top
  svgPaths = svgPaths.reverse();
  const totalPaths = svgPaths.length;
  console.log(`Found ${totalPaths} SVG paths in #semi-circle`);

  // --- Max slider values ---
  const maxReferrals = 100;
  const maxMonths = 60;

  let referrals = parseInt(referralsDisplay?.textContent || "0");
  let months = parseInt(monthDisplay?.textContent || "0");

  // --- Calculate how many paths to fill based on slider values ---
  function getPathsToFill() {
    const referralPercent = referrals / maxReferrals;
    const monthPercent = months / maxMonths;
    const avgPercent = (referralPercent + monthPercent) / 2;
    const pathsToFill = Math.round(avgPercent * totalPaths);
    console.log(`Referrals: ${referrals}, Months: ${months}, Paths to fill: ${pathsToFill}`);
    return pathsToFill;
  }

  // --- Update SVG gauge ---
  function updateGauge() {
    if (totalPaths === 0) {
      console.warn("No SVG paths found in #semi-circle!");
      return;
    }

    const pathsToFill = getPathsToFill();

    svgPaths.forEach((path, index) => {
      if (index < pathsToFill) {
        // Active state: purple, full opacity
        path.style.fill = "#B32BFF";
        path.style.fillOpacity = 1;
        path.style.opacity = 1;
      } else {
        // Default state: black, 0.4 opacity
        path.style.fill = "black";
        path.style.fillOpacity = 0.4;
        path.style.opacity = 0.4;
      }

      // Smooth transition for fill and opacity
      path.style.transition = "opacity 0.3s ease, fill 0.3s ease, fill-opacity 0.3s ease";
    });
  }

  // --- Calculate commission ---
  function calculateCommission() {
    return Math.round(referrals * months * 0.2);
  }

  // --- Update all displays ---
  function updateDisplay() {
    const commission = calculateCommission();
    outputTexts.forEach(el => {
      el.textContent = `$${commission.toLocaleString()}`;
    });
    updateGauge();
  }

  // --- Watch for slider value changes ---
  const observerConfig = { childList: true, subtree: true, characterData: true };

  if (referralsDisplay) {
    new MutationObserver(() => {
      const newValue = parseInt(referralsDisplay.textContent) || 0;
      if (newValue !== referrals) {
        referrals = newValue;
        console.log(`Referrals changed to: ${referrals}`);
        updateDisplay();
      }
    }).observe(referralsDisplay, observerConfig);
  }

  if (monthDisplay) {
    new MutationObserver(() => {
      const newValue = parseInt(monthDisplay.textContent) || 0;
      if (newValue !== months) {
        months = newValue;
        console.log(`Months changed to: ${months}`);
        updateDisplay();
      }
    }).observe(monthDisplay, observerConfig);
  }

  // --- Direct input listeners as backup ---
  if (referralsInput) {
    referralsInput.addEventListener("input", function () {
      referrals = parseInt(this.value) || 0;
      console.log(`Referrals input: ${referrals}`);
      updateDisplay();
    });
  }

  if (monthInput) {
    monthInput.addEventListener("input", function () {
      months = parseInt(this.value) || 0;
      console.log(`Months input: ${months}`);
      updateDisplay();
    });
  }

  // --- Initialize on load ---
  setTimeout(() => {
    updateDisplay();
  }, 100);
});