/**
 * 通用底部导航组件
 * 在所有需要底部导航的页面引入此脚本即可自动生成底部导航栏
 */
(function() {
    // 获取当前页面路径
    const currentPath = window.location.pathname;
    const currentPage = currentPath.substring(currentPath.lastIndexOf('/') + 1);
    
    // 判断当前激活的tab
    const isTaskActive = currentPage === 'task-list.html';
    const isBoardActive = currentPage.startsWith('board-');
    const isMyActive = currentPage === 'my-profile.html';

    // 统一的图标定义 - 激活态用fill+stroke，未激活态用stroke
    const icons = {
        // 任务图标 - 剪贴板带勾选
        task: {
            active: `<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none">
                <rect x="5" y="4" width="14" height="17" rx="2" fill="currentColor" stroke="currentColor" stroke-width="1"/>
                <rect x="8" y="2" width="8" height="4" rx="1" fill="currentColor" stroke="currentColor" stroke-width="1"/>
                <path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>`,
            inactive: `<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <rect x="5" y="4" width="14" height="17" rx="2"/>
                <rect x="8" y="2" width="8" height="4" rx="1"/>
                <path d="M9 12l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>`
        },
        // 看板图标 - 三个柱状图
        board: {
            active: `<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1">
                <rect x="4" y="13" width="4" height="8" rx="1"/>
                <rect x="10" y="8" width="4" height="13" rx="1"/>
                <rect x="16" y="3" width="4" height="18" rx="1"/>
            </svg>`,
            inactive: `<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <rect x="4" y="13" width="4" height="8" rx="1"/>
                <rect x="10" y="8" width="4" height="13" rx="1"/>
                <rect x="16" y="3" width="4" height="18" rx="1"/>
            </svg>`
        },
        // 我的图标 - 人物头像
        my: {
            active: `<svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1">
                <circle cx="12" cy="7" r="4"/>
                <path d="M5.5 21a6.5 6.5 0 0113 0h-13z"/>
            </svg>`,
            inactive: `<svg class="w-6 h-6 text-gray-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <circle cx="12" cy="7" r="4"/>
                <path d="M5.5 21a6.5 6.5 0 0113 0h-13z"/>
            </svg>`
        }
    };

    // 创建底部导航HTML - 增大点击区域，提升z-index
    const navHTML = `
    <div id="bottomNav" class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center justify-around px-2" style="z-index: 9999;">
        <a href="task-list.html" class="flex flex-col items-center justify-center gap-1 flex-1 h-full py-2 active:bg-gray-100 rounded-lg transition-colors">
            ${isTaskActive ? icons.task.active : icons.task.inactive}
            <span class="text-xs ${isTaskActive ? 'text-primary font-medium' : 'text-gray-6'}">任务</span>
        </a>
        <a href="board-finance.html" class="flex flex-col items-center justify-center gap-1 flex-1 h-full py-2 active:bg-gray-100 rounded-lg transition-colors">
            ${isBoardActive ? icons.board.active : icons.board.inactive}
            <span class="text-xs ${isBoardActive ? 'text-primary font-medium' : 'text-gray-6'}">看板</span>
        </a>
        <a href="my-profile.html" class="flex flex-col items-center justify-center gap-1 flex-1 h-full py-2 active:bg-gray-100 rounded-lg transition-colors">
            ${isMyActive ? icons.my.active : icons.my.inactive}
            <span class="text-xs ${isMyActive ? 'text-primary font-medium' : 'text-gray-6'}">我的</span>
        </a>
    </div>
    `;

    // 等待DOM加载完成后插入导航
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', insertNav);
    } else {
        insertNav();
    }

    function insertNav() {
        // 移除页面中已有的底部导航（如果有的话）
        const existingNav = document.querySelector('nav.fixed.bottom-0, div.fixed.bottom-0[class*="h-16"]');
        if (existingNav && (existingNav.querySelector('a[href*="task-list"]') || existingNav.querySelector('a[href*="board-"]') || existingNav.querySelector('a[href*="my-profile"]'))) {
            existingNav.remove();
        }
        
        // 插入新导航到body末尾
        document.body.insertAdjacentHTML('beforeend', navHTML);
    }
})();
