import Artplayer from 'artplayer';
import { BaseVideoPlayer } from './BaseVideoPlayer.ts';
import { logger } from './ConsoleLogger.ts';

interface VideoInfo {
    id: string;
    title: string;
    cover: string;
    url: string;
}

/**
 * 视频模块（视频详情页）
 */
class VideoPlayer extends BaseVideoPlayer {
    private readonly _containerSelector = '#video-player';
    private readonly _dataAttribute = 'data-video-config';

    public init(): void {
        const container = document.querySelector(this._containerSelector) as HTMLDivElement | null;
        if (!container) {
            return;
        }

        // 通过检查是否已经存在 Artplayer 实例来避免重复初始化
        if (container.classList.contains('artplayer-app')) {
            // 已经初始化
            return;
        }

        const configStr = container.getAttribute(this._dataAttribute);
        if (!configStr) {
            return;
        }

        try {
            const config = JSON.parse(configStr) as VideoInfo;
            this.setupPlayer(container, config);
        } catch (e) {
            logger.outPutError('Failed to parse video config', e);
        }
    }

    private setupPlayer(container: HTMLDivElement, config: VideoInfo): void {
        const { id, url, cover, title } = config;
        const videoId = id;
        const compactControls = this.shouldUseCompactControls();

        const art = new Artplayer({
            container: container,
            url: url,
            poster: cover,
            subtitle: { name: title },
            volume: 0.5,
            isLive: false,
            muted: false,
            autoplay: false,
            pip: !compactControls,
            autoMini: !compactControls,
            screenshot: !compactControls,
            setting: !compactControls,
            loop: false,
            flip: !compactControls,
            playbackRate: !compactControls,
            aspectRatio: !compactControls,
            fullscreen: true,
            fullscreenWeb: !compactControls,
            miniProgressBar: true,
            mutex: true,
            backdrop: true,
            playsInline: true,
            autoPlayback: true,
            airplay: true,
            theme: this.getThemeColor(),
            // 使用基类的通用配置
            ...this.getCommonArtplayerOptions(),
            plugins: [
                this.createDanmakuPlugin(videoId, () => this.incrementCounter('danmaku', '弹幕')),
            ],
        });

        // 使用基类的首次播放处理
        art.on(
            'video:play',
            this.createFirstPlayHandler(videoId, () => {
                this.incrementCounter('play', '播放');
            })
        );
    }

    private incrementCounter(type: 'play' | 'danmaku', label: string): void {
        const countEl = document.querySelector<HTMLElement>(`[data-video-counter="${type}"]`);
        if (!countEl) {
            return;
        }

        const count = this.getCounterValue(countEl) + 1;
        countEl.dataset.count = count.toString();
        countEl.innerText = `${count.toLocaleString()} ${label}`;
    }

    private getCounterValue(element: HTMLElement): number {
        const dataValue = Number.parseInt(element.dataset.count ?? '', 10);
        if (Number.isFinite(dataValue)) {
            return dataValue;
        }

        const textValue = Number.parseInt(element.innerText.replace(/[^\d]/g, ''), 10);
        return Number.isFinite(textValue) ? textValue : 0;
    }

    private getThemeColor(): string {
        const color = getComputedStyle(document.documentElement)
            .getPropertyValue('--color-primary')
            .trim();
        return color || '#2563eb';
    }

    private shouldUseCompactControls(): boolean {
        return window.matchMedia('(max-width: 640px)').matches;
    }
}

export class Video {
    constructor() {
        this.initCoverFallbacks();
        const videoPlayer = new VideoPlayer();
        videoPlayer.init();
    }

    private initCoverFallbacks(): void {
        const images = document.querySelectorAll<HTMLImageElement>(
            '.video-card__image, .video-watch__ambient img'
        );
        images.forEach((image) => {
            const onError = (): void => {
                const media = image.closest<HTMLElement>('.video-card__media');
                media?.classList.add('video-card__media--empty');
                image.remove();
            };

            if (image.complete && image.naturalWidth === 0) {
                onError();
                return;
            }

            image.addEventListener('error', onError, { once: true });
        });
    }
}