overlay.js

// overlay.js — Injects visual highlights + tooltips for flagged elements

window.DPOverlay = (() => {
  const SEVERITY_ICON = {
    critical: '🚨',
    high: '⚠️',
    medium: 'ℹ️',
    info: '👁',
  };

  let tooltip = null;
  let summaryPill = null;
  let activeFindings = [];

  function init() {
    // Create shared tooltip element
    tooltip = document.createElement('div');
    tooltip.className = 'dp-tooltip';
    tooltip.innerHTML = `
      <div class="dp-tooltip-title"></div>
      <div class="dp-tooltip-body"></div>
      <div class="dp-tooltip-category"></div>
    `;
    document.body.appendChild(tooltip);
  }

  function highlightElement(finding) {
    const el = finding.element;
    if (!el || !document.body.contains(el)) return;

    // Make the element position:relative so we can anchor the badge
    const existingPosition = window.getComputedStyle(el).position;
    if (existingPosition === 'static') {
      el.style.position = 'relative';
    }

    el.classList.add('dp-highlight');
    el.setAttribute('data-dp-severity', finding.severity);
    el.setAttribute('data-dp-id', finding.patternId);

    // Badge
    const badge = document.createElement('span');
    badge.className = 'dp-badge';
    badge.setAttribute('data-severity', finding.severity);
    badge.textContent = `${SEVERITY_ICON[finding.severity]} ${finding.label}`;

    badge.addEventListener('mouseenter', (e) => showTooltip(e, finding));
    badge.addEventListener('mouseleave', hideTooltip);
    badge.addEventListener('click', (e) => {
      e.stopPropagation();
      chrome.runtime.sendMessage({ type: 'OPEN_POPUP' });
    });

    el.appendChild(badge);
  }

  function showTooltip(event, finding) {
    const titleEl = tooltip.querySelector('.dp-tooltip-title');
    const bodyEl = tooltip.querySelector('.dp-tooltip-body');
    const catEl = tooltip.querySelector('.dp-tooltip-category');

    titleEl.textContent = finding.label;
    bodyEl.textContent = finding.explanation;
    catEl.textContent = `Category: ${finding.category}`;

    tooltip.classList.add('visible');
    positionTooltip(event.clientX, event.clientY);
  }

  function hideTooltip() {
    tooltip.classList.remove('visible');
  }

  function positionTooltip(x, y) {
    const tw = tooltip.offsetWidth || 280;
    const th = tooltip.offsetHeight || 80;
    const vw = window.innerWidth;
    const vh = window.innerHeight;

    let left = x + 14;
    let top = y + 14;

    if (left + tw > vw - 10) left = x - tw - 14;
    if (top + th > vh - 10) top = y - th - 14;

    tooltip.style.left = `${left}px`;
    tooltip.style.top = `${top}px`;
  }

  function renderSummaryPill(findings) {
    if (summaryPill) summaryPill.remove();

    const criticalCount = findings.filter(f => f.severity === 'critical').length;
    const total = findings.length;

    summaryPill = document.createElement('div');
    summaryPill.id = 'dp-summary-pill';

    const countClass = total === 0 ? 'dp-pill-count none' : 'dp-pill-count';
    summaryPill.innerHTML = `
      <span class="dp-pill-icon">🕵️</span>
      <span class="${countClass}">${total}</span>
      <span class="dp-pill-label">${total === 0 ? 'No patterns found' : total === 1 ? 'dark pattern' : 'dark patterns'}</span>
    `;

    summaryPill.title = 'Click to open Dark Pattern Detector';
    summaryPill.addEventListener('click', () => {
      chrome.runtime.sendMessage({ type: 'OPEN_POPUP' });
    });

    document.body.appendChild(summaryPill);
  }

  function clearAll() {
    document.querySelectorAll('.dp-highlight').forEach(el => {
      el.classList.remove('dp-highlight');
      el.removeAttribute('data-dp-severity');
      el.removeAttribute('data-dp-id');
      el.querySelectorAll('.dp-badge').forEach(b => b.remove());
    });
    if (summaryPill) { summaryPill.remove(); summaryPill = null; }
    activeFindings = [];
  }

  function render(findings) {
    clearAll();
    activeFindings = findings;
    findings.forEach(highlightElement);
    renderSummaryPill(findings);
  }

  function getFindings() {
    return activeFindings;
  }

  return { init, render, clearAll, getFindings };
})();