console.log("pricing-tiers-loaded");
const apiPricingKey = "your_api_key_here";
const apiPricingUrl = "https://api.medspacircle.com/api/v1/"; //update
const remotePricingCss = "https://api.medspacircle.com/embed/1/style.css"; //update

const targetPricingDiv = document.getElementById("MCPricingLoader");

const linkPricingUrl = `https://go.medspacircle.com/onboarding/`; //update

//load remote stylesheet
function loadRemoteStylesheet(url) {
  const linkElement = document.createElement("link");
  linkElement.rel = "stylesheet";
  linkElement.href = url;
  document.head.appendChild(linkElement);
}
function loadGoogleFont(fontFamily) {
  const linkElement = document.createElement("link");
  linkElement.rel = "stylesheet";
  linkElement.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
    fontFamily,
  )}`;
  document.head.appendChild(linkElement);
}

//add bootstrap 5 if has not already loaded
// Function to check if Bootstrap is already loaded
// function isBootstrapLoaded() {
//   return Array.from(document.styleSheets).some(
//     sheet => sheet.href && sheet.href.indexOf('bootstrap') !== -1
//   );
// }

// // Function to add Bootstrap CSS if not already loaded
// function loadBootstrapCSS() {
//   if (!isBootstrapLoaded()) {
//     const bootstraplink='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css';
//     loadRemoteStylesheet(bootstraplink);
//   }
// }
// loadBootstrapCSS();

function loadScript(url, callback) {
  var script = document.createElement("script");
  script.type = "text/javascript";

  if (script.readyState) {
    // IE
    script.onreadystatechange = function () {
      if (script.readyState === "loaded" || script.readyState === "complete") {
        script.onreadystatechange = null;
        if (callback) {
          callback();
        }
      }
    };
  } else {
    // Others
    script.onload = function () {
      if (callback) {
        callback();
      }
    };
  }

  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Create a <style> element
const styleElement = document.createElement("style");

// Define the CSS rules as a string
const cssRules = `
  #MCPricingLoader {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 0 16px;
  }

  #MCPricingLoader .mc-pt-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -8px;
  }

  #MCPricingLoader .mc-pt-col {
    box-sizing: border-box;
    padding: 0 8px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  @media (min-width: 768px) {
    #MCPricingLoader .mc-pt-col {
      max-width: none;
      width: 33.3333%;
    }
  }

  #MCPricingLoader .mc-pt-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  #MCPricingLoader .mc-pt-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    color: #0f172a;
  }

  #MCPricingLoader .mc-pt-desc {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
  }

  #MCPricingLoader .mc-pt-price-wrap {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin: 16px 0;
    gap: 4px;
  }

  #MCPricingLoader .mc-pt-price-symbol {
    font-size: 1.75rem;
    font-weight: 700;
    color: #94a3b8;
  }

  #MCPricingLoader .mc-pt-price {
    font-size: 1.75rem;
    font-weight: 900;
    color: #0f172a;
  }

  #MCPricingLoader .mc-pt-price-period {
    font-size: 0.60em;
    font-weight: 400;
    color: #64748b;
    margin-left: 4px;
  }

  #MCPricingLoader .mc-pt-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: auto;
    padding: 10px 16px;
    border-radius: 999px;
    background: #4a90b8;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  }

  #MCPricingLoader .mc-pt-btn:hover {
    background: #3a7ca8;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
  }

  #MCPricingLoader .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0;
  }

  #MCPricingLoader .loading-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #e5e7eb;
    border-top-color: #4a90b8;
    animation: mc-pt-spin 0.8s linear infinite;
  }

  #MCPricingLoader .error-message {
    color: #b91c1c;
    background: #fef2f2;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  @keyframes mc-pt-spin {
    to { transform: rotate(360deg); }
  }
`;

// Set the CSS rules as text content for the <style> element
styleElement.textContent = cssRules;

// Append the <style> element to the <head> of the document
document.head.appendChild(styleElement);

const fontFamily = "Montserrat"; // Replace this with the desired Google Font name
loadGoogleFont(fontFamily);

targetPricingDiv.innerHTML =
  '<div id="MCPricingLoaderHere"><div class="loading-container"><div class="loading-spinner"></div></div></div>';

//processing

function checkConnectivity() {
  return navigator.onLine;
}

async function processPricing() {
  if (!checkConnectivity()) {
    const targetPricingDiv2 = document.getElementById("MCPricingLoaderHere");
    targetPricingDiv2.innerHTML =
      '<div class="error-message">No internet connection. Please check your connection and try again.</div>';
    return;
  }

  try {
    const data = await fetchData(apiPricingUrl + `pricing_tiers`);
    console.log(data.data);
    const targetPricingDiv2 = document.getElementById("MCPricingLoaderHere");

    let htmlContent = '<div class="mcloader-card-list mc-pt-row">';
    let index = 0;
    let ndisplayed = 0;
    for (let i = 0; i < data.data.length; i++) {
      if (data.data[i].is_active) {
        console.log("is_active: " + data.data[i].is_active);
        console.log("slug: " + data.data[i].slug);
        console.log("slugBranch: " + slugBranch);
      }

      console.log("process " + linkPricingUrl);

      const pricing_tier_id = data.data[i].id;
      const pricing_tier_name = data.data[i].name;
      const pricing_tier_description = (data.data[i].description || '')
        .replace(/~~([\s\S]*?)~~/g, '<del>$1</del>')
        .replace(/\r\n|\r|\n/g, '<br>');
      const pricing_tier_price = data.data[i].price;

      htmlContent += `
  <div class="mc-pt-col">
    <div class="mc-pt-card">
      <div>
        <h2 class="mc-pt-title">${pricing_tier_name}</h2>
        <p class="mc-pt-desc">${pricing_tier_description}</p>
        <div class="mc-pt-price-wrap">
          <span class="mc-pt-price-symbol">$</span>
          <span class="mc-pt-price">
            ${pricing_tier_price}
            <span class="mc-pt-price-period">/ per month</span>
          </span>
        </div>
      </div>
      <a href="${linkPricingUrl}checkout/${pricing_tier_id}" class="mc-pt-btn">
        Choose Plan
      </a>
    </div>
  </div>
`;

      index++;
      ndisplayed++;
    }

    if (ndisplayed == 0) {
      htmlContent +=
        `<p class="lead">Please <a style="text-decoration:underline;" href="https://` +
        linkPricingUrl +
        `">click on this link</a> to find the available pricing tiers.</p>`;
    }

    htmlContent += "</div>";

    // Inject the generated HTML into the target div
    targetPricingDiv2.innerHTML = htmlContent;
  } catch (error) {
    console.error("Error loading branch data:", error);
    const targetPricingDiv2 = document.getElementById("MCPricingLoaderHere");
    targetPricingDiv2.innerHTML =
      '<div class="error-message">Unable to load content. Please refresh your browser.</div>';
  }
}

processPricing();

async function fetchData(url, timeout = 20000, fetchOptions = null) {
  try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => {
      controller.abort(); // Abort the fetch request if it takes longer than the timeout
    }, timeout);

    var glue = "";
    if (url.includes("?")) {
      glue = "&";
    } else {
      glue = "?";
    }

    // const response = await fetch(url+glue+'nocache=' + new Date().getTime(), fetchOptions, { signal: controller.signal });
    const response = await fetch(url, fetchOptions, {
      signal: controller.signal,
    });
    clearTimeout(timeoutId); // Clear the timeout since the request completed within the specified time

    const data = await response.json();
    // Process the data
    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error; // Rethrow the error to handle it elsewhere
  }
}

// Add a timeout to hide loading spinner if nothing happens
setTimeout(() => {
  const loadingElement = document.querySelector(".loading-container");
  if (loadingElement && loadingElement.style.display !== "none") {
    const targetPricingDiv2 = document.getElementById("MCPricingLoaderHere");
    targetPricingDiv2.innerHTML =
      '<div class="error-message">Loading timeout. Please refresh the page.</div>';
  }
}, 30000); // 30 second timeout