// focus-monitor.js
import Spotlight from '@enact/spotlight';

// 포커스 모니터링 클래스
class FocusMonitor {
  constructor() {
    this.isListening = false;
    this.focusHistory = [];
  }

  // 포커스 모니터링 시작
  startMonitoring() {
    if (this.isListening) return;

    console.log("[focus] 포커스 모니터링 시작");
    this.isListening = true;

    // DOM 이벤트로 포커스 모니터링
    // capture: true로 설정하여 모든 포커스 이벤트 캐치
    document.addEventListener('focusin', this.handleDOMFocus, true);
    document.addEventListener('focusout', this.handleDOMBlur, true);
    
    // 키보드 이벤트로 spotlight 네비게이션 감지
    document.addEventListener('keydown', this.handleKeydown, true);
  }

  // 포커스 모니터링 중지
  stopMonitoring() {
    if (!this.isListening) return;

    console.log("[focus] 포커스 모니터링 중지");
    this.isListening = false;

    // 이벤트 리스너 제거
    document.removeEventListener('focusin', this.handleDOMFocus, true);
    document.removeEventListener('focusout', this.handleDOMBlur, true);
    document.removeEventListener('keydown', this.handleKeydown, true);
  }

  // 키보드 이벤트 핸들러 (spotlight 네비게이션 감지)
  handleKeydown = (event) => {
    // spotlight 네비게이션 키들
    const spotlightKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter'];
    
    if (spotlightKeys.includes(event.key)) {
      console.log(`[focus] 🎮 SPOTLIGHT KEY: ${event.key}`);
      
      // 키 이벤트 후 잠시 대기하여 포커스 변화 감지
      setTimeout(() => {
        const current = this.getCurrentSpotlightFocus();
        if (current) {
          console.log(`[focus] 🎯 SPOTLIGHT NAVIGATION RESULT:`, current);
        }
      }, 10);
    }
  }

  // DOM 포커스 이벤트 핸들러
  handleDOMFocus = (event) => {
    const target = event.target;
    const focusInfo = this.getElementInfo(target);
    
    // spotlight 요소인지 확인
    const isSpottable = this.isSpottableElement(target);
    const logPrefix = isSpottable ? "🎯 SPOTLIGHT FOCUS" : "🔍 DOM FOCUS";
    
    console.log(`[focus] ${logPrefix}:`, focusInfo);
    
    this.focusHistory.push({
      type: isSpottable ? 'spotlight-focus' : 'dom-focus',
      timestamp: Date.now(),
      target: focusInfo,
      event: event
    });
  }

  // DOM 블러 이벤트 핸들러
  handleDOMBlur = (event) => {
    const target = event.target;
    const blurInfo = this.getElementInfo(target);
    
    // spotlight 요소인지 확인
    const isSpottable = this.isSpottableElement(target);
    const logPrefix = isSpottable ? "💨 SPOTLIGHT BLUR" : "🌫️ DOM BLUR";
    
    console.log(`[focus] ${logPrefix}:`, blurInfo);
    
    this.focusHistory.push({
      type: isSpottable ? 'spotlight-blur' : 'dom-blur',
      timestamp: Date.now(),
      target: blurInfo,
      event: event
    });
  }

  // 요소가 spotlight 요소인지 확인
  isSpottableElement(element) {
    if (!element) return false;
    
    // spotlight 관련 속성들 확인
    return element.hasAttribute('data-spotlight-id') ||
           element.hasAttribute('data-spotlight-container') ||
           element.classList.contains('spottable') ||
           element.getAttribute('tabindex') === '0' ||
           // Enact 컴포넌트들은 보통 특정 클래스명을 가짐
           element.className.includes('Button_') ||
           element.className.includes('Input_') ||
           element.className.includes('Item_');
  }

  // 현재 spotlight 포커스 가져오기
  getCurrentSpotlightFocus() {
    try {
      const current = Spotlight.getCurrent();
      return this.getElementInfo(current);
    } catch (e) {
      // getCurrent가 없는 경우 document.activeElement 사용
      return this.getElementInfo(document.activeElement);
    }
  }

  // 요소 정보 추출
  getElementInfo(element) {
    if (!element) return { element: null, info: 'No element' };

    const info = {
      tagName: element.tagName,
      id: element.id || '',
      className: element.className || '',
      spotlightId: element.getAttribute('data-spotlight-id') || '',
      spotlightContainer: element.getAttribute('data-spotlight-container') || '',
      textContent: element.textContent ? element.textContent.substring(0, 50) : '',
      tabIndex: element.tabIndex,
      isSpottable: this.isSpottableElement(element),
      element: element
    };

    return info;
  }

  // 현재 포커스된 요소 정보 가져오기
  getCurrentFocus() {
    const activeElement = document.activeElement;
    const spotlightCurrent = this.getCurrentSpotlightFocus();
    
    console.log("[focus] 현재 포커스 상태:");
    console.log("[focus] - DOM activeElement:", this.getElementInfo(activeElement));
    console.log("[focus] - Spotlight current:", spotlightCurrent);
    
    return {
      dom: this.getElementInfo(activeElement),
      spotlight: spotlightCurrent
    };
  }

  // 포커스 히스토리 출력
  printHistory(limit = 10) {
    console.log(`[focus] 📋 포커스 히스토리 (최근 ${limit}개):`);
    this.focusHistory
      .slice(-limit)
      .forEach((entry, index) => {
        const time = new Date(entry.timestamp).toLocaleTimeString();
        console.log(`[focus] ${index + 1}. [${time}] ${entry.type}:`, entry.target);
      });
  }

  // 히스토리 초기화
  clearHistory() {
    this.focusHistory = [];
    console.log("[focus] 포커스 히스토리가 초기화되었습니다.");
  }

  // spotlight 상태 확인
  getSpotlightStatus() {
    try {
      const current = Spotlight.getCurrent();
      const paused = Spotlight.isPaused ? Spotlight.isPaused() : false;
      
      console.log("[focus] 🔍 Spotlight 상태:");
      console.log("[focus] - Current:", this.getElementInfo(current));
      console.log("[focus] - Paused:", paused);
      
      return {
        current: this.getElementInfo(current),
        paused: paused
      };
    } catch (e) {
      console.log("[focus] ⚠️ Spotlight 상태를 가져올 수 없습니다:", e.message);
      return null;
    }
  }
}

// 싱글톤 인스턴스 생성
const focusMonitor = new FocusMonitor();

// 편의 함수들 export
export const startFocusMonitoring = () => focusMonitor.startMonitoring();
export const stopFocusMonitoring = () => focusMonitor.stopMonitoring();
export const getCurrentFocus = () => focusMonitor.getCurrentFocus();
export const printFocusHistory = (limit) => focusMonitor.printHistory(limit);
export const clearFocusHistory = () => focusMonitor.clearHistory();
export const getSpotlightStatus = () => focusMonitor.getSpotlightStatus();

export default focusMonitor;