// 获取搜索框输入和所有工具卡片
const searchInput = document.getElementById('search-input');
const toolCards = document.querySelectorAll('.tool-card');

// 监听搜索框的输入事件
searchInput.addEventListener('input', function() {
    const searchTerm = searchInput.value.toLowerCase().trim();  // 获取搜索关键词并转换为小写

    // 过滤工具卡片
    filterCards(searchTerm);
});

// 过滤工具卡片
function filterCards(searchTerm) {
    const filteredCards = Array.from(toolCards).filter(card => {
        const title = card.querySelector('.tool-name').textContent.toLowerCase();
        const description = card.querySelector('.card-description').textContent.toLowerCase();
        return title.includes(searchTerm) || description.includes(searchTerm);
    });

    // 更新卡片布局
    updateCardLayout(filteredCards, searchTerm);
}

// 更新卡片布局，确保卡片顺序正确
function updateCardLayout(filteredCards, searchTerm) {
    const container = document.querySelector('.tools-grid');
    container.innerHTML = '';  // 清空容器中的所有卡片

    if (searchTerm === '') {
        // 如果搜索框为空，恢复原始顺序
        toolCards.forEach(card => container.appendChild(card));
    } else {
        // 搜索时按顺序添加匹配的卡片
        filteredCards.forEach(card => container.appendChild(card));
    }

    // 确保跳转链接依然有效
    addLinkFunctionality(filteredCards);
}

// 为每个卡片的链接添加跳转功能
function addLinkFunctionality(cards) {
    cards.forEach(card => {
        const link = card.querySelector('.tool-card-link');  // 获取卡片中的链接元素
        if (link) {
            // 确保链接点击时会跳转（无论是旧标签还是新标签）
            link.addEventListener('click', function(event) {
                // 如果需要额外的功能（比如日志记录等），可以插入代码
                // 例如：console.log('Tool clicked:', link.href);
                // 无需手动修改 target="_blank"，浏览器会根据 <a> 标签的设置自动处理
            });
        }
    });
}