// mobile 100vh err issue 대응

const setVh = () => {document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`)};
window.addEventListener('resize', setVh);
setVh();

// touchstart 이벤트 (jQuery 제거)
document.addEventListener('touchstart', function(){ });

// 탭 전환 기능
document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabPanes = document.querySelectorAll('.tab-pane');

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // 더보기 버튼(tab5)은 탭 전환하지 않음
            if (targetTab === 'tab5') {
                return;
            }
            
            // 모든 탭 버튼에서 active 클래스 제거
            tabButtons.forEach(btn => btn.classList.remove('active'));
            // 모든 탭 패널에서 active 클래스 제거
            tabPanes.forEach(pane => pane.classList.remove('active'));
            
            // 클릭된 버튼에 active 클래스 추가
            this.classList.add('active');
            // 해당 탭 패널에 active 클래스 추가
            document.getElementById(targetTab).classList.add('active');
            
            // 아이콘 변경
            updateTabIcons();
        });
    });

    // 헤더 버튼 기능
    const profileBtn = document.getElementById('profileBtn');

    // 프로필 버튼 클릭 이벤트
    if (profileBtn) {
        profileBtn.addEventListener('click', function() {
            // 프로필 탭으로 이동
            const profileTab = document.querySelector('[data-tab="tab5"]');
            if (profileTab) {
                profileTab.click();
            }
        });
    }

    // 탭 아이콘 업데이트 함수
    function updateTabIcons() {
        tabButtons.forEach(button => {
            const iconElement = button.querySelector('.tab-icon-img');
            const isActive = button.classList.contains('active');
            
            if (isActive) {
                const activeIcon = button.getAttribute('data-active-icon');
                iconElement.src = activeIcon;
            } else {
                const inactiveIcon = button.getAttribute('data-inactive-icon');
                iconElement.src = inactiveIcon;
            }
        });
    }

    // 초기 아이콘 설정
    updateTabIcons();

    // heading-select 자동 너비 조정
    const headingSelect = document.querySelector('.heading-select');
    
    function adjustSelectWidth() {
        if (headingSelect) {
            // 임시 span 요소 생성하여 텍스트 길이 측정
            const tempSpan = document.createElement('span');
            tempSpan.style.visibility = 'hidden';
            tempSpan.style.position = 'absolute';
            tempSpan.style.whiteSpace = 'nowrap';
            tempSpan.style.fontSize = window.getComputedStyle(headingSelect).fontSize;
            tempSpan.style.fontFamily = window.getComputedStyle(headingSelect).fontFamily;
            tempSpan.style.fontWeight = window.getComputedStyle(headingSelect).fontWeight;
            
            // 선택된 옵션의 텍스트 가져오기
            const selectedOption = headingSelect.options[headingSelect.selectedIndex];
            tempSpan.textContent = selectedOption ? selectedOption.text : '';
            
            // body에 임시 추가하여 측정
            document.body.appendChild(tempSpan);
            
            // 텍스트 너비 측정 (패딩과 화살표 아이콘 공간 추가)
            const textWidth = tempSpan.offsetWidth;
            const padding = 40; // 좌우 패딩과 화살표 아이콘 공간
            const newWidth = textWidth + padding;
            
            // select 너비 설정
            headingSelect.style.width = newWidth + 'px';
            
            // 임시 요소 제거
            document.body.removeChild(tempSpan);
        }
    }

    // 초기 너비 조정
    adjustSelectWidth();

    // select 변경 시 너비 재조정
    if (headingSelect) {
        headingSelect.addEventListener('change', adjustSelectWidth);
    }

    // 스와이퍼 아이템 클릭 이벤트
    const swiperItems = document.querySelectorAll('.swiper-item');
    swiperItems.forEach((item, index) => {
        item.addEventListener('click', () => {
            console.log(`스와이퍼 아이템 ${index + 1} 클릭됨`);
            
            // 각 아이템별 기능
            switch(index) {
                case 0: // 코인
                    console.log('코인 기능 실행');
                    break;
                case 1: // 차트
                    console.log('차트 기능 실행');
                    break;
                case 2: // 캘린더
                    console.log('캘린더 기능 실행');
                    break;
                case 3: // 추가
                    console.log('추가 기능 실행');
                    break;
            }
        });
    });

    // day-tab 전환 기능
    const dayTabBtns = document.querySelectorAll('.day-tab-btn');
    const conBoxes = document.querySelectorAll('.con-box');

    dayTabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const target = this.getAttribute('data-target');
            
            // 모든 탭 버튼에서 active 클래스 제거
            dayTabBtns.forEach(b => b.classList.remove('active'));
            // 모든 컨텐츠 박스에서 active 클래스 제거
            conBoxes.forEach(box => box.classList.remove('active'));
            
            // 클릭된 버튼에 active 클래스 추가
            this.classList.add('active');
            // 해당 컨텐츠 박스에 active 클래스 추가
            document.querySelector(`.con-box.${target}`).classList.add('active');
        });
    });

    // 배너 슬라이드 기능
    const bannerSlides = document.querySelectorAll('.banner-slide');
    const bannerDots = document.querySelectorAll('.banner-dot');
    const bannerWrapper = document.querySelector('.banner-wrapper');
    let currentSlide = 0;
    let slideInterval;
    let isDragging = false;
    let startX = 0;
    let currentX = 0;
    let slideWidth = 0;

    function showSlide(index) {
        // 모든 슬라이드에서 active와 prev 클래스 제거
        bannerSlides.forEach(slide => {
            slide.classList.remove('active', 'prev');
        });
        
        // 모든 페이지네이션 점에서 active 클래스 제거
        bannerDots.forEach(dot => dot.classList.remove('active'));
        
        // 현재 슬라이드 활성화
        bannerSlides[index].classList.add('active');
        bannerDots[index].classList.add('active');
        
        // 이전 슬라이드에 prev 클래스 추가 (x축 슬라이드 효과)
        const prevIndex = (index - 1 + bannerSlides.length) % bannerSlides.length;
        bannerSlides[prevIndex].classList.add('prev');
        
        currentSlide = index;
    }

    function nextSlide() {
        const nextIndex = (currentSlide + 1) % bannerSlides.length;
        showSlide(nextIndex);
    }

    function prevSlide() {
        const prevIndex = (currentSlide - 1 + bannerSlides.length) % bannerSlides.length;
        showSlide(prevIndex);
    }

    // 페이지네이션 클릭 이벤트
    bannerDots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            showSlide(index);
            resetAutoSlide();
        });
    });

    // 터치/마우스 드래그 기능
    if (bannerWrapper) {
        // 마우스 이벤트
        bannerWrapper.addEventListener('mousedown', (e) => {
            isDragging = true;
            startX = e.pageX;
            currentX = startX;
            bannerWrapper.style.cursor = 'grabbing';
            clearInterval(slideInterval);
        });

        bannerWrapper.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            e.preventDefault();
            currentX = e.pageX;
        });

        bannerWrapper.addEventListener('mouseup', () => {
            if (isDragging) {
                handleDragEnd();
            }
        });

        bannerWrapper.addEventListener('mouseleave', () => {
            if (isDragging) {
                handleDragEnd();
            }
        });

        // 터치 이벤트
        bannerWrapper.addEventListener('touchstart', (e) => {
            isDragging = true;
            startX = e.touches[0].pageX;
            currentX = startX;
            clearInterval(slideInterval);
        });

        bannerWrapper.addEventListener('touchmove', (e) => {
            if (!isDragging) return;
            e.preventDefault();
            currentX = e.touches[0].pageX;
        });

        bannerWrapper.addEventListener('touchend', () => {
            if (isDragging) {
                handleDragEnd();
            }
        });

        function handleDragEnd() {
            isDragging = false;
            bannerWrapper.style.cursor = 'grab';
            
            const dragDistance = startX - currentX;
            const threshold = 50; // 드래그 임계값

            if (Math.abs(dragDistance) > threshold) {
                if (dragDistance > 0) {
                    // 왼쪽으로 드래그 - 다음 슬라이드
                    nextSlide();
                } else {
                    // 오른쪽으로 드래그 - 이전 슬라이드
                    prevSlide();
                }
            }
            
            resetAutoSlide();
        }
    }

    // 자동 슬라이드 시작
    function startAutoSlide() {
        slideInterval = setInterval(nextSlide, 3000); // 3초마다 슬라이드
    }

    // 자동 슬라이드 리셋
    function resetAutoSlide() {
        clearInterval(slideInterval);
        startAutoSlide();
    }

    // 자동 슬라이드 시작
    if (bannerSlides.length > 0) {
        startAutoSlide();
    }

    // 전체메뉴 모달 기능
    const fullMenuModal = document.getElementById('fullMenuModal');
    const closeFullMenu = document.getElementById('closeFullMenu');
    
    // 더보기 탭 버튼 클릭 시 전체메뉴 모달 열기
    const moreTabButton = document.querySelector('[data-tab="tab5"]');
    if (moreTabButton) {
        moreTabButton.addEventListener('click', function(e) {
            e.preventDefault(); // 기본 동작 방지
            e.stopPropagation(); // 이벤트 버블링 방지
            
            if (fullMenuModal) {
                fullMenuModal.style.display = 'block';
                document.body.style.overflow = 'hidden'; // 배경 스크롤 방지
            }
        });
    }
    
    // 닫기 버튼 클릭 시 모달 닫기
    if (closeFullMenu) {
        closeFullMenu.addEventListener('click', function() {
            if (fullMenuModal) {
                fullMenuModal.style.display = 'none';
                document.body.style.overflow = ''; // 배경 스크롤 복원
            }
        });
    }
    
    // 모달 외부 클릭 시 닫기
    if (fullMenuModal) {
        fullMenuModal.addEventListener('click', function(e) {
            if (e.target === fullMenuModal) {
                fullMenuModal.style.display = 'none';
                document.body.style.overflow = '';
            }
        });
    }
    
    // 인기 키워드 클릭 이벤트
    const keywordTags = document.querySelectorAll('.keyword-tag');
    keywordTags.forEach(tag => {
        tag.addEventListener('click', function() {
            // 모든 키워드 태그에서 active 클래스 제거
            keywordTags.forEach(t => t.classList.remove('active'));
            // 클릭된 태그에 active 클래스 추가
            this.classList.add('active');
        });
    });
    
    // 메뉴 아이템 클릭 이벤트
    const menuItems = document.querySelectorAll('.category-items li');
    menuItems.forEach(item => {
        item.addEventListener('click', function() {
            console.log('메뉴 클릭:', this.textContent);
            // 여기에 각 메뉴별 기능을 추가할 수 있습니다
        });
    });
    
    // 상단 네비게이션 아이템 클릭 이벤트
    const topNavItems = document.querySelectorAll('.top-nav-item');
    topNavItems.forEach(item => {
        item.addEventListener('click', function() {
            console.log('상단 네비게이션 클릭:', this.querySelector('span').textContent);
            // 여기에 각 네비게이션별 기능을 추가할 수 있습니다
        });
    });
});