/* eslint-disable */
/**
 * Element Picker Inject Script
 *
 * Injected script to let the user manually pick elements for chrome_request_element_selection.
 * - Writes refs into window.__claudeElementMap (compatible with accessibility-tree-helper.js)
 * - Generates stable CSS selectors (prefers id/data-testid/etc.)
 * - Supports iframe picking by reporting selection via chrome.runtime.sendMessage (background reads sender.frameId)
 */

(function () {
  'use strict';

  // Prevent double initialization
  if (window.__MCP_ELEMENT_PICKER_INITIALIZED__) return;
  window.__MCP_ELEMENT_PICKER_INITIALIZED__ = true;

  // ============================================================
  // Constants
  // ============================================================

  const UI_HOST_ID = '__mcp_element_picker_host__';
  const HIGHLIGHT_ID = '__mcp_element_picker_highlight__';
  const MAX_TEXT_LEN = 160;

  // Highlight colors matching Editorial accent (terracotta)
  const HIGHLIGHT_COLOR = '#d97757';
  const HIGHLIGHT_BG = 'rgba(217, 119, 87, 0.08)';
  const HIGHLIGHT_BORDER = 'rgba(217, 119, 87, 0.4)';

  // ============================================================
  // State
  // ============================================================

  const STATE = {
    active: false,
    sessionId: null,
    activeRequestId: null,
    listenersAttached: false,
    hoverRafId: null,
    pendingHoverEvent: null,
    lastHoverEl: null,
    highlighter: null,
  };

  // ============================================================
  // CSS Escape Helper
  // ============================================================

  function cssEscape(value) {
    try {
      if (window.CSS && typeof window.CSS.escape === 'function') {
        return window.CSS.escape(value);
      }
    } catch {
      // Fallback
    }
    return String(value).replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c}`);
  }

  // ============================================================
  // UI Detection Helpers
  // ============================================================

  function getUiHost() {
    try {
      return document.getElementById(UI_HOST_ID);
    } catch {
      return null;
    }
  }

  function isOverlayElement(node) {
    if (!(node instanceof Node)) return false;
    const host = getUiHost();
    if (!host) return false;
    if (node === host) return true;
    const root = typeof node.getRootNode === 'function' ? node.getRootNode() : null;
    return root instanceof ShadowRoot && root.host === host;
  }

  function isEventFromUi(ev) {
    if (!ev) return false;
    try {
      if (typeof ev.composedPath === 'function') {
        const path = ev.composedPath();
        if (Array.isArray(path)) {
          return path.some((n) => isOverlayElement(n));
        }
      }
    } catch {
      // Fallback
    }
    return isOverlayElement(ev.target);
  }

  /**
   * Get the deepest page target from an event, handling Shadow DOM.
   */
  function getDeepPageTarget(ev) {
    if (!ev) return null;
    try {
      const path = typeof ev.composedPath === 'function' ? ev.composedPath() : null;
      if (Array.isArray(path) && path.length > 0) {
        for (const node of path) {
          if (node instanceof Element && !isOverlayElement(node)) {
            return node;
          }
        }
      }
    } catch {
      // Fallback
    }
    const fallback = ev.target instanceof Element ? ev.target : null;
    if (fallback && !isOverlayElement(fallback)) {
      return fallback;
    }
    return null;
  }

  // ============================================================
  // Highlighter
  // ============================================================

  function ensureHighlighter() {
    if (STATE.highlighter && STATE.highlighter.isConnected) {
      return STATE.highlighter;
    }

    // Remove any existing highlighter
    try {
      const existing = document.getElementById(HIGHLIGHT_ID);
      if (existing) existing.remove();
    } catch {
      // Best effort
    }

    const hl = document.createElement('div');
    hl.id = HIGHLIGHT_ID;
    Object.assign(hl.style, {
      position: 'fixed',
      left: '0px',
      top: '0px',
      width: '0px',
      height: '0px',
      border: `2px solid ${HIGHLIGHT_COLOR}`,
      borderRadius: '4px',
      boxShadow: `0 0 0 1px ${HIGHLIGHT_BORDER}`,
      background: HIGHLIGHT_BG,
      pointerEvents: 'none',
      zIndex: '2147483647',
      display: 'none',
      transition: 'transform 60ms linear, width 60ms linear, height 60ms linear',
    });

    try {
      (document.documentElement || document.body).appendChild(hl);
    } catch {
      // Best effort
    }

    STATE.highlighter = hl;
    return hl;
  }

  function clearHighlighter() {
    const hl = STATE.highlighter;
    if (!hl) return;
    try {
      hl.style.display = 'none';
    } catch {
      // Best effort
    }
  }

  function moveHighlighterTo(el) {
    const hl = ensureHighlighter();
    if (!hl || !(el instanceof Element)) return;

    let rect;
    try {
      rect = el.getBoundingClientRect();
    } catch {
      clearHighlighter();
      return;
    }

    if (!rect || rect.width <= 0 || rect.height <= 0) {
      clearHighlighter();
      return;
    }

    try {
      hl.style.display = 'block';
      hl.style.transform = `translate(${Math.round(rect.left)}px, ${Math.round(rect.top)}px)`;
      hl.style.width = `${Math.round(rect.width)}px`;
      hl.style.height = `${Math.round(rect.height)}px`;
    } catch {
      // Best effort
    }
  }

  // ============================================================
  // Selector Uniqueness Check (Optimized)
  // ============================================================

  /**
   * Check if element is inside a Shadow DOM.
   */
  function isInShadowDom(el) {
    try {
      const root = el.getRootNode();
      return root instanceof ShadowRoot;
    } catch {
      return false;
    }
  }

  /**
   * Fast uniqueness check using native querySelectorAll.
   * For Shadow DOM elements, queries within their shadow root only.
   */
  function isSelectorUnique(selector, target) {
    if (!selector || !(target instanceof Element)) return false;

    try {
      // For elements not in Shadow DOM, use fast native query
      if (!isInShadowDom(target)) {
        const matches = document.querySelectorAll(selector);
        return matches.length === 1 && matches[0] === target;
      }

      // For Shadow DOM elements, query within their root
      const root = target.getRootNode();
      if (root instanceof ShadowRoot) {
        const matches = root.querySelectorAll(selector);
        return matches.length === 1 && matches[0] === target;
      }

      return false;
    } catch {
      return false;
    }
  }

  // ============================================================
  // Selector Generation (Stable & Unique)
  // ============================================================

  function buildPathFromAncestor(ancestor, target) {
    const segs = [];
    let cur = target;

    const root = target.getRootNode();
    const isShadowElement = root instanceof ShadowRoot;
    const boundary = isShadowElement ? root.host : document.body;

    while (cur && cur !== ancestor && cur !== boundary) {
      let seg = cur.tagName.toLowerCase();
      const parent = cur.parentElement;
      if (parent) {
        const siblings = Array.from(parent.children).filter((c) => c.tagName === cur.tagName);
        if (siblings.length > 1) {
          seg += `:nth-of-type(${siblings.indexOf(cur) + 1})`;
        }
      }
      segs.unshift(seg);
      cur = parent;
      if (isShadowElement && cur === boundary) break;
    }

    return segs.join(' > ');
  }

  function buildFullPath(el) {
    let path = '';
    let current = el;

    const root = el.getRootNode();
    const isShadowElement = root instanceof ShadowRoot;
    const boundary = isShadowElement ? root.host : document.body;

    while (current && current.nodeType === Node.ELEMENT_NODE && current !== boundary) {
      let sel = current.tagName.toLowerCase();
      const parent = current.parentElement;
      if (parent) {
        const siblings = Array.from(parent.children).filter((c) => c.tagName === current.tagName);
        if (siblings.length > 1) {
          sel += `:nth-of-type(${siblings.indexOf(current) + 1})`;
        }
      }
      path = path ? `${sel} > ${path}` : sel;
      current = parent;
      if (isShadowElement && current === boundary) break;
    }

    if (isShadowElement) return path || el.tagName.toLowerCase();
    return path ? `body > ${path}` : 'body';
  }

  /**
   * Generate a stable CSS selector for an element.
   * Prioritizes: id > data-testid/data-test/etc > anchor + relative path > full path
   */
  function generateSelector(el) {
    if (!(el instanceof Element)) return '';

    // Prefer unique IDs
    try {
      if (el.id) {
        const idSel = `#${cssEscape(el.id)}`;
        if (isSelectorUnique(idSel, el)) return idSel;
      }
    } catch {
      // Continue
    }

    // Prefer stable test attributes
    try {
      const attrNames = [
        'data-testid',
        'data-testId',
        'data-test',
        'data-qa',
        'data-cy',
        'name',
        'aria-label',
        'title',
        'alt',
      ];
      const tag = el.tagName.toLowerCase();
      for (const attr of attrNames) {
        const v = el.getAttribute(attr);
        if (!v) continue;
        const attrSel = `[${attr}="${cssEscape(v)}"]`;
        const testSel = /^(input|textarea|select)$/i.test(tag) ? `${tag}${attrSel}` : attrSel;
        if (isSelectorUnique(testSel, el)) return testSel;
      }
    } catch {
      // Continue
    }

    // Anchor + relative path
    try {
      let cur = el;
      const anchorAttrs = [
        'id',
        'data-testid',
        'data-testId',
        'data-test',
        'data-qa',
        'data-cy',
        'name',
      ];

      const root = el.getRootNode();
      const isShadowElement = root instanceof ShadowRoot;
      const boundary = isShadowElement ? root.host : document.body;

      while (cur && cur !== boundary) {
        if (cur.id) {
          const anchor = `#${cssEscape(cur.id)}`;
          if (isSelectorUnique(anchor, cur)) {
            const rel = buildPathFromAncestor(cur, el);
            const composed = rel ? `${anchor} ${rel}` : anchor;
            if (isSelectorUnique(composed, el)) return composed;
          }
        }

        for (const attr of anchorAttrs) {
          const val = cur.getAttribute(attr);
          if (!val) continue;
          const aSel = `[${attr}="${cssEscape(val)}"]`;
          if (isSelectorUnique(aSel, cur)) {
            const rel = buildPathFromAncestor(cur, el);
            const composed = rel ? `${aSel} ${rel}` : aSel;
            if (isSelectorUnique(composed, el)) return composed;
          }
        }

        cur = cur.parentElement;
      }
    } catch {
      // Continue
    }

    // Fallback to full path
    return buildFullPath(el);
  }

  // ============================================================
  // Text Summarization
  // ============================================================

  function summarizeText(el) {
    if (!(el instanceof Element)) return '';
    try {
      const aria = el.getAttribute('aria-label');
      if (aria && aria.trim()) return aria.trim().slice(0, MAX_TEXT_LEN);
      const placeholder = el.getAttribute('placeholder');
      if (placeholder && placeholder.trim()) return placeholder.trim().slice(0, MAX_TEXT_LEN);
      const title = el.getAttribute('title');
      if (title && title.trim()) return title.trim().slice(0, MAX_TEXT_LEN);
      const alt = el.getAttribute('alt');
      if (alt && alt.trim()) return alt.trim().slice(0, MAX_TEXT_LEN);
    } catch {
      // Continue
    }
    try {
      const t = (el.textContent || '').trim().replace(/\s+/g, ' ');
      return t ? t.slice(0, MAX_TEXT_LEN) : '';
    } catch {
      return '';
    }
  }

  // ============================================================
  // Ref Management (Compatible with accessibility-tree-helper.js)
  // ============================================================

  function ensureRefForElement(el) {
    try {
      if (!window.__claudeElementMap) window.__claudeElementMap = {};
      if (!window.__claudeRefCounter) window.__claudeRefCounter = 0;
    } catch {
      // Best effort
    }

    // Check if element already has a ref
    let refId = null;
    try {
      for (const k in window.__claudeElementMap) {
        const w = window.__claudeElementMap[k];
        if (w && w.deref && w.deref() === el) {
          refId = k;
          break;
        }
      }
    } catch {
      // Continue
    }

    // Create new ref if needed
    if (!refId) {
      try {
        refId = `ref_${++window.__claudeRefCounter}`;
        window.__claudeElementMap[refId] = new WeakRef(el);
      } catch {
        // Continue
      }
    }

    return refId || '';
  }

  // ============================================================
  // Communication
  // ============================================================

  function sendFrameEvent(payload) {
    try {
      chrome.runtime.sendMessage(payload);
    } catch {
      // Best effort
    }
  }

  // ============================================================
  // Event Handlers
  // ============================================================

  function processMouseMove(ev) {
    if (!STATE.active) return;

    // Skip if event is from our UI
    if (isEventFromUi(ev)) {
      STATE.lastHoverEl = null;
      clearHighlighter();
      return;
    }

    const target = getDeepPageTarget(ev);
    if (!target) {
      STATE.lastHoverEl = null;
      clearHighlighter();
      return;
    }

    // Skip if same element
    if (STATE.lastHoverEl === target) return;
    STATE.lastHoverEl = target;
    moveHighlighterTo(target);
  }

  function onMouseMove(ev) {
    if (!STATE.active) return;
    STATE.pendingHoverEvent = ev;
    if (STATE.hoverRafId != null) return;
    STATE.hoverRafId = requestAnimationFrame(() => {
      STATE.hoverRafId = null;
      const latest = STATE.pendingHoverEvent;
      STATE.pendingHoverEvent = null;
      if (!latest) return;
      processMouseMove(latest);
    });
  }

  function onClick(ev) {
    if (!STATE.active) return;

    // Allow UI interactions without interference
    if (isEventFromUi(ev)) return;

    const rawTarget = ev.target instanceof Element ? ev.target : null;
    if (!rawTarget) return;

    // Require an active request id so background can map the selection
    if (!STATE.sessionId || !STATE.activeRequestId) return;

    ev.preventDefault();
    ev.stopPropagation();

    const target = getDeepPageTarget(ev) || rawTarget;
    if (!(target instanceof Element)) return;

    const ref = ensureRefForElement(target);
    const selector = generateSelector(target);
    let rect;
    try {
      rect = target.getBoundingClientRect();
    } catch {
      rect = { x: 0, y: 0, width: 0, height: 0, left: 0, top: 0 };
    }

    const center = {
      x: Math.round(rect.left + rect.width / 2),
      y: Math.round(rect.top + rect.height / 2),
    };

    sendFrameEvent({
      type: 'element_picker_frame_event',
      sessionId: STATE.sessionId,
      event: 'selected',
      requestId: STATE.activeRequestId,
      element: {
        ref,
        selector,
        selectorType: 'css',
        rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
        center,
        text: summarizeText(target),
        tagName: target.tagName ? String(target.tagName).toLowerCase() : '',
      },
    });
  }

  function onKeyDown(ev) {
    if (!STATE.active) return;
    if (ev && ev.key === 'Escape') {
      if (isEventFromUi(ev)) return;
      ev.preventDefault();
      ev.stopPropagation();
      if (STATE.sessionId) {
        sendFrameEvent({
          type: 'element_picker_frame_event',
          sessionId: STATE.sessionId,
          event: 'cancel',
        });
      }
    }
  }

  // ============================================================
  // Listener Management
  // ============================================================

  function attachListeners() {
    if (STATE.listenersAttached) return;
    window.addEventListener('mousemove', onMouseMove, true);
    window.addEventListener('click', onClick, true);
    window.addEventListener('keydown', onKeyDown, true);
    STATE.listenersAttached = true;
  }

  function detachListeners() {
    if (!STATE.listenersAttached) return;
    window.removeEventListener('mousemove', onMouseMove, true);
    window.removeEventListener('click', onClick, true);
    window.removeEventListener('keydown', onKeyDown, true);
    STATE.listenersAttached = false;
  }

  // ============================================================
  // Session Management API
  // ============================================================

  function startSession(payload) {
    const sessionId = payload && payload.sessionId ? String(payload.sessionId) : '';
    if (!sessionId) return;

    STATE.active = true;
    STATE.sessionId = sessionId;
    STATE.activeRequestId =
      payload && payload.activeRequestId ? String(payload.activeRequestId) : null;
    ensureHighlighter();
    attachListeners();
  }

  function stopSession(payload) {
    const sessionId = payload && payload.sessionId ? String(payload.sessionId) : '';
    // Only stop if session matches or no specific session requested
    if (sessionId && STATE.sessionId && sessionId !== STATE.sessionId) return;

    STATE.active = false;
    STATE.sessionId = null;
    STATE.activeRequestId = null;
    STATE.lastHoverEl = null;
    detachListeners();
    clearHighlighter();

    // Remove highlighter element
    try {
      const hl = STATE.highlighter;
      if (hl && hl.remove) hl.remove();
    } catch {
      // Best effort
    }
    STATE.highlighter = null;
  }

  function setActiveRequest(payload) {
    const sessionId = payload && payload.sessionId ? String(payload.sessionId) : '';
    if (sessionId && STATE.sessionId && sessionId !== STATE.sessionId) return;
    STATE.activeRequestId =
      payload && payload.activeRequestId ? String(payload.activeRequestId) : null;
  }

  // ============================================================
  // Expose API for Background Script
  // ============================================================

  window.__mcpElementPicker = {
    startSession,
    stopSession,
    setActiveRequest,
  };

  // ============================================================
  // Message Listener (for direct communication)
  // ============================================================

  chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
    try {
      if (request && request.action === 'chrome_request_element_selection_ping') {
        sendResponse({ status: 'pong' });
        return false;
      }
      if (request && request.action === 'elementPickerStart') {
        startSession(request);
        sendResponse({ success: true });
        return false;
      }
      if (request && request.action === 'elementPickerStop') {
        stopSession(request);
        sendResponse({ success: true });
        return false;
      }
      if (request && request.action === 'elementPickerSetActiveRequest') {
        setActiveRequest(request);
        sendResponse({ success: true });
        return false;
      }
    } catch (e) {
      sendResponse({ success: false, error: String(e && e.message ? e.message : e) });
      return false;
    }
    return false;
  });
})();