/**
 * 移动端图标适配器
 * 完全复用 FluentOS 原有图标，仅做尺寸和显示适配
 * 不修改任何 Theme/Icon 中的原始文件
 * 自包含，不依赖任何其他 JS 文件
 * 不使用任何 Emoji，完全使用 SVG 图标
 */

(function() {
  'use strict';

  // 检测是否为移动端
  const isMobile = window.innerWidth <= 768;

  /**
   * 移动端图标适配器类
   */
  class MobileIconAdapter {
    constructor() {
      this.isMobile = isMobile;
      this.iconCache = new Map();
      this.originalIconPath = 'Theme/Icon/';
      this.loadedIcons = new Set();
      this.iconLoadPromises = new Map();
      
      // 图标映射表 - 指向 Theme/Icon 中的实际文件
      this.iconMap = {
        // 系统应用
        'files': { color: 'files-color.svg', light: 'files-light.svg', dark: 'files-dark.svg' },
        'settings': { color: 'settings-color.svg', light: 'settings-light.svg', dark: 'settings-dark.svg' },
        'browser': { color: 'browser-color.svg', light: 'browser-light.svg', dark: 'browser-dark.svg' },
        'calculator': { color: 'calculator-color.svg', light: 'calculator-light.svg', dark: 'calculator-dark.svg' },
        'notes': { color: 'notes-color.svg', light: 'notes-light.svg', dark: 'notes-dark.svg' },
        'clock': { color: 'clock-color.svg', light: 'clock-light.svg', dark: 'clock-dark.svg' },
        'weather': { color: 'weather-color.svg', light: 'weather-light.svg', dark: 'weather-dark.svg' },
        'camera': { color: 'camera-color.svg', light: 'camera-light.svg', dark: 'camera-dark.svg' },
        'photos': { color: 'photos-color.svg', light: 'photos-light.svg', dark: 'photos-dark.svg' },
        'media': { color: 'media-color.svg', light: 'media-light.svg', dark: 'media-dark.svg' },
        'terminal': { color: 'terminal-color.svg', light: 'terminal-light.svg', dark: 'terminal-dark.svg' },
        'fingo': { color: 'fingo-color.svg', light: 'fingo-light.svg', dark: 'fingo-dark.svg' },
        'shop': { color: 'shop-color.svg', light: 'shop-light.svg', dark: 'shop-dark.svg' },
        'taskmanager': { color: 'taskmanager-color.svg', light: 'taskmanager-light.svg', dark: 'taskmanager-dark.svg' },
        'tips': { color: 'tips-color.svg', light: 'tips-light.svg', dark: 'tips-dark.svg' },
        
        // 系统功能
        'start': { color: 'start-color.svg', light: 'start-light.svg', dark: 'start-dark.svg' },
        'settings-gear': { color: 'settings-gear.svg', light: 'settings-gear-light.svg', dark: 'settings-gear-dark.svg' },
        'power': { color: 'power.svg', light: 'power.svg', dark: 'power.svg' },
        'lock': { color: 'lock.svg', light: 'lock.svg', dark: 'lock.svg' },
        'user': { color: 'user.svg', light: 'user.svg', dark: 'user.svg' },
        'folder': { color: 'folder.svg', light: 'folder.svg', dark: 'folder.svg' },
        'search': { color: 'search.svg', light: 'search.svg', dark: 'search.svg' },
        'refresh': { color: 'refresh.svg', light: 'refresh.svg', dark: 'refresh.svg' },
        'download': { color: 'download.svg', light: 'download.svg', dark: 'download.svg' },
        'upload': { color: 'upload.svg', light: 'upload.svg', dark: 'upload.svg' },
        'delete': { color: 'delete.svg', light: 'delete.svg', dark: 'delete.svg' },
        'edit': { color: 'edit.svg', light: 'edit.svg', dark: 'edit.svg' },
        
        // 导航图标
        'home': { color: 'home.svg', light: 'home.svg', dark: 'home.svg' },
        'back': { color: 'back.svg', light: 'back.svg', dark: 'back.svg' },
        'close': { color: 'close.svg', light: 'close.svg', dark: 'close.svg' },
        'menu': { color: 'menu.svg', light: 'menu.svg', dark: 'menu.svg' },
        'more': { color: 'more.svg', light: 'more.svg', dark: 'more.svg' },
        'arrow-left': { color: 'arrow-left.svg', light: 'arrow-left.svg', dark: 'arrow-left.svg' },
        'arrow-right': { color: 'arrow-right.svg', light: 'arrow-right.svg', dark: 'arrow-right.svg' },
        'arrow-up': { color: 'arrow-up.svg', light: 'arrow-up.svg', dark: 'arrow-up.svg' },
        'arrow-down': { color: 'arrow-down.svg', light: 'arrow-down.svg', dark: 'arrow-down.svg' },
        
        // 通用图标
        'add': { color: 'add.svg', light: 'add.svg', dark: 'add.svg' },
        'remove': { color: 'remove.svg', light: 'remove.svg', dark: 'remove.svg' },
        'check': { color: 'check.svg', light: 'check.svg', dark: 'check.svg' },
        'warning': { color: 'warning.svg', light: 'warning.svg', dark: 'warning.svg' },
        'info': { color: 'info.svg', light: 'info.svg', dark: 'info.svg' },
        'error': { color: 'error.svg', light: 'error.svg', dark: 'error.svg' },
        'success': { color: 'success.svg', light: 'success.svg', dark: 'success.svg' },
        
        // 媒体图标
        'play': { color: 'play.svg', light: 'play.svg', dark: 'play.svg' },
        'pause': { color: 'pause.svg', light: 'pause.svg', dark: 'pause.svg' },
        'next': { color: 'next.svg', light: 'next.svg', dark: 'next.svg' },
        'previous': { color: 'previous.svg', light: 'previous.svg', dark: 'previous.svg' },
        'shuffle': { color: 'shuffle.svg', light: 'shuffle.svg', dark: 'shuffle.svg' },
        'repeat': { color: 'repeat.svg', light: 'repeat.svg', dark: 'repeat.svg' },
        'volume-up': { color: 'volume-up.svg', light: 'volume-up.svg', dark: 'volume-up.svg' },
        'volume-down': { color: 'volume-down.svg', light: 'volume-down.svg', dark: 'volume-down.svg' },
        'volume-mute': { color: 'volume-mute.svg', light: 'volume-mute.svg', dark: 'volume-mute.svg' },
        
        // 文件操作
        'copy': { color: 'copy.svg', light: 'copy.svg', dark: 'copy.svg' },
        'paste': { color: 'paste.svg', light: 'paste.svg', dark: 'paste.svg' },
        'cut': { color: 'cut.svg', light: 'cut.svg', dark: 'cut.svg' },
        'rename': { color: 'rename.svg', light: 'rename.svg', dark: 'rename.svg' },
        'new-folder': { color: 'new-folder.svg', light: 'new-folder.svg', dark: 'new-folder.svg' },
        'new-file': { color: 'new-file.svg', light: 'new-file.svg', dark: 'new-file.svg' },
        
        // 设置相关
        'wifi': { color: 'wifi.svg', light: 'wifi.svg', dark: 'wifi.svg' },
        'bluetooth': { color: 'bluetooth.svg', light: 'bluetooth.svg', dark: 'bluetooth.svg' },
        'battery': { color: 'battery.svg', light: 'battery.svg', dark: 'battery.svg' },
        'brightness': { color: 'brightness.svg', light: 'brightness.svg', dark: 'brightness.svg' },
        'notifications': { color: 'notifications.svg', light: 'notifications.svg', dark: 'notifications.svg' },
        'sound': { color: 'sound.svg', light: 'sound.svg', dark: 'sound.svg' },
        'display': { color: 'display.svg', light: 'display.svg', dark: 'display.svg' },
        'privacy': { color: 'privacy.svg', light: 'privacy.svg', dark: 'privacy.svg' },
        'language': { color: 'language.svg', light: 'language.svg', dark: 'language.svg' },
        'time': { color: 'time.svg', light: 'time.svg', dark: 'time.svg' },
        
        // 开发工具
        'code': { color: 'code.svg', light: 'code.svg', dark: 'code.svg' },
        'bug': { color: 'bug.svg', light: 'bug.svg', dark: 'bug.svg' },
        'console': { color: 'console.svg', light: 'console.svg', dark: 'console.svg' },
      };

      console.log('[MobileIconAdapter] 已初始化，移动端模式:', this.isMobile);
    }

    /**
     * 获取图标 HTML
     * @param {string} iconName - 图标名称
     * @param {string} size - 'small' | 'medium' | 'large' | 'xl' | 'xxl'
     * @param {string} variant - 'color' | 'light' | 'dark'
     * @param {object} options - 额外选项
     * @returns {string} HTML 字符串
     */
    getIcon(iconName, size = 'medium', variant = 'color', options = {}) {
      // 如果没有传入图标名，返回空占位
      if (!iconName) {
        return this.getEmptyIcon(size);
      }

      // 检查缓存
      const cacheKey = `${iconName}_${size}_${variant}`;
      if (this.iconCache.has(cacheKey)) {
        return this.iconCache.get(cacheKey);
      }

      let result = '';

      // 尝试获取原始图标
      const iconInfo = this.getOriginalIcon(iconName, variant);
      if (iconInfo) {
        result = this.wrapIcon(iconInfo, size, options);
      } else {
        // 如果图标不存在，返回空占位（不使用 Emoji）
        result = this.getEmptyIcon(size);
        console.warn('[MobileIconAdapter] 图标不存在:', iconName);
      }

      // 缓存结果
      this.iconCache.set(cacheKey, result);
      return result;
    }

    /**
     * 获取原始图标信息
     * @param {string} iconName - 图标名称
     * @param {string} variant - 'color' | 'light' | 'dark'
     * @returns {object|null} 图标信息
     */
    getOriginalIcon(iconName, variant) {
      const mapping = this.iconMap[iconName];
      if (!mapping) return null;

      // 获取当前主题
      const theme = this.getCurrentTheme();
      let fileName = mapping[variant];

      // 如果指定 variant 不存在，尝试使用主题对应的文件
      if (!fileName) {
        if (theme === 'dark' && mapping.dark) {
          fileName = mapping.dark;
        } else if (theme === 'light' && mapping.light) {
          fileName = mapping.light;
        } else {
          fileName = mapping.color;
        }
      }

      // 如果还是没有，使用 color
      if (!fileName) {
        fileName = mapping.color;
      }

      if (!fileName) return null;

      // 构建完整路径
      const fullPath = `${this.originalIconPath}${fileName}`;

      return {
        type: 'svg',
        path: fullPath,
        alt: iconName,
        fileName: fileName
      };
    }

    /**
     * 包装图标为 HTML
     * @param {object} icon - 图标信息
     * @param {string} size - 尺寸
     * @param {object} options - 选项
     * @returns {string} HTML 字符串
     */
    wrapIcon(icon, size, options = {}) {
      const sizeMap = this.getSizeMap(size);
      const className = options.className || '';
      const lazyLoad = options.lazy !== false;

      // 如果图标已加载，直接返回 img 标签
      if (this.loadedIcons.has(icon.path)) {
        return `
          <img 
            src="${icon.path}" 
            alt="${icon.alt}"
            width="${sizeMap.width}"
            height="${sizeMap.height}"
            class="mobile-icon ${sizeMap.class} ${className}"
            draggable="false"
          />
        `;
      }

      // 使用 data-src 实现懒加载
      return `
        <div class="mobile-icon-wrapper ${sizeMap.class} ${className}" 
             data-icon="${icon.alt}"
             data-src="${icon.path}">
          <div class="icon-loading"></div>
          <img 
            data-src="${icon.path}" 
            alt="${icon.alt}"
            width="${sizeMap.width}"
            height="${sizeMap.height}"
            class="mobile-icon ${sizeMap.class} ${className}"
            draggable="false"
            loading="lazy"
            style="opacity: 0; transition: opacity 0.3s;"
          />
        </div>
      `;
    }

    /**
     * 获取空图标（占位）
     * 不使用 Emoji，用纯 CSS 占位
     */
    getEmptyIcon(size) {
      const sizeMap = this.getSizeMap(size);
      return `
        <div class="mobile-icon empty-icon ${sizeMap.class}" 
             style="width: ${sizeMap.width}px; height: ${sizeMap.height}px; 
                    background: rgba(255,255,255,0.06); 
                    border-radius: 8px;
                    border: 1px dashed rgba(255,255,255,0.1);">
        </div>
      `;
    }

    /**
     * 获取尺寸映射
     */
    getSizeMap(size) {
      const map = {
        'small': { width: 20, height: 20, class: 'icon-sm', fontSize: '20px' },
        'medium': { width: 28, height: 28, class: 'icon-md', fontSize: '28px' },
        'large': { width: 40, height: 40, class: 'icon-lg', fontSize: '40px' },
        'xl': { width: 56, height: 56, class: 'icon-xl', fontSize: '56px' },
        'xxl': { width: 72, height: 72, class: 'icon-xxl', fontSize: '72px' },
      };
      return map[size] || map.medium;
    }

    /**
     * 获取当前主题
     */
    getCurrentTheme() {
      // 从 FluentOS 获取主题
      if (window.FluentOS && window.FluentOS.getTheme) {
        try {
          return window.FluentOS.getTheme();
        } catch (e) {
          // 静默失败
        }
      }

      // 从 HTML 类检测
      if (document.documentElement.classList.contains('theme-dark')) {
        return 'dark';
      }
      if (document.documentElement.classList.contains('theme-light')) {
        return 'light';
      }

      // 默认深色
      return 'dark';
    }

    /**
     * 预加载图标
     * @param {string|string[]} iconNames - 图标名称或数组
     * @returns {Promise} 加载完成
     */
    preloadIcons(iconNames) {
      const names = Array.isArray(iconNames) ? iconNames : [iconNames];
      const promises = names.map(name => this.loadIcon(name));
      return Promise.all(promises);
    }

    /**
     * 加载单个图标
     * @param {string} iconName - 图标名称
     * @returns {Promise} 加载完成
     */
    loadIcon(iconName) {
      // 如果已经在加载中，返回现有 Promise
      if (this.iconLoadPromises.has(iconName)) {
        return this.iconLoadPromises.get(iconName);
      }

      const promise = new Promise((resolve, reject) => {
        const iconInfo = this.getOriginalIcon(iconName, 'color');
        if (!iconInfo) {
          resolve(null);
          return;
        }

        const img = new Image();
        img.onload = () => {
          this.loadedIcons.add(iconInfo.path);
          resolve(iconInfo);
        };
        img.onerror = () => {
          // 加载失败，返回 null
          resolve(null);
        };
        img.src = iconInfo.path;
      });

      this.iconLoadPromises.set(iconName, promise);
      return promise;
    }

    /**
     * 获取应用图标（便捷方法）
     * @param {string} appId - 应用 ID
     * @param {string} size - 尺寸
     * @returns {string} HTML
     */
    getAppIcon(appId, size = 'medium') {
      // 尝试从 FluentOS 获取原生图标
      if (window.FluentOS && window.FluentOS.getAppIcon) {
        try {
          const nativeIcon = window.FluentOS.getAppIcon(appId);
          if (nativeIcon) {
            return this.wrapIcon(
              { type: 'native', path: nativeIcon, alt: appId },
              size,
              { lazy: false }
            );
          }
        } catch (e) {
          // 静默失败
        }
      }

      // 使用我们的适配器
      return this.getIcon(appId, size, 'color');
    }

    /**
     * 初始化图标懒加载
     * 扫描所有 [data-src] 图片，在进入视口时加载
     */
    initLazyLoading() {
      if (!this.isMobile) return;

      // 使用 Intersection Observer 实现懒加载
      if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              const wrapper = entry.target;
              const img = wrapper.querySelector('img[data-src]');
              if (img) {
                const src = img.getAttribute('data-src');
                if (src) {
                  img.src = src;
                  img.removeAttribute('data-src');
                  img.onload = () => {
                    img.style.opacity = '1';
                  };
                  img.onerror = () => {
                    // 加载失败，显示空占位
                    wrapper.classList.add('icon-error');
                    const loading = wrapper.querySelector('.icon-loading');
                    if (loading) loading.remove();
                  };
                  // 移除加载动画
                  const loading = wrapper.querySelector('.icon-loading');
                  if (loading) {
                    loading.style.opacity = '0';
                    setTimeout(() => loading.remove(), 300);
                  }
                }
              }
              observer.unobserve(wrapper);
            }
          });
        }, {
          rootMargin: '50px',
          threshold: 0.01
        });

        // 观察所有图标容器
        document.querySelectorAll('.mobile-icon-wrapper[data-src]').forEach(el => {
          observer.observe(el);
        });

        this.lazyObserver = observer;
      } else {
        // 降级：直接加载所有图标
        this.loadAllIcons();
      }
    }

    /**
     * 直接加载所有图标（降级方案）
     */
    loadAllIcons() {
      document.querySelectorAll('.mobile-icon-wrapper[data-src]').forEach(wrapper => {
        const img = wrapper.querySelector('img[data-src]');
        if (img) {
          const src = img.getAttribute('data-src');
          if (src) {
            img.src = src;
            img.removeAttribute('data-src');
            img.onload = () => {
              img.style.opacity = '1';
              const loading = wrapper.querySelector('.icon-loading');
              if (loading) loading.remove();
            };
            img.onerror = () => {
              wrapper.classList.add('icon-error');
              const loading = wrapper.querySelector('.icon-loading');
              if (loading) loading.remove();
            };
          }
        }
      });
    }

    /**
     * 获取所有可用的图标名称
     */
    getAvailableIcons() {
      return Object.keys(this.iconMap);
    }

    /**
     * 检查图标是否存在
     */
    hasIcon(iconName) {
      return !!this.iconMap[iconName];
    }

    /**
     * 清除缓存
     */
    clearCache() {
      this.iconCache.clear();
    }

    /**
     * 获取图标路径（直接返回路径，用于 CSS background 等）
     */
    getIconPath(iconName, variant = 'color') {
      const iconInfo = this.getOriginalIcon(iconName, variant);
      return iconInfo ? iconInfo.path : null;
    }

    /**
     * 批量获取图标路径
     */
    getIconPaths(iconNames, variant = 'color') {
      const result = {};
      iconNames.forEach(name => {
        result[name] = this.getIconPath(name, variant);
      });
      return result;
    }
  }

  // ============================================
  // 创建全局实例
  // ============================================

  // 等待 DOM 加载完成
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      window.MobileIconAdapter = new MobileIconAdapter();
      // 自动初始化懒加载
      if (window.MobileIconAdapter.isMobile) {
        setTimeout(() => window.MobileIconAdapter.initLazyLoading(), 100);
      }
      console.log('[MobileIconAdapter] 已就绪，图标数量:', 
                  window.MobileIconAdapter.getAvailableIcons().length);
    });
  } else {
    window.MobileIconAdapter = new MobileIconAdapter();
    if (window.MobileIconAdapter.isMobile) {
      setTimeout(() => window.MobileIconAdapter.initLazyLoading(), 100);
    }
    console.log('[MobileIconAdapter] 已就绪，图标数量:', 
                window.MobileIconAdapter.getAvailableIcons().length);
  }

  // 导出到全局
  window.MobileIconAdapter = window.MobileIconAdapter || new MobileIconAdapter();

})();