function initPages() {
    const cards = document.querySelectorAll('.animate-card');
    const wrapper = document.querySelector('.animation-wrapper');
    const finalCard = document.querySelector('.final-card')
    const newest_comment=loadData("newest_comment",10)
    // 定义所有可能的飞入动画
    const flyAnimations = [
        'flyFromTopLeft',
        'flyFromTopRight',
        'flyFromBottomLeft',
        'flyFromBottomRight',
        'flyFromLeft',
        'flyFromRight',
        'flyFromTop',
        'flyFromBottom'
    ]
    if (newest_comment === null || newest_comment.length <=0){
        fillFakeCard(flyAnimations,wrapper,finalCard)
        return
    }
    // 初始化动画卡片
    for (let i = 0; i < newest_comment.length; i++) {
        const item = newest_comment[i]
        const card_container =document.createElement("div")
        const card_ = getRandomCard()
        card_container.classList.add("message-container",'animate-card',card_)
        card_container.innerHTML = `
           <div class="fake-content">
                <div class="fake-image"><img src="${item.avatar}" alt=""></div>
                <div class="fake-text">
                    <div class="fake-title">${item.nick}</div>
                    <div class="fake-lines">
                        <div class="fake-line">${removeHTMLTags(item.content)}</div>
                        <div class="fake-line">${formatDateTime(new Date(item.date))}</div>
                    </div>
                </div>
            </div>
        `
        // wrapper.append(card_container)
        const baseColor = getRandomPastelColor();
        const contrastColor = getContrastColor(baseColor);
        card_container.style.backgroundColor = baseColor.toString();
        const fakeContent = card_container.querySelector('.fake-content');
        if (fakeContent) {
            fakeContent.style.backgroundColor = contrastColor;

            // 为内部元素设置基础颜色（形成反向对比）
            const elements = fakeContent.querySelectorAll('.fake-image, .fake-title, .fake-line');
            elements.forEach(element => {
                element.style.backgroundColor = baseColor.toString();
            });
        }
        const randomAnimation = flyAnimations[Math.floor(Math.random() * flyAnimations.length)];
        const delay = i * 0.2;
        card_container.style.animationDelay = `${delay}s`;
        card_container.style.animationName = randomAnimation;
        card_container.addEventListener('animationend', function() {
            this.style.animation = 'none';

            const position = getRandomPosition(this,wrapper);
            const rotation = (Math.random() - 0.5) * 40;
            const scale = 0.8 + Math.random() * 0.4;

            this.style.position = 'absolute';
            this.style.left = position.x + 'px';
            this.style.top = position.y + 'px';
            this.style.transform = `rotate(${rotation}deg) scale(${scale})`;
            this.style.transition = 'all 0.3s ease';
            this.style.opacity = '1';
            this.style.visibility = 'visible';

            // 添加鼠标悬停效果
            this.addEventListener('mouseover', function() {
                this.style.transform = `rotate(${rotation}deg) scale(${scale * 1.15})`;  // 增加放大倍数
                this.style.boxShadow = '0 10px 25px rgba(0,0,0,0.15)';  // 增加阴影
                this.style.zIndex = '81';
                this.style.cursor = 'pointer';
                this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';  // 添加平滑过渡
                // 隐藏final-card
                finalCard.style.visibility = 'hidden';
            });

            // 添加鼠标移出效果
            this.addEventListener('mouseout', function() {
                this.style.transform = `rotate(${rotation}deg) scale(${scale})`;
                this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.06)';
                this.style.zIndex = '80';  // 恢复原来的层级
                this.style.cursor = 'default';
                this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
                // 显示final-card
                finalCard.style.visibility = 'visible';
            });
        });
        wrapper.append(card_container)
    }
}

function getRandomCard() {
    const cards = ["card-1","card-2","card-3","card-4","card-5","card-6","card-7","card-8","card-9","card-10"];
    return cards[Math.floor(Math.random() * cards.length)];
}

function getRandomPastelColor() {
    return {
        hue: Math.floor(Math.random() * 360),
        saturation: 40 + Math.random() * 20,
        lightness: 92 + Math.random() * 6,
        toString() {
            return `hsl(${this.hue}, ${this.saturation}%, ${this.lightness}%)`;
        }
    };
}

function formatDateTime(date) {
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    var h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    var minute = date.getMinutes();
    minute = minute < 10 ? ('0' + minute) : minute;
    var second = date.getSeconds();
    second = second < 10 ? ('0' + second) : second;
    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
}

function fillFakeCard(flyAnimations,wrapper,finalCard) {
    const number = 10
    for (let i = 0; i < number; i++) {
        const card_container =document.createElement("div")
        const card_ = getRandomCard()
        card_container.classList.add("message-container",'animate-card',card_)
        card_container.innerHTML = `
           <div class="fake-content">
                <div class="fake-image"></div>
                <div class="fake-text">
                    <div class="fake-title"></div>
                    <div class="fake-lines">
                        <div class="fake-line"></div>
                        <div class="fake-line"></div>
                    </div>
                </div>
            </div>
        `
        const baseColor = getRandomPastelColor();
        const contrastColor = getContrastColor(baseColor);

        // 设置卡片背景色
        card_container.style.backgroundColor = baseColor.toString();

        // 为内容区域设置对比色
        const fakeContent = card_container.querySelector('.fake-content');
        if (fakeContent) {
            fakeContent.style.backgroundColor = contrastColor;

            // 为内部元素设置基础颜色（形成反向对比）
            const elements = fakeContent.querySelectorAll('.fake-image, .fake-title, .fake-line');
            elements.forEach(element => {
                element.style.backgroundColor = baseColor.toString();
            });
        }

        // 随机选择一个飞入动画
        const randomAnimation = flyAnimations[Math.floor(Math.random() * flyAnimations.length)];
        const delay = i * 0.2;
        card_container.style.animationDelay = `${delay}s`;
        card_container.style.animationName = randomAnimation;

        card_container.addEventListener('animationend', function() {
            this.style.animation = 'none';

            const position = getRandomPosition(this,wrapper);
            const rotation = (Math.random() - 0.5) * 40;
            const scale = 0.8 + Math.random() * 0.4;

            this.style.position = 'absolute';
            this.style.left = position.x + 'px';
            this.style.top = position.y + 'px';
            this.style.transform = `rotate(${rotation}deg) scale(${scale})`;
            this.style.transition = 'all 0.3s ease';
            this.style.opacity = '1';
            this.style.visibility = 'visible';

            // 添加鼠标悬停效果
            this.addEventListener('mouseover', function() {
                this.style.transform = `rotate(${rotation}deg) scale(${scale * 1.15})`;  // 增加放大倍数
                this.style.boxShadow = '0 10px 25px rgba(0,0,0,0.15)';  // 增加阴影
                this.style.zIndex = '2002';
                this.style.cursor = 'pointer';
                this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';  // 添加平滑过渡
                // 隐藏final-card
                finalCard.style.visibility = 'hidden';
            });

            // 添加鼠标移出效果
            this.addEventListener('mouseout', function() {
                this.style.transform = `rotate(${rotation}deg) scale(${scale})`;
                this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.06)';
                this.style.zIndex = '1001';  // 恢复原来的层级
                this.style.cursor = 'default';
                this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
                // 显示final-card
                finalCard.style.visibility = 'visible';
            });
        });
        wrapper.append(card_container)
    }

}

function removeHTMLTags(str) {
    return str.replace(/<[^>]*>/g, ' ');
}

function getRandomPosition(element,wrapper) {
    const wrapperRect = wrapper.getBoundingClientRect();
    const elementRect = element.getBoundingClientRect();

    const maxX = wrapperRect.width - elementRect.width;
    const maxY = wrapperRect.height - elementRect.height;

    const randomX = Math.random() * maxX;
    const randomY = Math.random() * maxY;

    return { x: randomX, y: randomY };
}
function getContrastColor(baseColor) {
    const contrastHue = (baseColor.hue + 180) % 360;
    const contrastSaturation = Math.min(baseColor.saturation + 10, 60);
    const contrastLightness = Math.max(baseColor.lightness - 8, 85);
    return `hsl(${contrastHue}, ${contrastSaturation}%, ${contrastLightness}%)`;
}


// 取数据
function loadData(name, time) {
    let d = JSON.parse(localStorage.getItem(name));
    // 过期或有错误返回 0 否则返回数据
    if (d) {
        let t = Date.now() - d.time
        if (-1 < t && t < (time * 60000)) return d.data;
    }
    return null;
};

function init(){
    const path = window.location.pathname;
    if (path === '/messages/') {
       initPages()
    }else {
      return
    }
}
init()