// customizer.jsx — operator-controlled branding + live code injection.
// Loaded after data.jsx (needs window.useSiteSetting), before components.jsx.

const { useEffect: useEffectCz } = React;

/* ─────────────────────────────────────────────────────────────
   Branding — every operator-editable label/copy with safe defaults
   ──────────────────────────────────────────────────────────── */
const BRANDING_DEFAULTS = {
  brand_word_1: "sara",
  brand_word_2: "slot",
  brand_strip_pre: "Malaysia's",
  brand_strip_accent: "Trusted",
  brand_strip_post: "Online Gaming Platform",
  login_label: "Log Masuk",
  register_label: "Daftar",
  default_theme: "gold",
  theme_fab_enabled: true,
  shop_eyebrow: "Drop · 05.2026",
  shop_title: "NEW DROPS",
  promo_title: "PROMOTIONS",
  promo_sub: "Boost every spin — fresh drops every week.",
  chat_welcome: "Selamat Datang ke",
  chat_brand: "SARASLOT",
};
window.BRANDING_DEFAULTS = BRANDING_DEFAULTS;

function useBranding() {
  const q = window.useSiteSetting ? window.useSiteSetting("branding") : { data: null };
  const value = (q.data && q.data.value) || {};
  return { ...BRANDING_DEFAULTS, ...value };
}
window.useBranding = useBranding;

/* ─────────────────────────────────────────────────────────────
   CustomCodeInjector — injects operator CSS / head HTML / JS / body HTML.
   The anon role can only READ site_settings; only admins can WRITE, so the
   injected code is always operator-authored (same trust model as a CMS
   "custom code" box). Mount once near the root of the app.
   ──────────────────────────────────────────────────────────── */
function CustomCodeInjector() {
  const q = window.useSiteSetting ? window.useSiteSetting("custom_code") : { data: null };
  const cfg = (q.data && q.data.value) || null;
  const enabled = cfg && cfg.enabled !== false;
  const key = cfg ? JSON.stringify(cfg) : "";

  useEffectCz(() => {
    const ids = ["bo-custom-css", "bo-custom-head", "bo-custom-js"];
    const cleanup = () => ids.forEach((id) => { const el = document.getElementById(id); if (el) el.remove(); });

    if (!enabled) { cleanup(); return cleanup; }

    // CSS
    let style = document.getElementById("bo-custom-css");
    if (!style) { style = document.createElement("style"); style.id = "bo-custom-css"; document.head.appendChild(style); }
    style.textContent = cfg.css || "";

    // Raw head HTML (meta/link). Note: <script> in innerHTML won't execute —
    // use the dedicated JS field for executable code.
    let head = document.getElementById("bo-custom-head");
    if (!head) { head = document.createElement("div"); head.id = "bo-custom-head"; head.style.display = "none"; document.head.appendChild(head); }
    head.innerHTML = cfg.head_html || "";

    // Executable JS — recreated on each change so edits take effect
    const prevJs = document.getElementById("bo-custom-js");
    if (prevJs) prevJs.remove();
    if (cfg.js && String(cfg.js).trim()) {
      const s = document.createElement("script");
      s.id = "bo-custom-js";
      s.textContent = "try{\n" + cfg.js + "\n}catch(e){console.error('[custom-code js]', e);}";
      document.body.appendChild(s);
    }

    return cleanup;
  }, [key, enabled]);

  if (!enabled || !cfg || !cfg.body_html) return null;
  return <div id="bo-custom-body" dangerouslySetInnerHTML={{ __html: cfg.body_html }} />;
}
window.CustomCodeInjector = CustomCodeInjector;