contentScript.js

/* ============================================================
   PDCS – Tree-Aware + Contextual + Speech (Mac Stable Final)
============================================================ */

let nodeMap = {};
let rootNode = null;
let currentNode = null;
let lastHighlighted = null;
let relationsMap = {};
let topicLinksMap = {};

/* ============================================================
   Utilities
============================================================ */

function cleanText(t) {
  return t
    .replace(/\b(upvote|reply|share|award|edit|save|give award)\b/gi, "")
    .replace(/\s{2,}/g, " ")
    .trim();
}

function createAriaLiveRegion() {
  if (document.getElementById("pdcs-live")) return;
  const region = document.createElement("div");
  region.id = "pdcs-live";
  region.setAttribute("aria-live", "assertive");
  region.setAttribute("aria-atomic", "true");
  region.setAttribute("role", "status");
  region.style.cssText = "position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;";
  document.body.appendChild(region);
}

function speak(text) {
  if (!text) return;
  // If panel is open, announce inside it (aria-modal blocks external regions)
  const internal = document.getElementById("pdcs-announcement");
  if (internal) {
    internal.textContent = "";
    setTimeout(() => { internal.textContent = text; }, 50);
    return;
  }
  // Panel closed — use external region
  const external = document.getElementById("pdcs-live");
  if (external) {
    external.textContent = "";
    setTimeout(() => { external.textContent = text; }, 50);
  }
}

function parseModelJSON(raw) {
  if (!raw) return null;
  const attempts = [];
  const trimmed = String(raw).trim();
  attempts.push(trimmed);
  // Strip markdown code fences and any text outside the outermost braces
  let t = trimmed.replace(/^```(?:json)?\s*/i, "").replace(/```\s*$/, "").trim();
  const a = t.indexOf("{"), b = t.lastIndexOf("}");
  if (a !== -1 && b > a) t = t.slice(a, b + 1);
  attempts.push(t);
  // Last resort: normalize typographic quotes (may alter quoted content)
  attempts.push(t.replace(/[\u201C\u201D]/g, '"').replace(/[\u2018\u2019]/g, "'"));
  for (const candidate of attempts) {
    try { return JSON.parse(candidate); } catch { /* try next */ }
  }
  return null;
}

function stopSpeaking() {
  const internal = document.getElementById("pdcs-announcement");
  if (internal) { internal.textContent = ""; return; }
  const external = document.getElementById("pdcs-live");
  if (external) external.textContent = "";
}

function highlight(el) {
  if (lastHighlighted) {
    lastHighlighted.style.outline = "";
    lastHighlighted.style.backgroundColor = "";
  }
  if (el) {
    el.style.outline = "3px solid #ffcc00";
    el.style.backgroundColor = "rgba(255,255,0,0.15)";
    if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "-1");
    el.focus({ preventScroll: true });
    el.scrollIntoView({ behavior: "smooth", block: "center" });
    lastHighlighted = el;
  }
}

/* ============================================================
   Reddit Tree Extraction
============================================================ */

function extractTree() {

  nodeMap = {};
  relationsMap = {};
  topicLinksMap = {};
  createAriaLiveRegion();

  const post = document.querySelector("shreddit-post");
  if (!post) {
    speak("Could not find the discussion. Make sure you are on a Reddit post page and try refreshing.");
    return;
  }

  rootNode = {
    id: "root",
    parent: null,
    children: [],
    el: post,
    text: cleanText(post.innerText || "")
  };

  nodeMap["root"] = rootNode;

  const comments = Array.from(document.querySelectorAll("shreddit-comment"));

  // Pass 1: assign IDs to all elements first
  comments.forEach((el, index) => {
    el.dataset.pdcsId = "c" + index;
  });

  // Pass 2: build nodes with correct parent references
  comments.forEach((el, index) => {

    const text = cleanText(el.innerText || "");
    if (text.length < 30) return;

    const id = "c" + index;

    let parentId = "root";
    let ancestor = el.parentElement;

    while (ancestor) {
      if (ancestor.tagName?.toLowerCase() === "shreddit-comment") {
        parentId = ancestor.dataset.pdcsId || "root";
        break;
      }
      ancestor = ancestor.parentElement;
    }

    const node = {
      id,
      parent: parentId,
      children: [],
      el,
      text
    };

    nodeMap[id] = node;
  });

  Object.values(nodeMap).forEach(node => {
    if (node.parent && nodeMap[node.parent]) {
      nodeMap[node.parent].children.push(node.id);
    }
  });

  currentNode = rootNode;
  highlight(currentNode.el);

  speak("Discussion ready. Press Command Option Down to move to the first comment.");
}

/* ============================================================
   Navigation
============================================================ */

function goToNode(node) {
  if (!node) return;

  currentNode = node;
  highlight(node.el);

  const depth = getDepth(node);
  const siblingInfo = getSiblingInfo(node);

  let announcement = `Depth ${depth}. ${siblingInfo}`;

  if (Object.keys(relationsMap).length > 0) {
    const myRelation = relationsMap[node.id];

    // Topic context: what this comment is about
    if (myRelation?.summary) {
      announcement += ` ${myRelation.summary}.`;
    }

    // Human-friendly relation label
    const relationPhrases = {
      agree:     "This comment agrees.",
      disagree:  "This comment disagrees.",
      elaborate: "This comment elaborates.",
      question:  "This is a question.",
      advice:    "This offers advice."
    };
    if (myRelation?.relation && relationPhrases[myRelation.relation]) {
      announcement += ` ${relationPhrases[myRelation.relation]}`;
    }

    // Branch counts in plain language
    const subtreeIds = getSubtreeOrder(node.id);
    let branchDisagree = 0, branchQuestion = 0, branchAdvice = 0;
    subtreeIds.forEach(id => {
      if (id === node.id) return;
      const r = relationsMap[id]?.relation;
      if (r === "disagree") branchDisagree++;
      if (r === "question") branchQuestion++;
      if (r === "advice")   branchAdvice++;
    });

    const branchParts = [];
    if (branchDisagree > 0) branchParts.push(`${branchDisagree} disagreement${branchDisagree > 1 ? "s" : ""}`);
    if (branchQuestion > 0) branchParts.push(`${branchQuestion} question${branchQuestion > 1 ? "s" : ""}`);
    if (branchAdvice > 0)   branchParts.push(`${branchAdvice} piece${branchAdvice > 1 ? "s" : ""} of advice`);
    if (branchParts.length > 0) {
      announcement += ` The replies below contain ${branchParts.join(" and ")}.`;
    }
  }

  // Sub-conversation linking
  if (topicLinksMap[node.id]) {
    const { topic, related } = topicLinksMap[node.id];
    announcement += ` ${related.length} other comment${related.length > 1 ? "s" : ""} also discuss "${topic}" in different parts of this thread.`;
  }

  speak(announcement);
  updatePanelStatus();
}

function getDepth(node) {
  let depth = 0;
  let temp = node;
  while (temp.parent && nodeMap[temp.parent]) {
    depth++;
    temp = nodeMap[temp.parent];
  }
  return depth;
}

function getSiblingInfo(node) {
  if (!node.parent) return "Main post.";
  const siblings = nodeMap[node.parent].children;
  const index = siblings.indexOf(node.id);
  return `Comment ${index + 1} of ${siblings.length}.`;
}

function nextNode() {
  if (currentNode.id === "root") {
    const top = nodeMap["root"].children;
    if (top.length > 0) goToNode(nodeMap[top[0]]);
    return;
  }

  const siblings = nodeMap[currentNode.parent].children;
  const index = siblings.indexOf(currentNode.id);
  if (index < siblings.length - 1) {
    goToNode(nodeMap[siblings[index + 1]]);
  }
}

function previousNode() {
  if (currentNode.id === "root") return;

  const siblings = nodeMap[currentNode.parent].children;
  const index = siblings.indexOf(currentNode.id);

  if (index > 0) {
    goToNode(nodeMap[siblings[index - 1]]);
  } else {
    goToNode(nodeMap[currentNode.parent]);
  }
}

function goDeeper() {
  if (!currentNode.children.length) {
    speak("No replies to this comment.");
    return;
  }
  goToNode(nodeMap[currentNode.children[0]]);
}

function goUp() {
  if (!currentNode.parent) return;
  goToNode(nodeMap[currentNode.parent]);
}

/* ============================================================
   Subtree Collection
============================================================ */

function collectSubtree(id) {
  const result = [];

  function traverse(nodeId) {
    const node = nodeMap[nodeId];
    if (!node) return;

    result.push({
      id: node.id,
      text: node.text
    });

    node.children.forEach(childId => traverse(childId));
  }

  traverse(id);
  return result;
}

function getSubtreeOrder(startId) {
  const order = [];
  function traverse(nodeId) {
    const node = nodeMap[nodeId];
    if (!node) return;
    order.push(nodeId);
    node.children.forEach(childId => traverse(childId));
  }
  traverse(startId);
  return order;
}

function jumpToRelation(relation) {
  if (!currentNode) { speak("No comment selected."); return; }

  function doJump() {
    const allIds = getSubtreeOrder("root");
    const currentIndex = allIds.indexOf(currentNode.id);
    const searchOrder = [
      ...allIds.slice(currentIndex + 1),
      ...allIds.slice(0, currentIndex)
    ];
    const relationLabels = { disagree: "disagreements", question: "questions", advice: "advice" };
    const match = searchOrder.find(id => relationsMap[id]?.relation === relation);
    if (!match) { speak(`No more ${relationLabels[relation] || relation} found in this discussion.`); return; }
    goToNode(nodeMap[match]);
  }

  if (Object.keys(relationsMap).length === 0) {
    speak("Searching. One moment.");
    const subtree = collectSubtree(currentNode.id);
    chrome.runtime.sendMessage(
      { action: "summarize", mode: "context", text: JSON.stringify(subtree) },
      res => {
        if (!res?.summary) { speak("Could not reach the AI. Please check LM Studio."); return; }
        handleContextSummary(res.summary, true);
        doJump();
      }
    );
  } else {
    doJump();
  }
}

function jumpToDisagree() { jumpToRelation("disagree"); }
function jumpToQuestion()  { jumpToRelation("question"); }

/* ============================================================
   Summarization
============================================================ */

function summarizeCurrent() {
  if (!currentNode) { speak("Not ready yet."); return; }
  speak("Summarizing.");
  chrome.runtime.sendMessage(
    { action: "summarize", mode: "balanced", text: currentNode.text },
    res => speak(res?.summary || "No summary received. Please try again.")
  );
}

function summarizeLiteral() {
  if (!currentNode) { speak("Not ready yet."); return; }
  speak("Reading comment.");
  chrome.runtime.sendMessage(
    { action: "summarize", mode: "literal", text: currentNode.text },
    res => speak(res?.summary || "No summary received. Please try again.")
  );
}

function summarizeSubtree() {
  if (!currentNode) { speak("Not ready yet."); return; }
  speak("Analyzing this thread. One moment.");
  const subtree = collectSubtree(currentNode.id);

  chrome.runtime.sendMessage(
    { action: "summarize", mode: "context", text: JSON.stringify(subtree) },
    res => {
      if (!res?.summary) { speak("No response received. Please try again."); return; }
      handleContextSummary(res.summary);
    }
  );
}

function summarizeReplies() {
  if (!currentNode) { speak("Not ready yet."); return; }
  if (!currentNode.children.length) { speak("There are no replies to this comment."); return; }
  speak("Analyzing replies. One moment.");

  const replies = currentNode.children.map(id => ({
    id: nodeMap[id].id,
    text: nodeMap[id].text
  }));

  chrome.runtime.sendMessage(
    { action: "summarize", mode: "context", text: JSON.stringify(replies) },
    res => {
      if (!res?.summary) { speak("No response received. Please try again."); return; }
      handleContextSummary(res.summary);
    }
  );
}

function summarizeFiltered(relation) {
  if (!currentNode) { speak("Not ready yet."); return; }
  const labels = { disagree: "disagreements", question: "questions", advice: "advice" };
  speak(`Finding ${labels[relation] || relation}. One moment.`);

  const subtree = collectSubtree(currentNode.id);

  chrome.runtime.sendMessage(
    { action: "summarize", mode: "context", text: JSON.stringify(subtree) },
    res => {
      if (!res?.summary) { speak("No response received. Please try again."); return; }

      let parsed;
      parsed = parseModelJSON(res.summary);
      if (!parsed) { speak("Could not read the response. Please try again."); return; }

      if (!parsed.threads) { speak("Could not read the discussion structure."); return; }

      const matches = parsed.threads.filter(th => th.relation?.toLowerCase() === relation);
      const label = labels[relation] || relation;
      if (!matches.length) { speak(`No ${label} found in this thread.`); return; }

      speak(
        `Found ${matches.length} ${label}. ` +
        matches.map(th => th.summary).join(". ")
      );
    }
  );
}

function summarizeDebate() {
  if (!currentNode) { speak("Not ready yet."); return; }
  speak("Analyzing the debate. One moment.");

  const subtree = collectSubtree(currentNode.id);

  chrome.runtime.sendMessage(
    { action: "summarize", mode: "context", text: JSON.stringify(subtree) },
    res => {
      if (!res?.summary) { speak("No response received. Please try again."); return; }

      let parsed;
      parsed = parseModelJSON(res.summary);
      if (!parsed) { speak("Could not read the response. Please try again."); return; }

      handleContextSummary(res.summary, true);

      if (!parsed.threads) { speak("Could not read the discussion structure."); return; }

      const disagreeThreads = parsed.threads.filter(
        th => th.relation?.toLowerCase() === "disagree"
      );

      if (!disagreeThreads.length) { speak("No disagreements found in this thread."); return; }

      speak(`Debate. ${disagreeThreads.length} opposing view${disagreeThreads.length > 1 ? "s" : ""}. ${disagreeThreads.map(th => th.summary).join(". ")}`);
    }
  );
}

function summarizeOpVsCritic() {
  if (!currentNode) { speak("Not ready yet."); return; }
  speak("Comparing the original post with its critics. One moment.");

  const rootText = nodeMap["root"]?.text || "";
  const topLevelIds = nodeMap["root"]?.children || [];
  const topLevelNodes = topLevelIds.map(id => ({ id, text: nodeMap[id]?.text || "" }));

  const payload = JSON.stringify([
    { id: "root", text: rootText },
    ...topLevelNodes
  ]);

  chrome.runtime.sendMessage(
    { action: "summarize", mode: "opvsCritic", text: payload },
    res => {
      if (!res?.summary) { speak("No response received. Please try again."); return; }

      let parsed;
      parsed = parseModelJSON(res.summary);
      if (!parsed) { speak("Could not read the response. Please try again."); return; }

      if (!parsed.op_position) { speak("Could not find the original post's position."); return; }

      const criticsText = parsed.critics?.length
        ? `${parsed.critics.length} critic${parsed.critics.length > 1 ? "s" : ""}. ` +
          parsed.critics.map(c => c.objection).join(". ")
        : "No direct critics found.";

      const verdict = parsed.verdict ? ` ${parsed.verdict}` : "";
      speak(`Original post says: ${parsed.op_position}. ${criticsText}.${verdict}`);
    }
  );
}

function summarizeArgumentMap() {
  if (!currentNode) { speak("Not ready yet."); return; }
  speak("Mapping the discussion branches. One moment.");

  const subtree = collectSubtree(currentNode.id);

  chrome.runtime.sendMessage(
    { action: "summarize", mode: "branchMap", text: JSON.stringify(subtree) },
    res => {
      if (!res?.summary) { speak("No response received. Please try again."); return; }

      let parsed;
      parsed = parseModelJSON(res.summary);
      if (!parsed) { speak("Could not read the response. Please try again."); return; }

      if (parsed.threads) handleContextSummary(res.summary, true);

      if (parsed.overview) {
        speak(parsed.overview);
        return;
      }

      if (parsed.branches?.length) {
        speak(`${parsed.branches.length} major branch${parsed.branches.length > 1 ? "es" : ""}: ` +
          parsed.branches.map(b => b.topic).join(", ") + ".");
        return;
      }

      speak("Could not identify the discussion branches.");
    }
  );
}

function summarizeTopicLinks() {
  if (!currentNode) { speak("Not ready yet."); return; }
  speak("Finding shared topics across the thread. One moment.");

  const fullThread = collectSubtree("root");

  chrome.runtime.sendMessage(
    { action: "summarize", mode: "topicLink", text: JSON.stringify(fullThread) },
    res => {
      if (!res?.summary) { speak("No response received. Please try again."); return; }

      let parsed;
      parsed = parseModelJSON(res.summary);
      if (!parsed) { speak("Could not read the response. Please try again."); return; }

      if (!parsed.topic_groups?.length) { speak("No shared topics found across different branches."); return; }

      topicLinksMap = {};
      parsed.topic_groups.forEach(group => {
        group.ids.forEach(id => {
          topicLinksMap[id] = {
            topic: group.topic,
            related: group.ids.filter(other => other !== id)
          };
        });
      });

      const summary = parsed.topic_groups
        .map(g => `"${g.topic}" comes up in ${g.ids.length} separate comments`)
        .join(". ");
      speak(`Found ${parsed.topic_groups.length} shared topic${parsed.topic_groups.length > 1 ? "s" : ""}. ${summary}.`);
    }
  );
}

function jumpToOPCritic() {
  if (!currentNode) { speak("No comment selected."); return; }

  function doJump() {
    const topLevelIds = nodeMap["root"]?.children || [];
    const critics = topLevelIds.filter(id => relationsMap[id]?.relation === "disagree");
    if (!critics.length) { speak("No critics of the original post found."); return; }

    const currentIndex = critics.indexOf(currentNode.id);
    const next = critics[(currentIndex + 1) % critics.length];
    goToNode(nodeMap[next]);
  }

  if (Object.keys(relationsMap).length === 0) {
    speak("Searching. One moment.");
    const subtree = collectSubtree("root");
    chrome.runtime.sendMessage(
      { action: "summarize", mode: "context", text: JSON.stringify(subtree) },
      res => {
        if (!res?.summary) { speak("Could not reach the AI. Please check LM Studio."); return; }
        handleContextSummary(res.summary, true);
        doJump();
      }
    );
  } else {
    doJump();
  }
}

function jumpToAdvice() { jumpToRelation("advice"); }

/* ============================================================
   Context JSON Handler + Labeling
============================================================ */

function handleContextSummary(raw, silent = false) {

  const parsed = parseModelJSON(raw);
  if (!parsed) {
    if (!silent) speak("Could not read the discussion. Please try again.");
    return;
  }

  if (!parsed.threads) {
    if (!silent) speak("The AI did not return a structured response. Please try again.");
    return;
  }

  const colors = {
    agree: "rgba(0,255,0,0.25)",
    disagree: "rgba(255,0,0,0.25)",
    elaborate: "rgba(0,150,255,0.25)",
    question: "rgba(255,255,0,0.25)",
    advice: "rgba(255,165,0,0.25)",
    unrelated: "rgba(200,200,200,0.2)"
  };

  parsed.threads.forEach(th => {

    const node = nodeMap[th.id];
    if (!node) return;

    const relation = (th.relation || "unrelated").toLowerCase();
    relationsMap[th.id] = { relation, summary: th.summary || "" };

    const color = colors[relation] || colors.unrelated;

    node.el.style.backgroundColor = color;

    const existing = node.el.querySelector(".pdcs-relation-tag");
    if (existing) existing.remove();

    const tag = document.createElement("div");
    tag.className = "pdcs-relation-tag";
    tag.setAttribute("aria-hidden", "true");
    tag.textContent = `[${relation.toUpperCase()}]`;
    tag.style.fontSize = "12px";
    tag.style.fontWeight = "bold";
    tag.style.marginBottom = "4px";
    tag.style.background = color;
    tag.style.display = "inline-block";
    tag.style.padding = "2px 6px";
    tag.style.borderRadius = "4px";

    node.el.prepend(tag);
  });

  if (!silent) speak(parsed.overall_argument || "Analysis complete.");
}

/* ============================================================
   Keyboard (Mac Stable)
============================================================ */

window.addEventListener("keydown", (e) => {

  if (!(e.metaKey && e.altKey)) return;

  e.preventDefault();
  e.stopPropagation();

  if (!currentNode && e.code !== "KeyX") return;

  if (e.code === "ArrowDown") nextNode();
  if (e.code === "ArrowUp") previousNode();
  if (e.code === "KeyJ") goDeeper();
  if (e.code === "KeyK") goUp();
  if (e.code === "KeyS") summarizeCurrent();
  if (e.code === "KeyL") summarizeLiteral();
  if (e.code === "KeyC") summarizeSubtree();
  if (e.code === "KeyR") summarizeReplies();
  if (e.code === "KeyN") summarizeFiltered("disagree");
  if (e.code === "KeyQ") summarizeFiltered("question");
  if (e.code === "KeyG") jumpToDisagree();
  if (e.code === "KeyY") jumpToQuestion();
  if (e.code === "KeyA") jumpToAdvice();
  if (e.code === "KeyP") jumpToOPCritic();
  if (e.code === "KeyT") summarizeTopicLinks();
  if (e.code === "KeyB") summarizeDebate();
  if (e.code === "KeyO") summarizeOpVsCritic();
  if (e.code === "KeyM") summarizeArgumentMap();
  if (e.code === "KeyX") stopSpeaking();
  if (e.code === "Slash") createPanel();

}, true);

/* ============================================================
   Proxy Panel (Screen Reader Interface)
============================================================ */

function injectPanelStyles() {
  if (document.getElementById("pdcs-styles")) return;
  const style = document.createElement("style");
  style.id = "pdcs-styles";
  style.textContent = `
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

    #pdcs-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: 320px;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      background: #0f1117;
      color: #e8eaf0;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 14px;
      z-index: 2147483647;
      box-sizing: border-box;
      border-left: 1px solid #1e2a38;
      box-shadow: -8px 0 32px rgba(0,0,0,0.6);
      scrollbar-width: thin;
      scrollbar-color: #2a3a4a #0f1117;
    }

    #pdcs-panel::-webkit-scrollbar { width: 5px; }
    #pdcs-panel::-webkit-scrollbar-track { background: #0f1117; }
    #pdcs-panel::-webkit-scrollbar-thumb { background: #2a3a4a; border-radius: 4px; }

    /* Header */
    #pdcs-panel-header {
      position: sticky;
      top: 0;
      background: #0f1117;
      padding: 18px 18px 12px;
      border-bottom: 1px solid #1e2a38;
      z-index: 1;
    }
    #pdcs-panel-heading {
      font-size: 13px;
      font-weight: 600;
      color: #00bcd4;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin: 0 0 2px 0;
    }
    #pdcs-panel-subtitle {
      font-size: 11px;
      color: #4a6070;
      margin: 0;
      letter-spacing: 0.03em;
    }

    /* Body padding */
    #pdcs-panel-body {
      padding: 14px 18px 24px;
    }

    /* Status box */
    #pdcs-status-box {
      background: linear-gradient(135deg, #0a1f2e 0%, #0d1a26 100%);
      border: 1px solid #1a3a4a;
      border-left: 3px solid #00bcd4;
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 13px;
      color: #80cfe8;
      min-height: 52px;
      margin-bottom: 16px;
      line-height: 1.55;
    }

    /* Groups */
    #pdcs-panel fieldset {
      border: 1px solid #1e2a38;
      border-radius: 10px;
      margin: 0 0 10px 0;
      padding: 0 0 8px 0;
      background: #141820;
    }
    #pdcs-panel legend {
      font-size: 10px;
      font-weight: 600;
      color: #4a6a7a;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 0 10px;
      margin-left: 6px;
    }

    /* Buttons */
    #pdcs-panel button {
      display: flex;
      align-items: center;
      width: calc(100% - 16px);
      margin: 4px 8px 0;
      text-align: left;
      background: transparent;
      color: #c8d0e0;
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 9px 12px;
      font-size: 13px;
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 400;
      cursor: pointer;
      line-height: 1.35;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    #pdcs-panel button:hover {
      background: #1a2535;
      color: #e8eaf0;
      border-color: #2a3a50;
    }
    #pdcs-panel button:focus {
      outline: none;
      background: #0a2535;
      border-color: #00bcd4;
      color: #ffffff;
      box-shadow: 0 0 0 2px rgba(0,188,212,0.25);
    }
    #pdcs-panel button:active {
      background: #0d2030;
    }

    /* Close button — sits in header */
    #pdcs-close-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      position: absolute;
      top: 16px;
      right: 16px;
      background: #1a2535;
      border: 1px solid #2a3a50;
      border-radius: 6px;
      color: #6a8090;
      font-size: 16px;
      cursor: pointer;
      padding: 0;
      line-height: 1;
    }
    #pdcs-close-btn:focus {
      outline: none;
      border-color: #00bcd4;
      color: #00bcd4;
      box-shadow: 0 0 0 2px rgba(0,188,212,0.25);
    }
    #pdcs-close-btn:hover {
      background: #1e2e42;
      color: #e8eaf0;
    }

    /* Stop speaking — accent style */
    #pdcs-stop-btn {
      width: calc(100% );
      margin: 10px 0 0 0;
      justify-content: center;
      background: #1a1520;
      border: 1px solid #3a2540;
      color: #c084e8;
      border-radius: 8px;
      font-weight: 500;
    }
    #pdcs-stop-btn:hover {
      background: #231530;
      border-color: #9b59b6;
      color: #e0b0ff;
    }
    #pdcs-stop-btn:focus {
      border-color: #c084e8;
      box-shadow: 0 0 0 2px rgba(192,132,232,0.25);
    }
  `;
  document.head.appendChild(style);
}

let _lastFocusBeforePanel = null;

function createPanel() {
  const existing = document.getElementById("pdcs-panel");
  if (existing) {
    existing.remove();
    if (_lastFocusBeforePanel) _lastFocusBeforePanel.focus();
    speak("Panel closed.");
    return;
  }

  injectPanelStyles();
  _lastFocusBeforePanel = document.activeElement;

  const panel = document.createElement("div");
  panel.id = "pdcs-panel";
  panel.setAttribute("role", "dialog");
  panel.setAttribute("aria-modal", "true");
  panel.setAttribute("aria-labelledby", "pdcs-panel-heading");

  // ── Header ──────────────────────────────────────────
  const header = document.createElement("div");
  header.id = "pdcs-panel-header";

  const heading = document.createElement("h2");
  heading.id = "pdcs-panel-heading";
  heading.textContent = "Discussion Assistant";
  header.appendChild(heading);

  const subtitle = document.createElement("p");
  subtitle.id = "pdcs-panel-subtitle";
  subtitle.textContent = "Accessible Reddit Navigator";
  header.appendChild(subtitle);

  const closeBtn = document.createElement("button");
  closeBtn.id = "pdcs-close-btn";
  closeBtn.setAttribute("aria-label", "Close Discussion Assistant panel");
  closeBtn.textContent = "✕";
  closeBtn.addEventListener("click", createPanel);
  header.appendChild(closeBtn);

  panel.appendChild(header);

  // ── Body ────────────────────────────────────────────
  const body = document.createElement("div");
  body.id = "pdcs-panel-body";

  // Status box
  const statusBox = document.createElement("div");
  statusBox.id = "pdcs-status-box";
  statusBox.setAttribute("role", "status");
  statusBox.setAttribute("aria-live", "polite");
  statusBox.setAttribute("aria-atomic", "true");
  statusBox.setAttribute("aria-label", "Current position in thread");
  statusBox.textContent = "Not ready. Waiting for discussion to load.";
  body.appendChild(statusBox);

  // Announcement region — announces all action results inside the dialog
  const announcement = document.createElement("div");
  announcement.id = "pdcs-announcement";
  announcement.setAttribute("role", "alert");
  announcement.setAttribute("aria-live", "assertive");
  announcement.setAttribute("aria-atomic", "true");
  announcement.style.cssText = "position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;";
  body.appendChild(announcement);

  // Helper: build a button
  function btn(label, fn, shortcut) {
    const b = document.createElement("button");
    b.textContent = label;
    if (shortcut) b.setAttribute("aria-keyshortcuts", shortcut);
    b.addEventListener("click", () => fn());
    return b;
  }

  // Helper: build a group (fieldset)
  function group(legendText, buttons) {
    const fs = document.createElement("fieldset");
    const leg = document.createElement("legend");
    leg.textContent = legendText;
    fs.appendChild(leg);
    buttons.forEach(b => fs.appendChild(b));
    return fs;
  }

  // Group 1: Move through comments
  body.appendChild(group("Move through comments", [
    btn("Next comment",                      nextNode,                             "Meta+Alt+ArrowDown"),
    btn("Previous comment",                  previousNode,                         "Meta+Alt+ArrowUp"),
    btn("Go deeper into replies",            goDeeper,                             "Meta+Alt+j"),
    btn("Go up to parent",                   goUp,                                 "Meta+Alt+k"),
  ]));

  // Group 2: Jump to specific comment type
  body.appendChild(group("Jump to", [
    btn("Next disagreement",                 jumpToDisagree,                       "Meta+Alt+g"),
    btn("Next question",                     jumpToQuestion,                       "Meta+Alt+y"),
    btn("Next advice comment",               jumpToAdvice,                         "Meta+Alt+a"),
    btn("Next critic of original post",      jumpToOPCritic,                       "Meta+Alt+p"),
  ]));

  // Group 3: Summarize current comment
  body.appendChild(group("Summarize current comment", [
    btn("Balanced summary",                  summarizeCurrent,                     "Meta+Alt+s"),
    btn("Literal — keeps tone and slang",    summarizeLiteral,                     "Meta+Alt+l"),
  ]));

  // Group 4: Summarize thread
  body.appendChild(group("Summarize thread", [
    btn("Full thread from here",             summarizeSubtree,                     "Meta+Alt+c"),
    btn("Direct replies only",               summarizeReplies,                     "Meta+Alt+r"),
    btn("Disagreements only",                () => summarizeFiltered("disagree"),  "Meta+Alt+n"),
    btn("Questions only",                    () => summarizeFiltered("question"),  "Meta+Alt+q"),
  ]));

  // Group 5: Analyse discussion
  body.appendChild(group("Analyse discussion", [
    btn("What are people disagreeing about", summarizeDebate,                      "Meta+Alt+b"),
    btn("Original post versus critics",      summarizeOpVsCritic,                  "Meta+Alt+o"),
    btn("Map the discussion branches",       summarizeArgumentMap,                 "Meta+Alt+m"),
    btn("Find topics across branches",       summarizeTopicLinks,                  "Meta+Alt+t"),
  ]));

  // Stop speaking button
  const stopBtn = btn("Stop speaking", stopSpeaking, "Meta+Alt+x");
  stopBtn.id = "pdcs-stop-btn";
  stopBtn.setAttribute("aria-label", "Stop speaking");
  body.appendChild(stopBtn);

  panel.appendChild(body);
  document.body.appendChild(panel);

  // Focus trap: keep Tab/Shift+Tab inside the panel
  const focusable = () => Array.from(panel.querySelectorAll("button"));
  panel.addEventListener("keydown", e => {
    if (e.key === "Escape") { createPanel(); return; }
    if (e.key !== "Tab") return;
    const items = focusable();
    const first = items[0];
    const last  = items[items.length - 1];
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first.focus();
    }
  });

  // Focus the close button — screen reader announces "Close Discussion Assistant panel, button" immediately
  closeBtn.focus();
  updatePanelStatus();
}

function updatePanelStatus() {
  const box = document.getElementById("pdcs-status-box");
  if (!box) return;
  if (!currentNode) { box.textContent = "Not ready yet."; return; }

  const depth   = getDepth(currentNode);
  const sibling = getSiblingInfo(currentNode);
  const data    = relationsMap[currentNode.id];

  const relationPhrases = {
    agree:     "agrees",
    disagree:  "disagrees",
    elaborate: "elaborates",
    question:  "is a question",
    advice:    "offers advice"
  };

  let text = `You are at: ${sibling} Level ${depth}.`;
  if (data?.summary)   text += ` ${data.summary}.`;
  if (data?.relation && relationPhrases[data.relation]) {
    text += ` This comment ${relationPhrases[data.relation]}.`;
  }
  if (topicLinksMap[currentNode.id]) {
    const { topic, related } = topicLinksMap[currentNode.id];
    text += ` ${related.length} other comment${related.length > 1 ? "s" : ""} also discuss "${topic}".`;
  }
  box.textContent = text;
}

/* ============================================================
   Init
============================================================ */

window.addEventListener("load", () => {
  setTimeout(() => {
    if (location.hostname.includes("reddit")) {
      extractTree();
    }
  }, 2500);
});