// 디버깅 과정에서 만든 유틸리티 함수
const debugAnimation = (element, options = {}) => {
  console.log('🎬 Animation Debug Start');
  console.log('Element:', element);
  console.log('Computed Style:', getComputedStyle(element));
  console.log('Animation Options:', options);
  
  element.addEventListener('animationstart', () => 
    console.log('✅ Animation Started'));
  element.addEventListener('animationend', () => 
    console.log('🏁 Animation Ended'));
};

// Before (리팩토링 전)
function showImage(img) {
  document.getElementById('modal').style.display = 'block';
  document.getElementById('modalImg').src = img.src;
  document.getElementById('modalTitle').innerHTML = img.alt;
  // 반복되는 코드들...
}

// After (리팩토링 후)
class GalleryModal {
  constructor(modalId) {
    this.modal = document.getElementById(modalId);
    this.modalImg = this.modal.querySelector('.modal-image');
    this.modalTitle = this.modal.querySelector('.modal-title');
  }
  
  show(imageData) {
    this.modal.classList.add('active');
    this.modalImg.src = imageData.src;
    this.modalTitle.textContent = imageData.title;
  }
}

// 이미지 lazy loading 구현
const observerOptions = {
  root: null,
  rootMargin: '50px',
  threshold: 0.1
};

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      imageObserver.unobserve(img);
    }
  });
}, observerOptions);

// 갤러리 모달 상태 관리
const [modalState, setModalState] = useState({
  isOpen: false,
  currentImage: null,
  currentIndex: 0
});

// 이미지 클릭 핸들러
const handleImageClick = (image, index) => {
  setModalState({
    isOpen: true,
    currentImage: image,
    currentIndex: index
  });
};

// 이미지 프리로딩 효과
useEffect(() => {
  const preloadNextImages = () => {
    const nextImages = images.slice(currentIndex + 1, currentIndex + 4);
    nextImages.forEach(img => {
      const image = new Image();
      image.src = img.src;
    });
  };
  
  if (images.length > 0) {
    preloadNextImages();
  }
}, [currentIndex, images]);

// 키보드 네비게이션을 위한 Custom Hook
const useKeyboardNavigation = (images, currentIndex, onIndexChange) => {
  useEffect(() => {
    const handleKeyPress = (e) => {
      switch(e.key) {
        case 'ArrowLeft':
          if (currentIndex > 0) {
            onIndexChange(currentIndex - 1);
          }
          break;
        case 'ArrowRight':
          if (currentIndex < images.length - 1) {
            onIndexChange(currentIndex + 1);
          }
          break;
        case 'Escape':
          onIndexChange(-1); // 모달 닫기
          break;
      }
    };
    
    window.addEventListener('keydown', handleKeyPress);
    return () => window.removeEventListener('keydown', handleKeyPress);
  }, [currentIndex, images.length, onIndexChange]);
};

// 3월 초: 무작정 시도
function fixAnimation() {
  // 이거 안되면 이것도 해보고 저것도 해보고...
  element.style.transform = 'translateX(100px)';
  setTimeout(() => {
    element.style.transform = 'translateX(0)';
  }, 1000);
}

// 3월 말: 체계적 접근
function debugAnimation(element, targetTransform) {
  // 1. 현재 상태 확인
  const currentStyle = getComputedStyle(element);
  console.log('Current transform:', currentStyle.transform);
  
  // 2. 브라우저 호환성 확인
  const supportsTransform = 'transform' in element.style;
  
  // 3. GPU 가속 활용
  element.style.willChange = 'transform';
  
  // 4. 애니메이션 실행
  element.style.transform = targetTransform;
  
  // 5. 정리
  element.addEventListener('transitionend', () => {
    element.style.willChange = 'auto';
  });
}

// 3개월 전의 나에게 하고 싶은 말
const handleImageClick = (img, idx) => { // img? idx? 이게 뭐야?
  // 주석도 없고...
  if (img) {
    modal.show();
    modalImg.src = img.src;
    currentIdx = idx;
  }
};

// 3개월 후의 나가 원하는 코드
const handleImageClick = (imageData, imageIndex) => {
  /**
   * 갤러리 이미지 클릭 시 모달을 열고 선택된 이미지를 표시
   * @param {Object} imageData - 이미지 정보 (src, alt, title 포함)
   * @param {number} imageIndex - 갤러리에서의 이미지 순서
   */
  if (!imageData?.src) return;
  
  setModalState(prev => ({
    ...prev,
    isOpen: true,
    currentImage: imageData,
    currentIndex: imageIndex
  }));
};