const navItems = [
    { icon: 'message-square', text: '聊天', href: './chat.html' },
    { icon: 'book-open', text: '日记', href: './diary.html' },
    { icon: 'crosshair', text: '话题', href: './topic_tracker.html' },
    { icon: 'milestone', text: '人生轨迹', href: './life_milestones.html' },
    { icon: 'layout-dashboard', text: '个人展板', href: './personal_dashboard.html' }
];

function createBottomNav() {
    const navPlaceholder = document.getElementById('bottom-nav-placeholder');
    if (!navPlaceholder) return;

    const navContainer = document.createElement('nav');
    navContainer.className = 'fixed bottom-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm shadow-[0_-2px_10px_rgba(0,0,0,0.05)] flex justify-around py-2 border-t border-gray-200/80';
    
    const currentPath = window.location.pathname.split('/').pop();

    navItems.forEach(item => {
        const itemPath = item.href.substring(2); // remove './' for comparison
        const isActive = currentPath === itemPath;
        const link = document.createElement('a');
        link.href = item.href;
        link.className = `flex flex-col items-center justify-center text-xs p-2 rounded-md transition-colors w-20 ${isActive ? 'text-tech-blue bg-tech-blue/10 font-semibold' : 'text-text-medium hover:bg-gray-100 hover:text-tech-blue'}`;
        link.innerHTML = `
            <i data-lucide="${item.icon}" class="w-5 h-5 mb-1"></i>
            <span>${item.text}</span>
        `;
        navContainer.appendChild(link);
    });

    navPlaceholder.appendChild(navContainer);
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
}

document.addEventListener('DOMContentLoaded', createBottomNav);