// ============================================================
// 기능정의 자동 번호 뱃지 오버레이 컴포넌트
// 화면 내 UI 요소 위에 번호 뱃지를 자동으로 표시
// ============================================================
import React, { useEffect, useState, useCallback, useMemo } from 'react';

// 요소 타입별 CSS 선택자 매핑
const ELEMENT_SELECTORS = {
  // 버튼 관련
  'btn-register': 'button:has(.lucide-plus), button:contains("등록")',
  'btn-save': 'button:contains("저장")',
  'btn-search': 'button:has(.lucide-search)',
  'btn-reset': 'button:contains("초기화")',
  'btn-back': 'button:has(.lucide-arrow-left)',
  'btn-edit': 'button:contains("수정")',
  'btn-delete': 'button:contains("삭제")',
  'btn-print': 'button:has(.lucide-printer)',
  'btn-order-convert': 'button:contains("수주전환")',

  // 입력 필드 관련
  'search-input': 'input[placeholder*="검색"]',
  'date-from': 'input[type="date"]:first-of-type',
  'date-to': 'input[type="date"]:last-of-type',

  // 선택 박스 관련
  'filter-status': 'select:first-of-type',

  // 테이블 관련
  'data-table': 'table',

  // 카드 관련
  'card-total': '.bg-white.rounded-lg.shadow:nth-child(1)',
  'card-draft': '.bg-white.rounded-lg.shadow:nth-child(2)',
  'card-sent': '.bg-white.rounded-lg.shadow:nth-child(3)',
  'card-confirmed': '.bg-white.rounded-lg.shadow:nth-child(4)',
};

// position.area별 선택자 확장
const AREA_SELECTORS = {
  'header': '.flex.justify-between:first-of-type, header, .page-header',
  'header-left': 'h1, .page-title',
  'header-right': '.flex.gap-2:has(button), .header-actions',
  'stats': '.grid.grid-cols-4, .stats-cards',
  'search': '.search-area, .filter-area, form:has(input[type="text"])',
  'table': 'table, .data-table',
  'table-header': 'thead',
  'table-body': 'tbody',
  'form': 'form, .form-area',
  'form-section': '.form-section, .card',
  'footer': '.page-footer, footer',
  'actions': '.actions, .button-group',
};

// 자동 번호 뱃지 오버레이 컴포넌트
const FeatureBadgeOverlay = ({
  screenFeatures,
  isVisible = true,
  hoveredNumber = null,
  onBadgeClick = null
}) => {
  const [badges, setBadges] = useState([]);
  const [containerRect, setContainerRect] = useState(null);

  // screenFeatures에서 번호가 매겨진 요소 목록 추출
  const numberedElements = useMemo(() => {
    if (!screenFeatures?.sections) return [];

    const elements = [];
    let globalIndex = 1;

    screenFeatures.sections.forEach((section) => {
      section.elements?.forEach((element) => {
        elements.push({
          number: globalIndex++,
          ...element,
        });

        // 하위 요소
        if (element.elements && element.elements.length > 0) {
          element.elements.forEach((subElement) => {
            elements.push({
              number: globalIndex++,
              parentId: element.id,
              ...subElement,
            });
          });
        }
      });
    });

    return elements;
  }, [screenFeatures]);

  // 요소 찾기 함수
  const findElement = useCallback((item) => {
    // 1. id로 직접 찾기
    if (item.id) {
      // data-feature-id 속성으로 찾기
      let el = document.querySelector(`[data-feature-id="${item.id}"]`);
      if (el) return el;

      // id 속성으로 찾기
      el = document.getElementById(item.id);
      if (el) return el;
    }

    // 2. position.selector로 찾기
    if (item.position?.selector) {
      try {
        const el = document.querySelector(item.position.selector);
        if (el) return el;
      } catch (e) {
        // 잘못된 선택자는 무시
      }
    }

    // 3. ELEMENT_SELECTORS에서 찾기
    if (item.id && ELEMENT_SELECTORS[item.id]) {
      try {
        const selector = ELEMENT_SELECTORS[item.id];
        // :contains는 jQuery 전용이므로 텍스트 기반 검색으로 대체
        if (selector.includes(':contains(')) {
          const text = selector.match(/:contains\("([^"]+)"\)/)?.[1];
          if (text) {
            const tagMatch = selector.match(/^([a-z]+)/)?.[1] || '*';
            const elements = document.querySelectorAll(tagMatch);
            for (const el of elements) {
              if (el.textContent?.includes(text)) {
                return el;
              }
            }
          }
        } else if (selector.includes(':has(')) {
          // :has는 최신 CSS에서 지원
          try {
            const el = document.querySelector(selector);
            if (el) return el;
          } catch (e) {
            // 브라우저가 :has를 지원하지 않으면 무시
          }
        } else {
          const el = document.querySelector(selector);
          if (el) return el;
        }
      } catch (e) {
        // 잘못된 선택자는 무시
      }
    }

    // 4. area 기반으로 찾기
    if (item.position?.area) {
      const areaSelector = AREA_SELECTORS[item.position.area];
      if (areaSelector) {
        try {
          const el = document.querySelector(areaSelector);
          if (el) return el;
        } catch (e) {
          // 잘못된 선택자는 무시
        }
      }
    }

    // 5. 요소 타입과 label로 찾기
    if (item.type === 'button' && item.label) {
      const buttons = document.querySelectorAll('button');
      for (const btn of buttons) {
        if (btn.textContent?.includes(item.label)) {
          return btn;
        }
      }
    }

    if (item.type === 'input' && item.label) {
      // label로 연결된 input 찾기
      const labels = document.querySelectorAll('label');
      for (const label of labels) {
        if (label.textContent?.includes(item.label)) {
          const forId = label.getAttribute('for');
          if (forId) {
            const input = document.getElementById(forId);
            if (input) return input;
          }
          // 인접한 input 찾기
          const siblingInput = label.nextElementSibling;
          if (siblingInput && (siblingInput.tagName === 'INPUT' || siblingInput.tagName === 'SELECT')) {
            return siblingInput;
          }
        }
      }
    }

    return null;
  }, []);

  // 뱃지 위치 계산
  const calculateBadges = useCallback(() => {
    if (!isVisible || numberedElements.length === 0) {
      setBadges([]);
      return;
    }

    // main 컨테이너 찾기
    const mainContainer = document.querySelector('main');
    if (!mainContainer) {
      setBadges([]);
      return;
    }

    const mainRect = mainContainer.getBoundingClientRect();
    setContainerRect(mainRect);

    const newBadges = [];

    numberedElements.forEach((item) => {
      const element = findElement(item);

      if (element) {
        const rect = element.getBoundingClientRect();

        // main 컨테이너 내에 있는지 확인
        if (rect.top >= mainRect.top && rect.left >= mainRect.left) {
          newBadges.push({
            number: item.number,
            id: item.id,
            label: item.label,
            // main 컨테이너 기준 상대 위치
            x: rect.left - mainRect.left + mainContainer.scrollLeft,
            y: rect.top - mainRect.top + mainContainer.scrollTop,
            width: rect.width,
            height: rect.height,
          });
        }
      }
    });

    setBadges(newBadges);
  }, [numberedElements, isVisible, findElement]);

  // 뱃지 위치 업데이트
  useEffect(() => {
    if (!isVisible) {
      setBadges([]);
      return;
    }

    // 초기 계산
    calculateBadges();

    // ResizeObserver로 레이아웃 변경 감지
    const resizeObserver = new ResizeObserver(() => {
      calculateBadges();
    });

    const mainContainer = document.querySelector('main');
    if (mainContainer) {
      resizeObserver.observe(mainContainer);
    }

    // 스크롤 이벤트 감지
    const handleScroll = () => {
      calculateBadges();
    };

    mainContainer?.addEventListener('scroll', handleScroll);
    window.addEventListener('resize', calculateBadges);

    // MutationObserver로 DOM 변경 감지
    const mutationObserver = new MutationObserver(() => {
      setTimeout(calculateBadges, 100);
    });

    if (mainContainer) {
      mutationObserver.observe(mainContainer, {
        childList: true,
        subtree: true,
        attributes: true,
      });
    }

    return () => {
      resizeObserver.disconnect();
      mutationObserver.disconnect();
      mainContainer?.removeEventListener('scroll', handleScroll);
      window.removeEventListener('resize', calculateBadges);
    };
  }, [isVisible, calculateBadges, screenFeatures]);

  if (!isVisible || badges.length === 0) {
    return null;
  }

  return (
    <div
      className="pointer-events-none absolute inset-0 z-50 overflow-hidden"
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      }}
    >
      {badges.map((badge) => {
        const isHighlighted = hoveredNumber === badge.number;

        return (
          <div
            key={badge.number}
            className={`
              pointer-events-auto absolute flex items-center justify-center
              rounded-full font-bold text-xs transition-all duration-200 cursor-pointer
              ${isHighlighted
                ? 'bg-red-600 text-white ring-2 ring-red-300 scale-125 z-10'
                : 'bg-red-500 text-white hover:bg-red-600 hover:scale-110'
              }
            `}
            style={{
              left: badge.x - 10, // 뱃지 왼쪽 상단에 위치
              top: badge.y - 10,
              width: 20,
              height: 20,
              minWidth: 20,
              fontSize: '10px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
            }}
            onClick={() => onBadgeClick?.(badge)}
            title={badge.label || badge.id}
          >
            {badge.number}
          </div>
        );
      })}
    </div>
  );
};

export default FeatureBadgeOverlay;
