</main>

<!-- Footer -->
<footer class="border-t border-cyber-primary/20 bg-cyber-bg-secondary/50 backdrop-blur-sm">
    <div class="container mx-auto px-4 py-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Game Info -->
            <div class="space-y-2">
                <h3 class="text-lg font-cyber cyber-text-primary">系统信息</h3>
                <div class="text-sm space-y-1 text-gray-400">
                    <div>界面: Nouveau v2.0</div>
                    <div>引擎: PHPDTS</div>
                    <div>主题: <span id="footer-theme">赛博蓝</span></div>
                    <div>状态: <span class="text-green-400">运行中</span></div>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="space-y-2">
                <h3 class="text-lg font-cyber cyber-text-primary">快速访问</h3>
                <div class="text-sm space-y-1">
                    <a href="help.php" class="block hover:text-cyber-primary transition-colors">帮助文档</a>
                    <a href="https://bbs.brdts.online/" target="_blank" class="block hover:text-cyber-primary transition-colors">社区论坛</a>
                    <a href="https://bbs.brdts.online/?thread-2.htm" target="_blank" class="block hover:text-cyber-primary transition-colors">支持项目</a>
                    <a href="record.php" class="block hover:text-cyber-primary transition-colors">游戏录像</a>
                </div>
            </div>

            <!-- Controls -->
            <div class="space-y-2">
                <h3 class="text-lg font-cyber cyber-text-primary">界面控制</h3>
                <div class="space-y-2">
                    <button id="theme-cycle" class="cyber-btn cyber-btn-primary text-xs">
                        🎨 切换主题
                    </button>
                    <button id="toggle-effects" class="cyber-btn cyber-btn-secondary text-xs">
                        ✨ 切换特效
                    </button>
                    <button id="fullscreen-toggle" class="cyber-btn cyber-btn-accent text-xs">
                        📺 全屏
                    </button>
                </div>
                <div class="text-xs text-gray-500 mt-2">
                    快捷键: Ctrl+Shift+T 切换主题
                </div>
            </div>
        </div>
        
        <!-- Copyright -->
        <div class="border-t border-cyber-primary/20 mt-6 pt-4 text-center text-sm text-gray-400">
            <div class="cyber-terminal inline-block">
                © 2024 PHPDTS 游戏引擎 | Nouveau 界面
            </div>
        </div>
    </div>
</footer>

<!-- Notification Container -->
<div id="notification-container" class="fixed top-4 right-4 z-50 space-y-2"></div>

<!-- Modal Container -->
<div id="modal-container" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
    <div class="cyber-card max-w-lg w-full mx-4 p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 id="modal-title" class="text-lg font-cyber cyber-text-primary">Modal Title</h3>
            <button id="modal-close" class="cyber-text-secondary hover:cyber-text-primary text-xl">&times;</button>
        </div>
        <div id="modal-content" class="text-sm">
            Modal content goes here...
        </div>
        <div id="modal-actions" class="mt-4 flex justify-end space-x-2">
            <button id="modal-cancel" class="cyber-btn cyber-btn-secondary">Cancel</button>
            <button id="modal-confirm" class="cyber-btn cyber-btn-primary">Confirm</button>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loading-overlay" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-75 backdrop-blur-sm">
    <div class="text-center">
        <div class="cyber-terminal mb-4">
            <div class="cyber-text-glow">PROCESSING...</div>
        </div>
        <div class="cyber-progress w-64">
            <div class="cyber-progress-bar" style="width: 0%" id="loading-progress-bar"></div>
        </div>
        <div id="loading-message" class="text-sm text-gray-400 mt-2">Please wait...</div>
    </div>
</div>

<!-- Background Effects Canvas -->
<canvas id="bg-effects" class="fixed inset-0 pointer-events-none z-0" style="opacity: 0.1;"></canvas>

<script>
// Footer functionality
document.addEventListener('DOMContentLoaded', function() {
    // Theme cycle button
    document.getElementById('theme-cycle')?.addEventListener('click', function() {
        if (window.themeManager) {
            const themes = Object.keys(window.themeManager.themes);
            const current = window.themeManager.getCurrentTheme();
            const currentIndex = themes.indexOf(current);
            const nextTheme = themes[(currentIndex + 1) % themes.length];
            window.themeManager.setTheme(nextTheme);
        }
    });
    
    // Effects toggle
    let effectsEnabled = true;
    document.getElementById('toggle-effects')?.addEventListener('click', function() {
        effectsEnabled = !effectsEnabled;
        const canvas = document.getElementById('bg-effects');
        if (canvas) {
            canvas.style.display = effectsEnabled ? 'block' : 'none';
        }
        this.textContent = effectsEnabled ? '✨ 切换特效' : '🚫 启用特效';
    });
    
    // Fullscreen toggle
    document.getElementById('fullscreen-toggle')?.addEventListener('click', function() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen().catch(err => {
                console.log('Fullscreen error:', err);
            });
        } else {
            document.exitFullscreen();
        }
    });
    
    // Update fullscreen button text
    document.addEventListener('fullscreenchange', function() {
        const btn = document.getElementById('fullscreen-toggle');
        if (btn) {
            btn.textContent = document.fullscreenElement ? '🪟 退出全屏' : '📺 全屏';
        }
    });
    
    // Modal functionality
    const modal = document.getElementById('modal-container');
    const modalClose = document.getElementById('modal-close');
    const modalCancel = document.getElementById('modal-cancel');
    
    [modalClose, modalCancel].forEach(btn => {
        btn?.addEventListener('click', function() {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        });
    });
    
    // Close modal on backdrop click
    modal?.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }
    });
    
    // Update theme name in footer
    document.addEventListener('themeChanged', function(e) {
        const themeDisplay = document.getElementById('footer-theme');
        if (themeDisplay && e.detail.colors) {
            themeDisplay.textContent = e.detail.colors.name;
        }
    });
    
    // Initialize background effects
    initBackgroundEffects();
});

// Background effects
function initBackgroundEffects() {
    const canvas = document.getElementById('bg-effects');
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    const particles = [];
    const particleCount = 30;
    
    // Create particles
    for (let i = 0; i < particleCount; i++) {
        particles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            vx: (Math.random() - 0.5) * 0.5,
            vy: (Math.random() - 0.5) * 0.5,
            size: Math.random() * 2 + 1,
            opacity: Math.random() * 0.5 + 0.2
        });
    }
    
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        particles.forEach(particle => {
            particle.x += particle.vx;
            particle.y += particle.vy;
            
            // Wrap around edges
            if (particle.x < 0) particle.x = canvas.width;
            if (particle.x > canvas.width) particle.x = 0;
            if (particle.y < 0) particle.y = canvas.height;
            if (particle.y > canvas.height) particle.y = 0;
            
            // Draw particle
            ctx.beginPath();
            ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(0, 255, 255, ${particle.opacity})`;
            ctx.fill();
            
            // Draw connections
            particles.forEach(other => {
                const dx = particle.x - other.x;
                const dy = particle.y - other.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                if (distance < 100) {
                    ctx.beginPath();
                    ctx.moveTo(particle.x, particle.y);
                    ctx.lineTo(other.x, other.y);
                    ctx.strokeStyle = `rgba(0, 255, 255, ${0.1 * (1 - distance / 100)})`;
                    ctx.stroke();
                }
            });
        });
        
        requestAnimationFrame(animate);
    }
    
    animate();
    
    // Resize handler
    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });
}

// Global utility functions
window.showModal = function(title, content, onConfirm = null) {
    const modal = document.getElementById('modal-container');
    const titleEl = document.getElementById('modal-title');
    const contentEl = document.getElementById('modal-content');
    const confirmBtn = document.getElementById('modal-confirm');
    
    if (titleEl) titleEl.textContent = title;
    if (contentEl) contentEl.innerHTML = content;
    
    if (onConfirm) {
        confirmBtn.onclick = function() {
            onConfirm();
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        };
    }
    
    modal.classList.remove('hidden');
    modal.classList.add('flex');
};

window.showLoading = function(message = 'Loading...') {
    const overlay = document.getElementById('loading-overlay');
    const messageEl = document.getElementById('loading-message');
    if (messageEl) messageEl.textContent = message;
    overlay.classList.remove('hidden');
    overlay.classList.add('flex');
};

window.hideLoading = function() {
    const overlay = document.getElementById('loading-overlay');
    overlay.classList.add('hidden');
    overlay.classList.remove('flex');
};

window.updateLoadingProgress = function(percent) {
    const bar = document.getElementById('loading-progress-bar');
    if (bar) bar.style.width = percent + '%';
};
</script>

</body>
</html>
