(() => {
  "use strict";

  const params = new URLSearchParams(window.location.search);
  const byId = (id) => document.getElementById(id);
  const dom = {
    app: byId("support-app"),
    title: byId("channel-title"),
    subtitle: byId("channel-subtitle"),
    statusDot: byId("header-status-dot"),
    connectionBadge: byId("connection-badge"),
    connectionLabel: byId("connection-label"),
    retry: byId("retry-button"),
    close: byId("close-button"),
    scroller: byId("message-scroller"),
    loadMore: byId("load-more"),
    loading: byId("loading-state"),
    empty: byId("empty-state"),
    list: byId("message-list"),
    status: byId("status-bar"),
    queueStatus: byId("queue-status"),
    queueTitle: byId("queue-title"),
    queuePosition: byId("queue-position"),
    queueDetail: byId("queue-detail"),
    queueWait: byId("queue-wait"),
    queueEta: byId("queue-eta"),
    quickSection: byId("quick-section"),
    quickButton: byId("quick-button"),
    input: byId("message-input"),
    imageInput: byId("image-input"),
    fileInput: byId("file-input"),
    imageButton: byId("image-button"),
    fileButton: byId("file-button"),
    pendingUploads: byId("pending-uploads"),
    send: byId("send-button"),
    quickOverlay: byId("quick-overlay"),
    quickClose: byId("quick-close"),
    quickList: byId("quick-list"),
    quickEmpty: byId("quick-empty"),
    closeOverlay: byId("close-overlay"),
    closeDialogX: byId("close-dialog-x"),
    continueButton: byId("continue-button"),
    confirmClose: byId("confirm-close-button"),
    toasts: byId("toast-region"),
  };

  const channelId = (params.get("channel_id") || "").trim();
  const apiBase = getApiBase();
  const accessTarget = getAccessTarget();
  const identity = getIdentity();
  const state = {
    conversation: null,
    messages: [],
    cursor: "",
    hasMore: false,
    loadingOlder: false,
    sending: false,
    closing: false,
    initializing: false,
    initialized: false,
    quickActions: [],
    socket: null,
    reconnectTimer: null,
    pingTimer: null,
    reconnectAttempt: 0,
    allowReconnect: true,
    pendingUploads: [],
    queueRefreshTimer: null,
    queueTickTimer: null,
    queueSyncedAt: 0,
    initialScrollSettling: false,
    chatBinding: accessTarget ? loadChatBinding(accessTarget) : "",
  };

  class CustomerSessionRefreshError extends Error {}

  function getApiBase() {
    const explicit = (params.get("api_base_url") || "").trim();
    if (explicit) return explicit.replace(/\/$/, "");
    const marker = "/support/chat";
    const index = window.location.pathname.indexOf(marker);
    const prefix = index >= 0 ? window.location.pathname.slice(0, index) : "";
    return `${prefix}/api`;
  }

  function getIdentity() {
    let external_id = (params.get("external_id") || "").trim();
    let external_name = (params.get("external_name") || "").trim();
    const userId = (params.get("user_id") || "").trim();
    if (!external_id && userId) {
      external_id = `mall_user:${userId}`;
      if (!external_name) external_name = `商城用户 ${userId}`;
    }
    if (!external_id) {
      const storageKey = "agent_desk_guest_id";
      external_id = localStorage.getItem(storageKey) || `guest_${randomId()}`;
      localStorage.setItem(storageKey, external_id);
      if (!external_name) external_name = `访客${external_id.slice(-8)}`;
    }
    return {
      external_id,
      external_name: external_name || "访客",
      userId,
    };
  }

  function getAccessTarget() {
    const fragment = new URLSearchParams(window.location.hash.replace(/^#/, ""));
    const fragmentType = (fragment.get("identity_type") || "").trim().toLowerCase();
    const fragmentNumber = (fragment.get("identity") || "").trim();
    const legacyCard = (params.get("card_no") || "").trim();
    const legacyDevice = (params.get("device_no") || "").trim();
    let target = null;
    if ((fragmentType === "card" || fragmentType === "device") && validAccessNumber(fragmentNumber)) {
      target = { type: fragmentType, number: fragmentNumber };
    } else if (validAccessNumber(legacyCard)) {
      target = { type: "card", number: legacyCard };
    } else if (validAccessNumber(legacyDevice)) {
      target = { type: "device", number: legacyDevice };
    }
    if (target) {
      writeSessionStorage(accessTargetStorageKey(), JSON.stringify(target));
      return target;
    }
    try {
      const stored = JSON.parse(readSessionStorage(accessTargetStorageKey()) || "null");
      if (stored && (stored.type === "card" || stored.type === "device") && validAccessNumber(stored.number)) {
        return { type: stored.type, number: String(stored.number).trim() };
      }
    } catch (_) {
      // Invalid per-tab state is ignored and cannot become an identity proof.
    }
    return null;
  }

  function validAccessNumber(value) {
    const text = String(value || "").trim();
    return text.length > 0 && text.length <= 128 && !/[\u0000-\u001f\u007f]/.test(text);
  }

  function accessTargetStorageKey() {
    return `agent_desk_support_target:${window.location.pathname}:${channelId}`;
  }

  function chatBindingStorageKey(target) {
    return `agent_desk_support_binding:${window.location.pathname}:${channelId}:${target.type}:${target.number}`;
  }

  function loadChatBinding(target) {
    return String(readSessionStorage(chatBindingStorageKey(target)) || "").trim();
  }

  function readSessionStorage(key) {
    try {
      return window.sessionStorage.getItem(key);
    } catch (_) {
      return null;
    }
  }

  function writeSessionStorage(key, value) {
    try {
      window.sessionStorage.setItem(key, value);
    } catch (_) {
      // Private browsing may disable session storage; the chat entry can be
      // established again on the next navigation.
    }
  }

  function removeSessionStorage(key) {
    try {
      window.sessionStorage.removeItem(key);
    } catch (_) {
      // Ignore inaccessible browser storage.
    }
  }

  function randomId() {
    if (window.crypto && window.crypto.randomUUID) return window.crypto.randomUUID().replace(/-/g, "");
    return `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 12)}`;
  }

  function lastItem(items) {
    return Array.isArray(items) && items.length ? items[items.length - 1] : undefined;
  }

  function replaceChildrenCompat(element, children) {
    while (element.firstChild) element.removeChild(element.firstChild);
    (children || []).forEach((child) => element.appendChild(child));
  }

  function clientMessageId(prefix = "support_chat") {
    return `${prefix}_${Date.now()}_${randomId().slice(0, 8)}`;
  }

  async function request(path, options = {}) {
    const headers = new Headers(options.headers || {});
    headers.set("X-Channel-Id", channelId);
    headers.set("X-External-Id", identity.external_id);
    headers.set("X-External-Name", encodeURIComponent(identity.external_name));
    headers.set("Accept", "application/json");
    if (accessTarget) {
      headers.set("X-H5-Chat-Session", "required");
      if (state.chatBinding) headers.set("X-H5-Chat-Binding", state.chatBinding);
    }
    if (options.body && !(options.body instanceof FormData)) {
      headers.set("Content-Type", "application/json");
    }
    let response;
    try {
      response = await fetch(`${apiBase}${path}`, Object.assign({}, options, {
        headers,
        cache: "no-store",
        credentials: "include",
      }));
    } catch (_) {
      throw new Error("网络连接失败，请检查网络后重试");
    }
    let payload;
    try {
      payload = await response.json();
    } catch (_) {
      throw new Error("客服服务暂时不可用，请稍后重试");
    }
    if (!response.ok || (payload && payload.ok === false) || (payload && payload.success === false)) {
      const value = payload && (payload.msg || payload.message || payload.code);
      if (accessTarget && isCustomerSessionError(value, response.status)) {
        clearChatBinding();
        window.location.reload();
        throw new CustomerSessionRefreshError("正在重新连接客服");
      }
      throw new Error(chineseError(value));
    }
    return Object.prototype.hasOwnProperty.call(payload || {}, "data") ? payload.data : payload;
  }

  function isCustomerSessionError(value, status) {
    const text = String(value || "");
    return status === 401 || /unauthorized|身份验证|二次验证|重新验证|验证已失效/i.test(text);
  }

  function targetQuery(target = accessTarget) {
    const query = new URLSearchParams();
    if (target && target.type === "card") query.set("card_no", target.number);
    if (target && target.type === "device") query.set("device_no", target.number);
    return query;
  }

  function h5AccessURL(path) {
    const url = new URL(`/h5api${path}`, window.location.origin);
    const query = targetQuery();
    query.forEach((value, key) => url.searchParams.set(key, value));
    return url;
  }

  async function h5AccessRequest(path, options = {}) {
    let response;
    try {
      response = await fetch(h5AccessURL(path), Object.assign({}, options, {
        cache: "no-store",
        credentials: "include",
        headers: Object.assign({ Accept: "application/json" }, options.headers || {}),
      }));
    } catch (_) {
      throw new Error("网络连接失败，请检查网络后重试");
    }
    let payload;
    try {
      payload = await response.json();
    } catch (_) {
      throw new Error("客服入口暂时不可用，请稍后重试");
    }
    if (!response.ok || (payload && payload.ok === false) || (payload && payload.success === false)) {
      throw new Error(chineseError(payload && (payload.msg || payload.message || payload.code)));
    }
    return Object.prototype.hasOwnProperty.call(payload || {}, "data") ? payload.data : payload;
  }

  async function establishCustomerChatSession() {
    if (!accessTarget) return false;
    try {
      const entry = await h5AccessRequest("/access/chat-entry", {
        method: "POST",
        body: "{}",
        headers: { "Content-Type": "application/json" },
      });
      const ticket = String((entry && entry.ticket) || "").trim();
      const binding = String((entry && entry.session_binding) || "").trim();
      if (!ticket || !binding) throw new Error("客服入口无效，请重试");
      state.chatBinding = binding;
      writeSessionStorage(chatBindingStorageKey(accessTarget), binding);
      const destination = new URL(window.location.href);
      destination.searchParams.delete("card_no");
      destination.searchParams.delete("device_no");
      destination.searchParams.delete("external_id");
      destination.searchParams.delete("external_name");
      destination.searchParams.set("access_ticket", ticket);
      destination.hash = "";
      window.location.replace(destination.toString());
      return true;
    } catch (error) {
      clearChatBinding();
      fatal(error instanceof Error ? error.message : "客服入口建立失败，请重试");
      return false;
    }
  }

  function clearChatBinding() {
    state.chatBinding = "";
    if (accessTarget) removeSessionStorage(chatBindingStorageKey(accessTarget));
  }

  function clearCustomerAccessState() {
    clearChatBinding();
    removeSessionStorage(accessTargetStorageKey());
  }

  function chineseError(value) {
    const text = String(value || "");
    if (/forbidden|unauthorized|auth/i.test(text)) return "身份验证失败，请重新进入客服页面";
    if (/channel/i.test(text)) return "客服渠道无效或已停用";
    if (/conversation/i.test(text)) return "当前会话不可用，请刷新后重试";
    if (/file|upload|asset/i.test(text)) return "文件上传失败，请稍后重试";
    if (/timeout/i.test(text)) return "请求超时，请稍后重试";
    if (/^[\u4e00-\u9fa5\s，。！？、：；（）【】“”‘’_-]+$/.test(text) && text.length < 80) return text;
    return "操作未完成，请稍后重试或联系人工客服";
  }

  async function init() {
    if (state.initializing) return;
    if (!channelId) {
      fatal("缺少客服渠道参数 channel_id，请从正确的客服入口进入");
      return;
    }
    if (accessTarget && !state.chatBinding) {
      state.initializing = true;
      updateConnectionStatus("connecting");
      await establishCustomerChatSession();
      state.initializing = false;
      return;
    }
    state.initializing = true;
    updateConnectionStatus("connecting");
    try {
      const config = await request(`/channel/config?channel_id=${encodeURIComponent(channelId)}`);
      applyConfig(config || {});
      state.conversation = await request("/conversation/create_or_match", { method: "POST", body: "{}" });
      state.queueSyncedAt = Date.now();
      await Promise.all([loadMessages(true), loadQuickActions()]);
      dom.loading.hidden = true;
      dom.app.setAttribute("aria-busy", "false");
      state.initialized = true;
      state.allowReconnect = true;
      updateAvailability();
      connectSocket();
    } catch (error) {
      if (error instanceof CustomerSessionRefreshError) {
        state.initialized = false;
        return;
      }
      fatal(error instanceof Error ? error.message : "客服服务暂时不可用，请稍后重试");
    } finally {
      state.initializing = false;
    }
  }

  function applyConfig(config) {
    const title = config.title || "在线客服";
    const subtitle = config.subtitle || "欢迎咨询";
    dom.title.textContent = title;
    dom.subtitle.textContent = subtitle;
    document.title = title;
    const color = /^#[0-9a-f]{6}$/i.test(config.theme_color || "") ? config.theme_color : "#2475fc";
    document.documentElement.style.setProperty("--theme", color);
    const rgb = color.match(/[0-9a-f]{2}/gi).map((item) => parseInt(item, 16)).join(", ");
    document.documentElement.style.setProperty("--theme-rgb", rgb);
    document.querySelector('meta[name="theme-color"]').setAttribute("content", color);
  }

  async function loadMessages(initial = false) {
    if (!state.conversation || !state.conversation.id) return;
    const result = await request(`/message/list?conversation_id=${state.conversation.id}&limit=50`);
    const incoming = result && Array.isArray(result.results) ? result.results : [];
    state.cursor = (result && result.cursor) || "";
    state.hasMore = Boolean(result && result.has_more) || incoming.length >= 50;
    state.messages = mergeMessages(state.messages, incoming);
    if (initial) state.initialScrollSettling = true;
    renderMessages();
    dom.loading.hidden = true;
    dom.empty.hidden = state.messages.length > 0;
    dom.loadMore.hidden = !state.hasMore;
    if (initial) settleInitialScroll();
    await markLatestRead();
  }

  async function loadOlder() {
    if (!state.hasMore || state.loadingOlder || !state.cursor || !state.conversation || !state.conversation.id) return;
    state.loadingOlder = true;
    dom.loadMore.disabled = true;
    dom.loadMore.textContent = "正在加载…";
    const oldHeight = dom.scroller.scrollHeight;
    try {
      const result = await request(`/message/list?conversation_id=${state.conversation.id}&limit=50&cursor=${encodeURIComponent(state.cursor)}`);
      state.cursor = (result && result.cursor) || "";
      state.hasMore = Boolean(result && result.has_more);
      state.messages = mergeMessages((result && result.results) || [], state.messages);
      renderMessages();
      requestAnimationFrame(() => {
        dom.scroller.scrollTop = dom.scroller.scrollHeight - oldHeight;
      });
    } catch (error) {
      toast(error instanceof Error ? error.message : "加载更早的消息失败", true);
    } finally {
      state.loadingOlder = false;
      dom.loadMore.disabled = false;
      dom.loadMore.textContent = "加载更早的消息";
      dom.loadMore.hidden = !state.hasMore;
    }
  }

  function mergeMessages(first, second) {
    const map = new Map();
    [first, second].forEach((group) => (group || []).forEach((item) => {
      if (item && item.id != null) map.set(String(item.id), item);
    }));
    return Array.from(map.values()).sort((a, b) => Number(a.id) - Number(b.id));
  }

  function renderMessages() {
    const fragment = document.createDocumentFragment();
    state.messages.forEach((message, index) => {
      const previous = index > 0 ? state.messages[index - 1] : null;
      if (!previous || dayKey(previous.sent_at) !== dayKey(message.sent_at)) {
        const timeline = document.createElement("div");
        timeline.className = "timeline";
        const label = document.createElement("span");
        label.textContent = timelineLabel(message.sent_at);
        timeline.append(label);
        fragment.append(timeline);
      }
      fragment.append(createMessageElement(message));
    });
    replaceChildrenCompat(dom.list, [fragment]);
    dom.empty.hidden = state.messages.length > 0;
  }

  function createMessageElement(message) {
    const sender = String(message.sender_type || "customer");
    const mine = sender === "customer";
    const system = sender === "system";
    const row = document.createElement("article");
    row.className = `message-row ${sender}${mine ? " mine" : ""}${system ? " system" : ""}`;
    const copy = document.createElement("div");
    copy.className = "message-copy";
    const meta = document.createElement("div");
    meta.className = "message-meta";
    const name = document.createElement("span");
    name.className = "message-sender";
    name.textContent = senderName(message);
    const time = document.createElement("time");
    time.textContent = formatDateTime(message.sent_at);
    meta.append(name, time);
    if (mine && !system) {
      const read = document.createElement("span");
      read.textContent = message.agent_read ? "客服已读" : "客服未读";
      meta.append(read);
    }
    const bubble = document.createElement("div");
    bubble.className = "message-bubble";
    renderMessageBody(bubble, message);
    copy.append(meta, bubble);
    if (system) row.append(copy);
    else if (mine) row.append(copy);
    else row.append(avatar(message), copy);
    return row;
  }

  function avatar(message) {
    const node = document.createElement("span");
    node.className = "message-avatar";
    const name = senderName(message);
    const fallback = (name || "客服").slice(0, 1).toUpperCase();
    if (message.sender_avatar) {
      const image = document.createElement("img");
      image.src = message.sender_avatar;
      image.alt = "";
      image.addEventListener("error", () => {
        image.remove();
        node.textContent = fallback;
      }, { once: true });
      node.append(image);
      return node;
    }
    node.textContent = fallback;
    return node;
  }

  function senderName(message) {
    if (message.sender_type === "customer") return "我";
    if (message.sender_name) return message.sender_name;
    if (message.sender_type === "ai") return "AI 客服";
    if (message.sender_type === "agent") return "客服";
    if (message.sender_type === "system") return "系统消息";
    return "客服";
  }

  function renderMessageBody(container, message) {
    if (message.recalled_at || Number(message.send_status) === 6) {
      container.textContent = "该消息已撤回";
      return;
    }
    const type = String(message.message_type || "text").toLowerCase();
    const payload = parsePayload(message.payload);
    if (type === "image") {
      const assets = Array.isArray(payload.assets) && payload.assets.length ? payload.assets : [payload];
      const gallery = document.createElement("div");
      gallery.className = `message-image-grid count-${Math.min(assets.length, 9)}`;
      assets.slice(0, 9).forEach((asset) => {
        const image = document.createElement("img");
        image.src = (asset && asset.url) || "";
        image.alt = (asset && asset.filename) || "聊天图片";
        image.loading = "eager";
        image.addEventListener("load", () => {
          if (state.initialScrollSettling) scrollToBottom(false);
        });
        image.addEventListener("error", () => {
          if (state.initialScrollSettling) scrollToBottom(false);
        });
        image.addEventListener("click", () => window.open(image.src, "_blank", "noopener"));
        gallery.append(image);
      });
      container.append(gallery);
      if (String(message.content || "").trim()) {
        const caption = document.createElement("div");
        caption.className = "message-image-caption";
        caption.append(sanitizeHtml(message.content || ""));
        container.append(caption);
      }
      return;
    }
    if (type === "attachment") {
      const link = document.createElement("a");
      link.className = "attachment-card";
      link.href = payload.url || message.content || "#";
      link.target = "_blank";
      link.rel = "noopener";
      link.innerHTML = '<span class="attachment-icon"><svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/></svg></span>';
      const text = document.createElement("span");
      text.className = "attachment-copy";
      const strong = document.createElement("strong");
      strong.textContent = payload.filename || message.content || "查看附件";
      const small = document.createElement("small");
      small.textContent = formatBytes(payload.file_size);
      text.append(strong, small);
      link.append(text);
      container.append(link);
      return;
    }
    if (type === "html") {
      container.append(sanitizeHtml(message.content || ""));
      return;
    }
    container.append(sanitizeHtml(toSafeHtml(message.content || "")));
  }

  function sanitizeHtml(html) {
    const parsed = new DOMParser().parseFromString(`<div>${html}</div>`, "text/html");
    const root = parsed.body.firstElementChild;
    const allowedTags = new Set([
      "A", "B", "BLOCKQUOTE", "BR", "CODE", "EM", "I", "LI",
      "OL", "P", "PRE", "S", "SPAN", "STRONG", "U", "UL",
    ]);
    const blockedTags = new Set([
      "EMBED", "FORM", "IFRAME", "INPUT", "LINK", "META", "OBJECT",
      "SCRIPT", "STYLE", "TEMPLATE",
    ]);
    Array.from(root.querySelectorAll("*")).forEach((node) => {
      if (blockedTags.has(node.tagName)) {
        if (node.parentNode) node.parentNode.removeChild(node);
        return;
      }
      if (!allowedTags.has(node.tagName)) {
        const parent = node.parentNode;
        if (parent) {
          while (node.firstChild) parent.insertBefore(node.firstChild, node);
          parent.removeChild(node);
        }
        return;
      }
      Array.from(node.attributes).forEach((attr) => {
        if (node.tagName !== "A" || !["href", "title"].includes(attr.name.toLowerCase())) {
          node.removeAttribute(attr.name);
        }
      });
      if (node.tagName === "A") {
        const href = String(node.getAttribute("href") || "").trim();
        const schemeMatch = href.match(/^([a-z][a-z0-9+.-]*):/i);
        const scheme = schemeMatch && schemeMatch[1] ? schemeMatch[1].toLowerCase() : "";
        if (scheme && !["http", "https", "mailto", "tel"].includes(scheme)) {
          node.removeAttribute("href");
        }
        if (node.hasAttribute("href")) {
          node.setAttribute("target", "_blank");
          node.setAttribute("rel", "noopener noreferrer nofollow");
        }
      }
    });
    const fragment = document.createDocumentFragment();
    Array.from(root.childNodes).forEach((node) => fragment.appendChild(document.importNode(node, true)));
    return fragment;
  }

  function parsePayload(value) {
    if (value && typeof value === "object") return value;
    try {
      return JSON.parse(value || "{}");
    } catch (_) {
      return {};
    }
  }

  function parseDate(value) {
    if (!value) return null;
    const date = new Date(String(value).replace(" ", "T"));
    return Number.isNaN(date.getTime()) ? null : date;
  }

  function dayKey(value) {
    const date = parseDate(value);
    if (!date) return String(value || "unknown").slice(0, 10);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
  }

  function timelineLabel(value) {
    const date = parseDate(value);
    if (!date) return "刚刚";
    const time = `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
    if (dayKey(value) === dayKey(new Date().toISOString())) return `今天 ${time}`;
    return `${dayKey(value)} ${time}`;
  }

  function formatDateTime(value) {
    const date = parseDate(value);
    if (!date) return String(value || "");
    return new Intl.DateTimeFormat("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      hour12: false,
    }).format(date);
  }

  function formatBytes(value) {
    const size = Number(value || 0);
    if (!size) return "附件";
    if (size < 1024) return `${size} B`;
    if (size < 1048576) return `${(size / 1024).toFixed(1)} KB`;
    return `${(size / 1048576).toFixed(1)} MB`;
  }

  function toSafeHtml(text) {
    const div = document.createElement("div");
    div.textContent = String(text || "").replace(/\r\n?/g, "\n");
    const paragraphs = div.innerHTML
      .split(/\n{2,}/)
      .map((paragraph) => `<p>${paragraph.replace(/\n/g, "<br>")}</p>`);
    return paragraphs.join("");
  }

  function stageFiles(files, kind) {
    if (!files.length || !canSend() || state.sending) return;
    const accepted = files.filter((file) => {
      if (file.size > 20 * 1024 * 1024) {
        toast(`${file.name || "文件"}不能超过 20MB`, true);
        return false;
      }
      if (kind === "image" && !String(file.type || "").startsWith("image/")) {
        toast(`${file.name || "所选文件"}不是图片`, true);
        return false;
      }
      return true;
    });
    if (!accepted.length) return;

    if (kind !== "image" || state.pendingUploads.some((pending) => pending.kind !== "image")) {
      clearPendingUploads();
    }
    const remaining = kind === "image" ? Math.max(0, 9 - state.pendingUploads.length) : 1;
    if (accepted.length > remaining) toast("每次最多发送 9 张图片", true);
    accepted.slice(0, remaining).forEach((file) => {
      state.pendingUploads.push({
        file,
        kind,
        previewUrl: kind === "image" ? URL.createObjectURL(file) : "",
      });
    });
    renderPendingUploads();
    updateAvailability();
  }

  function renderPendingUploads() {
    replaceChildrenCompat(dom.pendingUploads, []);
    dom.pendingUploads.hidden = state.pendingUploads.length === 0;
    state.pendingUploads.forEach((pending) => {
      const image = pending.kind === "image";
      const item = document.createElement("div");
      item.className = `pending-upload${image ? " pending-upload-image" : ""}`;
      item.dataset.kind = pending.kind;

      const preview = document.createElement("div");
      preview.className = "pending-upload-preview";
      preview.setAttribute("aria-hidden", "true");
      if (image) {
        const img = document.createElement("img");
        img.alt = "";
        img.src = pending.previewUrl;
        preview.append(img);
      } else {
        const icon = document.createElement("span");
        icon.className = "pending-upload-file-icon";
        icon.innerHTML = '<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/></svg>';
        preview.append(icon);
      }

      let copy = null;
      if (!image) {
        copy = document.createElement("div");
        copy.className = "pending-upload-copy";
        const name = document.createElement("strong");
        name.textContent = pending.file.name || "附件";
        const meta = document.createElement("span");
        meta.textContent = `附件 · ${formatBytes(pending.file.size)}`;
        copy.append(name, meta);
      }

      const remove = document.createElement("button");
      remove.className = "pending-upload-remove";
      remove.type = "button";
      remove.disabled = state.sending;
      remove.setAttribute("aria-label", "移除待发送文件");
      remove.title = "移除";
      remove.innerHTML = '<svg viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18"/></svg>';
      remove.addEventListener("click", () => removePendingUpload(pending));
      item.append(preview);
      if (copy) item.append(copy);
      item.append(remove);
      dom.pendingUploads.append(item);
    });
  }

  function removePendingUpload(pending) {
    const index = state.pendingUploads.indexOf(pending);
    if (index < 0) return;
    if (pending.previewUrl) URL.revokeObjectURL(pending.previewUrl);
    state.pendingUploads.splice(index, 1);
    renderPendingUploads();
    updateAvailability();
  }

  function clearPendingUploads() {
    state.pendingUploads.forEach((pending) => {
      if (pending.previewUrl) URL.revokeObjectURL(pending.previewUrl);
    });
    state.pendingUploads = [];
    replaceChildrenCompat(dom.pendingUploads, []);
    dom.pendingUploads.hidden = true;
    dom.imageInput.value = "";
    dom.fileInput.value = "";
    updateAvailability();
  }

  async function createMessage(messageType, content, payload) {
    const message = await request("/message/send", {
      method: "POST",
      body: JSON.stringify({
        conversation_id: state.conversation.id,
        message_type: messageType,
        content,
        payload,
        client_msg_id: clientMessageId(messageType === "html" ? "support_chat_html" : "support_chat_asset"),
      }),
    });
    state.messages = mergeMessages(state.messages, [message]);
    renderMessages();
    scrollToBottom();
  }

  async function uploadPendingFile(pending) {
    const form = new FormData();
    form.append("conversation_id", String(state.conversation.id));
    form.append("file", pending.file);
    const asset = await request(`/message/${pending.kind === "image" ? "upload_image" : "upload_attachment"}`, { method: "POST", body: form });
    return {
      asset_id: asset.asset_id,
      filename: asset.filename,
      file_size: asset.file_size,
      mime_type: asset.mime_type,
      url: asset.url,
    };
  }

  async function sendComposer() {
    const content = dom.input.value.trim();
    const pending = state.pendingUploads.slice();
    if ((!content && !pending.length) || state.sending || !canSend()) return;

    state.sending = true;
    updateAvailability();
    try {
      if (pending.length && pending.every((item) => item.kind === "image")) {
        const assets = [];
        for (const item of pending) assets.push(await uploadPendingFile(item));
        await createMessage("image", content ? toSafeHtml(content) : "", JSON.stringify({ assets }));
        dom.input.value = "";
        clearPendingUploads();
        autoResizeInput();
      } else {
        for (const item of pending) {
          const asset = await uploadPendingFile(item);
          await createMessage(item.kind, asset.filename || item.file.name, JSON.stringify(asset));
          removePendingUpload(item);
        }
      }
      if (content && (!pending.length || pending.some((item) => item.kind !== "image"))) {
        await createMessage("html", toSafeHtml(content), "");
        dom.input.value = "";
        autoResizeInput();
      }
    } catch (error) {
      toast(error instanceof Error ? error.message : "发送消息失败", true);
    } finally {
      state.sending = false;
      updateAvailability();
    }
  }

  async function loadQuickActions() {
    try {
      const actions = await request(`/conversation/quick_actions?conversation_id=${state.conversation.id}`);
      state.quickActions = Array.isArray(actions) ? actions : [];
    } catch (_) {
      state.quickActions = [];
    }
    renderQuickActions();
  }

  function renderQuickActions() {
    replaceChildrenCompat(dom.quickList, state.quickActions.map((action) => {
      const button = document.createElement("button");
      button.type = "button";
      button.className = "quick-item";
      button.textContent = action.title || action.code;
      button.title = action.description || action.title || action.code;
      button.addEventListener("click", () => executeQuickAction(action));
      return button;
    }));
    dom.quickEmpty.hidden = state.quickActions.length > 0;
    dom.quickSection.hidden = state.quickActions.length === 0;
  }

  async function executeQuickAction(action) {
    if (state.sending || !canSend()) return;
    closeQuickDialog();
    state.sending = true;
    updateAvailability();
    try {
      const result = await request("/conversation/quick_action", {
        method: "POST",
        body: JSON.stringify({
          conversation_id: state.conversation.id,
          code: action.code,
          client_msg_id: clientMessageId("support_chat_quick"),
        }),
      });
      state.messages = mergeMessages(state.messages, [result && result.customer_message, result && result.reply_message].filter(Boolean));
      renderMessages();
      scrollToBottom();
    } catch (error) {
      toast(error instanceof Error ? error.message : "快捷服务执行失败", true);
    } finally {
      state.sending = false;
      updateAvailability();
    }
  }

  async function markLatestRead() {
    const latest = lastItem(state.messages);
    if (!latest || !state.conversation || !state.conversation.id) return;
    try {
      await request("/message/read", {
        method: "POST",
        body: JSON.stringify({ conversation_id: state.conversation.id, message_id: Number(latest.id) }),
      });
    } catch (_) {
      // Read receipt failure must not interrupt chatting.
    }
  }

  function canSend() {
    return Boolean(state.conversation && state.conversation.id) && Number(state.conversation.status) !== 4;
  }

  function updateAvailability() {
    const closed = state.conversation && Number(state.conversation.status) === 4;
    const disabled = !state.conversation || closed || state.sending;
    dom.input.disabled = disabled;
    dom.send.disabled = disabled || (!dom.input.value.trim() && !state.pendingUploads.length);
    dom.imageButton.disabled = disabled;
    dom.fileButton.disabled = disabled;
    dom.pendingUploads.querySelectorAll(".pending-upload-remove").forEach((button) => {
      button.disabled = disabled;
    });
    dom.quickButton.disabled = disabled;
    dom.status.hidden = !closed;
    if (closed) dom.status.textContent = "当前客服会话已关闭，感谢您的使用。";
    updateQueueStatus();
    syncQueueTimers();
  }

  function updateQueueStatus() {
    const conversation = state.conversation;
    const queued = Number(conversation && conversation.status) === 2 && Number((conversation && conversation.current_assignee_id) || 0) === 0;
    dom.queueStatus.hidden = !queued;
    if (!queued) return;

    const position = Math.max(1, Number(conversation.queue_position || 1));
    const ahead = Math.max(0, Number(conversation.queue_ahead_count || position - 1));
    const waiting = Math.max(position, Number(conversation.queue_waiting_count || position));
    const online = Boolean(conversation.queue_service_online);
    const waitSeconds = currentQueueWaitSeconds();
    const etaSeconds = Math.max(0, Number(conversation.queue_estimated_wait_seconds || 0));

    dom.queueTitle.textContent = online ? "人工客服排队中" : "已进入人工客服队列";
    dom.queuePosition.textContent = `第 ${position} 位`;
    if (!online) {
      dom.queueDetail.textContent = "当前为非服务时段，排队顺序已保留。你可以继续留言，客服上线后会查看并优先接入。";
    } else if (ahead > 0) {
      dom.queueDetail.textContent = `前方 ${ahead} 人，当前队列共 ${waiting} 人。等待期间可以继续留言，客服接入后会看到。`;
    } else {
      dom.queueDetail.textContent = "已排在队首，正在为你匹配客服。你可以继续留言，客服接入后会看到。";
    }
    dom.queueWait.textContent = `已等待 ${formatQueueDuration(waitSeconds)}`;
    dom.queueEta.textContent = online
      ? (etaSeconds > 0 ? `预计约 ${formatQueueDuration(etaSeconds)}` : "预计很快接入")
      : "等待客服上线";
  }

  function currentQueueWaitSeconds() {
    const baseline = Math.max(0, Number((state.conversation && state.conversation.queue_wait_seconds) || 0));
    if (!state.queueSyncedAt) return baseline;
    return baseline + Math.max(0, Math.floor((Date.now() - state.queueSyncedAt) / 1000));
  }

  function formatQueueDuration(seconds) {
    const value = Math.max(0, Number(seconds || 0));
    if (value < 60) return "不到 1 分钟";
    if (value < 3600) return `${Math.max(1, Math.ceil(value / 60))} 分钟`;
    const hours = Math.floor(value / 3600);
    const minutes = Math.ceil((value % 3600) / 60);
    return minutes > 0 ? `${hours} 小时 ${minutes} 分钟` : `${hours} 小时`;
  }

  function syncQueueTimers() {
    const queued = Number(state.conversation && state.conversation.status) === 2 && Number((state.conversation && state.conversation.current_assignee_id) || 0) === 0;
    if (!queued) {
      clearQueueTimers();
      return;
    }
    if (!state.queueTickTimer) {
      state.queueTickTimer = window.setInterval(updateQueueStatus, 1000);
    }
    if (!state.queueRefreshTimer) {
      state.queueRefreshTimer = window.setInterval(refreshConversationQueue, 15000);
    }
  }

  function clearQueueTimers() {
    if (state.queueTickTimer) window.clearInterval(state.queueTickTimer);
    if (state.queueRefreshTimer) window.clearInterval(state.queueRefreshTimer);
    state.queueTickTimer = null;
    state.queueRefreshTimer = null;
  }

  async function refreshConversationQueue() {
    if (!state.conversation || !state.conversation.id || Number(state.conversation.status) !== 2) return;
    try {
      const latest = await request(`/conversation/${state.conversation.id}`);
      state.conversation = Object.assign({}, state.conversation, latest);
      state.queueSyncedAt = Date.now();
      updateAvailability();
    } catch (_) {
      // WebSocket remains the primary update path; polling is only a recovery path.
    }
  }

  function updateConnectionStatus(status) {
    const labels = { connecting: "连接中", connected: "在线服务", disconnected: "连接已断开" };
    dom.statusDot.className = `header-status-dot ${status}`;
    dom.connectionBadge.className = `connection-badge ${status}`;
    dom.connectionLabel.textContent = labels[status] || labels.disconnected;
  }

  function websocketUrl() {
    const base = apiBase.startsWith("http://") || apiBase.startsWith("https://")
      ? apiBase.replace(/^http/, "ws")
      : `${window.location.protocol === "https:" ? "wss:" : "ws:"}//${window.location.host}${apiBase.startsWith("/") ? "" : "/"}${apiBase}`;
    const query = new URLSearchParams();
    query.set("channel_id", channelId);
    if (accessTarget) {
      query.set("h5_chat_session", "required");
      query.set("h5_chat_binding", state.chatBinding);
    } else {
      query.set("external_id", identity.external_id);
    }
    return `${base.replace(/\/$/, "")}/ws/open?${query.toString()}`;
  }

  function connectSocket() {
    if (!state.conversation || !state.conversation.id || Number(state.conversation.status) === 4) return;
    clearRealtimeTimers();
    if (state.socket) {
      const oldSocket = state.socket;
      state.socket = null;
      oldSocket.close();
    }
    state.allowReconnect = true;
    updateConnectionStatus("connecting");
    let socket;
    try {
      socket = new WebSocket(websocketUrl());
    } catch (_) {
      updateConnectionStatus("disconnected");
      scheduleReconnect();
      return;
    }
    state.socket = socket;
    socket.addEventListener("open", () => {
      if (state.socket !== socket) return;
      state.reconnectAttempt = 0;
      updateConnectionStatus("connected");
      state.pingTimer = window.setInterval(() => {
        if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify({ type: "ping" }));
      }, 20000);
    });
    socket.addEventListener("message", (event) => {
      if (state.socket !== socket) return;
      handleRealtimeMessage(event.data);
    });
    socket.addEventListener("error", () => {
      if (state.socket !== socket) return;
      updateConnectionStatus("disconnected");
    });
    socket.addEventListener("close", () => {
      if (state.socket !== socket) return;
      state.socket = null;
      clearPingTimer();
      updateConnectionStatus("disconnected");
      scheduleReconnect();
    });
  }

  function handleRealtimeMessage(raw) {
    let event;
    try {
      event = JSON.parse(raw);
    } catch (_) {
      return;
    }
    const payload = event && event.data;
    if (event && event.type === "resyncRequired") {
      loadMessages(false).catch(() => {});
      return;
    }
    if (!payload || Number(payload.conversation_id) !== Number(state.conversation && state.conversation.id)) return;
    if (event.type === "message.created") {
      const message = normalizeRealtimeMessage(payload);
      if (!message) {
        loadMessages(false).catch(() => {});
        return;
      }
      const previousLast = lastItem(state.messages);
      const previousLastId = previousLast && previousLast.id;
      state.messages = mergeMessages(state.messages, [message]);
      state.conversation.last_message_id = message.id;
      state.conversation.last_message_at = message.sent_at || state.conversation.last_message_at;
      renderMessages();
      const currentLast = lastItem(state.messages);
      if ((currentLast && currentLast.id) !== previousLastId) {
        scrollToBottom();
        markLatestRead();
      }
      return;
    }
    if (String(event.type || "").startsWith("conversation.")) {
      const patch = Object.assign({}, payload);
      delete patch.conversation_id;
      state.conversation = Object.assign({}, state.conversation, patch);
      state.queueSyncedAt = Date.now();
      applyReadState(payload);
      renderMessages();
      updateAvailability();
      if (Number(state.conversation.status) === 4) {
        clearPendingUploads();
        disconnectSocket(false);
      }
    }
  }

  function normalizeRealtimeMessage(payload) {
    if (payload.message && payload.message.id) return payload.message;
    const id = Number(payload.message_id || 0);
    const conversationId = Number(payload.conversation_id || 0);
    if (!id || !conversationId) return null;
    return {
      id,
      conversation_id: conversationId,
      sender_type: payload.sender_type || "",
      sender_id: Number(payload.sender_id || 0),
      sender_name: payload.sender_name,
      sender_avatar: payload.sender_avatar,
      message_type: payload.message_type || "text",
      content: payload.content || "",
      payload: payload.payload,
      send_status: Number(payload.send_status || 0),
      sent_at: payload.sent_at,
      customer_read: false,
      agent_read: false,
    };
  }

  function applyReadState(payload) {
    const agentReadId = Number(payload.agent_last_read_message_id || 0);
    const customerReadId = Number(payload.customer_last_read_message_id || 0);
    state.messages = state.messages.map((message) => Object.assign({}, message, {
      agent_read: message.agent_read || (agentReadId > 0 && Number(message.id) <= agentReadId),
      customer_read: message.customer_read || (customerReadId > 0 && Number(message.id) <= customerReadId),
    }));
  }

  function scheduleReconnect() {
    if (!state.allowReconnect || state.reconnectTimer || !state.conversation || !state.conversation.id || Number(state.conversation.status) === 4) return;
    const delay = Math.min(2000 * 2 ** state.reconnectAttempt, 30000);
    state.reconnectTimer = window.setTimeout(() => {
      state.reconnectTimer = null;
      state.reconnectAttempt += 1;
      connectSocket();
    }, delay);
  }

  function clearPingTimer() {
    if (state.pingTimer) window.clearInterval(state.pingTimer);
    state.pingTimer = null;
  }

  function clearRealtimeTimers() {
    clearPingTimer();
    if (state.reconnectTimer) window.clearTimeout(state.reconnectTimer);
    state.reconnectTimer = null;
  }

  function disconnectSocket(allowReconnect = false) {
    state.allowReconnect = allowReconnect;
    clearRealtimeTimers();
    const socket = state.socket;
    state.socket = null;
    if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) socket.close();
    updateConnectionStatus("disconnected");
  }

  async function retry() {
    if (!state.initialized || !state.conversation || !state.conversation.id) {
      dom.loading.hidden = false;
      dom.empty.hidden = true;
      await init();
      return;
    }
    try {
      await loadMessages(false);
    } catch (_) {
      // The socket can still reconnect when a one-time resync fails.
    }
    state.reconnectAttempt = 0;
    connectSocket();
  }

  async function closeConversation() {
    if (state.closing) return;
    if (!state.conversation || !state.conversation.id) {
      closeCloseDialog();
      closePage();
      return;
    }
    state.closing = true;
    dom.confirmClose.disabled = true;
    dom.continueButton.disabled = true;
    dom.confirmClose.textContent = "正在结束…";
    try {
      await request("/conversation/close", {
        method: "POST",
        body: JSON.stringify({ conversation_id: state.conversation.id }),
      });
      state.conversation = Object.assign({}, state.conversation, { status: 4 });
      disconnectSocket(false);
      clearCustomerAccessState();
      clearPendingUploads();
      clearQueueTimers();
      updateAvailability();
      closeCloseDialog();
      if (isEmbedded()) {
        window.parent.postMessage({ type: "agent-desk:request-close" }, "*");
      }
    } catch (error) {
      toast(error instanceof Error ? error.message : "结束会话失败", true);
    } finally {
      state.closing = false;
      dom.confirmClose.disabled = false;
      dom.continueButton.disabled = false;
      dom.confirmClose.textContent = "结束对话";
    }
  }

  function isEmbedded() {
    try {
      return window.parent !== window;
    } catch (_) {
      return false;
    }
  }

  function closePage() {
    if (isEmbedded()) {
      window.parent.postMessage({ type: "agent-desk:request-close" }, "*");
    } else if (history.length > 1) {
      history.back();
    } else {
      window.close();
    }
  }

  function scrollToBottom(smooth = true) {
    requestAnimationFrame(() => dom.scroller.scrollTo({
      top: dom.scroller.scrollHeight,
      behavior: smooth ? "smooth" : "auto",
    }));
  }

  function settleInitialScroll() {
    const startedAt = Date.now();
    let lastHeight = -1;
    let stableTicks = 0;
    const apply = () => {
      dom.scroller.scrollTop = dom.scroller.scrollHeight;
      const height = dom.scroller.scrollHeight;
      stableTicks = height === lastHeight ? stableTicks + 1 : 0;
      lastHeight = height;
      const imagesReady = Array.from(dom.list.querySelectorAll("img")).every((image) => image.complete);
      if ((imagesReady && stableTicks >= 4) || Date.now() - startedAt >= 6000) {
        dom.scroller.scrollTop = dom.scroller.scrollHeight;
        state.initialScrollSettling = false;
        return;
      }
      window.setTimeout(apply, 80);
    };
    requestAnimationFrame(() => requestAnimationFrame(apply));
  }

  function autoResizeInput() {
    dom.input.style.height = "auto";
    dom.input.style.height = `${Math.min(dom.input.scrollHeight, 160)}px`;
    updateAvailability();
  }

  async function openQuickDialog() {
    dom.quickOverlay.hidden = false;
    state.quickActions = [];
    renderQuickActions();
    await loadQuickActions();
  }

  function closeQuickDialog() {
    dom.quickOverlay.hidden = true;
  }

  function openCloseDialog() {
    dom.closeOverlay.hidden = false;
  }

  function closeCloseDialog() {
    if (!state.closing) dom.closeOverlay.hidden = true;
  }

  function toast(message, error = false) {
    const node = document.createElement("div");
    node.className = `toast${error ? " error" : ""}`;
    node.textContent = message;
    dom.toasts.append(node);
    window.setTimeout(() => node.remove(), 3200);
  }

  function fatal(message) {
    disconnectSocket(false);
    dom.loading.hidden = true;
    dom.empty.hidden = false;
    dom.empty.querySelector("p").textContent = message;
    dom.input.disabled = true;
    dom.send.disabled = true;
    dom.imageButton.disabled = true;
    dom.fileButton.disabled = true;
    dom.quickSection.hidden = true;
    dom.app.setAttribute("aria-busy", "false");
  }

  function bindEvents() {
    dom.retry.addEventListener("click", retry);
    dom.close.addEventListener("click", openCloseDialog);
    dom.loadMore.addEventListener("click", loadOlder);
    dom.send.addEventListener("click", sendComposer);
    dom.input.addEventListener("input", autoResizeInput);
    dom.imageButton.addEventListener("click", () => dom.imageInput.click());
    dom.fileButton.addEventListener("click", () => dom.fileInput.click());
    dom.imageInput.addEventListener("change", () => {
      stageFiles(Array.from(dom.imageInput.files || []), "image");
      dom.imageInput.value = "";
    });
    dom.fileInput.addEventListener("change", () => {
      stageFiles(Array.from(dom.fileInput.files || []).slice(0, 1), "attachment");
      dom.fileInput.value = "";
    });
    dom.quickButton.addEventListener("click", openQuickDialog);
    dom.quickClose.addEventListener("click", closeQuickDialog);
    dom.quickOverlay.addEventListener("click", (event) => {
      if (event.target === dom.quickOverlay) closeQuickDialog();
    });
    dom.closeDialogX.addEventListener("click", closeCloseDialog);
    dom.continueButton.addEventListener("click", closeCloseDialog);
    dom.confirmClose.addEventListener("click", closeConversation);
    dom.closeOverlay.addEventListener("click", (event) => {
      if (event.target === dom.closeOverlay) closeCloseDialog();
    });
    dom.scroller.addEventListener("scroll", () => {
      if (!state.initialScrollSettling && dom.scroller.scrollTop < 24) loadOlder();
    });
    document.addEventListener("visibilitychange", () => {
      if (!document.hidden && state.initialized) {
        loadMessages(false).catch(() => {});
        if (!state.socket) connectSocket();
      }
    });
    window.addEventListener("message", (event) => {
      const type = event.data && event.data.type;
      if (type === "agent-desk:open" && state.initialized && !state.socket) connectSocket();
      if (type === "agent-desk:minimize") disconnectSocket(false);
    });
    window.addEventListener("beforeunload", () => {
      state.pendingUploads.forEach((pending) => {
        if (pending.previewUrl) URL.revokeObjectURL(pending.previewUrl);
      });
      disconnectSocket(false);
      clearQueueTimers();
    });
    document.addEventListener("keydown", (event) => {
      if (event.key !== "Escape") return;
      if (!dom.quickOverlay.hidden) closeQuickDialog();
      else if (!dom.closeOverlay.hidden) closeCloseDialog();
    });
  }

  bindEvents();
  if (isEmbedded()) window.parent.postMessage({ type: "agent-desk:ready" }, "*");
  init();
})();