/**
 * Dailymotion Pro – Shared Preview Core (PLS-based)
 *
 * Centralizes preview logic for Dailymotion admin interfaces:
 *  - PLS (Player Library Script) loading/unloading
 *  - Player instance lifecycle (create/destroy)
 *  - Per-scope state management
 *  - DOM-based heading/title styling and player rendering
 *
 * Used by:
 *  - Video Embed adapter (`src/Admin/VideoEmbed/Preview.ts`)
 *  - Setup Wizard adapter (`src/Admin/SetupWizard/PreviewSettings.ts`)
 */

import { extractFontFamily, qs, replaceTagKeepAttrs } from '../../Libs/Utils';

export type ScopeId = string;

/**
 * DOM selectors configuration for a preview scope.
 * Supports static strings or functions that return strings (for dynamic IDs).
 */
export interface PreviewDomSelectors {
    containerId: string | (() => string);
    headingId: string | (() => string);
    titleId: string | (() => string);
    playerId: string | (() => string);
    playerSelectId: string | (() => string);
    headingToggleId: string | (() => string);
    headingTextId: string | (() => string);
    headingFontId: string | (() => string);
    headingSizeId: string | (() => string);
    titleToggleId: string | (() => string);
    titleFontId: string | (() => string);
    titleSizeId: string | (() => string);
    muteId: string | (() => string);
    activeLabelSelector?: string;
    extraActiveLabelSelector?: string;
}

/**
 * Optional hooks to customize scope behavior.
 */
export interface ScopeBehaviorHooks {
    isScopeEnabled?: () => boolean;
    isHeadingEnabled?: () => boolean;
    isTitleEnabled?: () => boolean;
    getVideoId?: () => string;
    onAfterPlayerCreated?: (scope: ScopeId) => void;
}

/**
 * Configuration for a preview scope.
 */
export interface ScopeConfig {
    id: ScopeId;
    selectors: PreviewDomSelectors;
    hooks?: ScopeBehaviorHooks;
}

/**
 * Public API returned by initPreviewCore.
 */
export interface PreviewApi {
    updateScope(scopeId: ScopeId): void;
    teardown(scope?: ScopeId | 'all'): Promise<void>;
    attachListeners(scopeId: ScopeId, elementIds: string[]): void;
}

/**
 * Helper to resolve a selector (string or function).
 */
function resolveSelector(selector: string | (() => string)): string {
    return typeof selector === 'function' ? selector() : selector;
}


/**
 * Global cache of PLS loader promises, keyed by playerId.
 * Ensures we don't inject duplicate <script> tags for the same player library.
 */
const scriptCache: Record<string, Promise<void>> = {};

/**
 * Per-scope state management.
 */
const perScopeState: Record<ScopeId, {
    activePlayerId: string | null;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    currentPlayer: any | null;
    lastConfig: { playerId: string; videoId: string; mute: boolean } | null;
}> = {};

/**
 * Loads the Dailymotion Player Library Script for a given playerId.
 * - Reuses an existing script tag if already present.
 * - Memoizes the loading promise per playerId to prevent multiple insertions.
 */
function loadPlayerLibrary(playerId: string): Promise<void> {
    if (scriptCache[playerId]) return scriptCache[playerId];
    const src = `https://geo.dailymotion.com/libs/player/${playerId}.js`;
    const existing = Array.from(document.getElementsByTagName('script')).find(s => s.src === src);
    if (existing) {
        scriptCache[playerId] = Promise.resolve();
        return scriptCache[playerId];
    }
    scriptCache[playerId] = new Promise<void>((resolve, reject) => {
        const s = document.createElement('script');
        s.src = src;
        s.async = true;
        s.onload = () => resolve();
        s.onerror = () => reject(new Error(`Failed to load player lib for ${playerId}`));
        document.head.appendChild(s);
    });
    return scriptCache[playerId];
}

/**
 * Unloads the Player Library Script for a given playerId by removing the
 * corresponding <script> tag, clearing the cache entry, and resetting the
 * global window.dailymotion reference to prevent leaking the old bundle.
 */
function unloadPlayerLibrary(playerId: string): void {
    const src = `https://geo.dailymotion.com/libs/player/${playerId}.js`;
    const script = Array.from(document.getElementsByTagName('script')).find(s => s.src === src);
    if (script && script.parentNode) {
        script.parentNode.removeChild(script);
    }
    delete scriptCache[playerId];
    // Reset the global to avoid using a stale library when switching players
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    if ((window as any).dailymotion) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        delete (window as any).dailymotion;
    }
}

/**
 * Destroys the current preview player instance for a scope (if any) and clears the ref.
 */
async function destroyCurrentPlayer(scopeId: ScopeId): Promise<void> {
    const state = perScopeState[scopeId];
    if (!state) return;
    try {
        if (state.currentPlayer && typeof state.currentPlayer.destroy === 'function') {
            await state.currentPlayer.destroy();
        }
    } catch (e) {
        // Non-fatal in preview environment
        // eslint-disable-next-line no-console
        console.warn('Error destroying player (non-fatal in preview):', e);
    } finally {
        state.currentPlayer = null;
    }
}

/**
 * Clears the preview container before re-creating the player instance.
 */
function resetPreviewContainer(container: HTMLElement): void {
    container.innerHTML = '';
}

/**
 * Initializes the preview core with the given scope configurations.
 */
export function initPreviewCore(configs: ScopeConfig[]): PreviewApi {
    // Initialize state for all scopes
    configs.forEach(config => {
        if (!perScopeState[config.id]) {
            perScopeState[config.id] = {
                activePlayerId: null,
                currentPlayer: null,
                lastConfig: null,
            };
        }
    });

    /**
     * Updates a specific preview scope.
     */
    function updateScope(scopeId: ScopeId): void {
        const config = configs.find(c => c.id === scopeId);
        if (!config) {
            // eslint-disable-next-line no-console
            console.warn(`Preview scope '${scopeId}' not found`);
            return;
        }

        const { selectors, hooks } = config;
        const state = perScopeState[scopeId];

        // Resolve all selectors
        const containerId = resolveSelector(selectors.containerId);
        const headingId = resolveSelector(selectors.headingId);
        const titleId = resolveSelector(selectors.titleId);
        const playerId = resolveSelector(selectors.playerId);

        const container = qs<HTMLElement>(containerId);
        let heading = qs<HTMLElement>(headingId);
        const title = qs<HTMLElement>(titleId);
        const playerContainer = qs<HTMLElement>(playerId);

        if (!container || !heading || !title || !playerContainer) return;

        // Check if scope is enabled (affects container visibility and mute/heading/title)
        const scopeEnabled = hooks?.isScopeEnabled ? hooks.isScopeEnabled() : true;
        if (hooks?.isScopeEnabled) {
            container.classList.toggle('disable-view-mode', !scopeEnabled);
        }

        // Resolve form control selectors
        const playerSelectId = resolveSelector(selectors.playerSelectId);
        const headingToggleId = resolveSelector(selectors.headingToggleId);
        const headingTextId = resolveSelector(selectors.headingTextId);
        const headingFontId = resolveSelector(selectors.headingFontId);
        const headingSizeId = resolveSelector(selectors.headingSizeId);
        const titleToggleId = resolveSelector(selectors.titleToggleId);
        const titleFontId = resolveSelector(selectors.titleFontId);
        const titleSizeId = resolveSelector(selectors.titleSizeId);
        const muteId = resolveSelector(selectors.muteId);

        // Update Active Player ID label(s)
        const playerSelect = qs<HTMLSelectElement>(playerSelectId);
        const rawPlayerId = (playerSelect?.value || '').trim();
        const displayPlayerId = rawPlayerId || 'default';
        const isDefault = rawPlayerId === '' || rawPlayerId === 'xchtp';

        if (selectors.activeLabelSelector) {
            const label = document.querySelector(selectors.activeLabelSelector) as HTMLElement | null;
            if (label) {
                label.textContent = isDefault ? 'default' : rawPlayerId;
            }
        }
        if (selectors.extraActiveLabelSelector) {
            const extraLabel = document.querySelector(selectors.extraActiveLabelSelector) as HTMLElement | null;
            if (extraLabel) {
                extraLabel.textContent = isDefault ? 'default' : rawPlayerId;
            }
        }

        // Heading controls
        const headingToggle = qs<HTMLInputElement>(headingToggleId);
        const headingText = qs<HTMLInputElement>(headingTextId);
        const headingFont = qs<HTMLSelectElement>(headingFontId);
        const headingSize = qs<HTMLSelectElement>(headingSizeId);

        const headingEnabled = hooks?.isHeadingEnabled
            ? hooks.isHeadingEnabled()
            : (!!headingToggle?.checked && scopeEnabled);

        heading.style.display = headingEnabled ? '' : 'none';
        if (headingEnabled && headingText) {
            heading.textContent = headingText.value || 'Video Heading Label';
        }
        if (headingEnabled && headingFont) {
            const fam = extractFontFamily(headingFont.value);
            if (fam) heading.style.fontFamily = fam;
        }
        if (headingEnabled && headingSize) {
            const tag = headingSize.value?.toLowerCase();
            if (tag && heading.tagName.toLowerCase() !== tag) {
                heading = replaceTagKeepAttrs(heading, tag);
            }
        }

        // Title controls
        const titleToggle = qs<HTMLInputElement>(titleToggleId);
        const titleFont = qs<HTMLSelectElement>(titleFontId);
        const titleSize = qs<HTMLSelectElement>(titleSizeId);

        const titleEnabled = hooks?.isTitleEnabled
            ? hooks.isTitleEnabled()
            : (!!titleToggle?.checked && scopeEnabled);

        title.style.display = titleEnabled ? '' : 'none';
        if (titleEnabled && titleFont) {
            const fam = extractFontFamily(titleFont.value);
            if (fam) title.style.fontFamily = fam;
        }
        if (titleEnabled && titleSize) {
            title.style.fontSize = titleSize.value || '';
            title.style.lineHeight = '1.2';
        }

        // Player configuration
        const playerIdValue = playerSelect?.value || 'xchtp';
        const videoId = hooks?.getVideoId
            ? hooks.getVideoId()
            : (() => {
                const videoIdInput = qs<HTMLInputElement>('dm-preview-video-id');
                return videoIdInput?.value || 'x8mubmn';
            })();
        const muteCheckbox = qs<HTMLInputElement>(muteId);
        const mute = !!(muteCheckbox && muteCheckbox.checked && scopeEnabled);

        const newConfig = { playerId: playerIdValue, videoId, mute };

        // Skip if nothing changed
        if (state.lastConfig &&
            state.lastConfig.playerId === newConfig.playerId &&
            state.lastConfig.videoId === newConfig.videoId &&
            state.lastConfig.mute === newConfig.mute) {
            return;
        }

        state.lastConfig = newConfig;

        // Recreate player when configuration changes
        void (async () => {
            try {
                const switchingLibrary = state.activePlayerId !== null && state.activePlayerId !== playerIdValue;

                // Always destroy current player before rebuilding
                await destroyCurrentPlayer(scopeId);

                // If switching to another playerId, unload previous library and reset global
                if (switchingLibrary && state.activePlayerId) {
                    unloadPlayerLibrary(state.activePlayerId);
                }

                // Reset container to remove any prior player DOM
                resetPreviewContainer(playerContainer);

                // Load the required library for the new (or same) playerId
                await loadPlayerLibrary(playerIdValue);
                state.activePlayerId = playerIdValue;

                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                const dm: any = (window as any).dailymotion;
                if (!dm || typeof dm.createPlayer !== 'function') return;

                dm.createPlayer(playerId, {
                    video: videoId,
                    params: {
                        mute,
                    },
                })
                    .then((player: unknown) => {
                        state.currentPlayer = player as { destroy?: () => Promise<void> };
                        if (hooks?.onAfterPlayerCreated) {
                            hooks.onAfterPlayerCreated(scopeId);
                        }
                    })
                    .catch((error: unknown) => {
                        // Non-fatal in preview environment
                        // eslint-disable-next-line no-console
                        console.error(`Error creating player (preview scope '${scopeId}'):`, error);
                    });
            } catch (e) {
                // eslint-disable-next-line no-console
                console.error(e);
            }
        })();
    }

    /**
     * Teardown helper to destroy preview players.
     * Does not unload scripts, just destroys players and clears containers.
     */
    async function teardown(scope?: ScopeId | 'all'): Promise<void> {
        const scopesToTeardown: ScopeId[] = scope === 'all'
            ? configs.map(c => c.id)
            : (scope ? [scope] : []);

        for (const scopeId of scopesToTeardown) {
            await destroyCurrentPlayer(scopeId);
            const config = configs.find(c => c.id === scopeId);
            if (config) {
                const playerId = resolveSelector(config.selectors.playerId);
                const el = qs<HTMLElement>(playerId);
                if (el) resetPreviewContainer(el);
            }
        }
    }

    return {
        updateScope,
        teardown,
        attachListeners,
    };

    /**
     * Attaches change listeners to the given element IDs for a scope.
     * Text inputs are debounced; other inputs trigger immediately.
     */
    function attachListeners(scopeId: ScopeId, elementIds: string[]): void {
        const config = configs.find(c => c.id === scopeId);
        if (!config) return;

        elementIds.forEach(id => {
            // Resolve potentially dynamic IDs (though usually static for listeners)
            // But we must resolve to attach to the correct DOM element
            // Note: If ID is dynamic, this only attaches to the *current* ID.
            // Callers should re-attach if IDs change dynamically (e.g. preview.ts mode switch).
            const elId = resolveSelector(() => id);
            const el = qs(elId);
            if (!el) return;

            const handler = () => updateScope(scopeId);
            el.addEventListener('change', handler);

            if (el instanceof HTMLInputElement && el.type === 'text') {
                let timeoutId: number | undefined;
                el.addEventListener('input', () => {
                    if (timeoutId) {
                        window.clearTimeout(timeoutId);
                    }
                    timeoutId = window.setTimeout(handler, 200);
                });
            }
        });
    }
}