---
import { musicPlayerConfig } from "@/config/musicConfig";
import { url } from "@/utils/url-utils";

const config = musicPlayerConfig;

// 预先生成本地资源路径，确保在非根目录部署时也能正确加载
const aplayerCssPath = url("/assets/css/APlayer.min.css");
const aplayerCustomCssPath = url("/assets/css/APlayer.custom.css");
const aplayerJsPath = url("/assets/js/APlayer.min.js");

// MetingJS 路径处理
// 如果配置的是相对路径（以 / 开头），使用 url() 处理以确保非根目录部署时正确
// 如果是完整的 URL（http/https），直接使用
const metingJsPath = config.meting?.jsPath
	? config.meting.jsPath.startsWith("http://") ||
		config.meting.jsPath.startsWith("https://")
		? config.meting.jsPath
		: url(config.meting.jsPath)
	: "https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"; // 默认 CDN 路径

// 预处理本地音乐列表的路径（如果使用本地模式）
const processedLocalPlaylist =
	config.mode === "local" && config.local?.playlist
		? config.local.playlist.map((song) => {
				// 辅助函数：判断是否为完整 URL
				const isFullUrl = (path: string): boolean => {
					return /^https?:\/\//.test(path);
				};

				return {
					...song,
					// 仅对相对路径使用 url() 处理，完整 URL 直接使用
					url: isFullUrl(song.url) ? song.url : url(song.url),
					cover: song.cover
						? isFullUrl(song.cover)
							? song.cover
							: url(song.cover)
						: undefined,
				};
			})
		: null;
---

{config.enable && (
  <>
    <!-- APlayer CSS -->
    <link
      rel="stylesheet"
      href={aplayerCssPath}
    />
    <link
      rel="stylesheet"
      href={aplayerCustomCssPath}
    />

    <!-- 音乐播放器容器 -->
    <div
      id="aplayer-container"
      class:mobile-hide={config.responsive?.mobile?.hide}
    >
      {config.mode === "meting" && config.meting ? (
        <!-- 使用 MetingJS -->
        <meting-js
          server={config.meting.server || "netease"}
          type={config.meting.type || "playlist"}
          id={config.meting.id || ""}
          api={config.meting.api}
          auth={config.meting.auth}
          fixed={(config.player?.fixed ?? true) ? "true" : "false"}
          mini={(config.player?.mini ?? true) ? "true" : "false"}
          autoplay={config.player?.autoplay ? "true" : "false"}
          theme={config.player?.theme || "#b7daff"}
          loop={config.player?.loop || "all"}
          order={config.player?.order || "list"}
          preload={config.player?.preload || "auto"}
          volume={String(config.player?.volume ?? 0.7)}
          mutex={config.player?.mutex !== false ? "true" : "false"}
          list-folded={config.player?.listFolded ? "true" : "false"}
          list-max-height={config.player?.listMaxHeight || "340px"}
          storage-name={config.player?.storageName || "aplayer-setting"}
        />
      ) : config.mode === "local" && processedLocalPlaylist && processedLocalPlaylist.length > 0 ? (
        <!-- 使用本地音乐列表，统一使用 APlayer 直接初始化 -->
        <div id="local-aplayer"></div>
      ) : null}
    </div>
  </>
)}

<script define:vars={{ config, aplayerJsPath, metingJsPath, processedLocalPlaylist }} is:inline>
  // 动态加载 APlayer 和 MetingJS
  (function() {
    if (!config.enable) return;
    
    // 确保在浏览器环境中运行
    if (typeof window === 'undefined') return;

    // 加载 APlayer JS
    function loadAPlayer() {
      return new Promise((resolve) => {
        if (window.APlayer) {
          resolve(window.APlayer);
          return;
        }

        const aplayerScript = document.createElement("script");
        aplayerScript.src = aplayerJsPath;
        aplayerScript.async = true;
        aplayerScript.onload = () => resolve(window.APlayer);
        aplayerScript.onerror = () => resolve(null);
        document.head.appendChild(aplayerScript);
      });
    }

    // 全局用户交互状态
    if (!window.hasMusicInteracted) {
      window.hasMusicInteracted = false;
    }
    
    // 全局播放器实例存储（防止页面切换时重复创建）
    if (!window.__globalAPlayer) {
      window.__globalAPlayer = null;
    }
    
    function tryAutoplay(aplayer) {
      if (!config.player?.autoplay) return;
      
      // 如果用户已经交互过，立即尝试播放
      if (window.hasMusicInteracted) {
        if (aplayer?.paused) {
          aplayer.play().catch(() => {});
        }
      } else {
        // 等待用户第一次交互后自动播放
        const enableAutoplay = () => {
          if (window.hasMusicInteracted) return;
          window.hasMusicInteracted = true;
          if (aplayer?.paused) {
            aplayer.play().catch(() => {});
          }
        };
        
        // 监听各种用户交互事件（只监听一次）
        ['click', 'keydown', 'touchstart', 'scroll'].forEach(eventType => {
          document.addEventListener(eventType, enableAutoplay, { once: true, passive: true });
        });
      }
    }

    // 检查 MetingJS 元素是否成功加载了音乐
    function checkMetingSuccess(metingElement, timeout = 5000) {
      return new Promise((resolve) => {
        const startTime = Date.now();
        
        const checkSuccess = setInterval(() => {
          const aplayer = metingElement?.aplayer;
          // 检查是否有 APlayer 实例且有音频列表
          if (aplayer && aplayer.list && aplayer.list.audios && aplayer.list.audios.length > 0) {
            clearInterval(checkSuccess);
            resolve(true);
            return;
          }
          
          // 超时检查
          if (Date.now() - startTime >= timeout) {
            clearInterval(checkSuccess);
            resolve(false);
          }
        }, 100);
      });
    }

    // 重新创建 MetingJS 元素以使用新的 API
    function recreateMetingElement(container, apiUrl, config) {
      // 移除旧的元素
      const oldElement = container.querySelector('meting-js');
      if (oldElement) {
        if (oldElement.aplayer) {
          oldElement.aplayer.destroy();
        }
        oldElement.remove();
      }
      
      // 创建新元素
      const newElement = document.createElement('meting-js');
      newElement.setAttribute('server', config.meting?.server || 'netease');
      newElement.setAttribute('type', config.meting?.type || 'playlist');
      newElement.setAttribute('id', config.meting?.id || '');
      newElement.setAttribute('api', apiUrl);
      if (config.meting?.auth) {
        newElement.setAttribute('auth', config.meting.auth);
      }
      newElement.setAttribute('fixed', (config.player?.fixed ?? true) ? 'true' : 'false');
      newElement.setAttribute('mini', (config.player?.mini ?? true) ? 'true' : 'false');
      newElement.setAttribute('autoplay', config.player?.autoplay ? 'true' : 'false');
      newElement.setAttribute('theme', config.player?.theme || '#b7daff');
      newElement.setAttribute('loop', config.player?.loop || 'all');
      newElement.setAttribute('order', config.player?.order || 'list');
      newElement.setAttribute('preload', config.player?.preload || 'auto');
      newElement.setAttribute('volume', String(config.player?.volume ?? 0.7));
      newElement.setAttribute('mutex', config.player?.mutex !== false ? 'true' : 'false');
      newElement.setAttribute('list-folded', config.player?.listFolded ? 'true' : 'false');
      newElement.setAttribute('list-max-height', config.player?.listMaxHeight || '340px');
      newElement.setAttribute('storage-name', config.player?.storageName || 'aplayer-setting');
      
      container.appendChild(newElement);
      return newElement;
    }

    // 处理移动端显示/隐藏（统一处理容器和播放器）
    function handleMobileVisibility(aplayer) {
      const container = document.getElementById('aplayer-container');
      const shouldHide = config.responsive?.mobile?.hide === true;
      const breakpoint = config.responsive?.mobile?.breakpoint || 768;
      const isMobile = window.innerWidth <= breakpoint;
      
      // 处理容器
      if (container) {
        if (shouldHide && isMobile) {
          container.style.display = 'none';
          container.classList.add('mobile-hide');
        } else {
          container.style.display = '';
          container.classList.remove('mobile-hide');
        }
      }
      
      // 处理播放器（如果已初始化）
      if (aplayer?.container) {
        if (shouldHide && isMobile) {
          aplayer.container.style.display = 'none';
          aplayer.container.classList.add('mobile-hide');
        } else {
          aplayer.container.style.display = '';
          aplayer.container.classList.remove('mobile-hide');
        }
      }
    }

    // 播放器初始化完成后的通用设置
    function setupPlayerAfterInit(aplayer, isRestore = false) {
      if (!aplayer?.container) return;
      
      // 监听播放状态，更新封面动画
      const updatePlayingState = () => {
        const isPlaying = !aplayer.paused;
        aplayer.container.setAttribute('data-playing', String(isPlaying));
        aplayer.container.classList.toggle('aplayer-playing', isPlaying);
      };
      
      // 只在首次初始化时绑定事件（避免重复绑定）
      if (!isRestore) {
        aplayer.audio?.addEventListener('play', updatePlayingState);
        aplayer.audio?.addEventListener('pause', updatePlayingState);
        aplayer.audio?.addEventListener('ended', updatePlayingState);
      }
      
      // 立即设置右侧定位
      aplayer.container.setAttribute('data-positioned', 'right');
      
      requestAnimationFrame(() => {
        aplayer.container.style.right = '0';
        aplayer.container.style.left = 'unset';
        updatePlayingState();
        
        // 处理移动端显示/隐藏（页面恢复时也需要重新处理）
        handleMobileVisibility(aplayer);
        
        // 只在首次初始化时绑定 resize 事件
        if (!isRestore) {
          window.addEventListener('resize', () => handleMobileVisibility(aplayer));
        }
        
        // 延迟后恢复展开动画
        setTimeout(() => {
          aplayer.container.setAttribute('data-initialized', 'true');
          
          // 隐藏歌词（如果配置）
          if (config.player?.lrcHidden && aplayer.lrc) {
            aplayer.lrc.hide();
            const lrcButton = aplayer.container.querySelector('.aplayer-icon-lrc');
            lrcButton?.classList.add('aplayer-icon-lrc-inactivity');
          }
          
          // 尝试自动播放（只在首次初始化时）
          if (!isRestore && config.player?.autoplay && aplayer.paused) {
            tryAutoplay(aplayer);
          }
        }, 100);
      });
    }

    // 初始化 MetingJS 元素并设置播放器
    function setupMetingElement(metingElement) {
      return new Promise((resolve) => {
        // 监听 aplayer 初始化
        const checkAPlayer = setInterval(() => {
          const aplayer = metingElement.aplayer;
          if (aplayer?.container) {
            clearInterval(checkAPlayer);
            setupPlayerAfterInit(aplayer);
            resolve(true);
          }
        }, 50);
        
        // 10秒后停止检查
        setTimeout(() => {
          clearInterval(checkAPlayer);
          resolve(false);
        }, 10000);
      });
    }

    // 使用备用 API 重试加载
    async function retryWithFallbackAPI(container, fallbackApis, currentIndex = 0) {
      if (currentIndex >= fallbackApis.length) {
        return null;
      }
      
      const fallbackApi = fallbackApis[currentIndex];
      
      // 替换 API URL 中的占位符
      const server = config.meting?.server || 'netease';
      const type = config.meting?.type || 'playlist';
      const id = config.meting?.id || '';
      
      let apiUrl = fallbackApi
        .replace(':server', server)
        .replace(':type', type)
        .replace(':id', id);
      
      // 设置全局 API
      window.meting_api = apiUrl;
      
      // 重新创建元素
      const newElement = recreateMetingElement(container, apiUrl, config);
      
      // 等待元素初始化并检查是否成功
      await new Promise(resolve => setTimeout(resolve, 500));
      const success = await checkMetingSuccess(newElement, 5000);
      
      if (success) {
        return newElement;
      } else {
        // 如果失败，尝试下一个备用 API
        return retryWithFallbackAPI(container, fallbackApis, currentIndex + 1);
      }
    }

    // 加载 MetingJS
    function loadMetingJS() {
      return new Promise((resolve) => {
        if (window.customElements?.get("meting-js")) {
          resolve(true);
          return;
        }

        const metingScript = document.createElement("script");
        metingScript.src = metingJsPath;
        metingScript.async = true;
        metingScript.onload = async () => {
          // 等待 MetingJS 元素创建
          await new Promise(resolve => setTimeout(resolve, 100));
          
          const container = document.getElementById('aplayer-container');
          if (!container) {
            resolve(false);
            return;
          }
          
          let metingElement = container.querySelector('meting-js');
          
          if (config.mode === "meting" && config.meting?.api && metingElement) {
            const server = config.meting.server || 'netease';
            const type = config.meting.type || 'playlist';
            const id = config.meting.id || '';
            
            // 替换 API URL 中的占位符
            let mainApiUrl = config.meting.api
              .replace(':server', server)
              .replace(':type', type)
              .replace(':id', id)
              .replace(':r', Math.random().toString());
            
            // 设置全局 API
            window.meting_api = mainApiUrl;
            
            // 等待元素初始化并检查主 API 是否成功
            await new Promise(resolve => setTimeout(resolve, 500));
            const mainApiSuccess = await checkMetingSuccess(metingElement, 5000);
            
            if (!mainApiSuccess && config.meting.fallbackApis?.length > 0) {
              // 主 API 失败，尝试备用 API
              const newElement = await retryWithFallbackAPI(container, config.meting.fallbackApis);
              if (newElement) {
                metingElement = newElement;
              }
            }
          }
          
          // 设置播放器（如果元素存在）
          if (metingElement) {
            await setupMetingElement(metingElement);
          }
          
          resolve(true);
        };
        metingScript.onerror = () => {
          resolve(false);
        };
        document.head.appendChild(metingScript);
      });
    }

    // 初始化本地音乐播放器
    async function initLocalPlayer() {
      if (config.mode !== "local" || !processedLocalPlaylist || processedLocalPlaylist.length === 0) {
        return;
      }

      // 如果全局已有播放器实例，检查是否还在 DOM 中
      if (window.__globalAPlayer) {
        const existingContainer = window.__globalAPlayer.container;
        // 如果容器还在页面中，说明播放器还存在，直接恢复状态
        if (existingContainer && document.body.contains(existingContainer)) {
          setupPlayerAfterInit(window.__globalAPlayer);
          return;
        }
        // 否则销毁旧实例
        try {
          window.__globalAPlayer.destroy();
        } catch (e) {}
        window.__globalAPlayer = null;
      }

      const APlayerClass = await loadAPlayer();
      if (!APlayerClass) return;

      const container = document.getElementById("local-aplayer");
      if (!container) return;

      const audioList = processedLocalPlaylist.map((song) => ({
        name: song.name,
        artist: song.artist,
        url: song.url,
        cover: song.cover,
        lrc: song.lrc,
        type: "auto",
      }));

      try {
        const aplayer = new APlayerClass({
          container,
          audio: audioList,
          mutex: config.player?.mutex !== false,
          lrcType: config.player?.lrcType ?? 0,
          fixed: config.player?.fixed ?? true,
          mini: config.player?.mini ?? true,
          autoplay: config.player?.autoplay || false,
          theme: config.player?.theme || "#b7daff",
          loop: config.player?.loop || "all",
          order: config.player?.order || "list",
          preload: config.player?.preload || "auto",
          volume: config.player?.volume ?? 0.7,
          listFolded: config.player?.listFolded || false,
          listMaxHeight: config.player?.listMaxHeight || "340px",
          storageName: config.player?.storageName || "aplayer-setting",
        });
        
        // 保存到全局
        window.__globalAPlayer = aplayer;
        
        setupPlayerAfterInit(aplayer);
      } catch (error) {
        // 初始化失败时静默处理
      }
    }

    // 初始化容器的移动端显示/隐藏
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", () => handleMobileVisibility(null));
    } else {
      handleMobileVisibility(null);
    }
    
    // 监听 Astro 页面切换事件
    document.addEventListener('astro:after-swap', () => {
      // 页面切换后，如果有全局播放器实例，恢复其状态
      if (window.__globalAPlayer && window.__globalAPlayer.container) {
        setupPlayerAfterInit(window.__globalAPlayer, true);
      }
    });
    
    // 根据模式初始化播放器
    if (config.mode === "meting") {
      // Meting 模式
      loadAPlayer().then(() => loadMetingJS());
    } else if (config.mode === "local") {
      // 本地模式：统一使用 APlayer
      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", initLocalPlayer);
      } else {
        initLocalPlayer();
      }
    }
  })();
</script>

<style>
  #aplayer-container {
    position: relative;
    z-index: 1000;
  }

  /* 确保播放器在固定模式下正确显示 */
  #aplayer-container .aplayer-fixed {
    z-index: 9999;
  }

  /* 禁用 APlayer 初始化时的过渡动画，避免收缩效果 */
  #aplayer-container .aplayer.aplayer-fixed {
    animation: none !important;
  }
  
  #aplayer-container .aplayer.aplayer-fixed .aplayer-body {
    animation: none !important;
    transition: none !important;
  }
  
  /* 确保播放器初始化时就在右侧位置 */
  #aplayer-container .aplayer.aplayer-fixed[data-positioned="right"] {
    right: 0 !important;
    left: unset !important;
  }

  /* 移动端隐藏 - 通过 JavaScript 动态添加类 */
  .aplayer-fixed.mobile-hide {
    display: none !important;
  }
  
  /* 移动端隐藏容器 */
  #aplayer-container.mobile-hide {
    display: none !important;
  }
</style>

