// 冰雪奇缘风格的图书库存日志页面JavaScript
document.addEventListener('DOMContentLoaded', function() {

    // 雪花动画效果
    createSnowflakes();

    // 表格行动画效果
    animateTableRows();

    // 为表格行添加互动效果
    addTableRowInteractions();

    // 添加书籍封面魔法效果
    addBookCoverMagic();

    // 添加按钮魔法效果
    addButtonMagic();

    // 响应式表格标签
    makeTableResponsive();
});

// 创建额外的雪花
function createSnowflakes() {
    const snowflakesContainer = document.querySelector('.snowflakes');
    if (!snowflakesContainer) return;

    // 添加更多雪花，共30个
    for (let i = 0; i < 20; i++) {
        const snowflake = document.createElement('div');
        snowflake.className = 'snowflake';
        snowflake.textContent = ['❄', '❅', '❆'][Math.floor(Math.random() * 3)];

        // 随机位置和动画
        const left = Math.random() * 100;
        const animDuration = 8 + Math.random() * 10;
        const animDelay = Math.random() * 5;
        const fontSize = 0.8 + Math.random() * 1.2;

        snowflake.style.left = `${left}%`;
        snowflake.style.animationDuration = `${animDuration}s`;
        snowflake.style.animationDelay = `${animDelay}s`;
        snowflake.style.fontSize = `${fontSize}em`;

        snowflakesContainer.appendChild(snowflake);
    }
}

// 表格行动画效果
function animateTableRows() {
    const tableRows = document.querySelectorAll('.table-row');

    tableRows.forEach((row, index) => {
        // 设置动画延迟，创建瀑布效果
        row.style.animationDelay = `${index * 0.08}s`;
        row.classList.add('fade-in');

        // 为入库和出库行添加不同的动画效果
        if (row.dataset.type === 'in') {
            row.classList.add('in-animation');
        } else if (row.dataset.type === 'out') {
            row.classList.add('out-animation');
        }
    });
}

// 为表格行添加互动效果
function addTableRowInteractions() {
    const tableRows = document.querySelectorAll('.table-row');

    tableRows.forEach(row => {
        // 点击高亮效果
        row.addEventListener('click', function() {
            // 移除其他行的选中状态
            document.querySelectorAll('.table-row').forEach(r => {
                r.classList.remove('selected-row');
            });

            // 添加当前行的选中状态
            this.classList.add('selected-row');

            // 添加闪光效果
            const sparkle = document.createElement('div');
            sparkle.className = 'row-sparkle';
            this.appendChild(sparkle);

            // 移除闪光效果
            setTimeout(() => {
                sparkle.remove();
            }, 800);
        });

        // 鼠标悬停效果
        row.addEventListener('mouseenter', function() {
            // 添加冰晶效果
            const iceEffect = document.createElement('div');
            iceEffect.className = 'ice-effect';
            this.appendChild(iceEffect);

            // 移除冰晶效果
            this.addEventListener('mouseleave', function() {
                iceEffect.remove();
            }, { once: true });
        });
    });
}

// 添加书籍封面魔法效果
function addBookCoverMagic() {
    const bookCover = document.querySelector('.book-cover');
    const bookFrame = document.querySelector('.book-frame');

    if (bookCover && bookFrame) {
        // 鼠标移动时添加3D效果
        bookFrame.addEventListener('mousemove', function(e) {
            const rect = this.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            const centerX = rect.width / 2;
            const centerY = rect.height / 2;

            const deltaX = (x - centerX) / 20;
            const deltaY = (y - centerY) / 20;

            bookCover.style.transform = `rotate(0deg) perspective(800px) rotateX(${-deltaY}deg) rotateY(${deltaX}deg)`;
        });

        // 鼠标离开时恢复
        bookFrame.addEventListener('mouseleave', function() {
            bookCover.style.transform = 'rotate(3deg)';
        });

        // 点击时添加闪光效果
        bookFrame.addEventListener('click', function() {
            const glow = document.querySelector('.book-glow');
            glow.style.opacity = '1';
            glow.style.background = 'radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(173, 216, 230, 0) 70%)';

            setTimeout(() => {
                glow.style.opacity = '0';
            }, 500);
        });
    }
}

// 添加按钮魔法效果
function addButtonMagic() {
    const buttons = document.querySelectorAll('.frozen-btn');

    buttons.forEach(button => {
        button.addEventListener('mouseenter', function() {
            // 创建冰晶效果
            const sparkles = document.createElement('div');
            sparkles.className = 'btn-sparkles';
            this.appendChild(sparkles);

            // 冰晶动画
            for (let i = 0; i < 5; i++) {
                const sparkle = document.createElement('div');
                sparkle.className = 'btn-sparkle';
                sparkle.style.left = `${Math.random() * 100}%`;
                sparkle.style.top = `${Math.random() * 100}%`;
                sparkle.style.animationDelay = `${Math.random() * 0.5}s`;
                sparkles.appendChild(sparkle);
            }
        });

        button.addEventListener('mouseleave', function() {
            const sparkles = this.querySelector('.btn-sparkles');
            if (sparkles) {
                sparkles.remove();
            }
        });
    });
}

// 响应式表格
function makeTableResponsive() {
    if (window.innerWidth <= 768) {
        const headerCells = document.querySelectorAll('.th-frozen');
        const headers = Array.from(headerCells).map(cell => cell.textContent);

        const dataCells = document.querySelectorAll('.td-frozen');

        dataCells.forEach((cell, index) => {
            const headerIndex = index % headers.length;
            cell.setAttribute('data-label', headers[headerIndex]);
        });
    }
}

// 创建额外CSS样式
function addExtraStyles() {
    const styleSheet = document.createElement('style');
    styleSheet.type = 'text/css';
    styleSheet.innerHTML = `
        .row-sparkle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
            pointer-events: none;
            animation: rowSparkle 0.8s ease forwards;
        }
        
        @keyframes rowSparkle {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        .ice-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(173, 216, 230, 0.1), rgba(255, 255, 255, 0));
            pointer-events: none;
            backdrop-filter: brightness(1.03);
        }
        
        .btn-sparkles {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }
        
        .btn-sparkle {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.8);
            pointer-events: none;
            animation: btnSparkle 1s ease infinite;
        }
        
        @keyframes btnSparkle {
            0%, 100% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1); opacity: 1; }
        }
        
        .in-animation {
            border-left: 3px solid rgba(3, 169, 244, 0.5);
        }
        
        .out-animation {
            border-left: 3px solid rgba(255, 152, 0, 0.5);
        }
    `;

    document.head.appendChild(styleSheet);
}

// 初始化额外样式
addExtraStyles();

// 窗口大小变化时重新调整
window.addEventListener('resize', makeTableResponsive);