// ============================
// 1. PC 아코디언 + 화살표 상태 유지
// ============================
const menuItems = document.querySelectorAll('.depth1 > li');

menuItems.forEach(item => {
    const btn = item.querySelector('button');

    btn.addEventListener('click', () => {

        const isActive = item.classList.contains('active');

        menuItems.forEach(i => i.classList.remove('active'));

        if(!isActive){
            item.classList.add('active');
        }
    });
});


// ============================
// 3. 드롭다운 토글
// ============================
document.querySelectorAll('.select > button').forEach(btn=>{
    btn.addEventListener('click', function(e){
        e.stopPropagation();

        const parent = this.parentElement;
        parent.classList.toggle('active');

        document.querySelectorAll('.select').forEach(el=>{
            if(el !== parent) el.classList.remove('active');
        });
    });
});


// ============================
// 4. 1차 선택 → 2차 생성
// ============================
document.querySelectorAll('.depth1Select li').forEach(li=>{
    li.addEventListener('click', function(){

        const index = this.dataset.index;
        const text = this.innerText;

        depth1Select.querySelector('button').innerHTML = text + ' <span></span>';

        renderDepth2(index);

        depth1Select.classList.remove('active');
    });
});


// ============================
// 5. 2차 생성 함수 (핵심)
// ============================
function renderDepth2(index){
    depth2List.innerHTML = '';

    depthData[index].forEach(menu=>{
        const li = document.createElement('li');

        const a = document.createElement('a');
        a.href = menu.url;
        a.innerText = menu.name;

        li.appendChild(a);
        depth2List.appendChild(li);
    });

    // 첫번째 자동 표시
    depth2Select.querySelector('button').innerHTML =
        depthData[index][0].name + ' <span></span>';
}


// ============================
// 6. 초기 실행 (모바일 핵심 개선)
// 초기 메뉴 세팅 (현재 페이지 기준)
// ============================
window.addEventListener('DOMContentLoaded', function(){
   
    const currentUrl = window.location.pathname; // ✅ 절대경로 유지
    const depth1Btns = document.querySelectorAll('.depth1 > li');

    let foundIndex = 0;
    let foundText = '';

    // 현재 URL 기준으로 메뉴 찾기
    depthData.forEach((group, i)=>{
        group.forEach(menu=>{
            if(currentUrl.includes(menu.url)){ // ✅ 핵심 수정
                foundIndex = i;
                foundText = menu.name;
            }
        });
    });

    // 2차 생성
    renderDepth2(foundIndex);

    // 1차 버튼 텍스트 변경
    const depth1Text = depth1Btns[foundIndex]
        ?.querySelector('button')
        ?.childNodes[0].textContent.trim();

    if(depth1Text){
        depth1Select.querySelector('button').innerHTML =
            depth1Text + ' <span></span>';
    }

    // 2차 버튼 텍스트 변경
    if(foundText){
        depth2Select.querySelector('button').innerHTML =
            foundText + ' <span></span>';
    }

});


// ============================
// 7. 자동 active 처리 (핵심)
// ============================
window.addEventListener('DOMContentLoaded', function(){
    
    const currentUrl = window.location.pathname;
    const depth2Text = document.querySelector('.location .depth_2')?.innerText.trim();

    document.querySelectorAll('.depth2 li').forEach(li=>{
        const a = li.querySelector('a');

        // URL 기준
        if(currentUrl.includes(a.getAttribute('href'))){
            setActive(li);
        }

        // 텍스트 기준 (fallback)
        if(a.innerText.trim() === depth2Text){
            setActive(li);
        }
    });

    function setActive(targetLi){
        // 2차 active
        targetLi.classList.add('active');

        // 1차 active
        const parentLi = targetLi.closest('.depth1 > li');
        parentLi.classList.add('active');

        // 모바일 버튼 텍스트 반영
        depth1Select.querySelector('button').innerHTML =
            parentLi.querySelector('button').childNodes[0].textContent.trim() + ' <span></span>';

        depth2Select.querySelector('button').innerHTML =
            targetLi.innerText + ' <span></span>';
    }

});


// ============================
// 8. 외부 클릭 닫기
// ============================
document.addEventListener('click', function(e){
    if(!e.target.closest('.select')){
        document.querySelectorAll('.select').forEach(el=>{
            el.classList.remove('active');
        });
    }
});