import { HomeVideo } from './home-video.js';


/*
* Home Page Scripts
* */
export class Home {
    constructor() {
        this.init();
    }

    init() {
        // Init Video Widget
        new HomeVideo();

        // Runtime Counter
        const $runTime = $("#runTime");
        const timeStr = $runTime.data("start-time");

        if (timeStr) {
            const startTime = new Date(timeStr);

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

            window.runTimeInterval = setInterval(function () {
                const now = new Date();
                const diff = now - startTime;
                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);
                $runTime.text(`已运行 ${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`);
            }, 1000);
        }

        // Hero Slider
        const $heroBgs = $('.hero__bg');
        if ($heroBgs.length > 0) {
            let currentIndex = 0;
            const $heroTitle = $('#hero-title');
            const $heroCaption = $('#hero-caption');
            const $indicators = $('#hero-indicators');
            const slideDuration = 5000;

            // 胶囊指示器
            const createIndicators = () => {
                $indicators.empty();
                $heroBgs.each(function (i) {
                    $indicators.append($('<span class="hero__indicator">').data('index', i));
                });
            };

            const updateIndicator = (index) => {
                const $dots = $indicators.find('.hero__indicator');
                $dots.removeClass('is-active is-animating');

                const $dot = $dots.eq(index);
                $dot.addClass('is-active');

                // 强制 reflow 确保 animation 重新触发
                $dot[0].offsetWidth;
                $dot.css('--hero-progress-duration', `${slideDuration}ms`).addClass('is-animating');
            };

            // 图片说明文字
            const updateCaption = (desc) => {
                if (desc && desc !== '') {
                    $heroCaption.text(desc).addClass('has-text');
                } else {
                    $heroCaption.removeClass('has-text');
                }
            };

            // 标题动画
            const updateTitle = (desc) => {
                $heroTitle.removeClass('is-entering');
                // 切换文字
                $heroTitle.text(desc || '');
                // 强制 reflow 后触发入场动画
                $heroTitle[0].offsetWidth;
                if (desc) $heroTitle.addClass('is-entering');
            };

            // 切换到指定幻灯片
            const goToSlide = (nextIndex) => {
                const $current = $heroBgs.eq(currentIndex);
                const $next = $heroBgs.eq(nextIndex);

                // 预加载背景图
                if (!$next.css('background-image') || $next.css('background-image') === 'none') {
                    $next.css('background-image', `url('${$next.data('bg')}')`);
                }

                $current.removeClass('active');
                $next.addClass('active');

                updateTitle($next.data('desc'));
                updateCaption($next.data('desc'));
                updateIndicator(nextIndex);
                currentIndex = nextIndex;
            };

            // 初始化
            const initSlide = () => {
                const $first = $heroBgs.eq(0);
                $first.css('background-image', `url('${$first.data('bg')}')`).addClass('active');

                createIndicators();
                updateIndicator(0);

                const firstDesc = $first.data('desc');
                updateTitle(firstDesc);
                updateCaption(firstDesc);
            };

            // 自动轮播控制
            let _autoplayTimer = null;
            let _isPaused = false;

            const startAutoplay = () => {
                stopAutoplay();
                if ($heroBgs.length <= 1) return;
                _autoplayTimer = setInterval(() => {
                    goToSlide((currentIndex + 1) % $heroBgs.length);
                }, slideDuration);
            };

            const stopAutoplay = () => {
                if (_autoplayTimer) {
                    clearInterval(_autoplayTimer);
                    _autoplayTimer = null;
                }
            };

            initSlide();

            // 指示器点击切换 & 悬停暂停
            $indicators
                .on('click', '.hero__indicator', function () {
                    const idx = $(this).data('index');
                    if (idx === currentIndex) {
                        return;
                    }
                    goToSlide(idx);
                    // 点击后重置自动播放计时器（从头开始计 5s）
                    if (!_isPaused) {
                        startAutoplay();
                    }
                })
                .on('mouseenter', () => {
                    _isPaused = true;
                    stopAutoplay();
                })
                .on('mouseleave', () => {
                    _isPaused = false;
                    startAutoplay();
                });

            // 兼容旧 window.heroSliderInterval 清理
            if (window.heroSliderInterval) {
                clearInterval(window.heroSliderInterval);
                window.heroSliderInterval = null;
            }

            startAutoplay();
        }
    }
}