{% extends "base.html" %}
{% block title %}工作台 · 期权中控{% endblock %}
{% block body %}
<section class="desk" id="desk-root">
  <aside class="desk-side" id="desk-side">
    <div class="desk-side-head">
      <h2 class="desk-side-title">客户端</h2>
      <button type="button" class="desk-side-toggle" id="desk-side-toggle" title="折叠/展开" aria-label="折叠客户端列表">‹</button>
    </div>
    <ul class="desk-list" id="desk-list">
      {% for inst in instances %}
      <li class="desk-list-item{% if current and current.id == inst.id %} active{% endif %}" data-id="{{ inst.id }}" data-name="{{ inst.name }}" data-base-url="{{ inst.base_url }}" title="{{ inst.name }}">
        <a href="/desk?id={{ inst.id }}">
          <span class="desk-list-name">{{ inst.name }}</span>
        </a>
      </li>
      {% else %}
      <li class="muted desk-list-empty">无启用实例</li>
      {% endfor %}
    </ul>
  </aside>
  <div class="desk-main">
    {% if current and open_url %}
    <div class="desk-toolbar">
      <button type="button" class="desk-side-toggle desk-side-toggle--bar" id="desk-side-toggle-bar" title="展开客户端列表" aria-label="展开客户端列表">›</button>
      <strong id="desk-current-name">{{ current.name }}</strong>
      <span class="muted" id="desk-current-url">{{ current.base_url }}</span>
      <a class="btn" id="desk-open-blank" href="{{ open_url }}" target="_blank" rel="noopener">新标签打开</a>
      <a class="btn" href="/">回总览</a>
    </div>
    <iframe class="desk-frame" id="desk-frame" src="{{ open_url }}" title="{{ current.name }}"></iframe>
    {% else %}
    <div class="desk-toolbar">
      <button type="button" class="desk-side-toggle desk-side-toggle--bar" id="desk-side-toggle-bar" title="展开客户端列表" aria-label="展开客户端列表">›</button>
    </div>
    <div class="empty">请从左侧选择客户端,或到「实例」添加公网 crypto_okx.</div>
    {% endif %}
  </div>
</section>
{% endblock %}
{% block scripts %}
<script>
(function () {
  var KEY = "hub_desk_side_collapsed";
  var root = document.getElementById("desk-root");
  if (!root) return;
  function apply(collapsed) {
    root.classList.toggle("is-side-collapsed", !!collapsed);
    try { localStorage.setItem(KEY, collapsed ? "1" : "0"); } catch (e) {}
  }
  function toggle() {
    apply(!root.classList.contains("is-side-collapsed"));
  }
  var btn = document.getElementById("desk-side-toggle");
  var bar = document.getElementById("desk-side-toggle-bar");
  if (btn) btn.addEventListener("click", toggle);
  if (bar) bar.addEventListener("click", toggle);
  var saved = false;
  try { saved = localStorage.getItem(KEY) === "1"; } catch (e) {}
  apply(saved);

  var MODE_KEY = "hub_desk_instance_modes";
  var list = document.getElementById("desk-list");
  if (!list) return;
  var items = Array.prototype.slice.call(list.querySelectorAll("li.desk-list-item[data-id]"));
  if (!items.length) return;

  function readModeCache() {
    try {
      var raw = sessionStorage.getItem(MODE_KEY);
      var parsed = raw ? JSON.parse(raw) : {};
      return parsed && typeof parsed === "object" ? parsed : {};
    } catch (e) {
      return {};
    }
  }

  function writeModeCache(map) {
    try { sessionStorage.setItem(MODE_KEY, JSON.stringify(map || {})); } catch (e) {}
  }

  function groupLabel(mode) {
    var li = document.createElement("li");
    li.className = "desk-group-label";
    li.setAttribute("aria-hidden", "true");
    var span = document.createElement("span");
    span.className = "overview-mode-tag overview-mode-tag--" + mode;
    span.textContent = mode;
    li.appendChild(span);
    return li;
  }

  function regroup(modeById) {
    var sim = [];
    var live = [];
    var other = [];
    items.forEach(function (li) {
      var m = String(modeById[li.getAttribute("data-id")] || "").toLowerCase();
      if (m === "sim") sim.push(li);
      else if (m === "live") live.push(li);
      else other.push(li);
    });
    list.innerHTML = "";
    if (sim.length) {
      list.appendChild(groupLabel("sim"));
      sim.forEach(function (li) { list.appendChild(li); });
    }
    if (live.length) {
      list.appendChild(groupLabel("live"));
      live.forEach(function (li) { list.appendChild(li); });
    }
    other.forEach(function (li) { list.appendChild(li); });
  }

  var cached = readModeCache();
  if (Object.keys(cached).length) regroup(cached);

  function setActive(iid) {
    items.forEach(function (li) {
      li.classList.toggle("active", String(li.getAttribute("data-id")) === String(iid));
    });
  }

  function switchClient(li) {
    var iid = li.getAttribute("data-id");
    if (!iid) return;
    var name = li.getAttribute("data-name") || "";
    var baseUrl = li.getAttribute("data-base-url") || "";
    var frame = document.getElementById("desk-frame");
    if (!frame) {
      window.location.href = "/desk?id=" + encodeURIComponent(iid);
      return;
    }
    setActive(iid);
    var nameEl = document.getElementById("desk-current-name");
    var urlEl = document.getElementById("desk-current-url");
    if (nameEl) nameEl.textContent = name;
    if (urlEl) urlEl.textContent = baseUrl;
    frame.setAttribute("title", name);
    fetch("/api/instances/" + iid + "/open_url", {
      credentials: "same-origin",
      headers: { Accept: "application/json" },
    })
      .then(function (r) { return r.json(); })
      .then(function (d) {
        if (!d || !d.ok || !d.url) throw new Error((d && d.msg) || "无法打开");
        frame.src = d.url;
        var blank = document.getElementById("desk-open-blank");
        if (blank) blank.href = d.url;
        try { history.replaceState(null, "", "/desk?id=" + encodeURIComponent(iid)); } catch (e) {}
      })
      .catch(function () {
        window.location.href = "/desk?id=" + encodeURIComponent(iid);
      });
  }

  list.addEventListener("click", function (ev) {
    var a = ev.target.closest("a");
    if (!a) return;
    var li = a.closest("li.desk-list-item[data-id]");
    if (!li) return;
    if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey || ev.button !== 0) return;
    ev.preventDefault();
    switchClient(li);
  });

  Promise.all(
    items.map(function (li) {
      var iid = li.getAttribute("data-id");
      return fetch("/api/instances/" + iid + "/version", {
        credentials: "same-origin",
        headers: { Accept: "application/json" },
      })
        .then(function (r) { return r.json().catch(function () { return {}; }); })
        .then(function (v) { return { id: iid, mode: (v && v.mode) || "" }; })
        .catch(function () { return { id: iid, mode: cached[iid] || "" }; });
    })
  ).then(function (rows) {
    var map = {};
    rows.forEach(function (row) { map[row.id] = row.mode; });
    writeModeCache(map);
    regroup(map);
  });
})();
</script>
{% endblock %}