content.js

(function () {
  const BTN_ID = "lc-analyzer-fab";
  const PANEL_ID = "lc-analyzer-panel";

  function getProblemCode() {
    return new Promise((resolve) => {
      function handler(e) {
        window.removeEventListener("LC_ANALYZER_RESPONSE_CODE", handler);
        resolve(e.detail);
      }
      window.addEventListener("LC_ANALYZER_RESPONSE_CODE", handler);
      window.dispatchEvent(new CustomEvent("LC_ANALYZER_REQUEST_CODE"));
      // Fail-safe in case the page-world script never responds.
      setTimeout(() => {
        window.removeEventListener("LC_ANALYZER_RESPONSE_CODE", handler);
        resolve(null);
      }, 1500);
    });
  }

  function getProblemTitle() {
    const h1 = document.querySelector('[data-cy="question-title"], a[href*="/problems/"] + div, .text-title-large');
    if (h1 && h1.textContent) return h1.textContent.trim();
    return document.title.replace(" - LeetCode", "").trim();
  }

  function getProblemDescription() {
    const el = document.querySelector('[data-track-load="description_content"]');
    if (el) return el.innerText.trim();
    // Fallback: grab the largest text block in the left pane.
    const candidates = Array.from(document.querySelectorAll("div"))
      .filter((d) => d.innerText && d.innerText.length > 200)
      .sort((a, b) => b.innerText.length - a.innerText.length);
    return candidates[0]?.innerText.trim() || "";
  }

  function ensureButton() {
    if (document.getElementById(BTN_ID)) return;
    const btn = document.createElement("button");
    btn.id = BTN_ID;
    btn.textContent = "⚡ Analyze";
    btn.title = "Analyze current code with AI";
    btn.addEventListener("click", runAnalysis);
    document.body.appendChild(btn);
  }

  function ensurePanel() {
    let panel = document.getElementById(PANEL_ID);
    if (panel) return panel;
    panel = document.createElement("div");
    panel.id = PANEL_ID;
    panel.innerHTML = `
      <div class="lc-analyzer-header">
        <span>AI Code Analysis</span>
        <button class="lc-analyzer-close" title="Close">×</button>
      </div>
      <div class="lc-analyzer-body"></div>
    `;
    document.body.appendChild(panel);
    panel.querySelector(".lc-analyzer-close").addEventListener("click", () => {
      panel.classList.remove("lc-analyzer-open");
    });
    return panel;
  }

  function renderLoading(panel) {
    panel.querySelector(".lc-analyzer-body").innerHTML = `
      <div class="lc-analyzer-loading">Analyzing your code…</div>
    `;
  }

  function renderError(panel, message) {
    panel.querySelector(".lc-analyzer-body").innerHTML = `
      <div class="lc-analyzer-error">${escapeHtml(message)}</div>
    `;
  }

  function renderResult(panel, result) {
    const suggestions = Array.isArray(result.suggestions) ? result.suggestions : [];
    panel.querySelector(".lc-analyzer-body").innerHTML = `
      <div class="lc-analyzer-section">
        <div class="lc-analyzer-label">Time Complexity</div>
        <div class="lc-analyzer-complexity-group">
          <div class="lc-analyzer-complexity-item">
            <span class="lc-analyzer-badge badge-current">Current</span>
            <div class="lc-analyzer-value">${escapeHtml(result.time_complexity || "—")}</div>
          </div>
          <div class="lc-analyzer-complexity-item">
            <span class="lc-analyzer-badge badge-optimal">Optimal</span>
            <div class="lc-analyzer-value">${escapeHtml(result.optimal_time_complexity || "—")}</div>
          </div>
        </div>
      </div>
      <div class="lc-analyzer-section">
        <div class="lc-analyzer-label">Space Complexity</div>
        <div class="lc-analyzer-complexity-group">
          <div class="lc-analyzer-complexity-item">
            <span class="lc-analyzer-badge badge-current">Current</span>
            <div class="lc-analyzer-value">${escapeHtml(result.space_complexity || "—")}</div>
          </div>
          <div class="lc-analyzer-complexity-item">
            <span class="lc-analyzer-badge badge-optimal">Optimal</span>
            <div class="lc-analyzer-value">${escapeHtml(result.optimal_space_complexity || "—")}</div>
          </div>
        </div>
      </div>
      <div class="lc-analyzer-section">
        <div class="lc-analyzer-label">Correctness Notes</div>
        <div class="lc-analyzer-value">${escapeHtml(result.correctness_notes || "—")}</div>
      </div>
      <div class="lc-analyzer-section">
        <div class="lc-analyzer-label">Suggested Improvements</div>
        <ul class="lc-analyzer-list">
          ${suggestions.map((s) => `<li>${escapeHtml(s)}</li>`).join("") || "<li>None</li>"}
        </ul>
      </div>
      <div class="lc-analyzer-section">
        <div class="lc-analyzer-label">Cleaner Approach</div>
        <div class="lc-analyzer-value">${escapeHtml(result.cleaner_approach || "—")}</div>
      </div>
    `;
  }

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

  async function runAnalysis() {
    const panel = ensurePanel();
    panel.classList.add("lc-analyzer-open");
    renderLoading(panel);

    const codeInfo = await getProblemCode();
    if (!codeInfo || !codeInfo.code || !codeInfo.code.trim()) {
      renderError(
        panel,
        "Couldn't read your code from the editor. Make sure you've written some code and try again."
      );
      return;
    }

    const problemTitle = getProblemTitle();
    const problemDescription = getProblemDescription();

    chrome.runtime.sendMessage(
      {
        type: "ANALYZE_CODE",
        code: codeInfo.code,
        language: codeInfo.language,
        problemTitle,
        problemDescription,
      },
      (response) => {
        if (chrome.runtime.lastError) {
          renderError(panel, chrome.runtime.lastError.message);
          return;
        }
        if (!response) {
          renderError(panel, "No response from extension background worker.");
          return;
        }
        if (!response.ok) {
          renderError(panel, response.error || "Unknown error.");
          return;
        }
        renderResult(panel, response.result);
      }
    );
  }

  function init() {
    ensureButton();
  }

  // LeetCode is a SPA — re-check periodically as the user navigates between problems.
  init();
  const observer = new MutationObserver(() => ensureButton());
  observer.observe(document.body, { childList: true, subtree: true });
})();