import { javaexEditor } from "./lib";

// 演示页根节点。
const app = document.querySelector("#app");

// 为示例页动态注入一份轻量样式，避免影响库本身的发布产物。
const style = document.createElement("style");
style.textContent = `
  body {
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
    background: linear-gradient(180deg, #f8efe2 0%, #f6f4ef 36%, #f3f6f4 100%);
    color: #2f2418;
  }

  * {
    box-sizing: border-box;
  }

  .demo-page {
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 20px 80px;
  }

  .demo-card {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(138, 98, 48, 0.14);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.84);
  }

  .demo-action {
    padding: 10px 14px;
    border: 1px solid rgba(188, 108, 37, 0.18);
    border-radius: 14px;
    background: #fff5e6;
    color: #8d531c;
    cursor: pointer;
  }

  .demo-output {
    max-height: 500px;
    overflow: auto;
    padding: 18px;
    border-radius: 18px;
    background: #1f1a14;
    color: #fdf6ee;
    white-space: pre-wrap;
    word-break: break-word;
  }
`;
document.head.appendChild(style);

// 示例页结构：上方是说明和预览按钮，中间是编辑器，底部实时输出当前 HTML。
app.innerHTML = `
  <main class="demo-page">
    <section class="demo-card">
      <h1>javaexEditor</h1>
      <p>纯 JavaScript 版本，支持通过 <code>javaexEditor.editor({ id: "edit", ... })</code> 初始化。</p>
      <button type="button" class="demo-action" id="previewBtn">查看预览</button>
    </section>
    <section class="demo-card">
      <div id="edit"></div>
    </section>
    <section class="demo-card">
      <h2>当前输出</h2>
      <pre class="demo-output" id="htmlOutput"></pre>
    </section>
  </main>
`;

// 输出面板用于实时展示当前编辑器的 HTML 内容，便于调试格式行为。
const htmlOutput = document.querySelector("#htmlOutput");

// 初始化一个演示实例，直接把常用功能和新配置项都展示出来。
const editor = javaexEditor.editor({
  id: "edit",
  editorId: "demo-editor",
  // 最小高度：保证编辑区初始可见区域足够大。
  height: 360,
  // 最大高度：内容过多时由编辑区自身滚动，而不是把整页无限撑高。
  maxHeight: 560,
  // 工具栏距离浏览器顶部 12px 时开始吸顶。
  toolbarStickyTop: 12,
  value: `
    <h1>javaexEditor 示例</h1>
    <p>这里是 <strong>纯 JavaScript</strong> 版本的 javaexEditor 富文本编辑器。</p>
    <p>你可以试试这些能力：</p>
    <ul>
      <li>可视化插入表格</li>
      <li>上传多张本地图片</li>
      <li>右键编辑表格行列</li>
      <li>打开 AI 与预览面板</li>
    </ul>
  `,
  // 示例里的图片上传直接转成 base64，方便本地调试。
  async imageUploader(files) {
    return Promise.all(files.map((file) => new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve({ url: reader.result, alt: file.name });
      reader.onerror = reject;
      reader.readAsDataURL(file);
    })));
  },
  // 每次内容变化时，把最新 HTML 同步到下方输出面板。
  callback(payload) {
    htmlOutput.textContent = payload.html;
  }
});

// 首次初始化后，立即把默认内容同步到输出面板。
htmlOutput.textContent = editor.getHtml();

// 点击“查看预览”按钮时，打开编辑器内置预览弹窗。
document.querySelector("#previewBtn")?.addEventListener("click", () => {
  editor.openPreview("preview");
});