/* App shell — Sidebar + Topbar */
const { useState: useStateShell, useRef: useRefShell, useMemo: useMemoShell } = React;

const NAV = [
  { id: "overview",   label: "Overview",   icon: "grid" },
  { id: "orders",     label: "All Cards",  icon: "orders" },
  { id: "activation", label: "Activation", icon: "activate" },
  { id: "shipping",   label: "Shipping",   icon: "truck" },
  { id: "inventory",  label: "Inventory",  icon: "inventory" },
  { id: "audit",      label: "Audit log",  icon: "log" },
  { id: "settings",   label: "Settings",   icon: "settings" },
];

function Logo() {
  return React.createElement("svg", { width: 19, height: 19, viewBox: "0 0 24 24", fill: "#0c1525" },
    React.createElement("path", { d: "M12 2 4 7v10l8 5 8-5V7l-8-5zm0 3.2 5 3.1v6.4l-5 3.1-5-3.1V8.3l5-3.1z" }),
    React.createElement("path", { d: "M12 8.5 9 10.3v3.4l3 1.8 3-1.8v-3.4l-3-1.8z" }));
}

function Sidebar({ view, setView, counts, open, onClose, canView }) {
  const can = canView || (() => true);
  const item = (n) => {
    const count = counts[n.id];
    const isAlert = n.id === "exceptions" && count > 0;
    return React.createElement("button", {
      key: n.id, className: "co-nav-item" + (view === n.id ? " active" : ""),
      onClick: () => { setView(n.id); onClose && onClose(); },
    },
      React.createElement(window.Icon, { name: n.icon }),
      React.createElement("span", null, n.label),
      count != null && React.createElement("span", { className: "co-nav-count" + (isAlert ? " alert" : "") }, count));
  };
  const ops = NAV.slice(0, 5).filter((n) => can(n.id));
  const sys = NAV.slice(5).filter((n) => can(n.id));
  return React.createElement(React.Fragment, null,
    open && React.createElement("div", { className: "co-sidebar-backdrop", onClick: onClose }),
    React.createElement("aside", { className: "co-sidebar" + (open ? " open" : "") },
      React.createElement("div", { className: "co-brand" },
        React.createElement("div", { className: "co-brand-marks" },
          React.createElement("span", { className: "co-mark" }, React.createElement("img", { src: "cardops/assets/thorwallet-appicon.png", alt: "THORWallet" })),
          React.createElement("span", { className: "co-mark" }, React.createElement("img", { src: "cardops/assets/mine-appicon.png", alt: "MINE" }))),
        React.createElement("div", { className: "co-brand-name" }, "Card Ops",
          React.createElement("span", null, "THORWallet · MINE"))),
      React.createElement("nav", { className: "co-nav" },
        ops.length > 0 && React.createElement("div", { className: "co-nav-label" }, "Operations"),
        ops.map(item),
        sys.length > 0 && React.createElement("div", { className: "co-nav-label" }, "System"),
        sys.map(item)),
      React.createElement("div", { className: "co-sidebar-foot" },
        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 11, color: "var(--co-text-3)" } },
          React.createElement("span", { style: { width: 7, height: 7, borderRadius: 9, background: "var(--co-green)" } }),
          "All systems operational"))));
}

function ProductFilter({ value, onChange }) {
  const opts = ["All", "THORWallet", "MINE"];
  return React.createElement("div", { className: "co-seg" },
    opts.map((o) => React.createElement("button", {
      key: o, className: value === o ? "active" : "", onClick: () => onChange(o),
    }, o)));
}

function CountryFilter({ value, onChange }) {
  const [open, setOpen] = useStateShell(false);
  const ref = useRefShell(null);
  const C = window.CardOps.COUNTRIES;
  const label = value === "all" ? "All countries" : (window.CardOps.flag(value) + " " + value);
  return React.createElement("div", { className: "co-filter", ref, style: { position: "relative" } },
    React.createElement("button", { className: "co-filter-btn" + (value !== "all" ? " set" : ""), onClick: () => setOpen(!open) },
      React.createElement(window.Icon, { name: "map" }), label,
      React.createElement(window.Icon, { name: "chevdown", size: 14 })),
    React.createElement(window.Popover, { open, onClose: () => setOpen(false), style: { top: 48, right: 0, minWidth: 200, maxHeight: 320, overflowY: "auto" } },
      React.createElement("button", { className: "co-pop-item", onClick: () => { onChange("all"); setOpen(false); } }, "All countries",
        value === "all" && React.createElement("span", { className: "co-pop-check" }, React.createElement(window.Icon, { name: "check", size: 16 }))),
      Object.keys(C).map((cc) => React.createElement("button", {
        key: cc, className: "co-pop-item", onClick: () => { onChange(cc); setOpen(false); },
      }, window.CardOps.flag(cc) + "  " + C[cc],
        value === cc && React.createElement("span", { className: "co-pop-check" }, React.createElement(window.Icon, { name: "check", size: 16 }))))));
}

function GlobalSearch({ onOpenOrder }) {
  const [q, setQ] = useStateShell("");
  const [focus, setFocus] = useStateShell(false);
  const results = useMemoShell(() => {
    if (!q.trim()) return [];
    const t = q.toLowerCase();
    return window.CardOps.ORDERS.filter((o) =>
      o.ref.toLowerCase().includes(t) || o.holderFull.toLowerCase().includes(t) ||
      o.holder.toLowerCase().includes(t) || (o.last4 && o.last4.includes(t))).slice(0, 8);
  }, [q]);
  return React.createElement("div", { className: "co-search", onBlur: () => setTimeout(() => setFocus(false), 150) },
    React.createElement(window.Icon, { name: "search" }),
    React.createElement("input", {
      placeholder: "Search cardholder, order ref, or card last 4…", value: q,
      onChange: (e) => setQ(e.target.value), onFocus: () => setFocus(true),
    }),
    focus && q.trim() && React.createElement("div", { className: "co-search-results" },
      results.length === 0
        ? React.createElement("div", { className: "co-search-empty" }, 'No matches for "' + q + '"')
        : results.map((o) => React.createElement("div", {
            key: o.id, className: "co-search-row", onMouseDown: () => { onOpenOrder(o); setQ(""); setFocus(false); },
          },
          React.createElement(window.Tag, { product: o.product }),
          React.createElement("div", { style: { flex: 1, minWidth: 0 } },
            React.createElement("div", { style: { fontWeight: 600, fontSize: 13 } }, o.holder, "  ",
              React.createElement("span", { style: { color: "var(--co-text-3)", fontFamily: "var(--co-mono)", fontWeight: 400, fontSize: 12 } }, o.ref)),
            React.createElement("div", { style: { fontSize: 11.5, color: "var(--co-text-3)" } },
              o.last4 ? "•••• " + o.last4 + " · " : "", window.CardOps.COUNTRIES[o.country])),
          React.createElement(window.StatusPill, { status: o.status })))));
}

function UserMenu({ user, theme, setTheme, onSwitchRole, onLogout }) {
  const [open, setOpen] = useStateShell(false);
  const ROLES = window.CardOps.ROLES;
  return React.createElement("div", { style: { position: "relative" } },
    React.createElement("button", { className: "co-menu-trigger", onClick: () => setOpen(!open) },
      React.createElement(window.Avatar, { initials: user.initials, role: user.role }),
      React.createElement("div", null,
        React.createElement("div", { className: "co-menu-name" }, user.name),
        React.createElement("div", { className: "co-menu-role" }, ROLES[user.role].label)),
      React.createElement(window.Icon, { name: "chevdown", size: 15, style: { color: "var(--co-text-3)" } })),
    React.createElement(window.Popover, { open, onClose: () => setOpen(false), style: { top: 52, right: 0, minWidth: 256 } },
      React.createElement("div", { className: "co-pop-head" },
        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } },
          React.createElement(window.Avatar, { initials: user.initials, role: user.role, size: 38 }),
          React.createElement("div", null,
            React.createElement("div", { style: { fontWeight: 600, fontSize: 13 } }, user.name),
            React.createElement("div", { style: { fontSize: 11.5, color: "var(--co-text-3)" } }, user.email)))),
      React.createElement("div", { style: { padding: "4px 11px 6px", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--co-text-3)" } }, "Demo · view as role"),
      Object.values(ROLES).map((r) => React.createElement("button", {
        key: r.id, className: "co-pop-item", onClick: () => { onSwitchRole(r.id); setOpen(false); },
      },
        React.createElement("span", { style: { width: 8, height: 8, borderRadius: 9, background: r.color } }),
        r.label,
        user.role === r.id && React.createElement("span", { className: "co-pop-check" }, React.createElement(window.Icon, { name: "check", size: 16 })))),
      React.createElement("div", { className: "co-pop-sep" }),
      React.createElement("button", { className: "co-pop-item", onClick: () => setTheme(theme === "dark" ? "light" : "dark") },
        React.createElement(window.Icon, { name: theme === "dark" ? "sun" : "moon" }),
        theme === "dark" ? "Light mode" : "Dark mode"),
      React.createElement("button", { className: "co-pop-item danger", onClick: onLogout },
        React.createElement(window.Icon, { name: "logout" }), "Sign out")));
}

function Topbar({ user, theme, setTheme, onSwitchRole, onLogout, product, setProduct, country, setCountry, onOpenOrder, onBurger }) {
  return React.createElement("header", { className: "co-topbar" },
    React.createElement("button", { className: "co-burger", onClick: onBurger }, React.createElement(window.Icon, { name: "menu" })),
    React.createElement(GlobalSearch, { onOpenOrder }),
    React.createElement("div", { className: "co-topbar-spacer" }),
    React.createElement(ProductFilter, { value: product, onChange: setProduct }),
    React.createElement(CountryFilter, { value: country, onChange: setCountry }),
    React.createElement(UserMenu, { user, theme, setTheme, onSwitchRole, onLogout }));
}

Object.assign(window, { Sidebar, Topbar, NAV, Logo });