export function createPanel() {
  const panelId = "automation-ai-panel";
  // 防止重复创建
  let panel = document.getElementById(panelId);
  if (panel) return getUIRefs(panel);

  panel = document.createElement("div");
  panel.id = panelId;
  panel.style.cssText = `
    position: fixed; bottom: 24px; right: 24px; z-index: 2147483647;
    background: white; border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.2); padding: 12px; width: 260px;
    font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  `;
  
  panel.innerHTML = `
    <div style="display:flex;gap:8px;align-items:center;">
      <input id="voiceTextInput" type="text" placeholder="输入指令或自然语言..."
        style="flex:1;padding:8px;border:1px solid #dcdfe6;border-radius:4px;outline:none;font-size:13px;" />
      <button id="voiceBtn" title="按 Alt+V 快捷开启"
        style="padding:8px 12px;border:none;border-radius:4px;background:#409eff;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;">
        🎤
      </button>
    </div>
    <div id="panelStatus" style="margin-top:8px;color:#999;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
      <span id="statusText">准备就绪</span>
      <span id="aiLoading" style="display:none;color:#409eff;font-weight:bold;">🤖 思考中...</span>
    </div>
  `;
  
  document.body.appendChild(panel);
  return getUIRefs(panel);
}

function getUIRefs(panel) {
  const input = panel.querySelector("#voiceTextInput");
  const btn = panel.querySelector("#voiceBtn");
  const loading = panel.querySelector("#aiLoading");
  const statusText = panel.querySelector("#statusText");

  return {
    input,
    btn,
    setLoading: (isLoading) => {
      loading.style.display = isLoading ? "inline" : "none";
      statusText.style.display = isLoading ? "none" : "inline";
      input.disabled = isLoading;
      if (!isLoading) input.focus();
    }
  };
}