---
// 全局Iconify加载器组件
// 在页面头部加载，确保图标库尽早可用

export interface Props {
    preloadIcons?: string[]; // 需要预加载的图标列表
    timeout?: number; // 加载超时时间
    retryCount?: number; // 重试次数
}

const { preloadIcons = [], timeout = 10000, retryCount = 3 } = Astro.props;
---

<!-- Iconify图标库加载器 -->
<script define:vars={{ preloadIcons, timeout, retryCount }}>
    // 全局图标加载逻辑
    (function() {
        'use strict';

        // 避免重复加载
        if (window.__iconifyLoaderInitialized) {
            return;
        }
        window.__iconifyLoaderInitialized = true;

        // 图标加载器类
        class IconifyLoader {
            constructor() {
                this.isLoaded = false;
                this.isLoading = false;
                this.loadPromise = null;
                this.observers = new Set();
                this.preloadQueue = new Set();
            }

            async load(options = {}) {
                const { timeout: loadTimeout = timeout, retryCount: maxRetries = retryCount } = options;

                if (this.isLoaded) {
                    return Promise.resolve();
                }

                if (this.isLoading && this.loadPromise) {
                    return this.loadPromise;
                }

                this.isLoading = true;
                this.loadPromise = this.loadWithRetry(loadTimeout, maxRetries);

                try {
                    await this.loadPromise;
                    this.isLoaded = true;
                    this.notifyObservers();
                    await this.processPreloadQueue();
                } catch (error) {
                    console.error('Failed to load Iconify:', error);
                    throw error;
                } finally {
                    this.isLoading = false;
                }
            }

            async loadWithRetry(timeout, retryCount) {
                for (let attempt = 1; attempt <= retryCount; attempt++) {
                    try {
                        await this.loadScript(timeout);
                        return;
                    } catch (error) {
                        console.warn(`Iconify load attempt ${attempt} failed:`, error);
                        if (attempt === retryCount) {
                            throw new Error(`Failed to load Iconify after ${retryCount} attempts`);
                        }
                        await new Promise(resolve => setTimeout(resolve, 1000));
                    }
                }
            }

            loadScript(timeout) {
                return new Promise((resolve, reject) => {
                    // 检查是否已经存在
                    if (this.isIconifyReady()) {
                        resolve();
                        return;
                    }

                    const existingScript = document.querySelector('script[src*="iconify-icon"]');
                    if (existingScript) {
                        this.waitForIconifyReady().then(resolve).catch(reject);
                        return;
                    }

                    const script = document.createElement('script');
                    script.src = 'https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js';
                    script.async = true;
                    script.crossOrigin = 'anonymous';

                    const timeoutId = setTimeout(() => {
                        script.remove();
                        reject(new Error('Script load timeout'));
                    }, timeout);

                    script.onload = () => {
                        clearTimeout(timeoutId);
                        this.waitForIconifyReady().then(resolve).catch(reject);
                    };

                    script.onerror = () => {
                        clearTimeout(timeoutId);
                        script.remove();
                        reject(new Error('Script load error'));
                    };

                    document.head.appendChild(script);
                });
            }

            waitForIconifyReady(maxWait = 5000) {
                return new Promise((resolve, reject) => {
                    const startTime = Date.now();

                    const checkReady = () => {
                        if (this.isIconifyReady()) {
                            resolve();
                            return;
                        }

                        if (Date.now() - startTime > maxWait) {
                            reject(new Error('Iconify initialization timeout'));
                            return;
                        }

                        setTimeout(checkReady, 50);
                    };

                    checkReady();
                });
            }

            isIconifyReady() {
                return typeof window !== 'undefined' && 'customElements' in window && customElements.get('iconify-icon') !== undefined;
            }

            onLoad(callback) {
                if (this.isLoaded) {
                    callback();
                } else {
                    this.observers.add(callback);
                }
            }

            notifyObservers() {
                this.observers.forEach(callback => {
                    try {
                        callback();
                    } catch (error) {
                        console.error('Error in icon load observer:', error);
                    }
                });
                this.observers.clear();
            }

            addToPreloadQueue(icons) {
                if (Array.isArray(icons)) {
                    icons.forEach(icon => this.preloadQueue.add(icon));
                } else {
                    this.preloadQueue.add(icons);
                }

                if (this.isLoaded) {
                    this.processPreloadQueue();
                }
            }

            async processPreloadQueue() {
                if (this.preloadQueue.size === 0) return;

                const iconsToLoad = Array.from(this.preloadQueue);
                this.preloadQueue.clear();

                await this.preloadIcons(iconsToLoad);
            }

            async preloadIcons(icons) {
                if (!this.isLoaded || icons.length === 0) return;

                return new Promise((resolve) => {
                    let loadedCount = 0;
                    const totalIcons = icons.length;
                    const tempElements = [];

                    const cleanup = () => {
                        tempElements.forEach(el => {
                            if (el.parentNode) {
                                el.parentNode.removeChild(el);
                            }
                        });
                    };

                    const checkComplete = () => {
                        loadedCount++;
                        if (loadedCount >= totalIcons) {
                            cleanup();
                            resolve();
                        }
                    };

                    icons.forEach(icon => {
                        const tempIcon = document.createElement('iconify-icon');
                        tempIcon.setAttribute('icon', icon);
                        tempIcon.style.cssText = 'position:absolute;top:-9999px;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;';

                        tempIcon.addEventListener('load', checkComplete);
                        tempIcon.addEventListener('error', checkComplete);

                        tempElements.push(tempIcon);
                        document.body.appendChild(tempIcon);
                    });

                    // 设置超时清理
                    setTimeout(() => {
                        cleanup();
                        resolve();
                    }, 3000);
                });
            }
        }

        // 创建全局实例
        window.__iconifyLoader = new IconifyLoader();

        // 立即开始加载
        window.__iconifyLoader.load().catch(error => {
            console.error('Failed to initialize Iconify:', error);
        });

        // 如果有预加载图标，添加到队列
        if (preloadIcons && preloadIcons.length > 0) {
            window.__iconifyLoader.addToPreloadQueue(preloadIcons);
        }

        // 导出便捷函数到全局
        window.loadIconify = () => window.__iconifyLoader.load();
        window.preloadIcons = (icons) => window.__iconifyLoader.addToPreloadQueue(icons);
        window.onIconifyReady = (callback) => window.__iconifyLoader.onLoad(callback);

        // 页面可见性变化时重新检查
        document.addEventListener('visibilitychange', () => {
            if (!document.hidden && !window.__iconifyLoader.isLoaded) {
                window.__iconifyLoader.load().catch(console.error);
            }
        });

    })();
</script>

<!-- 为不支持JavaScript的情况提供备用方案 -->
<noscript>
    <style>
        iconify-icon {
            display: none;
        }
        .icon-fallback {
            display: inline-block;
        }
    </style>
</noscript>