presentation.js

// 幻灯片管理
class PresentationController {
    constructor() {
        this.slides = document.querySelectorAll('.slide');
        this.currentSlide = 0;
        this.totalSlides = this.slides.length;

        // 初始化
        this.init();
    }

    init() {
        // 更新页面指示器
        this.updatePageIndicator();

        // 绑定键盘事件
        this.bindKeyboardEvents();

        // 绑定触摸事件（移动端支持）
        this.bindTouchEvents();

        // 更新进度条
        this.updateProgressBar();

        // 显示第一页
        this.showSlide(0);
    }

    // 显示指定幻灯片
    showSlide(index) {
        // 边界检查
        if (index < 0 || index >= this.totalSlides) {
            return;
        }

        // 隐藏所有幻灯片
        this.slides.forEach(slide => {
            slide.classList.remove('active');
        });

        // 显示目标幻灯片
        this.slides[index].classList.add('active');
        this.currentSlide = index;

        // 更新UI
        this.updatePageIndicator();
        this.updateProgressBar();

        // 保存状态到 localStorage
        this.saveState();
    }

    // 下一页
    nextSlide() {
        if (this.currentSlide < this.totalSlides - 1) {
            this.showSlide(this.currentSlide + 1);
        }
    }

    // 上一页
    prevSlide() {
        if (this.currentSlide > 0) {
            this.showSlide(this.currentSlide - 1);
        }
    }

    // 跳转到指定页
    goToSlide(index) {
        this.showSlide(index);
    }

    // 更新页面指示器
    updatePageIndicator() {
        const currentPageElement = document.getElementById('current-page');
        const totalPagesElement = document.getElementById('total-pages');

        if (currentPageElement) {
            currentPageElement.textContent = this.currentSlide + 1;
        }

        if (totalPagesElement) {
            totalPagesElement.textContent = this.totalSlides;
        }
    }

    // 更新进度条
    updateProgressBar() {
        const progressFill = document.getElementById('progress-fill');
        if (progressFill) {
            const progress = ((this.currentSlide + 1) / this.totalSlides) * 100;
            progressFill.style.width = `${progress}%`;
        }
    }

    // 绑定键盘事件
    bindKeyboardEvents() {
        document.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowRight':
                case 'ArrowDown':
                case ' ':
                case 'PageDown':
                    e.preventDefault();
                    this.nextSlide();
                    break;

                case 'ArrowLeft':
                case 'ArrowUp':
                case 'PageUp':
                    e.preventDefault();
                    this.prevSlide();
                    break;

                case 'Home':
                    e.preventDefault();
                    this.goToSlide(0);
                    break;

                case 'End':
                    e.preventDefault();
                    this.goToSlide(this.totalSlides - 1);
                    break;
            }
        });
    }

    // 绑定触摸事件（移动端支持）
    bindTouchEvents() {
        let touchStartX = 0;
        let touchEndX = 0;

        document.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        });

        document.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            this.handleSwipe();
        });

        const handleSwipe = () => {
            const swipeThreshold = 50;
            const diff = touchStartX - touchEndX;

            if (Math.abs(diff) > swipeThreshold) {
                if (diff > 0) {
                    // 向左滑动 - 下一页
                    this.nextSlide();
                } else {
                    // 向右滑动 - 上一页
                    this.prevSlide();
                }
            }
        };

        this.handleSwipe = handleSwipe;
    }

    // 保存状态
    saveState() {
        try {
            localStorage.setItem('presentation-current-slide', this.currentSlide);
        } catch (e) {
            console.warn('无法保存状态到 localStorage:', e);
        }
    }

    // 恢复状态
    restoreState() {
        try {
            const savedSlide = localStorage.getItem('presentation-current-slide');
            if (savedSlide !== null) {
                const slideIndex = parseInt(savedSlide, 10);
                if (!isNaN(slideIndex) && slideIndex >= 0 && slideIndex < this.totalSlides) {
                    this.showSlide(slideIndex);
                }
            }
        } catch (e) {
            console.warn('无法从 localStorage 恢复状态:', e);
        }
    }
}

// 演示模式
class PresentationMode {
    constructor(controller) {
        this.controller = controller;
        this.isFullscreen = false;
        this.init();
    }

    init() {
        // 绑定 F11 或 F 键进入全屏
        document.addEventListener('keydown', (e) => {
            if (e.key === 'f' || e.key === 'F') {
                e.preventDefault();
                this.toggleFullscreen();
            }

            // ESC 退出全屏
            if (e.key === 'Escape' && this.isFullscreen) {
                this.exitFullscreen();
            }
        });
    }

    toggleFullscreen() {
        if (!this.isFullscreen) {
            this.enterFullscreen();
        } else {
            this.exitFullscreen();
        }
    }

    enterFullscreen() {
        const elem = document.documentElement;

        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }

        this.isFullscreen = true;
    }

    exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }

        this.isFullscreen = false;
    }
}

// 计时器功能
class PresentationTimer {
    constructor() {
        this.startTime = null;
        this.timerElement = null;
        this.isRunning = false;
        this.init();
    }

    init() {
        // 创建计时器元素
        this.createTimerElement();

        // 绑定快捷键 T 开始/暂停计时
        document.addEventListener('keydown', (e) => {
            if (e.key === 't' || e.key === 'T') {
                e.preventDefault();
                this.toggle();
            }
        });
    }

    createTimerElement() {
        const timer = document.createElement('div');
        timer.id = 'presentation-timer';
        timer.style.cssText = `
            position: fixed;
            top: 2rem;
            left: 2rem;
            background: rgba(19, 27, 51, 0.9);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            font-size: 1rem;
            font-weight: 600;
            z-index: 100;
            backdrop-filter: blur(10px);
            display: none;
        `;
        timer.textContent = '00:00';
        document.body.appendChild(timer);
        this.timerElement = timer;
    }

    start() {
        this.startTime = Date.now();
        this.isRunning = true;
        this.timerElement.style.display = 'block';
        this.update();
    }

    stop() {
        this.isRunning = false;
    }

    reset() {
        this.startTime = null;
        this.isRunning = false;
        this.timerElement.textContent = '00:00';
        this.timerElement.style.display = 'none';
    }

    toggle() {
        if (this.isRunning) {
            this.stop();
        } else {
            this.start();
        }
    }

    update() {
        if (!this.isRunning) return;

        const elapsed = Date.now() - this.startTime;
        const minutes = Math.floor(elapsed / 60000);
        const seconds = Math.floor((elapsed % 60000) / 1000);

        this.timerElement.textContent =
            `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

        requestAnimationFrame(() => this.update());
    }
}

// 备注功能
class SpeakerNotes {
    constructor() {
        this.notesWindow = null;
        this.init();
    }

    init() {
        // 绑定快捷键 N 打开备注窗口
        document.addEventListener('keydown', (e) => {
            if (e.key === 'n' || e.key === 'N') {
                e.preventDefault();
                this.toggle();
            }
        });
    }

    toggle() {
        if (this.notesWindow && !this.notesWindow.closed) {
            this.notesWindow.close();
            this.notesWindow = null;
        } else {
            this.open();
        }
    }

    open() {
        // 这里可以打开一个新窗口显示演讲备注
        // 实际实现需要准备备注内容
        alert('演讲备注功能：按 N 键可以打开/关闭备注窗口\n（需要在 HTML 中添加备注内容）');
    }
}

// 快捷键帮助
class KeyboardHelp {
    constructor() {
        this.helpElement = null;
        this.isVisible = false;
        this.init();
    }

    init() {
        this.createHelpElement();

        // 绑定 ? 键显示帮助
        document.addEventListener('keydown', (e) => {
            if (e.key === '?' || (e.shiftKey && e.key === '/')) {
                e.preventDefault();
                this.toggle();
            }
        });
    }

    createHelpElement() {
        const help = document.createElement('div');
        help.id = 'keyboard-help';
        help.style.cssText = `
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(19, 27, 51, 0.95);
            padding: 2rem;
            border-radius: 16px;
            border: 2px solid var(--primary-color);
            max-width: 500px;
            z-index: 1000;
            backdrop-filter: blur(20px);
            display: none;
        `;

        help.innerHTML = `
            <h3 style="margin-bottom: 1rem; color: var(--primary-color);">键盘快捷键</h3>
            <table style="width: 100%; border-collapse: collapse;">
                <tr><td style="padding: 0.5rem;">→ / ↓ / 空格</td><td>下一页</td></tr>
                <tr><td style="padding: 0.5rem;">← / ↑</td><td>上一页</td></tr>
                <tr><td style="padding: 0.5rem;">Home</td><td>第一页</td></tr>
                <tr><td style="padding: 0.5rem;">End</td><td>最后一页</td></tr>
                <tr><td style="padding: 0.5rem;">F</td><td>全屏/退出全屏</td></tr>
                <tr><td style="padding: 0.5rem;">T</td><td>开始/暂停计时</td></tr>
                <tr><td style="padding: 0.5rem;">?</td><td>显示/隐藏帮助</td></tr>
            </table>
            <button id="close-help" style="
                margin-top: 1rem;
                padding: 0.5rem 1rem;
                background: var(--primary-color);
                border: none;
                border-radius: 8px;
                color: white;
                cursor: pointer;
                width: 100%;
            ">关闭 (ESC)</button>
        `;

        document.body.appendChild(help);
        this.helpElement = help;

        // 绑定关闭按钮
        document.getElementById('close-help').addEventListener('click', () => {
            this.hide();
        });

        // ESC 关闭
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.isVisible) {
                this.hide();
            }
        });
    }

    toggle() {
        if (this.isVisible) {
            this.hide();
        } else {
            this.show();
        }
    }

    show() {
        this.helpElement.style.display = 'block';
        this.isVisible = true;
    }

    hide() {
        this.helpElement.style.display = 'none';
        this.isVisible = false;
    }
}

// 初始化应用
document.addEventListener('DOMContentLoaded', () => {
    // 创建主控制器
    const controller = new PresentationController();

    // 恢复上次状态（可选）
    // controller.restoreState();

    // 初始化其他功能
    const presentationMode = new PresentationMode(controller);
    const timer = new PresentationTimer();
    const speakerNotes = new SpeakerNotes();
    const keyboardHelp = new KeyboardHelp();

    // 添加键盘提示
    const hint = document.createElement('div');
    hint.className = 'keyboard-hint';
    hint.textContent = '按 ? 查看快捷键';
    document.body.appendChild(hint);

    // 3秒后隐藏提示
    setTimeout(() => {
        hint.style.opacity = '0';
        setTimeout(() => hint.remove(), 1000);
    }, 3000);

    console.log('🎉 演示系统已就绪！');
    console.log('💡 提示：');
    console.log('  - 使用方向键或空格键翻页');
    console.log('  - 按 F 键进入全屏');
    console.log('  - 按 T 键开始计时');
    console.log('  - 按 ? 查看所有快捷键');
});