/* Globby Wizard — shared UI components (attached to window). */
const { useState, useEffect, useRef, useMemo } = React;

// niche label helper
window.nLabel = function (pair, lang) { return lang === "tr" ? pair[0] : pair[1]; };
// interpolate {x} tokens
window.fmt = function (str, vars) {
  return String(str).replace(/\{(\w+)\}/g, function (_, k) { return vars && vars[k] != null ? vars[k] : ""; });
};

function StepHead(props) {
  if (props.compact) {
    return React.createElement("div", { className: "sechead" },
      React.createElement("div", { className: "sechead-row" },
        props.num ? React.createElement("span", { className: "sechead-num" }, props.num) : null,
        React.createElement("h3", { className: "sechead-title" }, props.title),
        props.ai ? React.createElement("span", { className: "ai-badge sm" }, React.createElement(GIcon, { name: "sparkles", size: 12 }), props.ai) : null),
      props.sub ? React.createElement("p", { className: "sechead-sub" }, props.sub) : null
    );
  }
  return (
    React.createElement("div", null,
      React.createElement("div", { className: "eyebrow-row" },
        React.createElement("span", { className: "eyebrow" }, props.eyebrow),
        props.ai ? React.createElement("span", { className: "ai-badge" }, React.createElement(GIcon, { name: "sparkles", size: 13 }), props.ai) : null
      ),
      React.createElement("h2", { className: "step-title" }, props.title),
      props.sub ? React.createElement("p", { className: "step-sub" }, props.sub) : null,
      props.note ? React.createElement("p", { className: "muted-hint" }, props.note) : null
    )
  );
}
window.StepHead = StepHead;

function Tip(props) {
  return React.createElement("div", { className: "tip" },
    React.createElement(GIcon, { name: props.icon || "info", size: 17 }),
    React.createElement("div", null, props.children)
  );
}
window.Tip = Tip;

// Selectable card (icon + title + desc)
function SelCard(props) {
  return React.createElement("button", {
    className: "selcard" + (props.sel ? " sel" : "") + (props.compact ? " compact" : ""),
    onClick: props.onClick, type: "button",
  },
    props.icon ? React.createElement("span", { className: "ico" }, React.createElement(GIcon, { name: props.icon, size: 22 })) : null,
    React.createElement("span", { className: "body" },
      React.createElement("span", { className: "t" }, props.title),
      props.desc ? React.createElement("span", { className: "d" }, props.desc) : null,
      props.meta ? React.createElement("span", { className: "meta" }, props.meta) : null
    ),
    React.createElement("span", { className: "tick" }, React.createElement(GIcon, { name: "check", size: 13, stroke: 2.6 }))
  );
}
window.SelCard = SelCard;

// Chip
function Chip(props) {
  return React.createElement("button", {
    className: "chip" + (props.sel ? " sel" : "") + (props.suggest ? " suggest" : "") + (props.kw ? " kw" : ""),
    onClick: props.onClick, type: "button",
  },
    props.suggest ? React.createElement(GIcon, { name: "plus", size: 14 }) : null,
    React.createElement("span", null, props.children),
    props.removable ? React.createElement(GIcon, { name: "x", size: 14, cls: "x" }) : null
  );
}
window.Chip = Chip;

function Toast(props) {
  return React.createElement("div", { className: "toast" },
    React.createElement(GIcon, { name: "check", size: 16, stroke: 2.6 }),
    props.msg
  );
}
window.Toast = Toast;

// avatar color from string
window.avatarColor = function (s) {
  const palette = ["#6E39F0", "#10B981", "#5B22DC", "#059669", "#7C3AED", "#0EA5A4", "#4818B0"];
  let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 9973;
  return palette[h % palette.length];
};
window.initials = function (s) { return s.split(/\s+/).map(w => w[0]).slice(0, 2).join("").toUpperCase(); };

// subsector display name (EN from SUBMETA when available)
window.subName = function (ss, lang) {
  if (!ss) return "";
  var m = window.SUBMETA && window.SUBMETA[ss.slug];
  return (lang === "en" && m && m.en) ? m.en : ss.name;
};

// stable sort: selected/suggested items first, original order preserved within groups
window.selFirst = function (arr, isSel) {
  return arr.map(function (x, i) { return [x, i]; })
    .sort(function (a, b) { var sa = isSel(a[0]) ? 0 : 1, sb = isSel(b[0]) ? 0 : 1; return sa - sb || a[1] - b[1]; })
    .map(function (p) { return p[0]; });
};

// Searchable multi-country picker
function CountryPicker(props) {
  const { selected, onChange, lang, L } = props;
  const [q, setQ] = useState("");
  const all = window.COUNTRIES_ALL;
  const term = q.trim().toLowerCase();
  const filtered = useMemo(() => {
    return all.filter(c => !term || c.en.toLowerCase().includes(term) || c.tr.toLowerCase().includes(term) || c.c.toLowerCase() === term)
      .slice(0, term ? 60 : all.length);
  }, [term]);
  const toggle = (cc) => onChange(selected.includes(cc) ? selected.filter(x => x !== cc) : selected.concat(cc));
  return React.createElement("div", null,
    React.createElement("div", { className: "search-row" },
      React.createElement(GIcon, { name: "search", size: 16 }),
      React.createElement("input", { placeholder: (L && L.cp ? L.cp.placeholder : "Search…"), value: q, onChange: e => setQ(e.target.value) })),
    React.createElement("div", { className: "country-list" },
      filtered.length ? filtered.map(c =>
        React.createElement("button", { key: c.c, type: "button", className: "country-row" + (selected.includes(c.c) ? " sel" : ""), onClick: () => toggle(c.c) },
          React.createElement("span", { className: "flag" }, c.f),
          React.createElement("span", { className: "cn" }, lang === "tr" ? c.tr : c.en),
          selected.includes(c.c) ? React.createElement(GIcon, { name: "check", size: 15, stroke: 2.6, cls: "ck" }) : null))
        : React.createElement("div", { className: "muted-hint", style: { padding: 12 } }, L && L.cp ? L.cp.empty : "—")),
    selected.length ? React.createElement("div", { className: "chips", style: { marginTop: 12 } },
      selected.map(cc => { const c = window.COUNTRY_BY[cc]; return React.createElement(Chip, { key: cc, sel: true, removable: true, onClick: () => toggle(cc) }, (c ? c.f + " " + (lang === "tr" ? c.tr : c.en) : cc)); })) : null
  );
}
window.CountryPicker = CountryPicker;