(function () {
  "use strict";

  window.CO_DirectConnect = {
    render: function (root, state) {
      var pane = root.querySelector('[data-pane="direct-connect"]');
      if (!pane) return;

      var container = pane.querySelector(".co-direct-connect");
      if (!container) return;

      var address = state.directConnect.address || "127.0.0.1";
      var port = state.directConnect.port || "7777";

      container.innerHTML =
        '<div class="co-direct-row">' +
        '<label for="co-dc-address">Server Address</label>' +
        '<input class="co-filter-input" id="co-dc-address" type="text" value="' + escapeAttr(address) + '">' +
        "</div>" +
        '<div class="co-direct-row">' +
        '<label for="co-dc-port">Port</label>' +
        '<input class="co-filter-input" id="co-dc-port" type="text" value="' + escapeAttr(port) + '">' +
        "</div>" +
        '<button type="button" class="co-btn co-dc-connect">Connect</button>' +
        '<p class="co-detail-desc" style="margin-top:16px;color:var(--co-text-dim);font-size:var(--co-font-sm)">Enter a server address to connect directly without browsing the list.</p>';
    },

    bind: function (root, onConnect) {
      var pane = root.querySelector('[data-pane="direct-connect"]');
      if (!pane) return;

      pane.addEventListener("click", function (e) {
        if (!e.target.closest(".co-dc-connect")) return;
        var address = pane.querySelector("#co-dc-address");
        var port = pane.querySelector("#co-dc-port");
        onConnect(address ? address.value : "", port ? port.value : "");
      });
    },

    getValues: function (root) {
      var pane = root.querySelector('[data-pane="direct-connect"]');
      if (!pane) return { address: "127.0.0.1", port: "7777" };
      var address = pane.querySelector("#co-dc-address");
      var port = pane.querySelector("#co-dc-port");
      return {
        address: address ? address.value : "127.0.0.1",
        port: port ? port.value : "7777"
      };
    }
  };

  function escapeAttr(value) {
    return String(value).replace(/"/g, "&quot;");
  }
})();