(function exposeSharedComponents(global) {
  "use strict";

  const ui = global.XiaobaiUI;
  if (!ui) throw new Error("XiaobaiUI must load before shared components");

  function resolveElement(target, root = document) {
    if (target instanceof Element) return target;
    if (typeof target !== "string" || !target) return null;
    return target.startsWith("#") ? root.querySelector(target) : root.getElementById?.(target);
  }

  function classNames(...values) {
    return values.flatMap((value) => String(value || "").split(/\s+/)).filter(Boolean).join(" ");
  }

  function emptyStateHtml(message, options = {}) {
    const classes = classNames("empty-state", options.className);
    const attributes = options.role ? ` role="${ui.escapeHtml(options.role)}"` : "";
    return `<div class="${ui.escapeHtml(classes)}"${attributes}>${ui.escapeHtml(message)}</div>`;
  }

  function renderEmptyState(target, message, options = {}) {
    const element = resolveElement(target, options.root);
    if (!element) return false;
    element.innerHTML = emptyStateHtml(message, options);
    return true;
  }

  function setText(target, value, options = {}) {
    const element = resolveElement(target, options.root);
    if (!element) return false;
    element.textContent = value == null ? "" : String(value);
    return true;
  }

  function renderCollection(target, items, renderItem, options = {}) {
    const element = resolveElement(target, options.root);
    if (!element) return 0;
    const rows = Array.isArray(items) ? items : [];
    element.innerHTML = rows.length
      ? rows.map((item, index) => renderItem(item, index)).join("")
      : emptyStateHtml(options.emptyMessage || "", options.emptyOptions);
    return rows.length;
  }

  global.XiaobaiComponents = Object.freeze({
    classNames,
    emptyStateHtml,
    renderCollection,
    renderEmptyState,
    setText,
  });
})(window);