/* ========================================
   公共脚本 - gift_verification_system
   ======================================== */

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 初始化主题
    initTheme();

    // 初始化图片预览
    initImagePreview();

    // 初始化加载按钮
    initLoadingButtons();

    // 添加页面过渡动画
    initPageAnimation();
});

// ========================================
// 主题切换功能
// ========================================
function initTheme() {
    // 从localStorage获取主题设置
    const savedTheme = localStorage.getItem('theme') || 'light';

    // 如果是深色模式，添加属性
    if (savedTheme === 'dark') {
        document.documentElement.setAttribute('data-theme', 'dark');
    }

    // 创建主题切换按钮
    createThemeToggle();
}

function createThemeToggle() {
    const btn = document.createElement('button');
    btn.className = 'theme-toggle';
    btn.id = 'themeToggle';
    btn.title = '切换主题';
    btn.innerHTML = getThemeIcon();

    // 监听点击
    btn.addEventListener('click', toggleTheme);

    document.body.appendChild(btn);
    updateThemeIcon();
}

function getThemeIcon() {
    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
    return isDark ? '<i class="bi bi-sun"></i>' : '<i class="bi bi-moon"></i>';
}

function updateThemeIcon() {
    const btn = document.getElementById('themeToggle');
    if (btn) {
        btn.innerHTML = getThemeIcon();
    }
}

function toggleTheme() {
    const html = document.documentElement;
    const currentTheme = html.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

    if (newTheme === 'dark') {
        html.setAttribute('data-theme', 'dark');
    } else {
        html.removeAttribute('data-theme');
    }

    // 保存到localStorage
    localStorage.setItem('theme', newTheme);

    // 更新图标
    updateThemeIcon();

    // 显示切换提示
    showToast(newTheme === 'dark' ? '已切换到深色模式' : '已切换到亮色模式');
}

// ========================================
// 图片预览功能
// ========================================
function initImagePreview() {
    // 为所有带有 clickable-image 类的图片添加点击事件
    document.querySelectorAll('.clickable-image').forEach(img => {
        img.addEventListener('click', function(e) {
            e.preventDefault();
            openImagePreview(this.src, this.alt);
        });
    });

    // 为表格中的截图缩略图添加预览
    document.querySelectorAll('.screenshot-img').forEach(img => {
        img.classList.add('clickable-image');
        img.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            openImagePreview(this.src, this.alt);
        });
    });
}

function openImagePreview(src, alt = '图片预览') {
    // 创建模窗
    const modal = document.createElement('div');
    modal.className = 'modal fade image-preview-modal';
    modal.setAttribute('tabindex', '-1');
    modal.setAttribute('aria-hidden', 'true');

    modal.innerHTML = `
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                <div class="modal-body">
                    <img src="${src}" class="preview-image" alt="${alt}">
                </div>
            </div>
        </div>
    `;

    document.body.appendChild(modal);

    // 显示模窗
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();

    // 关闭后移除
    modal.addEventListener('hidden.bs.modal', function() {
        modal.remove();
    });

    // 点击背景关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            bsModal.hide();
        }
    });
}

// ========================================
// 加载按钮功能
// ========================================
function initLoadingButtons() {
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function() {
            const submitBtn = form.querySelector('button[type="submit"]');
            if (submitBtn && !submitBtn.classList.contains('loading')) {
                setLoading(submitBtn, true);
            }
        });
    });
}

function setLoading(btn, loading) {
    if (loading) {
        btn.classList.add('loading');
        btn.disabled = true;
    } else {
        btn.classList.remove('loading');
        btn.disabled = false;
    }
}

// ========================================
// 页面过渡动画
// ========================================
function initPageAnimation() {
    // 为卡片添加动画
    document.querySelectorAll('.card').forEach(card => {
        card.classList.add('fade-in');
    });

    // 为表格添加动画
    document.querySelectorAll('.table-container').forEach(container => {
        container.classList.add('slide-up');
    });
}

// ========================================
// Toast 提示
// ========================================
function showToast(message, duration = 3000) {
    let container = document.querySelector('.toast-container');

    if (!container) {
        container = document.createElement('div');
        container.className = 'toast-container';
        document.body.appendChild(container);
    }

    const toast = document.createElement('div');
    toast.className = 'toast-notification';
    toast.textContent = message;

    container.appendChild(toast);

    // 自动移除
    setTimeout(() => {
        toast.style.animation = 'slideInRight 0.3s ease reverse';
        setTimeout(() => toast.remove(), 300);
    }, duration);
}

// ========================================
// 显示/隐藏加载遮罩
// ========================================
function showLoading() {
    const overlay = document.createElement('div');
    overlay.className = 'loading-overlay';
    overlay.id = 'loadingOverlay';
    overlay.innerHTML = '<div class="spinner"></div>';
    document.body.appendChild(overlay);
}

function hideLoading() {
    const overlay = document.getElementById('loadingOverlay');
    if (overlay) {
        overlay.remove();
    }
}

// ========================================
// 确认对话框
// ========================================
function confirmAction(message) {
    return new Promise((resolve) => {
        if (confirm(message)) {
            resolve(true);
        } else {
            resolve(false);
        }
    });
}

// ========================================
// 复制到剪贴板
// ========================================
function copyToClipboard(text) {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
            showToast('已复制到剪贴板');
        }).catch(() => {
            showToast('复制失败');
        });
    } else {
        // 兼容旧浏览器
        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();
        try {
            document.execCommand('copy');
            showToast('已复制到剪贴板');
        } catch (e) {
            showToast('复制失败');
        }
        document.body.removeChild(textarea);
    }
}