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: sans-serif;
  `;
  
  panel.innerHTML = `
    <style>
      @keyframes breathe {
        0% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.1); }
        100% { opacity: 1; transform: scale(1); }
      }
      .recording-dot {
        width: 8px; height: 8px; background: #ff4d4f; border-radius: 50%;
        display: none; margin-right: 6px; animation: breathe 1.2s infinite;
      }
    </style>
    <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" style="padding:8px 12px;border:none;border-radius:4px;background:#409eff;color:#fff;cursor:pointer;">🎤</button>
    </div>
    <div id="panelStatus" style="margin-top:10px;color:#999;font-size:12px;display:flex;align-items:center;">
      <div id="recordingIndicator" class="recording-dot"></div>
      <span id="statusText">准备就绪</span>
      <span id="aiLoading" style="display:none;color:#409eff;margin-left:auto;font-weight:bold;">🤖 思考中...</span>
    </div>
  `;
  
  document.body.appendChild(panel);
  return getUIRefs(panel);
}

function getUIRefs(panel) {
  return {
    btn: panel.querySelector("#voiceBtn"),
    input: panel.querySelector("#voiceTextInput"),
    setLoading: (loading) => {
      panel.querySelector("#aiLoading").style.display = loading ? "inline" : "none";
      panel.querySelector("#statusText").style.visibility = loading ? "hidden" : "visible";
    },
    setRecording: (isRecording) => {
      const dot = panel.querySelector("#recordingIndicator");
      const text = panel.querySelector("#statusText");
      if (isRecording) {
        dot.style.display = "inline-block";
        text.innerText = "正在聆听...";
        text.style.color = "#ff4d4f";
      } else {
        dot.style.display = "none";
        text.innerText = "准备就绪";
        text.style.color = "#999";
      }
    }
  };
}