/**
 * Text field focus detection and management
 */
import { CSS_CLASSES } from '../config/constants.js';
import {
  kpIsTypingContext,
  kpGetDeepActiveElement,
  kpGetComposedEventTarget
} from '../utils/dom-context.js';

export class FocusDetector {
  constructor(stateManager, mouseCoordinateManager = null) {
    this.state = stateManager;
    this.mouseCoordinateManager = mouseCoordinateManager;
    this.currentFocusedElement = null;
    this.textElementObserver = null; // MutationObserver for focused text element
    this.textElementResizeObserver = null; // ResizeObserver for focused text element
    this.documentObserver = null; // MutationObserver for document focus changes
    this.rafId = null; // requestAnimationFrame ID for position tracking

    // Bound handlers so start/stop can add/remove the same function references.
    this._onFocusIn = this.handleFocusIn.bind(this);
    this._onFocusOut = this.handleFocusOut.bind(this);
  }

  start() {
    console.log('[KeyPilot] FocusDetector starting...');

    // Listen for focus/blur events
    document.addEventListener('focusin', this._onFocusIn, true);
    document.addEventListener('focusout', this._onFocusOut, true);
    console.log('[KeyPilot] Focus event listeners added');

    // Set up MutationObserver for document to catch programmatic focus changes
    this.setupDocumentObserver();

    // Immediate check: google.com (and others) autofocus the search box *before*
    // our document_idle content script runs, so we never see that focusin.
    try { this.checkCurrentFocus(); } catch { /* ignore */ }

    // Follow-up checks for late autofocus / SPA replacements of the search field.
    setTimeout(() => {
      this.checkCurrentFocus();
      console.log('[KeyPilot] Initial focus check completed');
    }, 100);
    setTimeout(() => this.checkCurrentFocus(), 500);

    // Also check when DOM is fully loaded
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => {
        try { this.checkCurrentFocus(); } catch { /* ignore */ }
        setTimeout(() => this.checkCurrentFocus(), 100);
      });
    }

    // Check when page is fully loaded (including images, etc.)
    window.addEventListener('load', () => {
      try { this.checkCurrentFocus(); } catch { /* ignore */ }
      setTimeout(() => this.checkCurrentFocus(), 100);
    });

    // Returning to the tab: browser may restore focus without a focusin we saw.
    try {
      window.addEventListener('focus', () => {
        setTimeout(() => this.checkCurrentFocus(), 0);
      });
    } catch { /* ignore */ }
  }

  stop() {
    document.removeEventListener('focusin', this._onFocusIn, true);
    document.removeEventListener('focusout', this._onFocusOut, true);

    // Clean up observers
    this.cleanupTextElementObservers();
    this.cleanupDocumentObserver();

    // Clean up any remaining focused element reference
    if (this.currentFocusedElement) {
      this.currentFocusedElement = null;
    }
  }

  handleFocusIn(e) {
    // composedPath reaches into open shadow roots; event.target is often the host.
    const composed = kpGetComposedEventTarget(e);
    const deep = this.getDeepActiveElement();
    const candidate = this.isTextInput(composed)
      ? composed
      : (this.isTextInput(deep) ? deep : null);

    console.log(
      '[KeyPilot] FocusIn event:',
      candidate?.tagName || e.target?.tagName,
      candidate?.type || e.target?.type || 'N/A',
      'id:',
      candidate?.id || e.target?.id || 'none'
    );

    if (candidate) {
      console.log('[KeyPilot] Text input focused - setting text mode:', candidate.tagName, candidate.type || 'N/A');
      this.setTextFocus(candidate);
    } else {
      console.log('[KeyPilot] Non-text element focused - ignoring');
    }
  }

  handleFocusOut(e) {
    const composed = kpGetComposedEventTarget(e);
    const leftText =
      this.isTextInput(composed) ||
      this.isTextInput(e.target) ||
      (this.currentFocusedElement && e.target === this.currentFocusedElement);

    if (leftText) {
      console.debug('Text input blurred:', composed?.tagName || e.target?.tagName, composed?.type || e.target?.type || 'N/A');
      // Longer delay to allow for focus changes and prevent premature clearing during slider interaction
      setTimeout(() => {
        const currentlyFocused = this.getDeepActiveElement();
        console.debug('Focus check after blur - currently focused:', currentlyFocused?.tagName, currentlyFocused?.type, currentlyFocused?.id);
        if (!this.isTextInput(currentlyFocused)) {
          console.debug('Clearing text focus - no text input currently focused');
          this.clearTextFocus();
        } else {
          // Focus moved to another text field — keep/update text mode.
          if (currentlyFocused !== this.currentFocusedElement) {
            this.setTextFocus(currentlyFocused);
          } else {
            console.debug('Keeping text focus - text input still focused');
          }
        }
      }, 100); // Increased delay to handle slider interactions
    }
  }

  checkCurrentFocus() {
    const activeElement = this.getDeepActiveElement();

    if (this.isTextInput(activeElement)) {
      if (this.currentFocusedElement !== activeElement) {
        console.debug('Text focus detected during check:', activeElement.tagName, activeElement.type || 'N/A', 'ID:', activeElement.id || 'none');
        this.setTextFocus(activeElement);
      }
    } else if (this.currentFocusedElement) {
      console.debug('Text focus cleared during check');
      this.clearTextFocus();
    }
  }

  startPositionTracking() {
    if (this.rafId) {
      cancelAnimationFrame(this.rafId);
    }

    // Store initial position for comparison
    if (this.currentFocusedElement) {
      this.lastKnownRect = this.currentFocusedElement.getBoundingClientRect();
    }

    const checkPosition = () => {
      if (this.currentFocusedElement && this.state.getState().mode === 'text_focus') {
        const currentRect = this.currentFocusedElement.getBoundingClientRect();

        // Check if position OR size changed (comprehensive tracking)
        if (this.lastKnownRect.left !== currentRect.left ||
          this.lastKnownRect.top !== currentRect.top ||
          this.lastKnownRect.width !== currentRect.width ||
          this.lastKnownRect.height !== currentRect.height) {

          if (window.KEYPILOT_DEBUG) {
            console.debug('RAF position tracking detected element change:', {
              oldRect: {
                left: this.lastKnownRect.left,
                top: this.lastKnownRect.top,
                width: this.lastKnownRect.width,
                height: this.lastKnownRect.height
              },
              newRect: {
                left: currentRect.left,
                top: currentRect.top,
                width: currentRect.width,
                height: currentRect.height
              }
            });
          }

          this.lastKnownRect = currentRect;
          this.triggerOverlayUpdate();
        }

        // Continue the loop
        this.rafId = requestAnimationFrame(checkPosition);
      }
    };

    // Start the animation frame loop
    this.rafId = requestAnimationFrame(checkPosition);
    console.debug('Position tracking started with requestAnimationFrame');
  }

  stopPositionTracking() {
    if (this.rafId) {
      cancelAnimationFrame(this.rafId);
      this.rafId = null;
      console.debug('Position tracking stopped');
    }
  }

  setupDocumentObserver() {
    if (!window.MutationObserver) return;

    this.documentObserver = new MutationObserver((mutations) => {
      let shouldCheckFocus = false;

      mutations.forEach((mutation) => {
        // Check for focus-related attribute changes
        if (mutation.type === 'attributes') {
          const attrName = mutation.attributeName;
          // Watch for tabindex changes or other focus-related attributes
          if (attrName === 'contenteditable') {
            shouldCheckFocus = true;
          }
        }
      });

      if (shouldCheckFocus) {
        // Debounce focus checks to avoid excessive calls
        if (this.focusCheckTimeout) {
          clearTimeout(this.focusCheckTimeout);
        }
        this.focusCheckTimeout = setTimeout(() => {
          this.checkCurrentFocus();
          this.focusCheckTimeout = null;
        }, 100);
      }
    });

    // Observe the entire document for attribute changes
    this.documentObserver.observe(document, {
      attributes: true,
      attributeFilter: ['contenteditable'],
      subtree: true
    });

    console.debug('Document MutationObserver set up for focus-related changes');
  }

  cleanupDocumentObserver() {
    if (this.documentObserver) {
      this.documentObserver.disconnect();
      this.documentObserver = null;
    }

    if (this.focusCheckTimeout) {
      clearTimeout(this.focusCheckTimeout);
      this.focusCheckTimeout = null;
    }

    console.debug('Document observer cleaned up');
  }

  getDeepActiveElement() {
    return kpGetDeepActiveElement();
  }

  isTextInput(element) {
    if (!element || element.nodeType !== 1) return false;

    try {
      // KeyPilot omnibox is a text input, but we do NOT want it to trigger text focus mode.
      // Omnibox is its own overlay/mode, and entering text_focus here breaks its keyboard UX.
      if (element.classList?.contains?.(CSS_CLASSES.OMNIBOX_INPUT)) return false;
      const omniboxRoot = element.closest?.(`.${CSS_CLASSES.OMNIBOX_BACKDROP}`) || element.closest?.(`.${CSS_CLASSES.OMNIBOX_PANEL}`);
      if (omniboxRoot) return false;
      // Align with keyboard shortcut suppression (includes bare <input>, date types, etc.).
      return kpIsTypingContext(element);
    } catch {
      return false;
    }
  }

  setTextFocus(element) {
    console.log('[KeyPilot] Setting text focus for element:', element.tagName, element.type || 'N/A');

    // Update current focused element reference
    this.currentFocusedElement = element;

    // Set up observers for the focused text element
    this.setupTextElementObservers(element);

    // Position cursor appropriately for text focus mode
    this.positionCursorForTextFocus(element);

    // Start requestAnimationFrame loop for position tracking
    this.startPositionTracking();

    console.log('[KeyPilot] Setting state to text_focus mode');
    // Set mode and focused element in a single state update to ensure proper cursor initialization
    this.state.setState({
      mode: 'text_focus',
      focusedTextElement: element,
      focusEl: null // Clear to ensure hasClickableElement starts as false
    });

    console.log('[KeyPilot] Text focus mode set successfully');
  }

  /**
   * Position cursor for text focus mode
   * Uses stored coordinates if available, otherwise positions underneath the text field
   * @param {Element} element - The focused text element
   */
  positionCursorForTextFocus(element) {
    if (!element || !this.mouseCoordinateManager) {
      return;
    }

    // Try to get stored coordinates first
    const storedCoordinates = this.mouseCoordinateManager.lastStoredCoordinates;
    
    if (storedCoordinates) {
      // Use stored coordinates if available and valid
      const x = Math.min(storedCoordinates.x, window.innerWidth - 20);
      const y = Math.min(storedCoordinates.y, window.innerHeight - 20);
      const validX = Math.max(10, x);
      const validY = Math.max(10, y);
      
      this.state.setMousePosition(validX, validY);
      
      if (window.KEYPILOT_DEBUG) {
        console.log('[KeyPilot] Positioned cursor using stored coordinates for text focus:', {
          x: validX, y: validY
        });
      }
    } else {
      // Fallback: position cursor underneath the text field
      const rect = element.getBoundingClientRect();
      const x = rect.left + (rect.width / 2);
      const y = rect.bottom + 10; // 10px below the text field
      
      // Ensure coordinates are within viewport bounds
      const validX = Math.min(Math.max(10, x), window.innerWidth - 20);
      const validY = Math.min(Math.max(10, y), window.innerHeight - 20);
      
      this.state.setMousePosition(validX, validY);
      
      if (window.KEYPILOT_DEBUG) {
        console.log('[KeyPilot] Positioned cursor underneath text field:', {
          x: validX, y: validY, elementRect: rect
        });
      }
    }
  }

  clearTextFocus() {
    // Stop position tracking
    this.stopPositionTracking();

    // Clean up observers
    this.cleanupTextElementObservers();

    // Clear focused element reference
    this.currentFocusedElement = null;
    this.state.setState({
      mode: 'none',
      focusedTextElement: null
    });
  }

  isInTextFocus() {
    return this.state.getState().mode === 'text_focus';
  }

  getFocusedElement() {
    return this.currentFocusedElement;
  }

  setupTextElementObservers(element) {
    if (!element) return;

    // Clean up any existing observers first
    this.cleanupTextElementObservers();

    // Store initial position for comparison
    this.lastKnownRect = element.getBoundingClientRect();

    // 1. ResizeObserver for size changes
    if (window.ResizeObserver) {
      this.textElementResizeObserver = new ResizeObserver((entries) => {
        // Debounce resize updates
        if (this.resizeTimeout) {
          clearTimeout(this.resizeTimeout);
        }
        this.resizeTimeout = setTimeout(() => {
          this.triggerOverlayUpdate();
          this.resizeTimeout = null;
        }, 16); // ~60fps
      });

      // Observe the text element itself
      this.textElementResizeObserver.observe(element);
      console.debug('ResizeObserver set up for text element');
    }

    // 2. Input event listener for content changes that affect size
    this.inputEventHandler = () => {
      // Debounce input updates
      if (this.inputTimeout) {
        clearTimeout(this.inputTimeout);
      }
      this.inputTimeout = setTimeout(() => {
        console.debug('Input event detected - triggering overlay update');
        this.triggerOverlayUpdate();
        this.inputTimeout = null;
      }, 16);
    };

    element.addEventListener('input', this.inputEventHandler);
    console.debug('Input event listener set up for text element');

    // 3. MutationObserver for attribute and DOM changes
    if (window.MutationObserver) {
      this.textElementObserver = new MutationObserver((mutations) => {
        let shouldUpdate = false;

        mutations.forEach((mutation) => {
          // Watch for style and class changes that affect position/size
          if (mutation.type === 'attributes') {
            const attrName = mutation.attributeName;
            if (attrName === 'style' || attrName === 'class') {
              console.debug('MutationObserver detected attribute change:', attrName, mutation.target.tagName);
              shouldUpdate = true;
            }
            // Also watch for size-related attributes
            if (['rows', 'cols', 'width', 'height'].includes(attrName)) {
              console.debug('MutationObserver detected size attribute change:', attrName);
              shouldUpdate = true;
            }
          }

          // DOM structure changes
          if (mutation.type === 'childList') {
            console.debug('MutationObserver detected DOM structure change');
            shouldUpdate = true;
          }

          // Content changes
          if (mutation.type === 'characterData') {
            console.debug('MutationObserver detected content change');
            shouldUpdate = true;
          }
        });

        if (shouldUpdate) {
          // Debounce mutation updates
          if (this.mutationTimeout) {
            clearTimeout(this.mutationTimeout);
          }
          this.mutationTimeout = setTimeout(() => {
            this.triggerOverlayUpdate();
            this.mutationTimeout = null;
          }, 16);
        }
      });

      // Observe the element itself with comprehensive options
      this.textElementObserver.observe(element, {
        attributes: true,
        attributeOldValue: true,
        characterData: true,
        childList: true,
        subtree: true
      });

      // Observe parent elements for layout changes
      let parent = element.parentElement;
      let observedParents = 0;
      while (parent && observedParents < 2) {
        this.textElementObserver.observe(parent, {
          attributes: true,
          attributeFilter: ['style', 'class'],
          childList: true
        });
        parent = parent.parentElement;
        observedParents++;
      }

      console.debug('MutationObserver set up for element and', observedParents, 'parents');
    }

    // Position polling removed
  }


  cleanupTextElementObservers() {
    if (this.textElementObserver) {
      this.textElementObserver.disconnect();
      this.textElementObserver = null;
    }

    if (this.textElementResizeObserver) {
      this.textElementResizeObserver.disconnect();
      this.textElementResizeObserver = null;
    }

    if (this.inputEventHandler && this.currentFocusedElement) {
      this.currentFocusedElement.removeEventListener('input', this.inputEventHandler);
      this.inputEventHandler = null;
    }

    // Stop position tracking
    this.stopPositionTracking();

    if (this.resizeTimeout) {
      clearTimeout(this.resizeTimeout);
      this.resizeTimeout = null;
    }

    if (this.mutationTimeout) {
      clearTimeout(this.mutationTimeout);
      this.mutationTimeout = null;
    }

    if (this.inputTimeout) {
      clearTimeout(this.inputTimeout);
      this.inputTimeout = null;
    }

    console.debug('Text element observers cleaned up');
  }

  triggerOverlayUpdate() {
    // Trigger a state update to refresh overlays with current element position
    if (this.currentFocusedElement && this.state.getState().mode === 'text_focus') {
      // Force overlay update by triggering a state change
      this.state.setState({
        mode: 'text_focus',
        focusedTextElement: this.currentFocusedElement,
        _overlayUpdateTrigger: Date.now() // Unique value to force update
      });

      console.debug('Triggered overlay update for text element position/size change');
    }
  }
}