<!-- 
  WordPress DIVI 编辑器嵌入代码
  使用方法：
  1. 在 DIVI 编辑器中添加一个 "代码" 模块或 "HTML" 模块
  2. 将下面的代码复制粘贴到模块中
  3. 修改 basePath 为您的实际资源路径
  4. 保存并发布页面
-->

<!-- 应用容器 -->
<div id="logicore-app-container" style="position: relative; width: 100%; min-height: 100vh; isolation: isolate;">
  <div id="root" style="width: 100%; min-height: 100vh;"></div>
</div>

<!-- 加载器脚本 -->
<script data-logicore-app>
(function() {
  'use strict';
  
  // ========== 配置区域 - 请修改此处 ==========
  const BASE_PATH = '/wp-content/geo/';  // 修改为您的实际路径
  // 例如：如果文件在独立服务器上
  // const BASE_PATH = 'https://www.talpiotech.com/geo/';
  // ==========================================
  
  const CONTAINER_ID = 'logicore-app-container';
  
  // 加载 CSS
  function loadCSS(href) {
    return new Promise((resolve, reject) => {
      const existing = document.querySelector(`link[href="${href}"]`);
      if (existing) { resolve(); return; }
      
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = href;
      link.onload = resolve;
      link.onerror = () => reject(new Error('CSS load failed: ' + href));
      document.head.appendChild(link);
    });
  }
  
  // 加载 JS
  function loadScript(src, isModule) {
    return new Promise((resolve, reject) => {
      const existing = document.querySelector(`script[src="${src}"]`);
      if (existing) { resolve(); return; }
      
      const script = document.createElement('script');
      script.src = src;
      if (isModule) script.type = 'module';
      script.onload = resolve;
      script.onerror = () => reject(new Error('Script load failed: ' + src));
      document.head.appendChild(script);
    });
  }
  
  // 从 index.html 解析资源
  async function loadResources() {
    const indexPath = BASE_PATH + (BASE_PATH.endsWith('/') ? '' : '/') + 'index.html';
    
    try {
      const response = await fetch(indexPath);
      const html = await response.text();
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      
      const cssFiles = [];
      const jsFiles = [];
      
      doc.querySelectorAll('link[rel="stylesheet"]').forEach(link => {
        const href = link.getAttribute('href');
        if (href) cssFiles.push(new URL(href, BASE_PATH).href);
      });
      
      doc.querySelectorAll('script[src]').forEach(script => {
        const src = script.getAttribute('src');
        if (src) {
          jsFiles.push({
            src: new URL(src, BASE_PATH).href,
            isModule: script.getAttribute('type') === 'module'
          });
        }
      });
      
      // 加载 CSS
      await Promise.all(cssFiles.map(href => loadCSS(href)));
      
      // 加载 JS（按顺序）
      for (const file of jsFiles) {
        await loadScript(file.src, file.isModule);
      }
      
      return true;
    } catch (error) {
      console.error('解析 index.html 失败，使用默认路径:', error);
      
      // 回退到默认路径
      const defaultCSS = BASE_PATH + 'assets/index.css';
      const defaultJS = BASE_PATH + 'assets/index.js';
      
      try {
        await loadCSS(defaultCSS);
        await loadScript(defaultJS, true);
        return true;
      } catch (e) {
        console.error('加载默认资源失败:', e);
        return false;
      }
    }
  }
  
  // 显示错误
  function showError(message) {
    const container = document.getElementById(CONTAINER_ID);
    if (container) {
      const root = container.querySelector('#root');
      if (root) {
        root.innerHTML = `
          <div style="padding: 60px 20px; text-align: center; background: #f5f5f5; border-radius: 8px; margin: 20px;">
            <h2 style="color: #d32f2f; margin-bottom: 16px; font-size: 24px;">应用加载失败</h2>
            <p style="color: #666; margin-bottom: 8px; font-size: 16px;">${message}</p>
            <p style="color: #999; font-size: 12px; margin-top: 16px;">请检查资源路径配置是否正确</p>
          </div>
        `;
      }
    }
  }
  
  // 初始化
  async function init() {
    try {
      const loaded = await loadResources();
      if (!loaded) {
        throw new Error('资源加载失败');
      }
      console.log('Logicore 应用加载成功');
    } catch (error) {
      console.error('初始化失败:', error);
      showError('无法加载应用资源，请检查配置路径');
    }
  }
  
  // 等待 DOM 就绪
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

<!-- 
  使用说明：
  
  1. 构建项目：
     在项目目录运行: npm run build
     
  2. 上传文件：
     将 build 目录中的所有文件上传到 WordPress 服务器
     推荐路径: wp-content/logicore-app/
     
  3. 修改配置：
     将上面 BASE_PATH 变量修改为您的实际路径
     例如: '/wp-content/logicore-app/'
     或: 'https://yourdomain.com/logicore-app/'
     
  4. 在 DIVI 中使用：
     - 添加 "代码" 模块
     - 粘贴此代码
     - 保存并发布
     
  5. 样式隔离：
     应用会自动隔离样式，不会影响 WordPress 主题
     
  6. SEO 友好：
     此方法直接嵌入 HTML，搜索引擎可以正常抓取和索引
-->