import { HomeVideo } from './HomeVideo.ts';

/**
 * 首页模块
 */
export class Home {
    private static runTimeInterval: number | null = null;

    constructor() {
        this.init();
    }

    private init(): void {
        // 初始化首页视频模块
        new HomeVideo();

        // 运行时间计数器
        this.initRunTimeCounter();

        // 首页幻灯片
        this.initHeroSlider();
    }

    /**
     * 初始化运行时间计数器
     */
    private initRunTimeCounter(): void {
        const runTimeElement = document.getElementById('runTime');
        const timeStr = runTimeElement?.dataset.startTime;

        if (!timeStr) {
            return;
        }

        const startTime: Date = new Date(timeStr);

        if (Home.runTimeInterval) {
            clearInterval(Home.runTimeInterval);
        }

        Home.runTimeInterval = window.setInterval(() => {
            if (!runTimeElement) {
                return;
            }

            const now: Date = new Date();
            const diff = now.getTime() - startTime.getTime();
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            runTimeElement.textContent = `已运行 ${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`;
        }, 1000);
    }

    /**
     * 初始化首页幻灯片轮播
     */
    private initHeroSlider(): void {
        const heroBgsElements = document.querySelectorAll<HTMLElement>('.hero__bg');
        if (heroBgsElements.length === 0) {
            return;
        }

        let currentIndex = 0;
        const heroTitle = document.getElementById('hero-title');
        const heroCaption = document.getElementById('hero-caption');
        const indicators = document.getElementById('hero-indicators');

        if (!heroTitle || !heroCaption || !indicators) {
            return;
        }

        const slideDuration = 5000;
        let autoplayTimer: number | null = null;
        let isPaused = false;

        // 创建胶囊指示器
        const createIndicators = (): void => {
            indicators.innerHTML = '';
            heroBgsElements.forEach((_, i) => {
                const span = document.createElement('span');
                span.className = 'hero__indicator';
                span.dataset.index = i.toString();
                indicators.appendChild(span);
            });
        };

        // 更新指示器激活状态
        const updateIndicator = (index: number): void => {
            const dots = indicators.querySelectorAll<HTMLElement>('.hero__indicator');
            dots.forEach((dot) => {
                dot.classList.remove('is-active', 'is-animating');
            });

            const activeDot = dots[index];
            if (activeDot) {
                activeDot.classList.add('is-active');
                // 强制 reflow 确保 animation 重新触发
                void activeDot.offsetWidth;
                activeDot.style.setProperty('--hero-progress-duration', `${slideDuration}ms`);
                activeDot.classList.add('is-animating');
            }
        };

        // 更新图片说明文字
        const updateCaption = (desc: string | null): void => {
            if (desc && desc !== '') {
                heroCaption.textContent = desc;
                heroCaption.classList.add('has-text');
            } else {
                heroCaption.classList.remove('has-text');
            }
        };

        // 更新标题动画
        const updateTitle = (desc: string | null): void => {
            heroTitle.classList.remove('is-entering');
            heroTitle.textContent = desc || '';
            // 强制 reflow 后触发入场动画
            void heroTitle.offsetWidth;
            if (desc) {
                heroTitle.classList.add('is-entering');
            }
        };

        // 切换到指定幻灯片
        const goToSlide = (nextIndex: number): void => {
            const current = heroBgsElements[currentIndex];
            const next = heroBgsElements[nextIndex];

            if (!current || !next) {
                return;
            }

            // 预加载背景图
            const bgUrl = next.dataset.bg;
            const currentBgImage = window.getComputedStyle(next).backgroundImage;

            if (bgUrl && (!currentBgImage || currentBgImage === 'none')) {
                next.style.backgroundImage = `url('${bgUrl}')`;
            }

            current.classList.remove('active');
            next.classList.add('active');

            const nextDesc = next.dataset.desc || null;
            updateTitle(nextDesc);
            updateCaption(nextDesc);
            updateIndicator(nextIndex);
            currentIndex = nextIndex;
        };

        // 初始化幻灯片
        const initSlide = (): void => {
            const first = heroBgsElements[0];
            if (!first) {
                return;
            }

            const bgUrl = first.dataset.bg;
            if (bgUrl) {
                first.style.backgroundImage = `url('${bgUrl}')`;
            }
            first.classList.add('active');

            createIndicators();
            updateIndicator(0);

            const firstDesc = first.dataset.desc || null;
            updateTitle(firstDesc);
            updateCaption(firstDesc);
        };

        // 开始自动轮播
        const startAutoplay = (): void => {
            stopAutoplay();
            if (heroBgsElements.length <= 1) {
                return;
            }

            autoplayTimer = window.setInterval(() => {
                goToSlide((currentIndex + 1) % heroBgsElements.length);
            }, slideDuration);
        };

        // 停止自动轮播
        const stopAutoplay = (): void => {
            if (autoplayTimer !== null) {
                clearInterval(autoplayTimer);
                autoplayTimer = null;
            }
        };

        // 初始化
        initSlide();

        // 指示器点击切换
        indicators.addEventListener('click', (e: MouseEvent) => {
            const target = e.target as HTMLElement;
            if (!target.classList.contains('hero__indicator')) {
                return;
            }

            const idx = parseInt(target.dataset.index || '0', 10);
            if (idx === currentIndex) {
                return;
            }

            goToSlide(idx);
            // 点击后重置自动播放计时器（从头开始计时）
            if (!isPaused) {
                startAutoplay();
            }
        });

        // 指示器悬停暂停
        indicators.addEventListener('mouseenter', () => {
            isPaused = true;
            stopAutoplay();
        });

        indicators.addEventListener('mouseleave', () => {
            isPaused = false;
            startAutoplay();
        });

        // 启动自动轮播
        startAutoplay();
    }
}