popup.js

document.addEventListener("DOMContentLoaded", async () => {
  const statusEl = document.getElementById("status");
  const noKeyEl = document.getElementById("noKey");
  const errorEl = document.getElementById("error");
  const errorMsg = document.getElementById("errorMsg");
  const resultsEl = document.getElementById("results");
  const emptyEl = document.getElementById("empty");
  const urlText = document.getElementById("currentUrl");

  const show = (el) => el.classList.remove("hidden");
  const hide = (el) => el.classList.add("hidden");
  const hideAll = () => [statusEl, noKeyEl, errorEl, resultsEl, emptyEl].forEach(hide);

  // Settings button
  document.getElementById("settingsBtn").addEventListener("click", () => {
    chrome.runtime.openOptionsPage();
  });

  document.getElementById("openSettings").addEventListener("click", () => {
    chrome.runtime.openOptionsPage();
  });

  // Get current tab URL
  let currentUrl = "";
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    currentUrl = tab?.url || "";
    urlText.textContent = currentUrl || "No URL";
  } catch {
    urlText.textContent = "Unable to get URL";
  }

  if (!currentUrl || currentUrl.startsWith("chrome://") || currentUrl.startsWith("chrome-extension://")) {
    hideAll();
    show(errorEl);
    errorMsg.textContent = "Cannot detect technologies on this page.";
    return;
  }

  // Get API key
  const { apiKey } = await chrome.storage.sync.get("apiKey");

  if (!apiKey) {
    hideAll();
    show(noKeyEl);
    return;
  }

  const detect = async () => {
    hideAll();
    show(statusEl);

    try {
      const apiUrl = `https://techdetect.dapdev.tech/detect?url=${encodeURIComponent(currentUrl)}`;
      const response = await fetch(apiUrl, {
        method: "GET",
        headers: {
          "X-API-Key": apiKey,
        },
      });

      if (!response.ok) {
        throw new Error(`API returned ${response.status}: ${response.statusText}`);
      }

      const data = await response.json();
      const technologies = data.technologies || data.results || data || [];

      hideAll();

      if (!Array.isArray(technologies) || technologies.length === 0) {
        show(emptyEl);
        return;
      }

      renderResults(technologies);
      show(resultsEl);
    } catch (err) {
      hideAll();
      show(errorEl);
      errorMsg.textContent = err.message || "Failed to detect technologies.";
    }
  };

  document.getElementById("retryBtn").addEventListener("click", detect);

  detect();

  function renderResults(techs) {
    // Sort by confidence descending
    techs.sort((a, b) => (b.confidence || 0) - (a.confidence || 0));

    let html = `
      <div class="results-header">
        <h2>Detected Technologies</h2>
        <span class="results-count">${techs.length} found</span>
      </div>
    `;

    for (const tech of techs) {
      const name = tech.name || tech.technology || "Unknown";
      const version = tech.version || "";
      const confidence = Math.round(tech.confidence || 0);
      const categories = tech.categories || tech.category || [];
      const catArray = Array.isArray(categories) ? categories : [categories].filter(Boolean);

      let confClass = "high";
      if (confidence < 50) confClass = "low";
      else if (confidence < 80) confClass = "medium";

      const catHtml = catArray.map(c => `<span class="category-tag">${escapeHtml(String(c))}</span>`).join("");

      html += `
        <div class="tech-card">
          <div class="tech-name">
            ${escapeHtml(name)}
            ${version ? `<span class="tech-version">v${escapeHtml(version)}</span>` : ""}
          </div>
          ${catHtml ? `<div class="tech-categories">${catHtml}</div>` : ""}
          <div class="confidence-bar-container">
            <span class="confidence-label">Confidence</span>
            <div class="confidence-bar">
              <div class="confidence-fill confidence-${confClass}" style="width: ${confidence}%"></div>
            </div>
            <span class="confidence-value ${confClass}">${confidence}%</span>
          </div>
        </div>
      `;
    }

    resultsEl.innerHTML = html;
  }

  function escapeHtml(text) {
    const div = document.createElement("div");
    div.textContent = text;
    return div.innerHTML;
  }
});