content.js

// 本文件维护 ImgPrompt 网页内悬浮结果面板。
// 本次修改：优化即梦等 AI 绘图站点的页面提示词与标题抓取逻辑。
// 修改原因：用户在设置页点击“抓取”时，会把页面上所有提示词都抓进来，无法精准定位到当前展示图片的“图片提示词”；且标题未抓取时会留空，需要自动从提示词中提取主体作为标题。
// 具体修改点：
//  1. 新增 collectorExtractJimengPrompt，针对 jimeng.jianying.com 特化抓取“图片提示词”标签附近的内容，并在遇到操作按钮前截断，避免抓取整页文字。
//  2. 新增 collectorExtractTitleFromPrompt，在 document.title 为空或只剩站点名时，从提示词首句提取最多 30 字作为标题。
//  3. 扩展 collectorCleanupPrompt 的截断词表（生成视频、去画布编辑、用作参考图等），并增强标题兜底与提示词复用逻辑。
//  4. 保留之前“保存本地/上传云端”按钮、默认提示词回退、懒加载图片抓取等能力。
//  5. 增强 collectorExtractJimengPrompt：先通过“图片提示词”标签定位当前图片对应的提示词容器，避免抓到页面上其他图片的提示词；找不到标签时才兜底收集所有 prompt-value 取最长。
//  6. 修复 collectorCleanupPrompt 的误截断问题：原本用贪婪替换会把提示词中间出现的“超清/下载”等词之后的内容全删掉，现改为仅当这些词位于文末 75% 之后才截断。
//  7. 清理即梦图片元信息栏：去掉“图片 4.7 | 9:16 | 2K | 详细信息”这类信息，但保留尺寸比例（如 9:16）。
const CONFIG = window.ImgPromptConfig || {};
const UI_STRINGS = CONFIG.UI_STRINGS;

function throttle(fn, wait) {
  let lastCall = 0;
  let timeoutId = null;

  return function throttled(...args) {
    const now = Date.now();
    const remaining = wait - (now - lastCall);

    if (remaining <= 0) {
      if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
      }
      lastCall = now;
      fn.apply(this, args);
    } else if (!timeoutId) {
      timeoutId = setTimeout(() => {
        lastCall = Date.now();
        timeoutId = null;
        fn.apply(this, args);
      }, remaining);
    }
  };
}

const PANEL_ROOT_ID = "image-prompt-inspector-root";
const PANEL_Z_INDEX = "2147483647";
const HOVER_BUTTON_ROOT_ID = "picprompt-hover-button-root";
const MAX_IMAGE_EDGE = 1024;
const COMPRESSED_IMAGE_QUALITY = 0.86;

let lastContextImage = null;
let activeRequestId = "";
let activeLanguage = "zh";
let currentPrompts = {
  zh: "",
  en: "",
  image_type: "",
  aspect_ratio: "",
  background: "",
  subject: null,
  surrounding_elements: "",
  composition: "",
  text_content: "",
  style: "",
  lighting: "",
  color_palette: "",
  negative: null,
  parameters: null,
};
let currentSource = { srcUrl: "", imageDataUrl: "" };
let currentTrigger = "unknown";
let isGenerating = false;
let dragState = null;
let hoverImage = null;
let isHoverButtonHovered = false;
let isHoverButtonDismissed = false;
let isHoverButtonEnabled = true;
let uiLanguage = "zh";
let preferredPromptLanguage = null;
let maxImageEdge = 1024;
let generationStartedAt = 0;
let progressTimerId = 0;
let currentProgressText = "";
let panelDismissed = false;
let isJsonMode = false;
let collectorSelectedImageUrl = "";
let lastHoverImageUrl = ""; // 缓存最后一次悬浮图片的 URL 字符串（DOM 元素可能被 SPA 销毁）

// Convert structured prompt fields to readable text for normal mode display
function buildReadableText(prompts) {
  if (!prompts) return "";
  if (activeLanguage === "en" && typeof prompts.en === "string" && prompts.en.trim()) {
    const enParts = [prompts.en.trim()];
    if (prompts.negative) {
      enParts.push(`Negative: ${String(prompts.negative).trim()}`);
    }
    return enParts.join("\n\n");
  }
  if (activeLanguage === "zh" && typeof prompts.zh === "string" && prompts.zh.trim()) {
    return prompts.zh.trim();
  }
  const dict = UI_STRINGS[activeLanguage] || UI_STRINGS.zh;
  const parts = [];
  if (prompts.image_type) parts.push(prompts.image_type);
  if (prompts.aspect_ratio) parts.push(dict.labelAspectRatio + ": " + prompts.aspect_ratio);
  if (prompts.background) parts.push(dict.labelBackground + ": " + prompts.background);
  if (prompts.subject) {
    const s = prompts.subject;
    const subParts = [];
    if (s.identity) subParts.push(s.identity);
    if (s.appearance) subParts.push(s.appearance);
    if (s.clothing) subParts.push(s.clothing);
    if (s.posture) subParts.push(s.posture);
    if (s.position) subParts.push(s.position);
    if (subParts.length) parts.push(dict.labelSubject + ": " + subParts.join(", "));
  }
  if (prompts.surrounding_elements)
    parts.push(dict.labelSurroundingElements + ": " + prompts.surrounding_elements);
  if (prompts.composition) parts.push(dict.labelComposition + ": " + prompts.composition);
  if (prompts.text_content) parts.push(dict.labelTextContent + ": " + prompts.text_content);
  if (prompts.style) parts.push(dict.labelStyle + ": " + prompts.style);
  if (prompts.lighting) parts.push(dict.labelLighting + ": " + prompts.lighting);
  if (prompts.color_palette) parts.push(dict.labelColorPalette + ": " + prompts.color_palette);
  const structured = parts.join("\n");
  if (structured) return structured;
  // Fallback to the other language prompt if current language is missing
  if (activeLanguage === "zh" && typeof prompts.en === "string" && prompts.en.trim()) {
    return prompts.en.trim();
  }
  if (activeLanguage === "en" && typeof prompts.zh === "string" && prompts.zh.trim()) {
    return prompts.zh.trim();
  }
  return "";
}

function buildStructuredPromptJson(prompts) {
  const jsonData = {};
  if (!prompts) {
    return jsonData;
  }

  if (prompts.image_type) jsonData.image_type = prompts.image_type;
  if (prompts.aspect_ratio) jsonData.aspect_ratio = prompts.aspect_ratio;
  if (prompts.background) jsonData.background = prompts.background;
  if (prompts.subject) jsonData.subject = prompts.subject;
  if (prompts.surrounding_elements) jsonData.surrounding_elements = prompts.surrounding_elements;
  if (prompts.composition) jsonData.composition = prompts.composition;
  if (prompts.text_content) jsonData.text_content = prompts.text_content;
  if (prompts.style) jsonData.style = prompts.style;
  if (prompts.lighting) jsonData.lighting = prompts.lighting;
  if (prompts.color_palette) jsonData.color_palette = prompts.color_palette;
  if (prompts.negative) jsonData.negative = prompts.negative;
  if (prompts.parameters) jsonData.parameters = prompts.parameters;
  return jsonData;
}

function getCurrentPromptText() {
  if (isJsonMode && currentPrompts) {
    const jsonData = buildStructuredPromptJson(currentPrompts);
    return Object.keys(jsonData).length ? JSON.stringify(jsonData, null, 2) : "";
  }

  const textarea = document
    .getElementById(PANEL_ROOT_ID)
    ?.shadowRoot?.querySelector(".ipi-textarea");
  return textarea?.value.trim() || buildReadableText(currentPrompts);
}

// ===== 页面采集逻辑（移植自 browser-extension） =====
function collectorNormalizeText(value) {
  return (value || "").replace(/\s+/g, " ").trim();
}

function collectorAbsoluteUrl(value) {
  try {
    return new URL(value, window.location.href).href;
  } catch {
    return "";
  }
}

function collectorIsVisible(element) {
  const style = window.getComputedStyle(element);
  const rect = element.getBoundingClientRect();
  return (
    style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0
  );
}

function collectorCleanupPrompt(value) {
  let clean = collectorNormalizeText(value)
    .replace(/^提示词[:：\s]*/i, "")
    .replace(/^prompt[:：\s]*/i, "")
    .replace(/^图片提示词[:：\s]*/i, "")
    // 只移除位于文末附近的操作按钮/标签，避免把正常提示词中间的关键词（如“超清”）误删
    .replace(/图片\s*\|\s*即梦图片[\s\S]*$/i, "")
    .replace(/一键复制[\s\S]*$/i, "")
    .replace(/一键同款[\s\S]*$/i, "")
    .replace(/举报\s*$/i, "");

  // 去掉即梦图片元信息栏：图片 4.7 | 9:16 | 2K | 详细信息，保留尺寸比例（如 9:16）
  const metaMatch = clean.match(
    /图片\s*[\d.]+[\s:：|]*((\d+):(\d+))?[\s:：|]*\d+[Kk][\s:：|]*详细信息/i,
  );
  if (metaMatch) {
    const ratio = metaMatch[1];
    clean = clean.slice(0, metaMatch.index).trim();
    if (ratio && clean.length > 0) {
      clean = clean + (/[，。；,.:：\s]$/.test(clean) ? "" : "，") + ratio;
    }
  }

  const trailingStopWords = [
    "生成视频",
    "去画布编辑",
    "用作参考图",
    "生成图片",
    "下载",
    "举报",
    "一键同款",
    "一键复制",
    "智能超清",
    "多角度",
    "超清",
    "细节修复",
    "局部重绘",
    "扩图",
    "消除笔",
    "对口型",
    "重新编辑",
    "再次生成",
  ];
  for (const stop of trailingStopWords) {
    const idx = clean.lastIndexOf(stop);
    if (idx >= 0 && idx + stop.length >= clean.length * 0.75) {
      clean = clean.slice(0, idx).trim();
    }
  }

  return clean.trim();
}

function collectorScorePrompt(text, element) {
  const cleanText = collectorCleanupPrompt(text);
  if (cleanText.length < 24) return null;
  let score = Math.min(cleanText.length, 1000);
  const nearby = collectorNormalizeText(element.parentElement?.innerText || "");
  if (/提示词|prompt/i.test(nearby)) score += 650;
  if (/[，。；、,.]/.test(cleanText)) score += 80;
  if (/采用|设计|画面|风格|品牌|构图|光影|色彩|生成|展示|产品|系列|海报|宣传/.test(cleanText))
    score += 120;

  // 核心优化：极重惩罚包含过多子元素的包裹层，迫使算法选中最深层的纯文本节点
  if (element.childElementCount > 2) {
    score -= element.childElementCount * 500;
  }

  return { text: cleanText, score };
}

function collectorExtractJimengPrompt() {
  // 即梦特化逻辑：优先通过“图片提示词”标签定位当前展示图片对应的提示词
  const labels = Array.from(
    document.querySelectorAll("p, div, span, h1, h2, h3, h4, label"),
  ).filter(
    (el) => collectorIsVisible(el) && /^(图片)?提示词(?:\s*\d+)?$/.test(el.textContent.trim()),
  );

  // 1. 精确路径：对每个可见标签，先找它紧邻的 prompt-value 容器
  const labelCandidates = [];
  for (const label of labels) {
    // 1a. 直接后续兄弟中的 prompt-value 容器
    let sibling = label.nextElementSibling;
    while (sibling) {
      if (sibling.matches('[class*="prompt-value"], [class*="promptValue"]')) {
        const text = collectorNormalizeText(sibling.textContent || "");
        if (text.length >= 20) {
          const cleaned = collectorCleanupPrompt(text);
          if (cleaned.length >= 20) labelCandidates.push(cleaned);
        }
      }
      const innerValue = sibling.querySelector('[class*="prompt-value"], [class*="promptValue"]');
      if (innerValue) {
        const text = collectorNormalizeText(innerValue.textContent || "");
        if (text.length >= 20) {
          const cleaned = collectorCleanupPrompt(text);
          if (cleaned.length >= 20) labelCandidates.push(cleaned);
        }
      }
      sibling = sibling.nextElementSibling;
    }

    // 1b. 父容器内的 prompt-value 容器
    let scope = label.parentElement;
    for (let depth = 0; depth < 3 && scope; depth += 1) {
      const valueEl = scope.querySelector('[class*="prompt-value"], [class*="promptValue"]');
      if (valueEl) {
        const text = collectorNormalizeText(valueEl.textContent || "");
        if (text.length >= 20) {
          const cleaned = collectorCleanupPrompt(text);
          if (cleaned.length >= 20) labelCandidates.push(cleaned);
        }
      }
      scope = scope.parentElement;
    }
  }

  // 如果标签路径找到了候选，直接返回最长的一个（同一标签对应的提示词不会错）
  if (labelCandidates.length > 0) {
    const unique = [...new Set(labelCandidates)];
    unique.sort((a, b) => b.length - a.length);
    return unique[0];
  }

  // 2. 兜底：没有标签时，再收集所有 prompt-value 容器取最长
  const candidates = [];
  const pushCandidate = (text) => {
    const cleaned = collectorCleanupPrompt(collectorNormalizeText(text || ""));
    if (cleaned.length >= 20) candidates.push(cleaned);
  };

  const valueContainers = document.querySelectorAll(
    '[class*="prompt-value"], [class*="promptValue"]',
  );
  for (const container of valueContainers) {
    pushCandidate(container.textContent || "");
  }

  const copyEl =
    document.querySelector("[data-clipboard-text]") ||
    document.querySelector('[aria-label*="复制" i]') ||
    document.querySelector('[aria-label*="copy" i]');
  if (copyEl) {
    pushCandidate(copyEl.getAttribute("data-clipboard-text") || copyEl.textContent || "");
  }

  const unique = [...new Set(candidates)];
  if (unique.length > 0) {
    unique.sort((a, b) => b.length - a.length);
    return unique[0];
  }

  return null;
}

function collectorExtractTitleFromPrompt(prompt) {
  if (!prompt || prompt.length < 4) return "";
  const clean = prompt.replace(/^生成[一幅个张份]*|^一张|^一幅|^创建|^制作/, "").trim();
  const firstSegment = clean.split(/[，。；,.:：]/)[0].trim();
  return firstSegment.slice(0, 30).trim();
}

function collectorExtractPrompt() {
  const isZcool = window.location.hostname.includes("zcool.com.cn");
  const isJimeng =
    window.location.hostname.includes("jimeng.jianying.com") ||
    window.location.hostname.includes("jimeng.");

  if (isZcool) {
    // 站酷特化逻辑：寻找带有“提示词”字样的元素，并提取其最接近的纯文本邻居
    const labels = Array.from(document.querySelectorAll("p, div, span, h1, h2, h3, h4")).filter(
      (el) => collectorIsVisible(el) && /^提示词(?:\s*\d+)?$/.test(el.textContent.trim()),
    );

    if (labels.length > 0) {
      const label = labels[labels.length - 1]; // 取最深层的那个
      // 尝试寻找下一个兄弟节点
      if (label.nextElementSibling && label.nextElementSibling.textContent.length > 10) {
        return collectorNormalizeText(label.nextElementSibling.textContent);
      }
      // 或者尝试父容器里的文本
      if (
        label.parentElement &&
        label.parentElement.textContent.length > label.textContent.length + 10
      ) {
        return collectorNormalizeText(label.parentElement.textContent.replace("提示词", ""));
      }
    }

    // 回退到针对站酷严格惩罚大包裹层的智能抓取
    const zcoolContainer = document.querySelector(
      ".work-content-wrap, .article-content, .work-show-box, .work-details, main",
    );
    if (zcoolContainer) {
      const zcoolCandidates = Array.from(zcoolContainer.querySelectorAll("p, div, span, section"))
        .filter(collectorIsVisible)
        .map((el) => collectorScorePrompt(el.innerText || el.textContent || "", el))
        .filter(Boolean)
        .sort((a, b) => b.score - a.score);
      if (zcoolCandidates.length > 0) return zcoolCandidates[0].text;
    }
  }

  if (isJimeng) {
    const jimengPrompt = collectorExtractJimengPrompt();
    if (jimengPrompt) return jimengPrompt;
  }

  const selection = collectorNormalizeText(window.getSelection()?.toString() || "");
  if (selection.length >= 12) return selection;

  const labelElements = Array.from(
    document.querySelectorAll("h1,h2,h3,h4,p,div,span,section,aside"),
  )
    .filter(collectorIsVisible)
    .filter((el) => /提示词|prompt/i.test(collectorNormalizeText(el.textContent || "")));

  const candidates = [];
  for (const label of labelElements) {
    let scope = label;
    for (let depth = 0; depth < 4 && scope; depth += 1) {
      const scored = collectorScorePrompt(scope.innerText || scope.textContent || "", scope);
      if (scored) candidates.push(scored);
      scope = scope.parentElement;
    }
  }
  if (candidates.length > 0) {
    return candidates.sort((a, b) => b.score - a.score)[0].text;
  }

  const generic = Array.from(document.querySelectorAll("p,article,section,aside,div"))
    .filter(collectorIsVisible)
    .map((el) => collectorScorePrompt(el.innerText || el.textContent || "", el))
    .filter(Boolean)
    .sort((a, b) => b.score - a.score);
  return generic[0]?.text || "";
}

function collectorReadPage() {
  const isZcool = window.location.hostname.includes("zcool.com.cn");
  const imageRoot = isZcool
    ? document.querySelector(
        ".work-content-wrap, .article-content, .work-show-box, .work-details",
      ) || document
    : document;

  // 收集所有 <img> 元素，优先取真实已加载地址，其次各种懒加载属性
  const extractedImages = Array.from(imageRoot.querySelectorAll("img"))
    .map((image) => {
      const rawSrc =
        image.currentSrc ||
        image.src ||
        image.dataset.src ||
        image.dataset.original ||
        image.dataset.lazySrc ||
        image.dataset.lazySrcset ||
        "";
      const hasLazyAttr = Boolean(
        image.dataset.src ||
        image.dataset.original ||
        image.dataset.lazySrc ||
        image.dataset.lazySrcset,
      );
      // 对 background-image 也尝试提取（常见于封面图）
      const bgStyle = window.getComputedStyle(image).backgroundImage;
      const bgMatch = bgStyle && bgStyle !== "none" ? /url\(["']?(.*?)["']?\)/.exec(bgStyle) : null;
      // 获取图片在屏幕上的实际渲染尺寸
      const rect = image.getBoundingClientRect();
      const visArea = rect.width * rect.height;
      const natArea = (image.naturalWidth || 0) * (image.naturalHeight || 0);
      const score = Math.max(visArea, natArea);

      return {
        src: collectorAbsoluteUrl(rawSrc) || (bgMatch ? collectorAbsoluteUrl(bgMatch[1]) : ""),
        alt: image.alt || "",
        width: image.naturalWidth || image.width || rect.width || 0,
        height: image.naturalHeight || image.height || rect.height || 0,
        score,
        hasLazyAttr,
      };
    })
    .filter((image) => image.src && /^https?:\/\//i.test(image.src) && image.score > 5000);

  // 动态过滤：找出当前页面最大的图片面积，只保留面积达到最大图片 25% 以上的“主要大图”
  const maxScore = extractedImages.reduce((max, img) => Math.max(max, img.score), 0);
  const images = extractedImages
    .filter((image) => image.score >= maxScore * 0.25)
    .sort((a, b) => b.score - a.score)
    .slice(0, 24);

  let cleanTitle = document.title || "";
  if (isZcool) {
    cleanTitle = cleanTitle.replace(/-?\s*站酷.*?$/i, "").trim();
  } else {
    cleanTitle = cleanTitle.replace(/-?\s*(即梦|站酷|ZCOOL|ArtStation|Jimeng).*$/i, "").trim();
  }

  // 先提取提示词，供标题兜底使用，也避免重复计算
  const prompt = collectorExtractPrompt();

  // 如果标题为空或只剩站点名/通用名，从提示词中提取主体作为标题
  const genericTitlePattern = /^(即梦|Jimeng|站酷|ZCOOL|首页|主页|AI绘画|AI 绘画|生成图片|创作)$/i;
  if (!cleanTitle || cleanTitle.length < 2 || genericTitlePattern.test(cleanTitle)) {
    cleanTitle = collectorExtractTitleFromPrompt(prompt);
  }

  return {
    title: cleanTitle,
    url: window.location.href,
    prompt,
    images,
  };
}

function renderCollectorImages(shadowRoot, images) {
  const grid = shadowRoot.querySelector("[data-collector-grid]");
  const count = shadowRoot.querySelector("[data-collector-count]");
  if (!grid) return;

  grid.textContent = "";
  if (count) count.textContent = images.length + " 张";
  collectorSelectedImageUrl = "";

  if (images.length === 0) {
    const empty = document.createElement("div");
    empty.className = "ipi-collector-empty";
    empty.textContent = "没有发现可用图片，点击抓取重新读取";
    grid.appendChild(empty);
    return;
  }

  for (const image of images) {
    const button = document.createElement("button");
    button.type = "button";
    button.title = image.alt || image.src;

    const preview = document.createElement("img");
    preview.src = image.src;
    preview.alt = image.alt || "";
    preview.referrerPolicy = "no-referrer";

    button.appendChild(preview);
    button.addEventListener("click", () => {
      collectorSelectedImageUrl = image.src;
      for (const option of grid.querySelectorAll("button")) {
        option.classList.remove("is-selected");
      }
      button.classList.add("is-selected");
    });
    grid.appendChild(button);
  }
}

function grabPageContent(shadowRoot) {
  const context = collectorReadPage();
  renderCollectorImages(shadowRoot, context.images || []);

  const textarea = shadowRoot.querySelector(".ipi-textarea");
  if (textarea && context.prompt) {
    const currentText = textarea.value.trim();
    if (!currentText) {
      textarea.value = context.prompt;
    }
  }

  const categoryInput = shadowRoot.querySelector("[data-collector-category]");
  if (categoryInput && !categoryInput.value.trim()) {
    chrome.storage.local.get({ xihahaDefaultGroup: "未分组" }, (result) => {
      if (!categoryInput.value.trim()) {
        categoryInput.value = result.xihahaDefaultGroup || "未分组";
      }
    });
  }

  setStatus(shadowRoot, "已抓取 " + (context.images || []).length + " 张图片");
}

async function loadCollectorCategories(shadowRoot) {
  const datalist = shadowRoot.querySelector("#ipi-category-options");
  if (!datalist) return;
  try {
    const response = await chrome.runtime.sendMessage({ type: "xihaha:get-categories" });
    if (!response?.ok || !Array.isArray(response.categories)) return;
    datalist.textContent = "";
    for (const category of response.categories) {
      const value = String(category || "").trim();
      if (!value) continue;
      const option = document.createElement("option");
      option.value = value;
      datalist.appendChild(option);
    }
  } catch {
    // 分组加载失败不影响手动输入
  }
}

function isExtensionContextError(error) {
  const message = error instanceof Error ? error.message : String(error || "");
  return (
    message.includes("Extension context invalidated") ||
    message.includes("Receiving end does not exist") ||
    message.includes("The message port closed before a response was received")
  );
}

function safeSendRuntimeMessage(payload, callback) {
  try {
    chrome.runtime.sendMessage(payload, callback);
    return true;
  } catch (error) {
    if (isExtensionContextError(error)) {
      return false;
    }
    throw error;
  }
}

document.addEventListener(
  "contextmenu",
  (event) => {
    const path = event.composedPath ? event.composedPath() : [];
    const matched = path.find(
      (node) =>
        node instanceof HTMLImageElement || (node instanceof Element && node.closest?.("img")),
    );

    if (matched instanceof HTMLImageElement) {
      lastContextImage = matched;
      return;
    }

    if (matched instanceof Element) {
      lastContextImage = matched.closest("img");
    }
  },
  true,
);

document.addEventListener("pointermove", throttle(handleDocumentPointerMove, 100), true);
document.addEventListener("scroll", () => updateHoverButtonPosition(), true);
window.addEventListener("resize", () => updateHoverButtonPosition());
chrome.storage.local.get(
  { hoverButtonEnabled: true, uiLanguage: "zh", maxImageEdge: 1024, preferredPromptLanguage: null },
  (result) => {
    isHoverButtonEnabled = result.hoverButtonEnabled !== false;
    uiLanguage = result.uiLanguage || "zh";
    maxImageEdge = result.maxImageEdge || 1024;
    preferredPromptLanguage = result.preferredPromptLanguage || null;
    if (!isHoverButtonEnabled) {
      hoverImage = null;
      hideHoverButton();
    }
  },
);

chrome.storage.onChanged.addListener((changes, areaName) => {
  if (changes.hoverButtonEnabled) {
    isHoverButtonEnabled = changes.hoverButtonEnabled.newValue !== false;
    isHoverButtonDismissed = false;
    if (!isHoverButtonEnabled) {
      hoverImage = null;
      isHoverButtonHovered = false;
      hideHoverButton();
    } else {
      updateHoverButtonPosition();
    }
  }

  if (changes.uiLanguage) {
    uiLanguage = changes.uiLanguage.newValue || "zh";
    preferredPromptLanguage = null;
    chrome.storage.local.remove("preferredPromptLanguage");

    // If panel exists, update it
    const panel = document.getElementById(PANEL_ROOT_ID);
    if (panel && panel.shadowRoot) {
      updatePanelLanguage(panel.shadowRoot);
    }
  }

  if (changes.maxImageEdge) {
    maxImageEdge = changes.maxImageEdge.newValue || 1024;
  }
});

// Reload settings when notified from options page
function handleSettingsUpdate() {
  chrome.storage.local.get(
    {
      hoverButtonEnabled: true,
      uiLanguage: "zh",
      maxImageEdge: 1024,
      preferredPromptLanguage: null,
    },
    (result) => {
      isHoverButtonEnabled = result.hoverButtonEnabled !== false;
      uiLanguage = result.uiLanguage || "zh";
      maxImageEdge = result.maxImageEdge || 1024;
      preferredPromptLanguage = result.preferredPromptLanguage || null;

      if (!isHoverButtonEnabled) {
        hoverImage = null;
        isHoverButtonHovered = false;
        hideHoverButton();
      }

      // Update panel language if it exists
      const panel = document.getElementById(PANEL_ROOT_ID);
      if (panel && panel.shadowRoot) {
        updatePanelLanguage(panel.shadowRoot);
      }
    },
  );
}

function updatePanelLanguage(shadow) {
  const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;

  // Update static text in the panel
  const nameEl = shadow.querySelector(".ipi-name");
  const subtitleEl = shadow.querySelector(".ipi-subtitle");
  const dragEl = shadow.querySelector(".ipi-drag");
  const stopEl = shadow.querySelector(".ipi-stop");
  const textareaEl = shadow.querySelector(".ipi-textarea");
  const zhBtn = shadow.querySelector('[data-lang="zh"]');
  const enBtn = shadow.querySelector('[data-lang="en"]');
  const copyBtn = shadow.querySelector('[data-action="copy"]');
  const stageLoadingEl = shadow.querySelector(".ipi-stage-loading");

  if (nameEl) nameEl.textContent = "ImgPrompt";
  if (subtitleEl) subtitleEl.textContent = dict.subtitle;
  if (dragEl) dragEl.setAttribute("aria-label", dict.dragCard);
  if (stopEl) stopEl.setAttribute("aria-label", dict.stopButton);
  if (textareaEl) textareaEl.placeholder = dict.placeholder;
  if (zhBtn) zhBtn.textContent = dict.zhBtn;
  if (enBtn) enBtn.textContent = dict.enBtn;
  if (stageLoadingEl) stageLoadingEl.textContent = dict.imageLoading;
  if (copyBtn && copyBtn.getAttribute("data-state") === "idle") {
    copyBtn.textContent = dict.copyBtn;
  } else if (copyBtn && copyBtn.getAttribute("data-state") === "done") {
    copyBtn.textContent = dict.copied;
  }

  // Update status if not currently generating (or update based on current state)
  const statusEl = shadow.querySelector(".ipi-status");
  if (statusEl) {
    const currentStatus = statusEl.textContent;
    // Simple heuristic to translate current status if it matches a known one
    for (const lang in UI_STRINGS) {
      for (const key in UI_STRINGS[lang]) {
        if (UI_STRINGS[lang][key] === currentStatus) {
          statusEl.textContent = dict[key];
          break;
        }
      }
    }
  }
}

// 响应设置页“抓取当前页面”请求：返回当前页面的图片列表（供设置页图片网格展示）
chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
  if (message?.type === "xihaha:collect-page-images") {
    try {
      const page = collectorReadPage();
      sendResponse({
        ok: true,
        images: page.images,
        prompt: page.prompt,
        title: page.title,
        pageUrl: page.url,
      });
    } catch (e) {
      sendResponse({ ok: false, error: e instanceof Error ? e.message : String(e) });
    }
    return true;
  }
  return false;
});

chrome.runtime.onMessage.addListener((message) => {
  switch (message?.type) {
    case "prompt:start-snipping":
      startSnipper(message.dataUrl);
      break;
    case "prompt:start-analysis":
      handleStartAnalysis(message);
      break;
    case "prompt:load-history-item":
      handleLoadHistoryItem(message);
      break;
    case "prompt:progress":
      if (message.requestId === activeRequestId) {
        updateProgress(message.progress, message.text);
      }
      break;
    case "prompt:result":
      if (message.requestId === activeRequestId) {
        handleResult(message);
      }
      break;
    case "prompt:canceled":
      if (message.requestId === activeRequestId) {
        handleCanceled();
      }
      break;
    case "prompt:error":
      if (message.requestId === activeRequestId) {
        handleError(message);
      }
      break;
    case "settings:updated":
      // Reload settings from storage
      handleSettingsUpdate();
      break;
    default:
      break;
  }
});

async function handleStartAnalysis(message) {
  activeRequestId = message.requestId;
  panelDismissed = false;
  currentTrigger = message.trigger || "unknown";
  currentSource = {
    srcUrl: message.srcUrl || "",
    imageDataUrl: message.imageDataUrl || "",
  };
  currentPrompts = {
    zh: "",
    en: "",
    image_type: "",
    aspect_ratio: "",
    background: "",
    subject: null,
    surrounding_elements: "",
    composition: "",
    text_content: "",
    style: "",
    lighting: "",
    color_palette: "",
    negative: null,
    parameters: null,
  };

  const panel = ensurePanel();
  const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;

  activeLanguage = preferredPromptLanguage || uiLanguage || "zh";
  // Button order is fixed by HTML structure: 中文 → English → JSON
  // No need to dynamically change CSS order

  setPreview(panel, message.imageDataUrl || message.srcUrl || "");
  setTextareaValue(panel, "");
  setStatus(panel, dict.preparing);
  startProgressTimer();
  updateProgress(6, dict.locatingImage);
  setLoadingState(panel, true);
  setError(panel, "");
  syncLanguageButtons(panel);
  resetCopyButton(panel);
  setContentVisibility(panel, false);
  setStopButtonState(panel, true);
  setScannerVisibility(panel, true);
  isGenerating = true;

  // Simply pass srcUrl; background will handle image fetching and compression
  const sent = safeSendRuntimeMessage(
    {
      type: "prompt:begin-generation",
      requestId: message.requestId,
      srcUrl: message.srcUrl || "",
      imageDataUrl: message.imageDataUrl || "",
      trigger: currentTrigger,
      pageContext: {
        altText: lastContextImage?.alt || "",
        title: document.title,
        pageUrl: window.location.href,
      },
    },
    (response) => {
      if (activeRequestId !== message.requestId) {
        return;
      }

      const runtimeError = chrome.runtime.lastError;
      if (runtimeError) {
        const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;
        showGenerationError(panel, runtimeError.message || dict.unknownError);
        return;
      }

      if (!response?.ok) {
        const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;
        showGenerationError(panel, response?.error || dict.generationFailed);
      }
    },
  );

  if (!sent) {
    isGenerating = false;
    stopProgressTimer();
    setLoadingState(panel, false);
    setStopButtonState(panel, false);
    shadowSafeHidePanel(panel);
  }
}

function startAnalysisForImage(image) {
  if (!(image instanceof HTMLImageElement)) {
    console.warn("[ImgPrompt] startAnalysisForImage 收到非 img 元素:", image?.constructor?.name);
    return;
  }

  const srcUrl = image.currentSrc || image.src || "";
  if (!srcUrl) {
    console.warn("[ImgPrompt] startAnalysisForImage: img 元素无 src (可能被 SPA 回收)，URL 为空");
    return;
  }

  // 即使图片已不在 DOM 中（SPA 替换），只要有 srcUrl 就可以继续
  lastContextImage = image;
  lastHoverImageUrl = srcUrl; // 再次缓存，确保最新
  hideHoverButton();
  handleStartAnalysis({
    requestId: crypto.randomUUID(),
    srcUrl,
    trigger: "hover_button",
  });
}

function handleResult(message) {
  if (panelDismissed) {
    isGenerating = false;
    stopProgressTimer();
    return;
  }

  // Parse structured prompt data - only visual analysis fields
  const prompts = message.prompts || {};
  currentPrompts = {
    zh: prompts.zh || "",
    en: prompts.en || "",
    image_type: prompts.image_type || "",
    aspect_ratio: prompts.aspect_ratio || "",
    background: prompts.background || "",
    subject: prompts.subject || null,
    surrounding_elements: prompts.surrounding_elements || "",
    composition: prompts.composition || "",
    text_content: prompts.text_content || "",
    style: prompts.style || "",
    lighting: prompts.lighting || "",
    color_palette: prompts.color_palette || "",
    negative: prompts.negative || null,
    parameters: prompts.parameters || null,
  };
  currentSource = message.source || currentSource;

  const panel = ensurePanel();
  const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;
  isGenerating = false;
  stopProgressTimer();
  setLoadingState(panel, false);
  updateProgress(100, dict.generationComplete);
  setStatus(panel, dict.completed);
  setError(panel, "");
  setTextareaValue(panel, buildReadableText(currentPrompts));
  resetCopyButton(panel);
  setScannerVisibility(panel, false);
  setContentVisibility(panel, true);
  setStopButtonState(panel, false);
  if (currentSource.imageDataUrl || currentSource.srcUrl) {
    setPreview(panel, currentSource.imageDataUrl || currentSource.srcUrl);
  }
}

function handleLoadHistoryItem(message) {
  const historyData = message.data;
  if (!historyData?.prompts) {
    return;
  }

  panelDismissed = false;
  const prompts = historyData.prompts || {};
  currentPrompts = {
    zh: prompts.zh || "",
    en: prompts.en || "",
    image_type: prompts.image_type || "",
    aspect_ratio: prompts.aspect_ratio || "",
    background: prompts.background || "",
    subject: prompts.subject || null,
    surrounding_elements: prompts.surrounding_elements || "",
    composition: prompts.composition || "",
    text_content: prompts.text_content || "",
    style: prompts.style || "",
    lighting: prompts.lighting || "",
    color_palette: prompts.color_palette || "",
    negative: prompts.negative || null,
    parameters: prompts.parameters || null,
  };
  currentSource = {
    srcUrl: historyData.srcUrl || "",
    imageDataUrl: historyData.imageDataUrl || "",
  };
  currentTrigger = "history";

  const panel = ensurePanel();
  const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;

  // Reset state
  isGenerating = false;
  stopProgressTimer();

  // Set language preference
  activeLanguage = preferredPromptLanguage || uiLanguage || "zh";
  // Button order is fixed by HTML structure: 中文 → English → JSON
  // No need to dynamically change CSS order

  // Display the content
  setLoadingState(panel, false);
  updateProgress(100, dict.generationComplete);
  setStatus(panel, dict.completed);
  setError(panel, "");
  setTextareaValue(panel, buildReadableText(currentPrompts));
  resetCopyButton(panel);
  setScannerVisibility(panel, false);
  setContentVisibility(panel, true);
  setStopButtonState(panel, false);

  // Set preview image
  if (currentSource.imageDataUrl || currentSource.srcUrl) {
    setPreview(panel, currentSource.imageDataUrl || currentSource.srcUrl);
  }
}

function handleCanceled() {
  if (panelDismissed) {
    isGenerating = false;
    stopProgressTimer();
    return;
  }

  const panel = ensurePanel();
  const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;
  isGenerating = false;
  stopProgressTimer();
  setLoadingState(panel, false);
  updateProgress(0, dict.stopped);
  setStatus(panel, dict.stopped);
  setScannerVisibility(panel, false);
  setStopButtonState(panel, false);
  setError(panel, dict.stopGeneration);
}

function showGenerationError(panel, message) {
  const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;
  isGenerating = false;
  stopProgressTimer();
  setLoadingState(panel, false);
  updateProgress(0, dict.generationFailed);
  setStatus(panel, dict.failed);
  setScannerVisibility(panel, false);
  setStopButtonState(panel, false);
  setError(panel, message || dict.generationFailed);
}

function handleError(message) {
  if (panelDismissed) {
    isGenerating = false;
    stopProgressTimer();
    return;
  }

  const panel = ensurePanel();
  const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;

  isGenerating = false;
  stopProgressTimer();
  setLoadingState(panel, false);
  updateProgress(0, dict.generationFailed);
  setStatus(panel, dict.failed);
  setScannerVisibility(panel, false);
  setStopButtonState(panel, false);

  // Use the user-friendly message from background if available
  const errorMessage = message.message || dict.generationFailed;
  setError(panel, errorMessage);

  console.warn("[PicPrompt] Generation error:", message.errorCode, errorMessage);
}

function startSnipper(dataUrl) {
  trackEvent("snipping_tool_opened", {
    pageUrl: window.location.href,
    pageTitle: document.title,
  });
  const overlay = document.createElement("div");
  overlay.id = "picprompt-snipper-overlay";
  Object.assign(overlay.style, {
    position: "fixed",
    top: "0",
    left: "0",
    width: "100vw",
    height: "100vh",
    zIndex: "2147483647",
    cursor: "crosshair",
    backgroundColor: "rgba(0,0,0,0.4)",
    userSelect: "none",
  });

  // We use a hole-punch effect via box-shadow or clip-path. Box-shadow is easier here.
  const selection = document.createElement("div");
  Object.assign(selection.style, {
    position: "absolute",
    border: "2px dashed #fff",
    pointerEvents: "none",
    boxShadow: "0 0 0 9999px rgba(0,0,0,0.5)",
    background: "transparent",
    display: "none",
  });

  overlay.appendChild(selection);
  document.body.appendChild(overlay);

  let isDrawing = false;
  let startX, startY;

  overlay.addEventListener("mousedown", (e) => {
    isDrawing = true;
    startX = e.clientX;
    startY = e.clientY;
    // Remove the dimming from the overlay itself so the holepunch isn't double dimmed.
    overlay.style.backgroundColor = "transparent";
    Object.assign(selection.style, {
      left: startX + "px",
      top: startY + "px",
      width: "0px",
      height: "0px",
      display: "block",
    });
  });

  overlay.addEventListener("mousemove", (e) => {
    if (!isDrawing) return;
    const currentX = e.clientX;
    const currentY = e.clientY;
    const left = Math.min(startX, currentX);
    const top = Math.min(startY, currentY);
    const width = Math.abs(currentX - startX);
    const height = Math.abs(currentY - startY);
    Object.assign(selection.style, {
      left: left + "px",
      top: top + "px",
      width: width + "px",
      height: height + "px",
    });
  });

  overlay.addEventListener("mouseup", async (e) => {
    if (!isDrawing) return;
    isDrawing = false;

    const dpr = window.devicePixelRatio || 1;
    const left = Math.min(startX, e.clientX);
    const top = Math.min(startY, e.clientY);
    const width = Math.abs(e.clientX - startX);
    const height = Math.abs(e.clientY - startY);

    overlay.remove();

    if (width < 10 || height < 10) return;

    try {
      const img = new Image();
      img.src = dataUrl;
      await new Promise((resolve) => (img.onload = resolve));

      const canvas = document.createElement("canvas");
      canvas.width = width * dpr;
      canvas.height = height * dpr;
      const ctx = canvas.getContext("2d");

      ctx.drawImage(
        img,
        left * dpr,
        top * dpr,
        width * dpr,
        height * dpr,
        0,
        0,
        canvas.width,
        canvas.height,
      );
      const croppedBase64 = canvas.toDataURL("image/jpeg", 0.92);

      trackEvent("snipping_crop_completed", {
        width,
        height,
        pageUrl: window.location.href,
      });

      handleStartAnalysis({
        requestId: crypto.randomUUID(),
        srcUrl: "",
        imageDataUrl: croppedBase64,
        trigger: "shortcut_snipping",
      });
    } catch (err) {
      console.error("[PicPrompt] Snipping crop failed", err);
    }
  });

  // Cancel on Esc
  const keyHandler = (e) => {
    if (e.key === "Escape") {
      overlay.remove();
      document.removeEventListener("keydown", keyHandler);
    }
  };
  document.addEventListener("keydown", keyHandler);
}

function ensurePanel() {
  let host = document.getElementById(PANEL_ROOT_ID);
  if (!host) {
    host = document.createElement("div");
    host.id = PANEL_ROOT_ID;
    host.style.all = "initial";
    host.style.position = "fixed";
    host.style.top = "20px";
    host.style.right = "20px";
    host.style.left = "auto";
    host.style.zIndex = PANEL_Z_INDEX;
    document.documentElement.appendChild(host);
  }

  let shadow = host.shadowRoot;
  if (!shadow) {
    shadow = host.attachShadow({ mode: "open" });
    shadow.innerHTML = buildPanelMarkup();
    bindPanelEvents(shadow);
    grabPageContent(shadow);
    console.info(
      "[ImgPrompt] 面板已挂载，自动抓取了一次当前页面的图片/提示词。可点击「抓取」按钮重新抓取。",
    );
  }

  const panel = shadow.querySelector(".ipi-panel");
  panel.hidden = false;
  return shadow;
}

function ensureHoverButton() {
  let host = document.getElementById(HOVER_BUTTON_ROOT_ID);
  if (!host) {
    host = document.createElement("div");
    host.id = HOVER_BUTTON_ROOT_ID;
    host.style.all = "initial";
    host.style.position = "fixed";
    host.style.left = "0";
    host.style.top = "0";
    host.style.zIndex = PANEL_Z_INDEX;
    document.documentElement.appendChild(host);
  }

  let shadow = host.shadowRoot;
  if (!shadow) {
    shadow = host.attachShadow({ mode: "open" });
    shadow.innerHTML = `
      <style>
        :host {
          all: initial;
        }
        .pp-hover-wrap {
          position: fixed;
          display: inline-flex;
          align-items: center;
          opacity: 0;
          visibility: hidden;
          transition: opacity 160ms ease, visibility 160ms ease;
          pointer-events: none;
        }
        .pp-hover-wrap[data-visible="true"] {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
        }
        .pp-hover {
          position: relative;
          display: inline-flex;
          align-items: center;
          border: 0;
          border-radius: 999px;
          padding: 8px 12px;
          background: linear-gradient(90deg, #8bd3ff, #ffc85f 55%, #f09cc0);
          color: #111014;
          font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
          cursor: pointer;
        }
        .pp-hover-close {
          position: absolute;
          top: -5px;
          right: -5px;
          width: 14px;
          height: 14px;
          padding: 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: 0;
          border-radius: 999px;
          background: rgba(17, 16, 20, 0.82);
          color: rgba(255, 255, 255, 0.9);
          font: 700 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
          cursor: pointer;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
        }
      </style>
      <div class="pp-hover-wrap" data-visible="false">
        <button class="pp-hover" type="button">
          <span>ImgPrompt</span>
        </button>
        <button class="pp-hover-close" type="button" aria-label="${(UI_STRINGS[uiLanguage] || UI_STRINGS.zh).closeHover}">×</button>
      </div>
    `;

    const wrap = shadow.querySelector(".pp-hover-wrap");
    const button = shadow.querySelector(".pp-hover");
    const closeButton = shadow.querySelector(".pp-hover-close");
    wrap.addEventListener("pointerenter", () => {
      isHoverButtonHovered = true;
    });
    wrap.addEventListener("pointerleave", () => {
      isHoverButtonHovered = false;
      if (!hoverImage) {
        hideHoverButton();
      }
    });
    button.addEventListener("click", () => {
      console.log(
        "[ImgPrompt] 悬浮按钮被点击, hoverImage:",
        !!hoverImage,
        "lastHoverImageUrl:",
        lastHoverImageUrl,
      );
      if (hoverImage) {
        startAnalysisForImage(hoverImage);
      } else if (lastHoverImageUrl) {
        // DOM 引用可能已被 SPA 回收（如小红书懒加载替换），用缓存的 URL 重建
        console.warn(
          "[ImgPrompt] hoverImage DOM 引用已失效，使用缓存 URL 回退:",
          lastHoverImageUrl,
        );
        const fallbackImg = new Image();
        fallbackImg.src = lastHoverImageUrl;
        startAnalysisForImage(fallbackImg);
      } else {
        console.warn("[ImgPrompt] 悬浮按钮点击时无可用图片（请先将鼠标悬停在图片上再点击按钮）");
        // 即使没有图片也给反馈：打开面板并提示用户
        const panel = ensurePanel();
        const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;
        setStatus(panel, "请先将鼠标悬停在图片上，再点击 ImgPrompt 按钮");
        setError(panel, "未检测到图片，请将鼠标移到图片上后重试。");
      }
    });
    closeButton.addEventListener("click", (event) => {
      event.preventDefault();
      event.stopPropagation();
      isHoverButtonDismissed = true;
      hoverImage = null;
      isHoverButtonHovered = false;
      hideHoverButton();
    });
  }

  return shadow;
}

function buildPanelMarkup() {
  return `
    <style>
      :host {
        all: initial;
      }
      .ipi-panel {
        width: 392px;
        max-width: calc(100vw - 20px);
        color: #f8fafc;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
        position: relative;
      }
      .ipi-close {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 6;
        border: 0;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.88);
        width: 34px;
        height: 34px;
        border-radius: 999px;
        cursor: pointer;
        backdrop-filter: blur(10px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
      }
      .ipi-drag {
        position: absolute;
        top: 8px;
        left: 50%;
        z-index: 6;
        width: 44px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        cursor: grab;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        transform: translateX(-50%);
      }
      .ipi-drag:active {
        cursor: grabbing;
      }
      .ipi-drag::before {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.42);
        transform: translate(-50%, -50%);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      .ipi-body {
        padding: 0 12px 12px;
      }
      .ipi-stage {
        position: relative;
        margin: 0 10px;
        min-height: 150px;
        border-radius: 28px;
        overflow: hidden;
        background: transparent;
      }
      .ipi-preview {
        width: 101%;
        height: 101%;
        position: absolute;
        top: -0.5%;
        left: -0.5%;
        object-fit: cover;
        border-radius: 28px;
        background: rgba(15, 23, 42, 0.9);
        display: block;
        filter: saturate(0.95) contrast(1.05);
        opacity: 1;
        transition: opacity 180ms ease;
        visibility: hidden;
      }
      .ipi-preview[data-loaded="true"] {
        visibility: visible;
      }
      .ipi-preview-shade {
        position: absolute;
        inset: 0;
        border-radius: 28px;
        background:
          linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 28%, rgba(0, 0, 0, 0.55)),
          linear-gradient(180deg, transparent 52%, rgba(5, 5, 7, 0.95));
        pointer-events: none;
        visibility: hidden;
      }
      .ipi-preview[data-loaded="true"] + .ipi-preview-shade {
        visibility: visible;
      }
      .ipi-stage-loading {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.25);
        font-size: 13px;
        letter-spacing: 0.02em;
        pointer-events: none;
        z-index: 1;
      }
      .ipi-preview[data-loaded="true"] ~ .ipi-stage-loading {
        display: none;
      }
      @keyframes ipi-scan {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
      }
      .ipi-scanner {
        position: absolute;
        inset: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        pointer-events: none;
        display: none;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0) 30%,
          rgba(255, 255, 255, 0.25) 50%,
          rgba(255, 255, 255, 0) 70%,
          transparent
        );
      }
      .ipi-stage[data-scanning="true"] .ipi-scanner {
        display: block;
        animation: ipi-scan 2.4s infinite ease-in-out alternate;
      }
      .ipi-card {
        position: relative;
        z-index: 5;
        margin: -22px 10px 0;
        padding: 18px;
        border-radius: 28px;
        background:
          linear-gradient(180deg, rgba(18, 18, 22, 0.92), rgba(10, 10, 14, 0.96)),
          rgba(12, 12, 16, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow:
          0 18px 48px rgba(0, 0, 0, 0.36),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
        cursor: default;
      }
      .ipi-card:active {
        cursor: grabbing;
      }
      /* 排除按钮和文本框，它们应该保持自己的光标 */
      .ipi-card button, 
      .ipi-card textarea,
      .ipi-card select {
        cursor: auto;
      }
      .ipi-card .ipi-action,
      .ipi-card .ipi-switch,
      .ipi-card .ipi-close,
      .ipi-card .ipi-stop {
        cursor: pointer;
      }
      .ipi-card textarea {
        cursor: text;
      }
      .ipi-meta {
        display: grid;
        gap: 12px;
      }
      .ipi-headline {
        display: grid;
        gap: 4px;
      }
      .ipi-name {
        font-size: 32px;
        line-height: 0.95;
        font-weight: 600;
        letter-spacing: -0.05em;
      }
      .ipi-subtitle {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.54);
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .ipi-progress {
        position: relative;
        height: 38px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(10px);
      }
      .ipi-progress-bar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0%;
        background: linear-gradient(90deg, #8bd3ff, #ffd777, #f8a3c0, #ffd777, #8bd3ff);
        background-size: 200% 100%;
        animation: ipi-flow 2s linear infinite;
        transition: width 280ms ease;
        box-shadow: 0 0 28px rgba(248, 163, 192, 0.32);
      }
      @keyframes ipi-flow {
        0% { background-position: 200% 0; }
        100% { background-position: 0 0; }
      }
      .ipi-progress-content {
        position: relative;
        z-index: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .ipi-progress-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        font-size: 12px;
        color: #111014;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .ipi-progress-dot {
        width: 8px;
        height: 8px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: linear-gradient(135deg, #ffd777, #f78fb6);
        box-shadow: 0 0 18px rgba(247, 143, 182, 0.42);
      }
      .ipi-status {
        font-size: 12px;
        color: #111014;
        letter-spacing: 0.01em;
      }
      .ipi-stop {
        border: 0;
        cursor: pointer;
        width: 30px;
        height: 30px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.86);
      }
      .ipi-stop::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 3px;
        background: #111014;
      }
      .ipi-stop[hidden] {
        display: none;
      }
      .ipi-stop[disabled] {
        opacity: 0.45;
        cursor: default;
      }
      .ipi-sheet {
        display: grid;
        gap: 12px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-24px) scaleY(0.92);
        transform-origin: top center;
        transition:
          max-height 420ms ease,
          opacity 320ms ease,
          transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
          margin-top 320ms ease;
        margin-top: -4px;
      }
      .ipi-sheet[data-visible="true"] {
        max-height: 520px;
        opacity: 1;
        transform: translateY(0) scaleY(1);
        margin-top: 0;
      }
      .ipi-textarea {
        width: 100%;
        min-height: 176px;
        resize: vertical;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.04);
        color: #f8fafc;
        padding: 14px 12px 18px 18px;
        box-sizing: border-box;
        font-size: 13px;
        line-height: 1.6;
        outline: none;
        backdrop-filter: blur(8px);
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.55) rgba(255, 255, 255, 0.06);
      }
      .ipi-textarea::-webkit-resizer {
        background: transparent;
        border: none;
      }
      .ipi-sheet {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
      }
      .ipi-textarea-wrapper {
        position: relative;
        border-radius: 22px;
        overflow: hidden;
      }
      .ipi-collector {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .ipi-collector-head {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.7);
      }
      .ipi-collector-head small {
        color: rgba(255, 255, 255, 0.4);
        font-weight: 500;
      }
      .ipi-grab {
        margin-left: auto;
        border: 0;
        border-radius: 999px;
        padding: 4px 12px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        color: #07110b;
        background: linear-gradient(90deg, #52be89, #8bd3ff);
        transition: transform 160ms ease;
      }
      .ipi-grab:hover { transform: translateY(-1px); }
      .ipi-grab:active { transform: translateY(0) scale(0.98); }
      .ipi-collector-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        max-height: 132px;
        overflow-y: auto;
      }
      .ipi-collector-grid:empty { display: none; }
      .ipi-collector-grid button {
        height: 52px;
        overflow: hidden;
        border: 2px solid transparent;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
        cursor: pointer;
        padding: 0;
      }
      .ipi-collector-grid button img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .ipi-collector-grid button.is-selected { border-color: #52be89; }
      .ipi-collector-grid .ipi-collector-empty {
        grid-column: 1 / -1;
        padding: 8px;
        border: 1px dashed rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.35);
        font-size: 11px;
        text-align: center;
      }
      .ipi-collector-row {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .ipi-category-input {
        flex: 1;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        color: #f8fafc;
        padding: 7px 12px;
        font-size: 11px;
        font-weight: 600;
        outline: none;
      }
      .ipi-category-input:focus {
        border-color: rgba(82, 190, 137, 0.6);
        box-shadow: 0 0 0 3px rgba(82, 190, 137, 0.12);
      }
      .ipi-resize-handle {
        position: absolute;
        bottom: -24px;
        right: 10px;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(148, 163, 184, 0.35);
        cursor: ns-resize;
        pointer-events: auto;
        transition: color 160ms ease;
        z-index: 2;
      }
      .ipi-resize-handle:hover {
        color: rgba(148, 163, 184, 0.7);
      }
      .ipi-textarea::-webkit-scrollbar {
        width: 6px;
      }
      .ipi-textarea::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.04);
        border-radius: 999px;
        margin: 4px 0;
      }
      .ipi-textarea::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.5);
        border-radius: 999px;
      }
      .ipi-textarea::-webkit-scrollbar-thumb:hover {
        background: rgba(148, 163, 184, 0.72);
      }
      .ipi-textarea:focus {
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow: 0 0 0 3px rgba(139, 211, 255, 0.12);
      }
      .ipi-switches,
      .ipi-actions {
        display: flex;
        gap: 6px;
      }
      .ipi-switch,
      .ipi-action {
        border: 0;
        cursor: pointer;
        border-radius: 999px;
        min-height: 28px;
        padding: 6px 8px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
      }
      .ipi-switch {
        color: rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
      }
      .ipi-switch[data-active="true"] {
        background: rgba(255, 255, 255, 0.96);
        color: #0f0f14;
      }
      .ipi-actions {
        align-items: center;
        justify-content: space-between;
        margin-top: 4px;
        flex-wrap: nowrap;
      }
      .ipi-save-actions {
        display: flex;
        gap: 6px;
        justify-content: flex-end;
        flex-wrap: nowrap;
      }
      .ipi-action {
        min-width: auto;
        color: #111014;
        background: linear-gradient(90deg, #8bd3ff, #ffc85f 55%, #f09cc0);
        box-shadow: 0 14px 30px rgba(255, 193, 94, 0.18);
      }
      .ipi-action-ghost {
        color: rgba(255, 255, 255, 0.84);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
      }
      .ipi-action-cloud {
        color: #08130d;
        background: linear-gradient(90deg, #91f2c0, #8bd3ff);
        box-shadow: 0 14px 30px rgba(139, 211, 255, 0.16);
      }
      .ipi-action[data-state="done"] {
        color: #07140b;
        background: linear-gradient(90deg, #91f2c0, #cbf7da);
        box-shadow: 0 14px 30px rgba(145, 242, 192, 0.2);
      }
      .ipi-action[data-state="busy"] {
        cursor: progress;
        opacity: 0.76;
      }
      @media (max-width: 520px) {
        .ipi-actions {
          align-items: stretch;
          flex-direction: column;
        }
        .ipi-switches,
        .ipi-save-actions {
          justify-content: stretch;
        }
        .ipi-save-actions .ipi-action {
          flex: 1;
        }
      }
      .ipi-error {
        color: #f8b4c8;
        font-size: 12px;
        padding-left: 2px;
        display: none;
      }
      .ipi-error[data-visible="true"] {
        display: block;
      }
    </style>
    <section class="ipi-panel" hidden>
      <div class="ipi-body">
        <div class="ipi-stage" data-scanning="false">
          <img class="ipi-preview" alt="Selected image preview" />
          <div class="ipi-preview-shade"></div>
          <div class="ipi-stage-loading">${(UI_STRINGS[uiLanguage] || UI_STRINGS.zh).imageLoading}</div>
          <div class="ipi-scanner"></div>
        </div>
        <div class="ipi-card">
          <button class="ipi-drag" type="button" aria-label="${(UI_STRINGS[uiLanguage] || UI_STRINGS.zh).dragCard}"></button>
          <button class="ipi-close" type="button" aria-label="Close">×</button>
          <div class="ipi-meta">
            <div class="ipi-headline">
              <div class="ipi-name">ImgPrompt</div>
              <div class="ipi-subtitle">${(UI_STRINGS[uiLanguage] || UI_STRINGS.zh).subtitle}</div>
            </div>
            <div class="ipi-progress">
              <div class="ipi-progress-bar"></div>
              <div class="ipi-progress-content">
                <div class="ipi-progress-label">
                  <span class="ipi-progress-dot"></span>
                  <span class="ipi-status ipi-loading">${(UI_STRINGS[uiLanguage] || UI_STRINGS.zh).waitingToStart}</span>
                </div>
                <button class="ipi-stop" type="button" data-action="stop" aria-label="${(UI_STRINGS[uiLanguage] || UI_STRINGS.zh).stopButton}"></button>
              </div>
            </div>
            <div class="ipi-error"></div>
            <div class="ipi-sheet" data-visible="false">
              <div class="ipi-textarea-wrapper">
                <textarea class="ipi-textarea" spellcheck="false" placeholder="${(UI_STRINGS[uiLanguage] || UI_STRINGS.zh).placeholder}"></textarea>
              </div>
              <div class="ipi-resize-handle" title="拖动调整大小">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M2 10L10 2M5 10L10 5M8 10L10 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
              </div>
              <div class="ipi-actions">
                <div class="ipi-switches">
                  <button class="ipi-switch" type="button" data-lang="zh" data-active="true">${(UI_STRINGS[uiLanguage] || UI_STRINGS.zh).zhBtn}</button>
                  <button class="ipi-switch" type="button" data-lang="en" data-active="false">${(UI_STRINGS[uiLanguage] || UI_STRINGS.zh).enBtn}</button>
                  <button class="ipi-switch" type="button" data-action="toggle-json" data-active="false">JSON</button>
                </div>
                <div class="ipi-save-actions">
                  <button class="ipi-action ipi-action-ghost" type="button" data-action="save-local" data-state="idle">本地</button>
                  <button class="ipi-action ipi-action-cloud" type="button" data-action="upload-cloud" data-state="idle">上云</button>
                  <button class="ipi-action" type="button" data-action="copy" data-state="idle">${(UI_STRINGS[uiLanguage] || UI_STRINGS.zh).copyBtn}</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  `;
}

function handleDocumentPointerMove(event) {
  if (!isHoverButtonEnabled || isHoverButtonDismissed) {
    return;
  }

  const target = event.target;
  const image =
    target instanceof HTMLImageElement
      ? target
      : target instanceof Element
        ? target.closest("img")
        : null;

  if (!image || !(image instanceof HTMLImageElement)) {
    if (!isHoverButtonHovered) {
      hoverImage = null;
      hideHoverButton();
    }
    return;
  }

  const rect = image.getBoundingClientRect();
  if (rect.width < 48 || rect.height < 48) {
    if (!isHoverButtonHovered) {
      hoverImage = null;
      hideHoverButton();
    }
    return;
  }

  hoverImage = image;
  lastHoverImageUrl = image.currentSrc || image.src || ""; // 缓存 URL，防止 DOM 元素被 SPA 回收
  showHoverButtonForImage(image);
}

function showHoverButtonForImage(image) {
  if (!isHoverButtonEnabled || isHoverButtonDismissed) {
    return;
  }

  const shadow = ensureHoverButton();
  const wrap = shadow.querySelector(".pp-hover-wrap");
  const button = shadow.querySelector(".pp-hover");
  if (!wrap || !button) {
    return;
  }

  // 先确保按钮在定位期间不可见，防止从旧位置跳变到新位置
  if (wrap.getAttribute("data-visible") !== "true") {
    wrap.style.opacity = "0";
    wrap.style.visibility = "hidden";
  }

  const rect = image.getBoundingClientRect();
  // 基础可见性检查
  if (rect.top < 0 || rect.top > window.innerHeight || rect.width <= 0 || rect.height <= 0) {
    if (!isHoverButtonHovered) {
      hideHoverButton();
    }
    return;
  }

  // 遮挡检测（放宽条件）：仅当遮挡层是明确的导航栏/工具栏等大尺寸非图片元素时才隐藏按钮
  // 小红书等 SPA 页面常有浮层/遮罩，不能因此完全阻止按钮工作
  const checkX = rect.right - 5;
  const checkY = rect.top + 5;
  const topEl = document.elementFromPoint(checkX, checkY);
  if (topEl && topEl !== image && !image.contains(topEl)) {
    const tag = topEl.tagName?.toLowerCase() || "";
    // 仅对已知的全屏遮挡类元素（iframe、video、全屏 nav）阻止；其他情况放行让用户自己点
    const isHardBlock =
      ["iframe", "video"].includes(tag) ||
      (topEl.getBoundingClientRect?.()?.width || 0) > window.innerWidth * 0.7;
    if (isHardBlock && !isHoverButtonHovered) {
      hideHoverButton();
      return;
    }
    // 非硬遮挡：继续显示按钮，只是可能被半透明浮层盖住一部分
  }

  const top = rect.top + 10;
  const left = Math.min(
    window.innerWidth - wrap.offsetWidth - 8,
    rect.right - wrap.offsetWidth - 10,
  );

  wrap.style.top = `${top}px`;
  wrap.style.left = `${Math.max(8, left)}px`;

  // 关键：在设置完位置后，标记显形
  wrap.setAttribute("data-visible", "true");
  wrap.style.opacity = ""; // 移除内联透明度，让 CSS transition 生效
  wrap.style.visibility = "";
}

function updateHoverButtonPosition() {
  if (!isHoverButtonEnabled || isHoverButtonDismissed || !hoverImage) {
    if (!isHoverButtonEnabled) {
      hideHoverButton();
    }
    return;
  }

  const rect = hoverImage.getBoundingClientRect();
  // 统一判断逻辑：图片顶部不可见或图片还未进入视口时隐藏
  if (rect.width <= 0 || rect.height <= 0 || rect.top < 0 || rect.top > window.innerHeight) {
    if (!isHoverButtonHovered) {
      hideHoverButton();
    }
    return;
  }

  showHoverButtonForImage(hoverImage);
}

function hideHoverButton() {
  const host = document.getElementById(HOVER_BUTTON_ROOT_ID);
  const wrap = host?.shadowRoot?.querySelector(".pp-hover-wrap");
  if (wrap) {
    wrap.setAttribute("data-visible", "false");
  }
}

function bindPanelEvents(shadowRoot) {
  const preview = shadowRoot.querySelector(".ipi-preview");
  preview?.addEventListener("load", () => {
    preview.setAttribute("data-loaded", "true");
  });
  preview?.addEventListener("error", () => {
    preview.removeAttribute("data-loaded");
    preview.removeAttribute("src");
  });

  shadowRoot.querySelector(".ipi-close")?.addEventListener("click", () => {
    panelDismissed = true;
    if (activeRequestId && isGenerating) {
      void cancelActiveGeneration(shadowRoot);
    }
    shadowRoot.querySelector(".ipi-panel").hidden = true;
  });

  shadowRoot.querySelector(".ipi-card")?.addEventListener("pointerdown", (event) => {
    startDragging(event);
  });

  // Custom resize handle
  const resizeHandle = shadowRoot.querySelector(".ipi-resize-handle");
  const textarea = shadowRoot.querySelector(".ipi-textarea");
  if (resizeHandle && textarea) {
    let isResizing = false;
    let startY = 0;
    let startHeight = 0;

    resizeHandle.addEventListener("pointerdown", (event) => {
      isResizing = true;
      startY = event.clientY;
      startHeight = textarea.offsetHeight;
      textarea.style.userSelect = "none";
      event.preventDefault();
      event.stopPropagation();
    });

    window.addEventListener("pointermove", (event) => {
      if (!isResizing) return;
      const deltaY = event.clientY - startY;
      const newHeight = Math.max(176, startHeight + deltaY);
      textarea.style.height = newHeight + "px";
    });

    window.addEventListener("pointerup", () => {
      if (isResizing) {
        isResizing = false;
        textarea.style.userSelect = "";
      }
    });
  }

  // Handle language switch buttons (zh/en)
  shadowRoot.querySelectorAll(".ipi-switch[data-lang]").forEach((button) => {
    button.addEventListener("click", () => {
      const lang = button.getAttribute("data-lang");

      // Switch to language mode, disable JSON mode
      if (isJsonMode) {
        isJsonMode = false;
      }

      activeLanguage = lang;
      preferredPromptLanguage = lang;
      chrome.storage.local.set({ preferredPromptLanguage: lang });

      // Sync all button states
      syncLanguageButtons(shadowRoot);

      // Update textarea to show current language with proper labels
      setTextareaValue(shadowRoot, buildReadableText(currentPrompts));

      trackEvent("prompt_language_switched", {
        language: activeLanguage,
        trigger: currentTrigger,
        pageUrl: window.location.href,
        pageTitle: document.title,
      });
    });
  });

  // Handle JSON toggle button
  const jsonBtn = shadowRoot.querySelector('.ipi-switch[data-action="toggle-json"]');
  if (jsonBtn) {
    jsonBtn.addEventListener("click", () => {
      // JSON button is a one-way toggle: if not in JSON mode, switch to it
      // Once in JSON mode, clicking JSON button does nothing (must use language buttons to exit)
      if (!isJsonMode) {
        isJsonMode = true;

        // Sync all button states (this will update JSON button and language buttons)
        syncLanguageButtons(shadowRoot);

        // Update textarea display
        setTextareaValue(shadowRoot, "");
      }
      // If already in JSON mode, do nothing (stay in JSON mode)
    });
  }

  shadowRoot.querySelector(".ipi-textarea")?.addEventListener("input", (event) => {
    // In JSON mode, try to parse and update structured fields
    // In normal mode, we don't update structured fields from plain text
    if (isJsonMode) {
      try {
        const parsed = JSON.parse(event.target.value);
        if (parsed.image_type !== undefined) currentPrompts.image_type = parsed.image_type;
        if (parsed.aspect_ratio !== undefined) currentPrompts.aspect_ratio = parsed.aspect_ratio;
        if (parsed.background !== undefined) currentPrompts.background = parsed.background;
        if (parsed.subject !== undefined) currentPrompts.subject = parsed.subject;
        if (parsed.surrounding_elements !== undefined)
          currentPrompts.surrounding_elements = parsed.surrounding_elements;
        if (parsed.composition !== undefined) currentPrompts.composition = parsed.composition;
        if (parsed.text_content !== undefined) currentPrompts.text_content = parsed.text_content;
        if (parsed.style !== undefined) currentPrompts.style = parsed.style;
        if (parsed.lighting !== undefined) currentPrompts.lighting = parsed.lighting;
        if (parsed.color_palette !== undefined) currentPrompts.color_palette = parsed.color_palette;
        if (parsed.negative !== undefined) currentPrompts.negative = parsed.negative;
        if (parsed.parameters !== undefined) currentPrompts.parameters = parsed.parameters;
      } catch (e) {
        // Invalid JSON, ignore
      }
    }
  });

  shadowRoot.querySelector('[data-action="copy"]')?.addEventListener("click", async () => {
    const text = getCurrentPromptText();
    if (!text) {
      return;
    }
    try {
      await navigator.clipboard.writeText(text);
      setCopyButtonState(shadowRoot, "done");
      trackEvent("prompt_copied", {
        language: activeLanguage,
        trigger: currentTrigger,
        textLength: text.length,
        pageUrl: window.location.href,
        pageTitle: document.title,
      });
    } catch (error) {
      const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;
      setCopyButtonState(shadowRoot, "idle");
      setError(shadowRoot, dict.copyFailed);
    }
  });

  shadowRoot
    .querySelector('[data-action="save-local"]')
    ?.addEventListener("click", async (event) => {
      await saveCurrentToXihaha("local", shadowRoot, event.currentTarget);
    });

  shadowRoot
    .querySelector('[data-action="upload-cloud"]')
    ?.addEventListener("click", async (event) => {
      await saveCurrentToXihaha("cloud", shadowRoot, event.currentTarget);
    });

  shadowRoot.querySelector('[data-action="grab-page"]')?.addEventListener("click", () => {
    grabPageContent(shadowRoot);
  });

  void loadCollectorCategories(shadowRoot);

  shadowRoot.querySelector('[data-action="stop"]')?.addEventListener("click", async () => {
    if (!activeRequestId || !isGenerating) {
      return;
    }
    await cancelActiveGeneration(shadowRoot);
  });
}

async function cancelActiveGeneration(shadowRoot) {
  if (!activeRequestId || !isGenerating) {
    return;
  }

  setStopButtonState(shadowRoot, false);
  const sent = safeSendRuntimeMessage({
    type: "prompt:cancel-generation",
    requestId: activeRequestId,
  });
  if (!sent) {
    isGenerating = false;
    stopProgressTimer();
  }
}

async function saveCurrentToXihaha(target, shadowRoot, button) {
  const originalText = button?.textContent || "";
  const isCloud = target === "cloud";

  try {
    setError(shadowRoot, "");
    setActionButtonState(button, "busy", isCloud ? "上传中..." : "保存中...");

    const settings = await chrome.storage.local.get({
      xihahaAdminPassword: "",
      xihahaDefaultGroup: "未分组",
      xihahaDefaultPrompt: "",
    });
    let prompt = getCurrentPromptText();
    if (!prompt) {
      prompt = settings.xihahaDefaultPrompt || "";
    }
    const categoryInput = shadowRoot.querySelector("[data-collector-category]");
    const category =
      (categoryInput?.value.trim() || settings.xihahaDefaultGroup || "未分组").trim() || "未分组";
    const payload = {
      adminPassword: settings.xihahaAdminPassword || "",
      title: buildXihahaTitle(),
      category,
      prompt,
      imageDataUrl: currentSource.imageDataUrl || "",
      imageUrl: collectorSelectedImageUrl || currentSource.srcUrl || "",
      pageTitle: document.title,
      pageUrl: window.location.href,
    };

    if (!payload.prompt) {
      throw new Error("当前没有可保存的提示词。");
    }
    if (!payload.imageDataUrl && !payload.imageUrl) {
      throw new Error("当前没有可保存的图片。");
    }
    if (isCloud && !payload.adminPassword) {
      throw new Error("请先在 ImgPrompt 设置页填写禧哈哈灵感集管理员密码。");
    }

    const response = await chrome.runtime.sendMessage({
      type: isCloud ? "xihaha:upload-cloud" : "xihaha:save-local",
      payload,
    });

    if (!response?.ok) {
      throw new Error(response?.error || "保存失败。");
    }

    setStatus(shadowRoot, isCloud ? "已上云" : "已保存");
    setActionButtonState(button, "done", isCloud ? "已上传" : "已保存");
    trackEvent(isCloud ? "xihaha_cloud_uploaded" : "xihaha_local_saved", {
      trigger: currentTrigger,
      category: payload.category,
      pageUrl: window.location.href,
      pageTitle: document.title,
    });
  } catch (error) {
    setActionButtonState(button, "idle", originalText);
    setError(shadowRoot, error instanceof Error ? error.message : "保存失败。");
  }
}

// 标题仅保留来源本身内容（图片类型或页面标题），不再拼接任何前缀
function buildXihahaTitle() {
  const sourceTitle = String(
    currentPrompts.image_type || document.title || "ImgPrompt 灵感",
  ).trim();
  return sourceTitle.slice(0, 120);
}

function setActionButtonState(button, state, text) {
  if (!button) {
    return;
  }

  window.clearTimeout(button._xihahaTimerId);
  button.dataset.state = state;
  button.textContent = text;
  button.disabled = state === "busy";

  if (state === "done") {
    button._xihahaTimerId = window.setTimeout(() => {
      button.dataset.state = "idle";
      button.disabled = false;
      button.textContent = button.getAttribute("data-action") === "upload-cloud" ? "上云" : "本地";
    }, 1600);
  }
}

function syncLanguageButtons(shadowRoot) {
  shadowRoot.querySelectorAll(".ipi-switch").forEach((button) => {
    // Handle language buttons
    if (button.hasAttribute("data-lang")) {
      button.setAttribute(
        "data-active",
        String(button.getAttribute("data-lang") === activeLanguage && !isJsonMode),
      );
    }
    // Handle JSON button
    if (button.getAttribute("data-action") === "toggle-json") {
      button.setAttribute("data-active", String(isJsonMode));
    }
  });
}

function updateProgress(progress, text) {
  const shadowRoot = ensurePanel();
  const progressBar = shadowRoot.querySelector(".ipi-progress-bar");
  const status = shadowRoot.querySelector(".ipi-status");
  currentProgressText = text || "";
  progressBar.style.width = `${Math.max(0, Math.min(progress, 100))}%`;
  status.textContent = formatProgressText(currentProgressText);
}

function setLoadingState(shadowRoot, isLoading) {
  const status = shadowRoot.querySelector(".ipi-status");
  status.classList.toggle("ipi-loading", isLoading);
  shadowRoot.querySelector(".ipi-textarea").readOnly = isLoading;
}

function setStatus(shadowRoot, text) {
  shadowRoot.querySelector(".ipi-status").textContent = text;
}

function shadowSafeHidePanel(shadowRoot) {
  shadowRoot.querySelector(".ipi-panel")?.setAttribute("hidden", "");
}

function startProgressTimer() {
  generationStartedAt = Date.now();
  currentProgressText = "";
  window.clearInterval(progressTimerId);
  progressTimerId = window.setInterval(() => {
    if (!isGenerating) {
      return;
    }

    const panel = document.getElementById(PANEL_ROOT_ID)?.shadowRoot;
    const status = panel?.querySelector(".ipi-status");
    if (status) {
      status.textContent = formatProgressText(currentProgressText);
    }
  }, 100);
}

function stopProgressTimer() {
  window.clearInterval(progressTimerId);
  progressTimerId = 0;
}

function formatProgressText(text) {
  if (!text) {
    return "";
  }

  if (!generationStartedAt) {
    return text;
  }

  const elapsedSeconds = ((Date.now() - generationStartedAt) / 1000).toFixed(1);
  return `${text} · ${elapsedSeconds}s`;
}

function setError(shadowRoot, text) {
  const errorEl = shadowRoot.querySelector(".ipi-error");
  if (!errorEl) return;

  if (text) {
    errorEl.textContent = text;
    errorEl.setAttribute("data-visible", "true");
  } else {
    errorEl.textContent = "";
    errorEl.removeAttribute("data-visible");
  }
}

function setTextareaValue(shadowRoot, value) {
  const textarea = shadowRoot.querySelector(".ipi-textarea");
  if (!textarea) return;

  if (isJsonMode && currentPrompts) {
    // Build complete structured JSON with all visual analysis fields
    const jsonData = {};
    // Structured visual analysis fields (in logical analysis order)
    if (currentPrompts.image_type) jsonData.image_type = currentPrompts.image_type;
    if (currentPrompts.aspect_ratio) jsonData.aspect_ratio = currentPrompts.aspect_ratio;
    if (currentPrompts.background) jsonData.background = currentPrompts.background;
    if (currentPrompts.subject) jsonData.subject = currentPrompts.subject;
    if (currentPrompts.surrounding_elements)
      jsonData.surrounding_elements = currentPrompts.surrounding_elements;
    if (currentPrompts.composition) jsonData.composition = currentPrompts.composition;
    if (currentPrompts.text_content) jsonData.text_content = currentPrompts.text_content;
    if (currentPrompts.style) jsonData.style = currentPrompts.style;
    if (currentPrompts.lighting) jsonData.lighting = currentPrompts.lighting;
    if (currentPrompts.color_palette) jsonData.color_palette = currentPrompts.color_palette;
    if (currentPrompts.negative) jsonData.negative = currentPrompts.negative;
    if (currentPrompts.parameters) jsonData.parameters = currentPrompts.parameters;

    if (Object.keys(jsonData).length > 0) {
      textarea.value = JSON.stringify(jsonData, null, 2);
      return;
    }
  }

  textarea.value = value || "";
}

function setPreview(shadowRoot, src) {
  const preview = shadowRoot.querySelector(".ipi-preview");
  if (!preview) {
    return;
  }

  preview.removeAttribute("data-loaded");
  if (!src) {
    preview.removeAttribute("src");
    return;
  }

  preview.src = src;
}

function setCopyButtonState(shadowRoot, state) {
  const button = shadowRoot.querySelector('[data-action="copy"]');
  if (!button) {
    return;
  }

  const dict = UI_STRINGS[uiLanguage] || UI_STRINGS.zh;
  window.clearTimeout(setCopyButtonState.timerId);
  button.dataset.state = state;
  button.textContent = state === "done" ? dict.copied : dict.copyBtn;

  if (state === "done") {
    setCopyButtonState.timerId = window.setTimeout(() => {
      button.dataset.state = "idle";
      button.textContent = dict.copyBtn;
    }, 1600);
  }
}

function resetCopyButton(shadowRoot) {
  setCopyButtonState(shadowRoot, "idle");
}

function setContentVisibility(shadowRoot, visible) {
  const sheet = shadowRoot.querySelector(".ipi-sheet");
  if (!sheet) {
    return;
  }
  sheet.setAttribute("data-visible", String(visible));
}

function setStopButtonState(shadowRoot, enabled) {
  const button = shadowRoot.querySelector('[data-action="stop"]');
  if (!button) {
    return;
  }
  button.hidden = !enabled;
  button.disabled = !enabled;
}

function setScannerVisibility(shadowRoot, visible) {
  const stage = shadowRoot.querySelector(".ipi-stage");
  if (stage) {
    stage.setAttribute("data-scanning", String(visible));
  }
}

function startDragging(event) {
  const host = document.getElementById(PANEL_ROOT_ID);
  if (!host) {
    return;
  }

  // Don't start dragging if clicking on interactive elements like buttons or textareas
  const target = event.target;
  if (
    target.tagName === "BUTTON" ||
    target.tagName === "TEXTAREA" ||
    target.closest("button") ||
    target.closest("textarea")
  ) {
    return;
  }

  const rect = host.getBoundingClientRect();
  dragState = {
    pointerId: event.pointerId,
    offsetX: event.clientX - rect.left,
    offsetY: event.clientY - rect.top,
  };

  host.style.right = "auto";
  host.style.left = `${rect.left}px`;
  host.style.top = `${rect.top}px`;

  window.addEventListener("pointermove", onDragMove);
  window.addEventListener("pointerup", stopDragging);
  window.addEventListener("pointercancel", stopDragging);
  event.preventDefault();
}

function onDragMove(event) {
  if (!dragState || event.pointerId !== dragState.pointerId) {
    return;
  }

  const host = document.getElementById(PANEL_ROOT_ID);
  if (!host) {
    return;
  }

  const nextLeft = Math.min(
    Math.max(8, event.clientX - dragState.offsetX),
    window.innerWidth - host.offsetWidth - 8,
  );
  const nextTop = Math.min(
    Math.max(8, event.clientY - dragState.offsetY),
    window.innerHeight - host.offsetHeight - 8,
  );

  host.style.left = `${nextLeft}px`;
  host.style.top = `${nextTop}px`;
}

function stopDragging(event) {
  if (!dragState || (event && event.pointerId !== dragState.pointerId)) {
    return;
  }

  dragState = null;
  window.removeEventListener("pointermove", onDragMove);
  window.removeEventListener("pointerup", stopDragging);
  window.removeEventListener("pointercancel", stopDragging);
}

function trackEvent(event, properties = {}) {
  safeSendRuntimeMessage(
    {
      type: "analytics:track",
      event,
      properties,
    },
    () => {
      void chrome.runtime.lastError;
    },
  );
}