(function () {
  "use strict";

  // Find our own <script> tag to read config + derive the API base. We talk to
  // the same origin that served this script, so there's nothing to configure.
  var script =
    document.currentScript ||
    (function () {
      var all = document.getElementsByTagName("script");
      for (var i = all.length - 1; i >= 0; i--) {
        if (all[i].src && all[i].src.indexOf("/widget.js") !== -1) return all[i];
      }
      return null;
    })();
  if (!script) return;

  var instanceId = script.getAttribute("data-instance-id");
  if (!instanceId) {
    console.error("[Hala] widget.js: missing data-instance-id attribute");
    return;
  }

  var apiBase;
  try {
    apiBase = new URL(script.src).origin;
  } catch (e) {
    apiBase = "";
  }
  var base = apiBase + "/webchat/" + encodeURIComponent(instanceId);

  // A stable, anonymous visitor id so the conversation persists across reloads.
  var storeKey = "hala_visitor_" + instanceId;
  var visitorId;
  try {
    visitorId = localStorage.getItem(storeKey);
    if (!visitorId) {
      visitorId =
        "v_" + Date.now().toString(36) + "_" + Math.random().toString(36).slice(2, 10);
      localStorage.setItem(storeKey, visitorId);
    }
  } catch (e) {
    visitorId = "v_" + Math.random().toString(36).slice(2, 12);
  }

  function boot(cfg) {
    cfg = cfg || {};
    var position = cfg.position === "bottom-left" ? "left" : "right";
    var welcome = cfg.welcomeMessage || "Hi! How can I help you today?";
    var title = cfg.name || "Chat";
    if (cfg.paused) return; // instance is paused — don't render

    // Theming. Every styled value is a CSS custom property whose *fallback* is
    // the dashboard-configured value (or a built-in default). Custom properties
    // inherit through the Shadow DOM boundary, so a client can match their site
    // by setting --hala-* in their OWN stylesheet (e.g. on :root) and it wins
    // over the fallback — no access to this code needed.
    var DEFAULT_FONT =
      "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif";
    function v(name, configured, fallback) {
      // var(--hala-NAME, <dashboard value or hardcoded default>)
      return "var(--hala-" + name + "," + (configured || fallback) + ")";
    }
    var vBrand = v("brand", cfg.brandColor, "#7c3aed");
    var vOnBrand = v("on-brand", cfg.onBrandColor, "#ffffff");
    var vText = v("text", cfg.textColor, "#1a1a1a");
    var vSurface = v("surface", cfg.surfaceColor, "#ffffff");
    var vMsgsBg = v("msgs-bg", cfg.backgroundColor, "#f7f7f9");
    var vFont = v("font", cfg.fontFamily, DEFAULT_FONT);
    var vRadius = v("radius", cfg.cornerRadius, "16px");
    var vBubbleR = v("bubble-radius", cfg.bubbleRadius, "14px");

    // Isolate everything inside a Shadow DOM so host-page CSS can't touch us.
    var host = document.createElement("div");
    host.setAttribute("data-hala-widget", "");
    document.body.appendChild(host);
    var root = host.attachShadow ? host.attachShadow({ mode: "open" }) : host;

    var side = position === "left" ? "left:20px;" : "right:20px;";
    var style = document.createElement("style");
    style.textContent =
      ":host,*{box-sizing:border-box;font-family:" + vFont + "}" +
      ".launcher{position:fixed;bottom:20px;" + side + "z-index:2147483600;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;background:" + vBrand + ";color:" + vOnBrand + ";box-shadow:0 6px 20px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;transition:transform .15s}" +
      ".launcher:hover{transform:scale(1.06)}" +
      ".launcher svg{width:28px;height:28px}" +
      ".panel{position:fixed;bottom:90px;" + side + "z-index:2147483600;width:370px;max-width:calc(100vw - 40px);height:560px;max-height:calc(100vh - 120px);background:" + vSurface + ";border-radius:" + vRadius + ";box-shadow:0 12px 48px rgba(0,0,0,.28);display:none;flex-direction:column;overflow:hidden}" +
      ".panel.open{display:flex}" +
      ".hdr{background:" + vBrand + ";color:" + vOnBrand + ";padding:16px 18px;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:space-between}" +
      ".hdr button{background:transparent;border:none;color:" + vOnBrand + ";cursor:pointer;font-size:20px;line-height:1;opacity:.85}" +
      ".hdr button:hover{opacity:1}" +
      ".msgs{flex:1;overflow-y:auto;padding:16px;background:" + vMsgsBg + ";display:flex;flex-direction:column;gap:10px}" +
      ".row{display:flex;max-width:85%}" +
      ".row.user{align-self:flex-end}" +
      ".row.bot{align-self:flex-start}" +
      ".bubble{padding:10px 13px;border-radius:" + vBubbleR + ";font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}" +
      ".user .bubble{background:" + vBrand + ";color:" + vOnBrand + ";border-bottom-right-radius:4px}" +
      ".bot .bubble{background:" + vSurface + ";color:" + vText + ";border:1px solid rgba(0,0,0,.08);border-bottom-left-radius:4px}" +
      ".chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}" +
      ".chip{border:1px solid " + vBrand + ";color:" + vBrand + ";background:" + vSurface + ";border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;text-decoration:none}" +
      ".chip:hover{background:" + vBrand + ";color:" + vOnBrand + "}" +
      ".typing{display:flex;gap:4px;padding:12px 14px}" +
      ".typing span{width:7px;height:7px;border-radius:50%;background:#bbb;animation:hb 1s infinite}" +
      ".typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}" +
      "@keyframes hb{0%,60%,100%{opacity:.3}30%{opacity:1}}" +
      ".foot{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(0,0,0,.08);background:" + vSurface + "}" +
      ".foot input{flex:1;border:1px solid rgba(0,0,0,.15);border-radius:10px;padding:10px 12px;font-size:14px;outline:none;color:" + vText + ";background:" + vSurface + "}" +
      ".foot input:focus{border-color:" + vBrand + "}" +
      ".foot button{border:none;background:" + vBrand + ";color:" + vOnBrand + ";border-radius:10px;padding:0 16px;cursor:pointer;font-size:14px}" +
      ".foot button:disabled{opacity:.5;cursor:default}" +
      ".pw{text-align:center;font-size:11px;color:#aaa;padding:6px}";
    root.appendChild(style);

    var wrap = document.createElement("div");
    wrap.innerHTML =
      '<button class="launcher" aria-label="Open chat">' +
      '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3C6.5 3 2 6.8 2 11.5c0 2.3 1.1 4.4 2.9 5.9L4 21l4.3-1.8c1.1.3 2.4.5 3.7.5 5.5 0 10-3.8 10-8.7S17.5 3 12 3z"/></svg>' +
      "</button>" +
      '<div class="panel" role="dialog" aria-label="Chat">' +
      '<div class="hdr"><span class="ttl"></span><button class="x" aria-label="Close">&times;</button></div>' +
      '<div class="msgs"></div>' +
      '<div class="foot"><input type="text" placeholder="Type a message…" aria-label="Message"/><button class="send">Send</button></div>' +
      '<div class="pw">Powered by Hala</div>' +
      "</div>";
    root.appendChild(wrap);

    var launcher = root.querySelector(".launcher");
    var panel = root.querySelector(".panel");
    var msgs = root.querySelector(".msgs");
    var input = root.querySelector(".foot input");
    var sendBtn = root.querySelector(".send");
    root.querySelector(".ttl").textContent = title;

    var opened = false;
    var greeted = false;

    function scrollDown() {
      msgs.scrollTop = msgs.scrollHeight;
    }

    function addMessage(role, text) {
      var row = document.createElement("div");
      row.className = "row " + role;
      var b = document.createElement("div");
      b.className = "bubble";
      b.textContent = text;
      row.appendChild(b);
      msgs.appendChild(row);
      scrollDown();
      return row;
    }

    function addChips(buttons, urlButtons) {
      var holder = document.createElement("div");
      holder.className = "row bot";
      var chips = document.createElement("div");
      chips.className = "chips";
      (buttons || []).forEach(function (label) {
        var c = document.createElement("button");
        c.className = "chip";
        c.textContent = label;
        c.onclick = function () {
          chips.remove();
          submit(label);
        };
        chips.appendChild(c);
      });
      (urlButtons || []).forEach(function (u) {
        var a = document.createElement("a");
        a.className = "chip";
        a.textContent = u.title || u.url;
        a.href = u.url;
        a.target = "_blank";
        a.rel = "noopener noreferrer";
        chips.appendChild(a);
      });
      if (chips.children.length) {
        holder.appendChild(chips);
        msgs.appendChild(holder);
        scrollDown();
      }
    }

    function showTyping() {
      var row = document.createElement("div");
      row.className = "row bot typing-row";
      row.innerHTML = '<div class="bubble typing"><span></span><span></span><span></span></div>';
      msgs.appendChild(row);
      scrollDown();
      return row;
    }

    var busy = false;
    function submit(text) {
      text = (text || "").trim();
      if (!text || busy) return;
      busy = true;
      sendBtn.disabled = true;
      addMessage("user", text);
      input.value = "";
      var typing = showTyping();

      fetch(base + "/message", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ visitorId: visitorId, text: text }),
      })
        .then(function (r) {
          return r.json().catch(function () {
            return {};
          });
        })
        .then(function (data) {
          typing.remove();
          if (data && data.reply) addMessage("bot", data.reply);
          if (data && (data.buttons || data.urlButtons))
            addChips(data.buttons, data.urlButtons);
          if (!data || (!data.reply && !data.buttons && !data.urlButtons))
            addMessage("bot", "Sorry, something went wrong. Please try again.");
        })
        .catch(function () {
          typing.remove();
          addMessage("bot", "Sorry, I couldn't reach the server. Please try again.");
        })
        .then(function () {
          busy = false;
          sendBtn.disabled = false;
          input.focus();
        });
    }

    function toggle() {
      opened = !opened;
      panel.classList.toggle("open", opened);
      if (opened) {
        if (!greeted) {
          addMessage("bot", welcome);
          greeted = true;
        }
        input.focus();
      }
    }

    launcher.onclick = toggle;
    root.querySelector(".x").onclick = toggle;
    sendBtn.onclick = function () {
      submit(input.value);
    };
    input.onkeydown = function (e) {
      if (e.key === "Enter") submit(input.value);
    };
  }

  // Pull public config (welcome text, brand, position), then render.
  //  - 403 → this domain isn't authorized for this widget: render NOTHING.
  //  - other transient errors → boot with defaults so a legit site still works.
  fetch(base + "/config")
    .then(function (r) {
      if (r.status === 403) return false; // unauthorized domain — abort
      return r.ok ? r.json() : {};
    })
    .catch(function () {
      return {};
    })
    .then(function (cfg) {
      if (cfg === false) return; // do not render the widget at all
      if (document.body) boot(cfg);
      else
        window.addEventListener("DOMContentLoaded", function () {
          boot(cfg);
        });
    });
})();