// 智能检测用户行为
let userInteractionDetected = false;
let scrollStartTime = 0;
let idleTimeout: ReturnType<typeof setTimeout> | undefined;
// 检测用户交互
function detectUserInteraction() {
    if (!userInteractionDetected) {
        userInteractionDetected = true;
        // 用户开始交互后，降低加载阈值
        startSmartLoading();
    }
}
// 监听多种用户交互
['scroll', 'mousemove', 'keydown', 'click', 'touchstart'].forEach(event => {
    window.addEventListener(event, detectUserInteraction, { once: true, passive: true });
});

const observer = new IntersectionObserver(
    (entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting && !postsLoaded && !isLoading) {
                loadPosts();
            }
        });
    },
    {
        rootMargin: "200px", // 提前200px开始加载
    },
);

// 备用滚动检测
let ticking = false;
function handleScroll() {
    if (!ticking && !postsLoaded && !isLoading) {
        requestAnimationFrame(() => {
            const scrollPosition = window.innerHeight + window.scrollY;
            const documentHeight = document.documentElement.offsetHeight;
            const scrollPercent = (scrollPosition / documentHeight) * 100;
            // 根据滚动速度调整加载阈值
            const currentTime = Date.now();
            if (scrollStartTime === 0) {
                scrollStartTime = currentTime;
            }
            const scrollDuration = currentTime - scrollStartTime;
            const fastScroll = scrollDuration < 1000; // 快速滚动
            const threshold = fastScroll ? 60 : 70; // 动态阈值
            if (scrollPercent >= threshold) {
                loadPosts();
            }
            ticking = false;
        });
    }
    ticking = true;
}

// 空闲时自动加载
function scheduleIdleLoading() {
    if (idleTimeout) {
        clearTimeout(idleTimeout);
    }
    idleTimeout = setTimeout(() => {
        if (!postsLoaded && userInteractionDetected) {
            loadPosts();
        }
    }, 3000); // 3秒空闲后加载
}
// 监听用户空闲状态
["scroll", "mousemove", "keydown", "click"].forEach((event) => {
    window.addEventListener(event, scheduleIdleLoading, { passive: true });
});

// 网络状态检测
if ('connection' in navigator) {
    const connection = (navigator as any).connection;
    if (connection && connection.effectiveType === '5g') {
        // 5G网络下更积极加载
        setTimeout(() => {
            if (!postsLoaded && userInteractionDetected) {
                loadPosts();
            }
        }, 1500);
    }
}

// 页面可见性变化时的处理
document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible" && userInteractionDetected && !postsLoaded) {
        // 页面重新可见时延迟加载
        setTimeout(() => {
            if (!postsLoaded) {
                loadPosts();
            }
        }, 1000);
    }
});

// 优化前：一次性渲染所有文章
<div class="posts-grid">
    {Posts.map(post => <Article />)} // 50+ 个文章组件
</div>
// 优化后：按需渲染
<div id="posts-container" style="display: none;">
    {Posts.map(post => <Article />)} // 延迟渲染
</div>

// 使用 requestAnimationFrame 优化滚动处理
requestAnimationFrame(() => {
    // 滚动计算逻辑
});

// 预加载关键资源
function preloadImages() {
    const images = postsContainer?.querySelectorAll("img");
    images?.forEach((img) => {
        if (img.dataset.src) {
            img.src = img.dataset.src;
        }
    });
}

// 生命周期管理
let observer: IntersectionObserver | null = null;
// 清理资源
function cleanup() {
    if (observer) {
        observer.disconnect();
        observer = null;
    }
    if (idleTimeout) {
        clearTimeout(idleTimeout);
        idleTimeout = undefined;
    }
}
// 页面卸载时清理
window.addEventListener('beforeunload', cleanup);

// 加载动画设计
<div class="loading-indicator">
    <div class="spinner"></div>
    <span>正在加载更多内容...</span>
</div>

#posts-container {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}
#posts-container[style*="display: block"] {
    opacity: 1;
    transform: translateY(0);
}

/* 移动端优化 */
@media (max-width: 768px) {
    .load-posts-trigger {
        margin: 1rem 0;
        padding: 0.5rem;
    }
    .loading-indicator {
        font-size: 0.8rem;
    }
    .spinner {
        width: 16px;
        height: 16px;
    }
}

// 第一阶段：DOM 就绪
document.addEventListener("DOMContentLoaded", function () {
    // 获取关键 DOM 元素
    const postsContainer = document.getElementById("posts-container");
    const loadTrigger = document.getElementById("load-posts-trigger");
    // 初始化状态变量
    let postsLoaded = false;
    let isLoading = false;
    let userInteractionDetected = false;
});

// 第二阶段：等待用户交互
function detectUserInteraction() {
    if (!userInteractionDetected) {
        userInteractionDetected = true;
        // 状态转换：进入智能加载阶段
        startSmartLoading();
    }
}

// 第三阶段：多重触发机制启动
function startSmartLoading() {
    // 3.1 启动 Intersection Observer
    const observer = new IntersectionObserver(/* ... */);
    // 3.2 启动滚动检测
    window.addEventListener("scroll", handleScroll);
    // 3.3 启动空闲检测
    scheduleIdleLoading();
    // 3.4 启动网络检测
    checkNetworkStatus();
}

// 第四阶段：内容加载与展示
function loadPosts() {
    // 4.1 状态检查
    if (isLoading || postsLoaded || !postsContainer) return;
    // 4.2 设置加载状态
    isLoading = true;
    showLoadingIndicator();
    // 4.3 内容展示
    setTimeout(() => {
        postsContainer.style.display = "block";
        postsContainer.style.animation = "fadeInUp 0.8s ease-in-out forwards";
        // 4.4 状态更新
        postsLoaded = true;
        isLoading = false;
        // 4.5 后续优化
        preloadImages();
        hideLoadingIndicator();
    }, 300);
}

// 第五阶段：资源清理
function cleanup() {
    // 5.1 清理观察者
    if (observer) {
        observer.disconnect();
        observer = null;
    }
    // 5.2 清理定时器
    if (idleTimeout) {
        clearTimeout(idleTimeout);
        idleTimeout = undefined;
    }
    // 5.3 移除事件监听
    window.removeEventListener("scroll", handleScroll);
}

// Intersection Observer 兼容性检测
if ("IntersectionObserver" in window) {
    // 使用现代 API
    const observer = new IntersectionObserver(/* ... */);
} else {
    // 降级到滚动检测
    window.addEventListener("scroll", handleScroll);
}

// 网络连接检测
if ('connection' in navigator) {
    const connection = (navigator as any).connection;
    // 根据网络状态调整策略
} else {
    // 默认策略
    setTimeout(() => {
        if (!postsLoaded && userInteractionDetected) {
            loadPosts();
        }
    }, 2000);
}

// 性能监控
function measurePerformance() {
    const navigation = performance.getEntriesByType("navigation")[0];
    const fcp = performance.getEntriesByName("first-contentful-paint")[0];
    console.log("页面加载时间:", navigation.loadEventEnd - navigation.loadEventStart);
    console.log("首次内容绘制:", fcp.startTime);
}

// 支持不同的加载策略
const loadingStrategy = {
    aggressive: { threshold: 50, delay: 1000 },
    normal: { threshold: 70, delay: 1500 },
    conservative: { threshold: 85, delay: 2000 },
};
const currentStrategy = loadingStrategy.normal;