// Icon — Lucide SVG renderer.
// Accepts either a Lucide PascalCase name ("Search") or a Tabler-style class ("ti-search")
// so existing call sites keep working.

// React hooks (Babel-standalone — make hooks visible per-script)
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;

const TI_TO_LUCIDE = {
  "ti-layout-dashboard":  "LayoutDashboard",
  "ti-list-search":       "ListFilter",
  "ti-affiliate":         "Share2",
  "ti-file-text":         "FileText",
  "ti-rss":               "Rss",
  "ti-folder":            "Folder",
  "ti-bookmark":          "Bookmark",
  "ti-plus":              "Plus",
  "ti-settings":          "Settings",
  "ti-search":            "Search",
  "ti-bell":              "Bell",
  "ti-info-circle":       "Info",
  "ti-chevron-down":      "ChevronDown",
  "ti-chevron-right":     "ChevronRight",
  "ti-chevron-up":        "ChevronUp",
  "ti-chevron-left":      "ChevronLeft",
  "ti-x":                 "X",
  "ti-check":             "Check",
  "ti-arrow-up":          "ArrowUp",
  "ti-arrow-down":        "ArrowDown",
  "ti-shield-half":       "ShieldHalf",
  "ti-shield-check":      "ShieldCheck",
  "ti-alert-triangle":    "TriangleAlert",
  "ti-flag-3":            "Flag",
  "ti-circle-dot":        "CircleDot",
  "ti-circle-check":      "CircleCheck",
  "ti-external-link":     "ExternalLink",
  "ti-message-circle":    "MessageCircle",
  "ti-send":              "Send",
  "ti-download":          "Download",
  "ti-file-type-pdf":     "FileText",
  "ti-markdown":          "FileCode",
  "ti-code":              "Code",
  "ti-users":             "Users",
  "ti-filter":            "Filter",
};

function _luName(name) {
  if (!name) return null;
  if (name.startsWith("ti-")) return TI_TO_LUCIDE[name] || null;
  return name;
}

function _renderChildren(children) {
  // children is [[tag, attrs], …]
  if (!Array.isArray(children)) return null;
  return children.map((c, i) => {
    if (!Array.isArray(c)) return null;
    const [tag, attrs] = c;
    const props = { key: i };
    for (const k in attrs) {
      // svg-children prop translation
      let key = k;
      if (k === "stroke-width") key = "strokeWidth";
      else if (k === "stroke-linecap") key = "strokeLinecap";
      else if (k === "stroke-linejoin") key = "strokeLinejoin";
      else if (k === "fill-rule") key = "fillRule";
      else if (k === "clip-rule") key = "clipRule";
      props[key] = attrs[k];
    }
    return React.createElement(tag, props);
  });
}

function Icon({ name, size = 16, color, style, className }) {
  const lu = _luName(name);
  const icon = (lu && window.lucide && window.lucide.icons) ? window.lucide.icons[lu] : null;
  if (!icon) {
    // Fallback: empty inline-block sized square so layout stays stable
    return (
      <span
        className={className}
        style={{ display: "inline-block", width: size, height: size, ...style }}
        title={`missing icon: ${name}`}
      ></span>
    );
  }
  const [, svgAttrs, children] = icon;
  const props = {
    xmlns: svgAttrs.xmlns,
    viewBox: svgAttrs.viewBox,
    width: size,
    height: size,
    fill: "none",
    stroke: color || "currentColor",
    strokeWidth: svgAttrs["stroke-width"],
    strokeLinecap: svgAttrs["stroke-linecap"],
    strokeLinejoin: svgAttrs["stroke-linejoin"],
    style: { display: "inline-block", verticalAlign: "middle", flex: "0 0 auto", ...style },
    className,
    "aria-hidden": "true",
  };
  return React.createElement("svg", props, _renderChildren(children));
}

Object.assign(window, { Icon });