export class Timeline {
    static _instance = null;

    constructor() {
        // 如果已存在实例，先销毁旧实例
        if (Timeline._instance) {
            Timeline._instance.destroy();
        }

        this._loading = false;
        this._hasMore = true;
        this._pageIndex = 1;
        this._pageSize = 10;
        this._account = 'pengqian';
        this._scrollHandler = null;
        this._isInitialized = false;
        
        Timeline._instance = this;
        this.init();
    }

    init() {
        // 检测是否存在时间轴结构
        const timelineContainer = document.querySelector('.timeline');
        
        if (!timelineContainer) {
            // 没有时间轴结构，不进行任何初始化
            return;
        }

        // 从容器读取初始配置
        this._pageIndex = parseInt(timelineContainer.dataset.pageIndex) || 1;
        this._pageSize = parseInt(timelineContainer.dataset.pageSize) || 10;
        this._account = timelineContainer.dataset.account || 'pengqian';
        this._hasMore = timelineContainer.dataset.hasMore === 'true';

        this._timelineContainer = timelineContainer;
        this._loadingElement = document.querySelector('.timeline__loading');
        this._endElement = document.querySelector('.timeline__end');

        // 初始化已有项目的动画
        this.initItemsAnimation();

        // 设置滚动监听
        this.setupScrollListener();
        
        // 初始化时隐藏加载提示
        if (this._loadingElement) {
            this._loadingElement.style.display = this._hasMore ? 'flex' : 'none';
        }

        this._isInitialized = true;
    }

    destroy() {
        // 清理滚动事件监听器
        if (this._scrollHandler) {
            window.removeEventListener('scroll', this._scrollHandler);
            this._scrollHandler = null;
        }
        this._isInitialized = false;
        
        // 清理实例引用
        if (Timeline._instance === this) {
            Timeline._instance = null;
        }
    }

    initItemsAnimation() {
        const timelineItems = document.querySelectorAll('.timeline__item');
        
        if (timelineItems.length === 0) return;

        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        timelineItems.forEach(item => {
            observer.observe(item);
        });
    }

    setupScrollListener() {
        let ticking = false;

        const checkScroll = () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const windowHeight = window.innerHeight;
            const documentHeight = document.documentElement.scrollHeight;

            // 距离底部 500px 时开始加载
            const threshold = 500;
            const distanceToBottom = documentHeight - (scrollTop + windowHeight);

            if (distanceToBottom < threshold && this._hasMore && !this._loading) {
                this.loadMore();
            }

            ticking = false;
        };

        this._scrollHandler = () => {
            if (!ticking) {
                window.requestAnimationFrame(checkScroll);
                ticking = true;
            }
        };

        window.addEventListener('scroll', this._scrollHandler, { passive: true });
    }

    async loadMore() {
        if (this._loading || !this._hasMore) {
            return;
        }

        this._loading = true;
        
        if (this._loadingElement) {
            this._loadingElement.style.display = 'flex';
        }

        try {
            const nextPage = this._pageIndex + 1;
            const url = `/Timeline/LoadMore?account=${encodeURIComponent(this._account)}&pageIndex=${nextPage}&pageSize=${this._pageSize}`;
            
            const response = await fetch(url);
            
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }

            const html = await response.text();
            
            if (html.trim() === '') {
                this._hasMore = false;
                this.showEndMessage();
                return;
            }

            // 将新内容插入到时间轴容器中
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = html;
            
            const newItems = tempDiv.querySelectorAll('.timeline__item');
            
            if (newItems.length === 0) {
                this._hasMore = false;
                this.showEndMessage();
                return;
            }

            // 追加新项目
            newItems.forEach(item => {
                this._timelineContainer.appendChild(item);
            });

            // 为新项目添加动画
            this.initItemsAnimation();

            // 更新页码
            this._pageIndex = nextPage;

            // 检查是否还有更多
            // 如果返回的项目数量少于 pageSize，说明没有更多了
            if (newItems.length < this._pageSize) {
                this._hasMore = false;
                this.showEndMessage();
            }

        } catch (error) {
            console.error('加载时间轴失败:', error);
        } finally {
            this._loading = false;
            if (this._loadingElement) {
                this._loadingElement.style.display = 'none';
            }
        }
    }

    showEndMessage() {
        if (this._loadingElement) {
            this._loadingElement.style.display = 'none';
        }
        if (this._endElement) {
            this._endElement.style.display = 'flex';
        }
    }
}