content.js

const style = document.createElement("style");
style.textContent = `
  .extension {
    font-family: 'Macan', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0 32px;
  }

  .extension-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 16px;
    background-color: #f5f5f5;
    border-radius: 8px;
    gap: 16px;
    margin-bottom: 16px;
  }

  .extension-card {
    border: 1px solid #0b0b0b1e;
    border-radius: 8px;
    padding: 16px;
    flex: 1;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .extension-card-content {
    flex-grow: 1;
  }

  .extension-card-title {
    font-size: 14px;
    font-weight: medium;
    color: #737373;
    margin-bottom: 8px;
  }

  .extension-card-value {
    font-size: 20px;
    font-weight: 700;
    color: #404145;
    margin: 0;
  }

  .extension-card-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 16px;
  }

  .extension-card-indicator.low { background-color: #ff3b30; }
  .extension-card-indicator.medium { background-color: #ffcc00; }
  .extension-card-indicator.high { background-color: #34c759; }


  #startBtn {
    background-color: #1dbf73;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  #startBtn:hover {
    background-color: #19a463;
  }

  @media (max-width: 768px) {
    .card { width: calc(33.33% - 10px); }
  }

  @media (max-width: 480px) {
    .card { width: calc(50% - 10px); }
  }
`;

document.head.appendChild(style);

const topbar = document.querySelector("#topbar");
const results = parseFloat(
  document
    .querySelector(".number-of-results.tbody-5")
    .textContent.replace(",", "")
);
const currency =
  document
    .querySelector('span[class*="text-bold"] span')
    ?.textContent.replace(/[\d,.\s]/g, "") || "$";

function createStartButton() {
  const btnStart = document.createElement("div");
  btnStart.style.cssText =
    "display: flex; justify-content: center; margin-top: 15px";

  const logoUrl = chrome.runtime.getURL("./assets/analyse.png");
  btnStart.innerHTML = `
    <button id="startBtn" style="padding: 5px 30px; background-color: #f4eff0; border: 1px solid #dfd1d4; border-radius: 8px; cursor: pointer;">
      <img src="${logoUrl}" alt="logo" />
    </button>
  `;

  btnStart.addEventListener("click", () => {
    App();
    btnStart.style.display = "none";
  });

  topbar.appendChild(btnStart);
}

function App() {
  const gigs = document.querySelectorAll(
    ".gig-card-layout:not(.gig_listings-package)"
  );
  const pageData = [];
  const gigsToFetch = [];

  gigs.forEach((element) => {
    const ratingCount =
      parseInt(
        element
          .querySelector(".rating-count-number")
          ?.innerText.replace("k", "000")
      ) || 0;
    const price =
      parseInt(
        element
          .querySelector('span[class*="text-bold"] span')
          ?.innerText.replace(",", "")
          .match(/\d+/)?.[0]
      ) || 0;

    if (ratingCount > 10) {
      gigsToFetch.push(element);
    }

    pageData.push({ ratingCountNumber: ratingCount, prix: price });
  });

  const { totalReviews, totalPrice, totalGigs } = pageData.reduce(
    (acc, { ratingCountNumber, prix }) => ({
      totalReviews: acc.totalReviews + ratingCountNumber,
      totalPrice: acc.totalPrice + prix,
      totalGigs: acc.totalGigs + 1,
    }),
    { totalReviews: 0, totalPrice: 0, totalGigs: 0 }
  );

  addExtensionDiv(results, totalReviews, totalGigs, totalPrice);
  Fetch(gigsToFetch);

  hideDoubleCardLayouts();
}

function addExtensionDiv(results, totalReviews, totalGigs, totalPrice) {
  const extension = document.createElement("div");
  extension.classList.add("extension");
  extension.classList.add("layout-row");

  const avgPrice = Math.round(totalPrice / totalGigs / 5) * 5;
  const avgReviews = Math.round(totalReviews / totalGigs);

  extension.innerHTML = `
    <div class="extension-container">
      ${createExtensionCard(
        "Total Results",
        results,
        getIndicatorClass(results, 1000, 5000, true)
      )}
      ${createExtensionCard(
        "Total Active Orders",
        "Loading...",
        "",
        "totalActiveOrders",
        "totalActiveOrdersIndicator"
      )}
      ${createExtensionCard(
        "Total Reviews",
        totalReviews,
        getIndicatorClass(totalReviews, 1000, 10000)
      )}
      ${createExtensionCard(
        "Avg Reviews",
        avgReviews,
        getIndicatorClass(avgReviews, 10, 100)
      )}
      ${createExtensionCard(
        "Avg Starting Price",
        `${currency}${avgPrice}`,
        getIndicatorClass(avgPrice, 20, 100)
      )}
    </div>
  `;

  topbar.insertAdjacentElement("afterend", extension);
}

function createExtensionCard(
  title,
  value,
  indicatorClass,
  valueId = "",
  indicatorId = ""
) {
  return `
    <div class="extension-card">
      <div class="extension-card-content">
        <h3 class="extension-card-title">${title}</h3>
        <p class="extension-card-value" ${
          valueId ? `id="${valueId}"` : ""
        }>${value.toLocaleString()}</p>
      </div>
      <div class="extension-card-indicator ${indicatorClass}" ${
    indicatorId ? `id="${indicatorId}"` : ""
  }></div>
    </div>
  `;
}

function getIndicatorClass(
  value,
  lowThreshold,
  highThreshold,
  isReversed = false
) {
  if (isReversed) {
    return value < lowThreshold
      ? "high"
      : value > highThreshold
      ? "low"
      : "medium";
  }
  return value < lowThreshold
    ? "low"
    : value > highThreshold
    ? "high"
    : "medium";
}

async function Fetch(gigsToFetch) {
  let totalOrdersInQueue = 0;

  const fetchGigData = async (gig) => {
    const link = gig.querySelector("a");
    if (!link) {
      console.warn("No link found for gig", gig);
      return null;
    }

    const href = link.getAttribute("href").split("?")[0];

    try {
      const response = await fetch("https://www.fiverr.com/" + href);
      const html = await response.text();
      const parser = new DOMParser();
      const script = parser
        .parseFromString(html, "text/html")
        .querySelector("script#perseus-initial-props");

      if (!script) {
        console.warn("No script#perseus-initial-props found for", href);
        return null;
      }

      const data = JSON.parse(script.textContent);

      const ordersInQueue = data.overview.gig.ordersInQueue || 0;
      updateGigUI(gig, ordersInQueue);
      totalOrdersInQueue += ordersInQueue;

      return { ordersInQueue };
    } catch (error) {
      console.error("Error fetching gig data:", error, "for URL:", href);
      return null;
    }
  };

  const results = await Promise.all(gigsToFetch.map(fetchGigData));
  const validResults = results.filter((result) => result !== null);
  updateUI(totalOrdersInQueue);
}

function updateGigUI(gig, ordersInQueue) {
  if (ordersInQueue === 0) {
    gig.style.display = "none";
    return;
  }

  const ordersInQueueElement = document.createElement("span");
  ordersInQueueElement.id = "active-orders";
  ordersInQueueElement.classList.add("text-bold", "co-grey-1200");
  ordersInQueueElement.innerHTML = `
    <img width="15" height="15" src="${chrome.runtime.getURL(
      "assets/shopping-cart--v1.png"
    )}" alt="shopping-cart"/> ${ordersInQueue}
  `;

  const gigDiv =
    gig.querySelector(".m-t-8.flex") || gig.querySelector(".flex-between");
  if (gigDiv) {
    gigDiv.style.cssText = "display: flex; justify-content: space-between;";
    gigDiv.appendChild(ordersInQueueElement);
  } else {
    console.warn("Could not find appropriate div to append orders in queue");
  }
}

function updateUI(totalOrdersInQueue) {
  document.getElementById("totalActiveOrders").textContent =
    totalOrdersInQueue.toLocaleString();
  document.getElementById(
    "totalActiveOrdersIndicator"
  ).className = `extension-card-indicator ${getIndicatorClass(
    totalOrdersInQueue,
    10,
    50
  )}`;

  const gigs = Array.from(document.querySelectorAll(".gig-card-layout"));
  gigs.forEach((gig) => {
    if (!gig.querySelector('[id^="active-orders"]')) {
      gig.style.display = "none";
    }
  });

  gigs.sort((a, b) => {
    const getOrders = (gig) =>
      parseInt(
        gig
          .querySelector('[id^="active-orders"]')
          ?.textContent.match(/\d+/)?.[0] || "0"
      );
    return getOrders(b) - getOrders(a);
  });

  const container = document.querySelector(".gig_listings-package");
  if (container) {
    gigs.forEach((gig) => container.appendChild(gig));
  } else {
    console.warn("Gig container not found");
  }
}

function hideDoubleCardLayouts() {
  const doubleCardLayouts = document.querySelectorAll(".double-card-layout");
  doubleCardLayouts.forEach((div) => {
    div.style.display = "none";
  });
}

createStartButton();