/**
 * 时间线模块
 */
export class Timeline {
    private static _instance: Timeline | null = null;
    private _loading: boolean = false;
    private _hasMore: boolean = true;
    private _pageIndex: number = 1;
    private _pageSize: number = 10;
    private _account: string = 'pengqian';
    private _scrollHandler: ((this: Window, ev: Event) => void) | null = null;
    private _isInitialized: boolean = false;
    private _timelineContainer: HTMLElement | null = null;
    private _loadingElement: HTMLElement | null = null;
    private _endElement: HTMLElement | null = 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();
    }

    public init(): void {
        const timelineContainer = document.querySelector<HTMLElement>('.timeline');

        if (!timelineContainer) {
            return;
        }

        this._pageIndex = parseInt(timelineContainer.dataset.pageIndex as string) || 1;
        this._pageSize = parseInt(timelineContainer.dataset.pageSize as string) || 10;
        this._account = timelineContainer.dataset.account || 'pengqian';
        this._hasMore = timelineContainer.dataset.hasMore === 'true';

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

        this.initItemsAnimation();
        this.setupScrollListener();

        if (this._loadingElement) {
            this._loadingElement.style.display = this._hasMore ? 'flex' : 'none';
        }

        this._isInitialized = true;
    }

    public destroy(): void {
        if (this._scrollHandler) {
            window.removeEventListener('scroll', this._scrollHandler);
            this._scrollHandler = null;
        }
        this._isInitialized = false;

        if (Timeline._instance === this) {
            Timeline._instance = null;
        }
    }

    public initItemsAnimation(): void {
        const timelineItems = document.querySelectorAll<HTMLElement>('.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);
        });
    }

    public setupScrollListener(): void {
        let ticking = false;

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

            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 });
    }

    public async loadMore(): Promise<void> {
        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<HTMLElement>('.timeline__item');

            if (newItems.length === 0) {
                this._hasMore = false;
                this.showEndMessage();
                return;
            }

            newItems.forEach((item) => {
                if (this._timelineContainer) {
                    this._timelineContainer.appendChild(item);
                }
            });

            this.initItemsAnimation();
            this._pageIndex = nextPage;

            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';
            }
        }
    }

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