/* ============================================================
   PLAYGROUND OS — shared components  (window.UI)
   ============================================================ */
const { useState, useEffect, useRef, createContext, useContext } = React;

/* ---------- Language ---------- */
const LangCtx = createContext({ lang: "th", setLang: () => {} });
const useLang = () => useContext(LangCtx);
/* ---------- Theme ---------- */
const ThemeCtx = createContext({ theme: "dark", setTheme: () => {} });
const useTheme = () => useContext(ThemeCtx);
// t(en, th) -> picks by current lang for inline strings
function useT() {
  const { lang } = useLang();
  return (en, th) => (lang === "en" ? en : th ?? en);
}

/* ============================================================
   ICONS  (simple geometric line icons, currentColor)
   ============================================================ */
const P = (d, extra) => React.createElement("path", Object.assign({ d, fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" }, extra));
function Icon({ name, size = 18, fill = false }) {
  const s = size;
  const wrap = (children) => React.createElement("svg", { width: s, height: s, viewBox: "0 0 24 24" }, children);
  switch (name) {
    case "map": return wrap([P("M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z", { key: 1 }), P("M9 4v14M15 6v14", { key: 2 })]);
    case "users": return wrap([P("M16 19c0-2.5-2-4-5-4s-5 1.5-5 4", { key: 1 }), React.createElement("circle", { key: 2, cx: 11, cy: 8, r: 3.2, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), P("M18 14.5c1.6.4 2.5 1.6 2.5 3.5", { key: 3 })]);
    case "tasks": return wrap([P("M9 6h11M9 12h11M9 18h11", { key: 1 }), P("M4 6l1 1 1.5-2M4 12l1 1 1.5-2M4 18l1 1 1.5-2", { key: 2 })]);
    case "flow": return wrap([React.createElement("rect", { key: 1, x: 3, y: 4, width: 6, height: 5, rx: 1.5, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), React.createElement("rect", { key: 2, x: 15, y: 15, width: 6, height: 5, rx: 1.5, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), P("M9 6.5h4a3 3 0 0 1 3 3v6", { key: 3 })]);
    case "chart": return wrap([P("M4 4v16h16", { key: 1 }), P("M8 14l3-4 3 3 4-6", { key: 2 })]);
    case "store": return wrap([P("M4 9h16l-1-4H5L4 9Z", { key: 1 }), P("M5 9v10h14V9", { key: 2 }), P("M9 19v-5h6v5", { key: 3 })]);
    case "plug": return wrap([P("M9 3v5M15 3v5", { key: 1 }), P("M6 8h12v3a6 6 0 0 1-12 0V8Z", { key: 2 }), P("M12 17v4", { key: 3 })]);
    case "book": return wrap([P("M5 4h12a2 2 0 0 1 2 2v14H7a2 2 0 0 0-2 2V4Z", { key: 1 }), P("M5 4v16", { key: 2 })]);
    case "gear": return wrap([React.createElement("circle", { key: 1, cx: 12, cy: 12, r: 3, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), P("M12 2v3M12 19v3M22 12h-3M5 12H2M19 19l-2-2M7 7 5 5M19 5l-2 2M7 17l-2 2", { key: 2 })]);
    case "search": return wrap([React.createElement("circle", { key: 1, cx: 11, cy: 11, r: 6, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), P("M20 20l-4-4", { key: 2 })]);
    case "cmd": return wrap([P("M10 8 6 12l4 4M14 8l4 4-4 4", { key: 1 })]);
    case "grid": return wrap([0, 1].flatMap((r) => [0, 1].map((c) => React.createElement("rect", { key: r + "-" + c, x: 4 + c * 9, y: 4 + r * 9, width: 6, height: 6, rx: 1.5, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }))));
    case "bell": return wrap([P("M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z", { key: 1 }), P("M10 19a2 2 0 0 0 4 0", { key: 2 })]);
    case "chev": return wrap([P("M9 6l6 6-6 6", { key: 1 })]);
    case "chevd": return wrap([P("M6 9l6 6 6-6", { key: 1 })]);
    case "plus": return wrap([P("M12 5v14M5 12h14", { key: 1 })]);
    case "minus": return wrap([P("M5 12h14", { key: 1 })]);
    case "target": return wrap([React.createElement("circle", { key: 1, cx: 12, cy: 12, r: 7, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), React.createElement("circle", { key: 2, cx: 12, cy: 12, r: 2.4, fill: "currentColor" }), P("M12 2v3M12 19v3M2 12h3M19 12h3", { key: 3 })]);
    case "ext": return wrap([P("M14 5h5v5M19 5l-7 7M19 13v4a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4", { key: 1 })]);
    case "import": return wrap([P("M12 3v11M8 10l4 4 4-4", { key: 1 }), P("M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2", { key: 2 })]);
    case "box": return wrap([P("M12 3 4 7v10l8 4 8-4V7l-8-4Z", { key: 1 }), P("M4 7l8 4 8-4M12 11v10", { key: 2 })]);
    case "coin": return wrap([React.createElement("circle", { key: 1, cx: 12, cy: 12, r: 8, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), P("M12 8v8M9.5 9.5c0-1 1-1.5 2.5-1.5s2.5.6 2.5 1.6c0 2-5 1-5 3 0 1 1 1.6 2.5 1.6s2.5-.6 2.5-1.5", { key: 2 })]);
    case "heart": return wrap([P("M12 20s-7-4.4-7-9.5A3.5 3.5 0 0 1 12 7a3.5 3.5 0 0 1 7 3.5C19 15.6 12 20 12 20Z", { key: 1 })]);
    case "chat": return wrap([P("M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 3V6a1 1 0 0 1 1-1Z", { key: 1 }), P("M8.5 10.5h7M8.5 13h4", { key: 2 })]);
    case "play": return wrap([P("M8 6l10 6-10 6V6Z", fill ? { fill: "currentColor", stroke: "none" } : { key: 1 })]);
    case "note": return wrap([P("M9 17V6l9-2v11", { key: 1 }), React.createElement("circle", { key: 2, cx: 7, cy: 17, r: 2.2, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), React.createElement("circle", { key: 3, cx: 16, cy: 15, r: 2.2, fill: "none", stroke: "currentColor", strokeWidth: 1.7 })]);
    case "truck": return wrap([P("M3 6h11v9H3zM14 9h4l3 3v3h-7", { key: 1 }), React.createElement("circle", { key: 2, cx: 7, cy: 18, r: 1.6, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), React.createElement("circle", { key: 3, cx: 17, cy: 18, r: 1.6, fill: "none", stroke: "currentColor", strokeWidth: 1.7 })]);
    case "filter": return wrap([P("M4 5h16l-6 7v6l-4 2v-8L4 5Z", { key: 1 })]);
    case "cal": return wrap([React.createElement("rect", { key: 1, x: 4, y: 5, width: 16, height: 16, rx: 2, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), P("M4 9h16M8 3v4M16 3v4", { key: 2 })]);
    case "clock": return wrap([React.createElement("circle", { key: 1, cx: 12, cy: 12, r: 8, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), P("M12 8v4l3 2", { key: 2 })]);
    case "sun": return wrap([React.createElement("circle", { key: 1, cx: 12, cy: 12, r: 4, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), P("M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19", { key: 2 })]);
    case "spark": return wrap([P("M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z", { key: 1 })]);
    case "moon": return wrap([P("M20 14.5A8 8 0 1 1 9.5 4a6.3 6.3 0 0 0 10.5 10.5Z", { key: 1 })]);
    case "warn": return wrap([P("M12 4 2.5 20h19L12 4Z", { key: 1 }), P("M12 10v4M12 17.5v.5", { key: 2 })]);
    case "up": return wrap([P("M6 14l6-6 6 6", { key: 1 })]);
    case "down": return wrap([P("M6 10l6 6 6-6", { key: 1 })]);
    case "dl": return wrap([P("M12 4v10M8 11l4 3 4-3M5 19h14", { key: 1 })]);
    case "sheet": return wrap([React.createElement("rect", { key: 1, x: 4, y: 4, width: 16, height: 16, rx: 2, fill: "none", stroke: "currentColor", strokeWidth: 1.7 }), P("M4 9h16M4 14h16M9 4v16", { key: 2 })]);
    case "check": return wrap([P("M5 12l5 5L19 7", { key: 1 })]);
    default: return wrap([React.createElement("circle", { key: 1, cx: 12, cy: 12, r: 7, fill: "none", stroke: "currentColor", strokeWidth: 1.7 })]);
  }
}

/* channel glyph mapping (abstract, original) */
const GLYPH = { fb: "chat", tt: "play", box: "box", coin: "coin", heart: "heart", import: "import" };

/* ============================================================
   TOP BAR
   ============================================================ */
function TopBar({ onBrand }) {
  const { lang, setLang } = useLang();
  const { theme, setTheme } = useTheme();
  const t = useT();
  return React.createElement("header", { className: "topbar" },
    React.createElement("div", { className: "brand", onClick: onBrand },
      React.createElement("div", { className: "brand-logo" },
        React.createElement("svg", { width: 22, height: 22, viewBox: "0 0 24 24" },
          P("M6 18V8l6-4 6 4v10", { stroke: "white", strokeWidth: 2 }),
          P("M10 18v-5h4v5", { stroke: "white", strokeWidth: 2 }))),
      React.createElement("div", null,
        React.createElement("div", { className: "brand-name" }, "PLAYGROUND ", React.createElement("span", { style: { color: "var(--accent-bright)" } }, "OS")),
        React.createElement("div", { className: "brand-sub" }, "AIT Back-Office City"))),
    React.createElement("div", { className: "cmd" },
      React.createElement("span", { style: { color: "var(--tx-ghost)", display: "flex" } }, React.createElement(Icon, { name: "cmd", size: 16 })),
      React.createElement("span", null, t("Enter command or search…", "พิมพ์คำสั่งหรือค้นหา…")),
      React.createElement("span", { className: "kbd" }, "⌘K")),
    React.createElement("div", { className: "topbar-actions" },
      React.createElement("button", { className: "icon-btn" }, React.createElement(Icon, { name: "grid", size: 18 })),
      React.createElement("button", { className: "icon-btn" }, React.createElement(Icon, { name: "bell", size: 18 }), React.createElement("span", { className: "dot" })),
      React.createElement("div", { className: "profile-chip" },
        React.createElement("div", { className: "avatar round", style: { width: 28, height: 28, "--ac1": "oklch(0.7 0.18 290)", "--ac2": "oklch(0.74 0.14 210)" } }, React.createElement("span", { className: "ini", style: { fontSize: 10 } }, "OM")),
        React.createElement("div", null,
          React.createElement("div", { className: "pname" }, t("Owner Master", "เจ้าของระบบ")),
          React.createElement("div", { className: "prole" }, "Super Admin"))),
      React.createElement("div", { className: "theme-toggle" },
        React.createElement("button", { className: theme === "light" ? "on" : "", onClick: () => setTheme("light"), title: "Light", "aria-label": "Light theme" }, React.createElement(Icon, { name: "sun", size: 16 })),
        React.createElement("button", { className: theme === "dark" ? "on" : "", onClick: () => setTheme("dark"), title: "Dark", "aria-label": "Dark theme" }, React.createElement(Icon, { name: "moon", size: 16 }))),
      React.createElement("div", { className: "lang-toggle" },
        React.createElement("button", { className: lang === "th" ? "on" : "", onClick: () => setLang("th") }, "TH"),
        React.createElement("button", { className: lang === "en" ? "on" : "", onClick: () => setLang("en") }, "EN"))));
}

/* ============================================================
   SIDEBAR
   ============================================================ */
function SideWidgets() {
  const t = useT();
  const [now, setNow] = useState(new Date());
  useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []);
  const timeParts = Object.fromEntries(new Intl.DateTimeFormat("th-TH-u-nu-latn", {
    timeZone: "Asia/Bangkok", weekday: "short", day: "numeric", month: "short", year: "numeric",
    hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false
  }).formatToParts(now).filter((p) => p.type !== "literal").map((p) => [p.type, p.value]));
  const hh = timeParts.hour.padStart(2, "0");
  const mm = timeParts.minute.padStart(2, "0");
  const ss = timeParts.second.padStart(2, "0");
  const night = Number(hh) < 6 || Number(hh) >= 18;
  const days = ["อา", "จ", "อ", "พ", "พฤ", "ศ", "ส"];
  const months = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."];
  const dateStr = timeParts.weekday + " " + timeParts.day + " " + timeParts.month;
  const happiness = 92;

  return React.createElement("div", { className: "side-widgets" },
    // Office Status
    React.createElement("div", { className: "side-card" },
      React.createElement("div", { className: "sw-label eyebrow" }, t("Office Status", "สถานะออฟฟิศ")),
      React.createElement("div", { className: "sw-status" },
        React.createElement("span", { className: "sdot ok" }),
        React.createElement("span", null, t("All systems normal", "ระบบทำงานปกติ")))),
    // Day & Time
    React.createElement("div", { className: "side-card" },
      React.createElement("div", { className: "sw-label eyebrow" }, t("Day & Time", "วันและเวลา")),
      React.createElement("div", { className: "sw-time-row" },
        React.createElement("span", { className: "sw-tod", "data-night": night ? "1" : "0" },
          React.createElement(Icon, { name: night ? "moon" : "sun", size: 22 })),
        React.createElement("div", null,
          React.createElement("div", { className: "sw-time" }, hh + ":" + mm + ":" + ss),
          React.createElement("div", { className: "sw-date" }, dateStr + " " + timeParts.year + " · GMT+7")))),
    // Office Happiness
    React.createElement("div", { className: "side-card" },
      React.createElement("div", { className: "sw-label eyebrow" }, t("Office Happiness", "ความสุขออฟฟิศ")),
      React.createElement("div", { className: "sw-happy-row" },
        React.createElement("span", { className: "sw-heart" }, "♥"),
        React.createElement("span", { className: "sw-happy-val" }, happiness + "%"),
        React.createElement("span", { className: "sw-happy-delta" }, "▲ 6%")),
      React.createElement("div", { className: "sw-bar" },
        React.createElement("div", { className: "sw-bar-fill", style: { width: happiness + "%" } }))));
}

function Sidebar({ active, onNav, open = true, onToggle }) {
  const { lang } = useLang();
  const t = useT();
  const items = [
    { key: "city", icon: "map", en: "System Map", th: "แผนที่ระบบ" },
    { key: "facebook", icon: "chat", en: "Facebook Office", th: "สำนักงานเฟซบุ๊ก", badge: 7 },
    { key: "tiktok", icon: "play", en: "TikTok Live", th: "ไลฟ์ติ๊กต็อก", badge: 3, warn: true },
    { key: "stock", icon: "box", en: "Stock Warehouse", th: "คลังสินค้า", badge: 4 },
    { key: "finance", icon: "coin", en: "Finance Office", th: "ห้องบัญชี", badge: 2, warn: true },
    { key: "hr", icon: "heart", en: "HR Cute Office", th: "ฝ่ายบุคคล", badge: 1, warn: true },
  ];
  const tools = [
    { key: "import", icon: "import", en: "Import Center", th: "ศูนย์นำเข้าข้อมูล" },
    { key: "settings", icon: "gear", en: "Settings", th: "ตั้งค่า" },
  ];
  const renderItem = (it) => React.createElement("button", { key: it.key, className: "nav-item" + (active === it.key ? " on" : ""), onClick: () => onNav(it.key), title: it.en },
    React.createElement("span", { className: "nav-ico" }, React.createElement(Icon, { name: it.icon, size: 19 })),
    React.createElement("span", { className: "nav-txt" },
      React.createElement("span", { className: "nav-en" }, it.en),
      lang === "th" ? React.createElement("span", { className: "nav-th" }, it.th) : null),
    it.badge ? React.createElement("span", { className: "nav-badge" + (it.warn ? " warn" : "") }, it.badge) : null);
  return React.createElement("nav", { className: "sidebar" + (open ? "" : " collapsed") },
    React.createElement("button", { className: "nav-collapse-btn", onClick: onToggle, title: open ? t("Collapse", "ย่อแถบเมนู") : t("Expand", "ขยายแถบเมนู") },
      React.createElement("span", { className: "ncb-ico" }, React.createElement(Icon, { name: "chev", size: 16 })),
      React.createElement("span", { className: "ncb-label" }, t("Collapse menu", "ย่อแถบเมนู"))),
    React.createElement(SideWidgets, null),
    React.createElement("div", { className: "nav-group-label eyebrow" }, t("Buildings", "ตึกหลัก")),
    items.map(renderItem),
    React.createElement("div", { className: "nav-group-label eyebrow" }, t("Tools", "เครื่องมือ")),
    tools.map(renderItem));
}

/* ============================================================
   PANEL / STAT / BADGE / AVATAR
   ============================================================ */
function Panel({ title, th, right, children, className = "", style }) {
  return React.createElement("section", { className: "panel " + className, style },
    (title || right) ? React.createElement("div", { className: "panel-head" },
      title ? React.createElement("h3", null, title, th ? React.createElement("span", { className: "th" }, th) : null) : null,
      right ? React.createElement("div", { className: "right" }, right) : null) : null,
    children);
}

function Badge({ kind = "neutral", children, dot }) {
  return React.createElement("span", { className: "badge " + kind },
    dot ? React.createElement("span", { className: "sdot " + kind, style: { width: 6, height: 6 } }) : null, children);
}
function Dot({ kind }) { return React.createElement("span", { className: "sdot " + kind }); }

function Avatar({ ini, ac1, ac2, size = 36, round = true }) {
  return React.createElement("div", { className: "avatar" + (round ? " round" : ""), style: { width: size, height: size, "--ac1": ac1, "--ac2": ac2 } },
    React.createElement("span", { className: "ini", style: { fontSize: size * 0.34 } }, ini),
    size >= 44 ? React.createElement("span", { className: "slot-tag" }, "art") : null);
}

function Stat({ label, th, value, unit, delta, deltaDir = "up", accent, spark }) {
  return React.createElement("div", { className: "stat" + (accent ? " stat-accent" : ""), style: accent ? { "--accent": accent } : null },
    React.createElement("div", { className: "stat-top" },
      React.createElement("div", { className: "label" }, label, th ? React.createElement("span", { className: "th" }, th) : null)),
    React.createElement("div", { className: "val" }, value, unit ? React.createElement("small", null, " " + unit) : null),
    delta ? React.createElement("div", { className: "delta " + deltaDir },
      React.createElement(Icon, { name: deltaDir === "down" ? "down" : "up", size: 13 }), delta) : null,
    spark ? React.createElement(Sparkline, { data: spark, color: accent || "var(--accent)" }) : null);
}

/* ============================================================
   CHARTS  (lightweight inline SVG)
   ============================================================ */
function Sparkline({ data, color = "var(--accent)", w = 92, h = 40 }) {
  const max = Math.max(...data), min = Math.min(...data);
  const pts = data.map((d, i) => [i / (data.length - 1) * w, h - ((d - min) / (max - min || 1)) * (h - 6) - 3]);
  const line = pts.map((p) => p.join(",")).join(" ");
  const area = `0,${h} ${line} ${w},${h}`;
  const id = "sg" + Math.random().toString(36).slice(2, 7);
  return React.createElement("svg", { className: "spark", viewBox: `0 0 ${w} ${h}`, preserveAspectRatio: "none" },
    React.createElement("defs", null, React.createElement("linearGradient", { id, x1: 0, y1: 0, x2: 0, y2: 1 },
      React.createElement("stop", { offset: 0, stopColor: color, stopOpacity: 0.35 }),
      React.createElement("stop", { offset: 1, stopColor: color, stopOpacity: 0 }))),
    React.createElement("polygon", { points: area, fill: `url(#${id})` }),
    React.createElement("polyline", { points: line, fill: "none", stroke: color, strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" }));
}

function LineChart({ series, labels, height = 220, yMax }) {
  const w = 640, h = height, padL = 38, padB = 26, padT = 12, padR = 12;
  const max = yMax || Math.max(...series.flatMap((s) => s.data)) * 1.1;
  const iw = w - padL - padR, ih = h - padB - padT;
  const x = (i, n) => padL + (i / (n - 1)) * iw;
  const y = (v) => padT + ih - (v / max) * ih;
  const ticks = 4;
  return React.createElement("svg", { viewBox: `0 0 ${w} ${h}`, style: { width: "100%", height } },
    Array.from({ length: ticks + 1 }).map((_, i) => {
      const gv = (max / ticks) * i, gy = y(gv);
      return React.createElement("g", { key: i },
        React.createElement("line", { x1: padL, y1: gy, x2: w - padR, y2: gy, className: "grid-line" }),
        React.createElement("text", { x: padL - 8, y: gy + 3, textAnchor: "end", className: "axis-label" }, Math.round(gv)));
    }),
    labels.map((lb, i) => i % 2 === 0 ? React.createElement("text", { key: i, x: x(i, labels.length), y: h - 8, textAnchor: "middle", className: "axis-label" }, lb) : null),
    series.map((s, si) => {
      const pts = s.data.map((d, i) => `${x(i, s.data.length)},${y(d)}`).join(" ");
      return React.createElement("g", { key: si },
        React.createElement("polyline", { points: pts, fill: "none", stroke: s.color, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" }),
        s.data.map((d, i) => React.createElement("circle", { key: i, cx: x(i, s.data.length), cy: y(d), r: 2.6, fill: s.color })));
    }));
}

function Donut({ value, color, label, sub, size = 116 }) {
  const r = size / 2 - 9, c = 2 * Math.PI * r, off = c * (1 - value / 100);
  return React.createElement("div", { style: { position: "relative", width: size, height: size } },
    React.createElement("svg", { width: size, height: size, style: { transform: "rotate(-90deg)" } },
      React.createElement("circle", { cx: size / 2, cy: size / 2, r, fill: "none", stroke: "var(--panel-3)", strokeWidth: 9 }),
      React.createElement("circle", { cx: size / 2, cy: size / 2, r, fill: "none", stroke: color, strokeWidth: 9, strokeLinecap: "round", strokeDasharray: c, strokeDashoffset: off, style: { transition: "stroke-dashoffset .8s ease", filter: `drop-shadow(0 0 6px ${color})` } })),
    React.createElement("div", { style: { position: "absolute", inset: 0, display: "grid", placeItems: "center", textAlign: "center" } },
      React.createElement("div", null,
        React.createElement("div", { style: { fontSize: size * 0.2, fontWeight: 700, fontVariantNumeric: "tabular-nums" } }, label),
        sub ? React.createElement("div", { style: { fontSize: 10, color: "var(--tx-faint)", fontFamily: "var(--mono)" } }, sub) : null)));
}

function BarChart({ data, height = 180 }) {
  const max = Math.max(...data.map((d) => d.v)) * 1.15;
  return React.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: 18, height, padding: "0 4px" } },
    data.map((d, i) => React.createElement("div", { key: i, style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 8, height: "100%", justifyContent: "flex-end" } },
      React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 12, fontWeight: 600 } }, d.label2 || d.v),
      React.createElement("div", { style: { width: "70%", maxWidth: 56, height: (d.v / max) * (height - 50), background: `linear-gradient(180deg, ${d.color}, ${d.color}55)`, borderRadius: "6px 6px 3px 3px", boxShadow: `0 0 14px -2px ${d.color}`, transition: "height .7s ease" } }),
      React.createElement("div", { style: { fontSize: 11, color: "var(--tx-faint)" } }, d.label))));
}

/* ============================================================
   DATA TABLE  (sortable)
   ============================================================ */
function DataTable({ columns, rows, initialSort }) {
  const [sort, setSort] = useState(initialSort || null);
  let data = rows;
  if (sort) {
    const col = columns.find((c) => c.key === sort.key);
    data = [...rows].sort((a, b) => {
      let av = col.sortVal ? col.sortVal(a) : a[sort.key], bv = col.sortVal ? col.sortVal(b) : b[sort.key];
      if (typeof av === "string") { av = av.toLowerCase(); bv = (bv || "").toLowerCase(); }
      return (av > bv ? 1 : av < bv ? -1 : 0) * (sort.dir === "asc" ? 1 : -1);
    });
  }
  const toggle = (k) => setSort((s) => s && s.key === k ? { key: k, dir: s.dir === "asc" ? "desc" : "asc" } : { key: k, dir: "desc" });
  return React.createElement("div", { className: "tbl-wrap" },
    React.createElement("table", { className: "tbl" },
      React.createElement("thead", null, React.createElement("tr", null,
        columns.map((c) => React.createElement("th", { key: c.key, className: c.sortable ? "sortable" : "", style: c.style, onClick: c.sortable ? () => toggle(c.key) : null },
          c.label, sort && sort.key === c.key ? React.createElement("span", { style: { marginLeft: 4, opacity: .7 } }, sort.dir === "asc" ? "▲" : "▼") : null)))),
      React.createElement("tbody", null,
        data.map((r, i) => React.createElement("tr", { key: r.id || i },
          columns.map((c) => React.createElement("td", { key: c.key, style: c.tdStyle }, c.render ? c.render(r) : r[c.key])))))));
}

/* ---------- page header ---------- */
function PageHead({ crumbs, title, th, right, live }) {
  return React.createElement("div", { className: "page-head" },
    React.createElement("div", { style: { flex: 1, minWidth: 0 } },
      crumbs ? React.createElement("div", { className: "breadcrumb" }, crumbs) : null,
      React.createElement("div", { className: "page-title", style: { marginTop: crumbs ? 6 : 0 } }, title,
        th ? React.createElement("span", { className: "th-title" }, "/ " + th) : null,
        live ? React.createElement("span", { className: "live-pill", style: { marginLeft: 4 } }, React.createElement("span", { className: "blip" }), "LIVE") : null)),
    right ? React.createElement("div", { style: { display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" } }, right) : null);
}

window.UI = {
  LangCtx, useLang, ThemeCtx, useTheme, useT, Icon, GLYPH, TopBar, Sidebar, Panel, Badge, Dot, Avatar, Stat,
  Sparkline, LineChart, Donut, BarChart, DataTable, PageHead,
};