function redirectToHomeAndRefresh() {
    localStorage.clear();
    window.location.href = '/';
}


// 페이지 로드 시 네비게이션 생성 및 이벤트 핸들러 등록
document.addEventListener('DOMContentLoaded', () => {
    createNavigation();
    setupEventListeners();
});

// 네비게이션 생성
function createNavigation() {
    const nav = document.createElement('nav');
    nav.className = 'navigation';
    nav.id = 'nav';
    nav.innerHTML = `
        <div>
            <div class="mx-auto max-w-6xl px-4 py-4 sm:px-8 lg:max-w-7xl lg:px-12">
                <div class="greetings">
                    <div class="flex justify-between select-none">
                        <h1 class="text-4xl text-red-600 font-extrabold cursor-pointer" onclick="redirectToHomeAndRefresh()">
                            UNION ARENA
                            <div style="color: black" id="customTitle">Deck Builder</div>
                        </h1>
                        <!-- <div class="menu" onclick="toggleMobileMenu()">
                             <div class="hambergerIcon bg-black" id="hambergerIcon"></div>
                         </div> -->
                    </div>
                </div>
            </div>
        </div>
    `;
    document.body.prepend(nav); // body의 가장 첫 번째 자식으로 네비게이션 추가

    // 오버레이 메뉴 추가
    const overlayMenu = document.createElement('div');
    overlayMenu.id = 'overlay-menu';
    overlayMenu.className = 'fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50 hidden';
    overlayMenu.innerHTML = `
        <div class="flex flex-col items-center justify-center h-full">
            <div class="overlay-content bg-white p-6 rounded-lg shadow-lg">
                <div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToCardSeries()">
                    <span data-i18n="selectTitle"></span>
                </div>
                <div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToDeckHistory()">
                    <span data-i18n="myDeckHistory"></span>
                </div>
                <div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToChangeLanguage()">
                    Language
                </div>
                <div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToPreset()">
                    <span data-i18n="metaDeck"></span>
                </div>
                <div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToMyCardsDatabase()">
                    My Database
                </div>
            </div>
        </div>
    `;
    document.body.appendChild(overlayMenu); // body의 마지막 자식으로 오버레이 메뉴 추가
}

// 이벤트 핸들러 등록
function setupEventListeners() {
    // 필요한 경우 추가적인 이벤트 핸들러 등록
}

function redirectToHomeAndRefresh() {
    const keysToRemove = Object.keys(localStorage).filter(key => key !== 'lang');
    keysToRemove.forEach(key => localStorage.removeItem(key));
    // localStorage.clear();
    window.location.href = '/';
}

function toggleMobileMenu() {
    const menuIcon = document.getElementById('hambergerIcon');
    menuIcon.classList.toggle('open');
    menuIcon.classList.toggle('bg-red-600');
    const overlayMenu = document.getElementById("overlay-menu");
    overlayMenu.classList.toggle("hidden");
}

function goToCardSeries() {
    window.location.href = "index.html"; // 작품 선택 페이지로 이동
    toggleMobileMenu();
}

function goToDeckHistory() {
    window.location.href = "deckHistory.html"; // 덱 기록 페이지로 이동
    toggleMobileMenu();
}

function goToChangeLanguage() {
    // 언어 변경 페이지로 이동 (페이지가 없으면 기능 구현 필요)
    toggleMobileMenu();
}

function goToPreset() {
    window.location.href = "preset.html"; // 메타 덱 페이지로 이동
    toggleMobileMenu();
}

function goToMyCardsDatabase() {
    window.location.href = "myDatabase.html"; // 내 카드 데이터베이스 페이지로 이동
    toggleMobileMenu();
}



// function toggleMobileMenu() {
//     const menuIcon = document.getElementById('hambergerIcon');
//     menuIcon.classList.toggle('open');
//     menuIcon.classList.toggle('bg-red-600');
// }