{{define "agent/index.html"}}
{{template "agent/layout_head" .}}
{{$queued := index .Data "Queued"}}
{{$mine := index .Data "Mine"}}
<aside class="offcanvas offcanvas-start sc-agent-sidebar sc-agent-sessions-drawer" tabindex="-1" id="sessionsDrawer" aria-labelledby="sessionsDrawerLabel">
  <div class="offcanvas-header sc-agent-drawer-head d-md-none">
    <h2 class="offcanvas-title fs-6 fw-semibold mb-0" id="sessionsDrawerLabel">{{T "agent.index.session_list"}}</h2>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{{T "agent.index.close"}}"></button>
  </div>
  <div class="offcanvas-body sc-agent-sidebar-body p-0">
  <ul class="nav sc-agent-tabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="tabQueueBtn" data-bs-toggle="tab" data-bs-target="#tabQueue" type="button" role="tab" aria-controls="tabQueue" aria-selected="true">
        {{T "agent.index.tab_queue"}} <span class="badge rounded-pill text-bg-warning ms-1" id="queueCount">{{len $queued}}</span>
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tabMineBtn" data-bs-toggle="tab" data-bs-target="#tabMine" type="button" role="tab" aria-controls="tabMine" aria-selected="false">
        {{T "agent.index.tab_mine"}} <span class="badge rounded-pill text-bg-primary ms-1" id="mineCount">{{len $mine}}</span>
      </button>
    </li>
  </ul>
  <div class="tab-content sc-agent-tab-panels">
    <div class="tab-pane fade show active" id="tabQueue" role="tabpanel" aria-labelledby="tabQueueBtn" tabindex="0">
      <div id="queueList">
      {{range $queued}}
        <div class="sc-agent-item" data-session="{{.id}}" data-action="accept"
             data-name="{{if .visitor_label}}{{.visitor_label}}{{else}}{{T "agent.index.visitor"}}{{end}}"
             data-site="{{.site_name}}" data-time="{{unixTime .created_at}}" data-unread="{{.unread_agent}}"
             data-lead-level="{{.lead_level}}" data-lead-color="{{.lead_level_color}}">
          <div class="sc-agent-item__main">
            <div class="sc-agent-item__name">{{if gt (asInt .lead_level) 0}}<span class="sc-agent-item__name-text" style="color:{{.lead_level_color}}" title="{{.lead_level_name}}">{{if .visitor_label}}{{.visitor_label}}{{else}}{{T "agent.index.visitor"}}{{end}}</span>{{else}}<span class="sc-agent-item__name-text">{{if .visitor_label}}{{.visitor_label}}{{else}}{{T "agent.index.visitor"}}{{end}}</span>{{end}} <span class="badge text-bg-warning">{{T "agent.index.queued_badge"}}</span></div>
            <div class="sc-agent-item__meta">{{.site_name}} · {{unixTime .created_at}}</div>
          </div>
          {{if gt (asInt .unread_agent) 0}}<span class="sc-agent-item__unread badge rounded-pill text-bg-danger">{{if gt (asInt .unread_agent) 99}}99+{{else}}{{.unread_agent}}{{end}}</span>{{end}}
        </div>
      {{else}}
        <div class="sc-agent-empty sc-agent-empty--list" id="queueEmpty">
          <i class="bx bx-time-five sc-agent-empty__icon" aria-hidden="true"></i>
          <span class="sc-agent-empty__text">{{T "agent.index.empty_queue"}}</span>
        </div>
      {{end}}
      </div>
    </div>
    <div class="tab-pane fade" id="tabMine" role="tabpanel" aria-labelledby="tabMineBtn" tabindex="0">
      <div id="mineList">
      {{range $mine}}
        <div class="sc-agent-item" data-session="{{.id}}"
             data-name="{{if .visitor_label}}{{.visitor_label}}{{else}}{{T "agent.index.visitor"}}{{end}}"
             data-site="{{.site_name}}" data-unread="{{.unread_agent}}"
             data-lead-level="{{.lead_level}}" data-lead-color="{{.lead_level_color}}">
          <div class="sc-agent-item__main">
            <div class="sc-agent-item__name">{{if gt (asInt .lead_level) 0}}<span class="sc-agent-item__name-text" style="color:{{.lead_level_color}}" title="{{.lead_level_name}}">{{if .visitor_label}}{{.visitor_label}}{{else}}{{T "agent.index.visitor"}}{{end}}</span>{{else}}<span class="sc-agent-item__name-text">{{if .visitor_label}}{{.visitor_label}}{{else}}{{T "agent.index.visitor"}}{{end}}</span>{{end}}</div>
            <div class="sc-agent-item__meta">{{.site_name}}</div>
          </div>
          {{if gt (asInt .unread_agent) 0}}<span class="sc-agent-item__unread badge rounded-pill text-bg-danger">{{if gt (asInt .unread_agent) 99}}99+{{else}}{{.unread_agent}}{{end}}</span>{{end}}
        </div>
      {{else}}
        <div class="sc-agent-empty sc-agent-empty--list" id="mineEmpty">
          <i class="bx bx-comment-dots sc-agent-empty__icon" aria-hidden="true"></i>
          <span class="sc-agent-empty__text">{{T "agent.index.empty_mine"}}</span>
        </div>
      {{end}}
      </div>
    </div>
  </div>
  </div>
</aside>
<div class="sc-agent-splitter d-none d-md-block" id="sidebarSplitter" role="separator" aria-orientation="vertical" aria-label="{{T "agent.index.split_aria"}}" tabindex="0"></div>
<main class="sc-agent-chat" data-agent-name="{{if .User}}{{.User.Username}}{{else}}{{T "agent.index.agent_fallback"}}{{end}}">
  <header class="sc-agent-chat__head">
    <button type="button" class="btn btn-sm btn-light border sc-agent-drawer-toggle d-md-none flex-shrink-0" id="btnSessionsDrawer" data-bs-toggle="offcanvas" data-bs-target="#sessionsDrawer" aria-controls="sessionsDrawer" title="{{T "agent.index.session_list"}}">
      <i class="bx bx-list-ul"></i>
      <span class="sc-agent-drawer-toggle__badge" id="mobileSessionBadge">0</span>
    </button>
    <div class="sc-agent-chat__head-main">
      <h1 class="sc-agent-chat__title" id="chatTitle">{{T "agent.index.pick_title"}}</h1>
      <p class="sc-agent-chat__meta mb-0" id="chatMeta">{{T "agent.index.pick_meta"}}</p>
      <div class="sc-agent-chat__tags d-none" id="chatTags"></div>
    </div>
    <button type="button" class="btn btn-sm btn-outline-secondary flex-shrink-0 d-none" id="btnVisitorOpen" title="{{T "agent.index.visitor_info"}}" aria-controls="visitorDrawer">
      <i class="bx bx-id-card"></i><span class="d-none d-sm-inline"> {{T "agent.index.visitor"}}</span>
    </button>
    <button type="button" class="btn btn-sm btn-success flex-shrink-0 d-none" id="btnAccept">{{T "agent.index.accept_session"}}</button>
  </header>
  <div class="sc-agent-msgs" id="msgBox">
    <div class="sc-agent-msgs__empty sc-agent-empty" id="msgEmpty">
      <i class="bx bx-message-square-dots sc-agent-empty__icon" aria-hidden="true"></i>
      <span class="sc-agent-empty__text">{{T "agent.index.pick_empty"}}</span>
    </div>
  </div>
  <footer class="sc-agent-composer">
    <textarea class="sc-agent-composer__input" id="msgInput" rows="3" placeholder="{{T "agent.index.input_ph"}}" disabled></textarea>
    <div class="sc-agent-upload d-none" id="agentUploadBox" aria-live="polite">
      <div class="sc-agent-upload__name" id="agentUploadName"></div>
      <div class="sc-agent-upload__row">
        <div class="sc-agent-upload__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" id="agentUploadTrack">
          <div class="sc-agent-upload__bar" id="agentUploadBar"></div>
        </div>
        <button type="button" class="sc-agent-upload__cancel" id="agentUploadCancel" title="{{T "agent.index.cancel_upload"}}" aria-label="{{T "agent.index.cancel_upload"}}">×</button>
      </div>
    </div>
    <div class="sc-agent-composer__bar">
      <span class="text-muted small">{{T "agent.index.composer_hint"}}</span>
      <div class="sc-agent-composer__actions">
        <button type="button" class="btn btn-sm btn-light border" id="btnCanned" title="{{T "agent.index.canned"}}" disabled><i class="bx bx-message-detail"></i></button>
        <label class="btn btn-sm btn-light border mb-0" id="btnUploadLabel" title="{{T "agent.index.send_file"}}"><i class="bx bx-paperclip"></i><input type="file" id="fileUpload" class="d-none" accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,.txt,.zip,.doc,.docx,.xls,.xlsx,.csv,.md" disabled></label>
        <div class="d-none" id="cannedDrop">
          <div class="dropdown-menu show sc-agent-canned-menu" id="cannedMenu"></div>
        </div>
        <button class="btn btn-primary btn-sm px-3" type="button" id="btnSend" disabled>{{T "agent.index.send"}}</button>
      </div>
    </div>
  </footer>
</main>
<div class="sc-agent-visitor-wrap" id="visitorWrap">
  <aside class="offcanvas offcanvas-end sc-agent-visitor sc-agent-visitor-drawer" tabindex="-1" id="visitorDrawer" aria-labelledby="visitorDrawerLabel">
    <div class="offcanvas-header sc-agent-drawer-head d-md-none">
      <h2 class="offcanvas-title fs-6 fw-semibold mb-0" id="visitorDrawerLabel"><i class="bx bx-id-card me-1"></i>{{T "agent.index.visitor_info"}}</h2>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{{T "agent.index.close"}}"></button>
    </div>
    <div class="sc-agent-visitor__head d-none d-md-flex">
      <h2 class="sc-agent-visitor__title"><i class="bx bx-id-card"></i> {{T "agent.index.visitor_info"}}</h2>
      <button type="button" class="sc-agent-visitor__close" id="btnVisitorClose" title="{{T "agent.index.collapse_visitor"}}" aria-label="{{T "agent.index.collapse_visitor"}}">
        <i class="bx bx-chevrons-right"></i>
      </button>
    </div>
    <div class="offcanvas-body sc-agent-visitor__body" id="visitorBody">
      <div class="sc-agent-visitor__empty sc-agent-empty" id="visitorEmpty">
        <i class="bx bx-id-card sc-agent-empty__icon" aria-hidden="true"></i>
        <span class="sc-agent-empty__text">{{T "agent.index.visitor_empty"}}</span>
      </div>
      <div id="visitorContent" class="d-none"></div>
    </div>
  </aside>
</div>
<button type="button" class="sc-agent-visitor-restore d-none" id="btnVisitorRestore" title="{{T "agent.index.expand_visitor"}}" aria-label="{{T "agent.index.expand_visitor"}}">
  <i class="bx bx-id-card"></i>
  <span>{{T "agent.index.visitor"}}</span>
</button>
{{template "agent/layout_foot" .}}
<script>
(function () {
  var sessionId = 0;
  var ws = null;
  var sinceId = 0;
  var seenMsgIds = {};
  var lastMsgMeta = { senderType: 0, createdAt: 0, $el: null };
  var MSG_GROUP_GAP_SEC = 300;
  var agentName = $('.sc-agent-chat').attr('data-agent-name') || {{jsString (T "agent.index.agent_fallback")}};
  var msgNotify = (window.ScMessageNotify && window.ScMessageNotify.create)
    ? window.ScMessageNotify.create({ flashText: {{jsString (T "agent.index.flash_new")}} })
    : null;
  var sessionsDrawerEl = document.getElementById('sessionsDrawer');
  var visitorDrawerEl = document.getElementById('visitorDrawer');

  function isMobileAgent() {
    return window.matchMedia('(max-width: 767.98px)').matches;
  }

  function closeSessionsDrawer() {
    if (!sessionsDrawerEl || !window.bootstrap) return;
    var oc = bootstrap.Offcanvas.getInstance(sessionsDrawerEl);
    if (oc) oc.hide();
  }

  function closeVisitorDrawer() {
    if (!visitorDrawerEl || !window.bootstrap) return;
    var oc = bootstrap.Offcanvas.getInstance(visitorDrawerEl);
    if (oc) oc.hide();
  }

  function syncVisitorOpenButton() {
    var $btn = $('#btnVisitorOpen');
    if (!sessionId) {
      $btn.addClass('d-none');
      return;
    }
    if (isMobileAgent()) {
      $btn.removeClass('d-none');
      return;
    }
    if ($('#visitorWrap').hasClass('is-collapsed')) {
      $btn.removeClass('d-none');
    } else {
      $btn.addClass('d-none');
    }
  }

  function syncVisitorDrawerMode() {
    var $btn = $('#btnVisitorOpen');
    if (isMobileAgent()) {
      $btn.attr('data-bs-toggle', 'offcanvas').attr('data-bs-target', '#visitorDrawer');
    } else {
      $btn.removeAttr('data-bs-toggle').removeAttr('data-bs-target');
      closeVisitorDrawer();
    }
    syncVisitorOpenButton();
  }

  function syncMobileSessionBadge(queueCount, mineCount) {
    var q = queueCount != null ? queueCount : $('#queueList .sc-agent-item').length;
    var m = mineCount != null ? mineCount : $('#mineList .sc-agent-item').length;
    var qUnread = sumListUnread('#queueList');
    var mUnread = sumListUnread('#mineList');
    var totalUnread = qUnread + mUnread;
    var total = q + m;
    var $badge = $('#mobileSessionBadge');
    if (totalUnread > 0) {
      $badge.text(formatUnreadCount(totalUnread)).addClass('is-queue');
    } else {
      $badge.text(total).removeClass('is-queue');
    }
  }

  function formatUnreadCount(n) {
    n = parseInt(n, 10) || 0;
    if (n <= 0) return '';
    return n > 99 ? '99+' : String(n);
  }

  function sumListUnread(listSel) {
    var sum = 0;
    $(listSel + ' .sc-agent-item').each(function () {
      var sid = parseInt($(this).attr('data-session'), 10) || 0;
      if (sid === sessionId) return;
      sum += parseInt($(this).attr('data-unread'), 10) || 0;
    });
    return sum;
  }

  function unreadBadgeHtml(count) {
    var n = parseInt(count, 10) || 0;
    if (n <= 0) return '';
    return '<span class="sc-agent-item__unread badge rounded-pill text-bg-danger">' + escapeHtml(formatUnreadCount(n)) + '</span>';
  }

  function syncTabBadge($badge, list, isQueue) {
    var totalUnread = 0;
    (list || []).forEach(function (s) {
      var sid = parseInt(s.id, 10) || 0;
      var n = parseInt(s.unread_agent, 10) || 0;
      if (sid === sessionId) n = 0;
      totalUnread += n;
    });
    if (totalUnread > 0) {
      $badge.text(formatUnreadCount(totalUnread)).removeClass('text-bg-warning text-bg-primary').addClass('text-bg-danger');
      return;
    }
    $badge.text((list && list.length) || 0).removeClass('text-bg-danger');
    $badge.addClass(isQueue ? 'text-bg-warning' : 'text-bg-primary');
  }

  function clearSessionUnreadUI(sid) {
    sid = parseInt(sid, 10) || 0;
    if (!sid) return;
    var $item = $('.sc-agent-item[data-session="' + sid + '"]');
    $item.attr('data-unread', '0').find('.sc-agent-item__unread').remove();
    syncTabBadgesFromDom();
  }

  function bumpSessionUnread(sid) {
    sid = parseInt(sid, 10) || 0;
    if (!sid || sid === sessionId) return;
    var $item = $('.sc-agent-item[data-session="' + sid + '"]');
    if (!$item.length) {
      refreshSessionLists();
      return;
    }
    var n = (parseInt($item.attr('data-unread'), 10) || 0) + 1;
    $item.attr('data-unread', String(n));
    var $badge = $item.find('.sc-agent-item__unread');
    if ($badge.length) $badge.text(formatUnreadCount(n));
    else $item.append(unreadBadgeHtml(n));
    syncTabBadgesFromDom();
  }

  function syncTabBadgesFromDom() {
    var qList = [];
    $('#queueList .sc-agent-item').each(function () {
      qList.push({
        id: parseInt($(this).attr('data-session'), 10) || 0,
        unread_agent: parseInt($(this).attr('data-unread'), 10) || 0
      });
    });
    var mList = [];
    $('#mineList .sc-agent-item').each(function () {
      mList.push({
        id: parseInt($(this).attr('data-session'), 10) || 0,
        unread_agent: parseInt($(this).attr('data-unread'), 10) || 0
      });
    });
    syncTabBadge($('#queueCount'), qList, true);
    syncTabBadge($('#mineCount'), mList, false);
    syncMobileSessionBadge(qList.length, mList.length);
  }

  function buildSessionItemHtml(s, opts) {
    opts = opts || {};
    var name = (s.visitor_name || {{jsString (T "agent.index.visitor")}}).toString();
    var meta = (s.site_name || '').toString();
    if (opts.isQueue && s.created_at_text) meta = meta ? (meta + ' · ' + s.created_at_text) : s.created_at_text;
    if (s.browser) meta = meta ? (meta + ' · ' + s.browser) : s.browser;
    var sid = parseInt(s.id, 10) || 0;
    var unread = sid === sessionId ? 0 : (parseInt(s.unread_agent, 10) || 0);
    var html = '<div class="sc-agent-item" data-session="' + sid + '"'
      + (opts.isQueue ? ' data-action="accept"' : '')
      + ' data-name="' + escapeAttr(name) + '"'
      + ' data-site="' + escapeAttr(s.site_name || '') + '"'
      + ' data-unread="' + unread + '"'
      + ' data-lead-level="' + (parseInt(s.lead_level, 10) || 0) + '"'
      + ' data-lead-color="' + escapeAttr(s.lead_level_color || '') + '"'
      + (opts.isQueue ? (' data-time="' + escapeAttr(s.created_at_text || '') + '"') : '')
      + '><div class="sc-agent-item__main">'
      + '<div class="sc-agent-item__name">' + sessionNameInnerHtml(name, parseInt(s.lead_level, 10) || 0, s.lead_level_color, opts.isQueue, s.lead_level_name)
      + '</div><div class="sc-agent-item__meta">' + escapeHtml(meta) + '</div></div>'
      + unreadBadgeHtml(unread)
      + '</div>';
    return html;
  }

  function updateMobileHints() {
    syncVisitorDrawerMode();
    if (isMobileAgent()) {
      if (!sessionId) {
        $('#chatMeta').text({{jsString (T "agent.index.mobile_pick")}});
        $('#msgEmpty .sc-agent-empty__text').text({{jsString (T "agent.index.mobile_pick")}});
      }
    } else if (!sessionId) {
      $('#chatMeta').text({{jsString (T "agent.index.pick_meta")}});
      $('#msgEmpty .sc-agent-empty__text').text({{jsString (T "agent.index.pick_empty")}});
    }
  }

  function emptyStateHtml(id, icon, text, extraClass) {
    var cls = 'sc-agent-empty' + (extraClass ? (' ' + extraClass) : '');
    return '<div class="' + cls + '" id="' + id + '">'
      + '<i class="bx ' + icon + ' sc-agent-empty__icon" aria-hidden="true"></i>'
      + '<span class="sc-agent-empty__text">' + text + '</span></div>';
  }

  function setEmptyText($el, text) {
    if (!$el.length) return;
    if ($el.find('.sc-agent-empty__text').length) {
      $el.find('.sc-agent-empty__text').text(text);
    } else {
      $el.text(text);
    }
  }

  function initSidebarResize() {
    var splitter = document.getElementById('sidebarSplitter');
    var drawer = document.getElementById('sessionsDrawer');
    var shell = document.querySelector('.sc-agent-shell');
    if (!splitter || !drawer || !shell) return;

    var STORAGE_KEY = 'sc_agent_sidebar_width';
    var MIN = 220;
    var MIN_CHAT = 360;
    var dragging = false;
    var startX = 0;
    var startW = 0;

    function isDesktopAgent() {
      return window.matchMedia('(min-width: 768px)').matches;
    }

    function getVisitorWidth() {
      var wrap = document.getElementById('visitorWrap');
      if (!wrap || wrap.classList.contains('is-collapsed')) return 0;
      return wrap.offsetWidth || 0;
    }

    function getMaxWidth() {
      var shellW = shell.clientWidth || window.innerWidth;
      var available = shellW - getVisitorWidth() - (splitter.offsetWidth || 6);
      return Math.min(560, Math.max(MIN, available - MIN_CHAT));
    }

    function applyWidth(w, save) {
      if (!isDesktopAgent()) return;
      w = Math.max(MIN, Math.min(getMaxWidth(), Math.round(w)));
      document.documentElement.style.setProperty('--sc-agent-sidebar-width', w + 'px');
      if (save) {
        try { localStorage.setItem(STORAGE_KEY, String(w)); } catch (e) {}
      }
    }

    function loadWidth() {
      var w = 300;
      try {
        var saved = parseInt(localStorage.getItem(STORAGE_KEY), 10);
        if (!isNaN(saved) && saved >= MIN) w = saved;
      } catch (e) {}
      applyWidth(w, false);
    }

    function beginDrag(clientX) {
      if (!isDesktopAgent()) return;
      dragging = true;
      startX = clientX;
      startW = drawer.offsetWidth;
      splitter.classList.add('is-dragging');
      document.body.classList.add('sc-agent-split-drag');
    }

    function moveDrag(clientX) {
      if (!dragging) return;
      applyWidth(startW + (clientX - startX), false);
    }

    function endDrag() {
      if (!dragging) return;
      dragging = false;
      splitter.classList.remove('is-dragging');
      document.body.classList.remove('sc-agent-split-drag');
      applyWidth(drawer.offsetWidth, true);
    }

    splitter.addEventListener('mousedown', function (e) {
      if (e.button !== 0) return;
      e.preventDefault();
      beginDrag(e.clientX);
    });

    splitter.addEventListener('touchstart', function (e) {
      if (!isDesktopAgent() || !e.touches.length) return;
      beginDrag(e.touches[0].clientX);
    }, { passive: true });

    document.addEventListener('mousemove', function (e) {
      moveDrag(e.clientX);
    });

    document.addEventListener('touchmove', function (e) {
      if (!dragging || !e.touches.length) return;
      moveDrag(e.touches[0].clientX);
    }, { passive: true });

    document.addEventListener('mouseup', endDrag);
    document.addEventListener('touchend', endDrag);
    document.addEventListener('touchcancel', endDrag);

    splitter.addEventListener('keydown', function (e) {
      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
      e.preventDefault();
      var step = e.shiftKey ? 32 : 12;
      var delta = e.key === 'ArrowLeft' ? -step : step;
      applyWidth(drawer.offsetWidth + delta, true);
    });

    window.addEventListener('resize', function () {
      if (!isDesktopAgent()) return;
      applyWidth(drawer.offsetWidth, true);
    });

    loadWidth();
  }

  var VISITOR_PANEL_KEY = 'sc_agent_visitor_collapsed';
  var visitorPanelTimer = null;
  var currentVisitorData = null;
  var leadDraft = { level: 0, tags: [], notes: '' };

  var DEFAULT_LEAD_LEVELS = [
    { level: 1, name: {{jsString (T "agent.index.lead_l1")}}, color: '#ef4444' },
    { level: 2, name: {{jsString (T "agent.index.lead_l2")}}, color: '#f97316' },
    { level: 3, name: {{jsString (T "agent.index.lead_l3")}}, color: '#eab308' },
    { level: 4, name: {{jsString (T "agent.index.lead_l4")}}, color: '#3b82f6' },
    { level: 5, name: {{jsString (T "agent.index.lead_l5")}}, color: '#22c55e' }
  ];
  var DEFAULT_PRESET_TAGS = [{{jsString (T "agent.index.tag_price")}}, {{jsString (T "agent.index.tag_corp")}}, {{jsString (T "agent.index.tag_follow")}}, {{jsString (T "agent.index.tag_complaint")}}, {{jsString (T "agent.index.tag_channel")}}, {{jsString (T "agent.index.tag_competitor")}}, {{jsString (T "agent.index.tag_decision")}}, {{jsString (T "agent.index.tag_budget")}}];

  function sessionNameInnerHtml(name, level, color, queueBadge, levelName) {
    var style = (level > 0 && color) ? (' style="color:' + escapeAttr(color) + '"') : '';
    var title = (level > 0 && levelName) ? (' title="' + escapeAttr(levelName) + '"') : '';
    var html = '<span class="sc-agent-item__name-text"' + style + title + '>' + escapeHtml(name) + '</span>';
    if (queueBadge) html += ' <span class="badge text-bg-warning">{{T "agent.index.badge_queue"}}</span>';
    return html;
  }

  function applyChatTitleLeadColor(level, color) {
    var $t = $('#chatTitle');
    if (level > 0 && color) {
      $t.css('color', color);
    } else {
      $t.css('color', '');
    }
  }

  function updateSessionLeadUI(sid, data) {
    sid = parseInt(sid, 10) || 0;
    if (!sid || !data) return;
    var level = parseInt(data.lead_level, 10) || 0;
    var color = (data.lead_level_color || '').toString();
    var lname = (data.lead_level_name || '').toString();
    var name = ($('.sc-agent-item[data-session="' + sid + '"]').attr('data-name') || $('#chatTitle').text() || {{jsString (T "agent.index.visitor")}}).toString();

    $('.sc-agent-item[data-session="' + sid + '"]').each(function () {
      var $item = $(this);
      $item.attr('data-lead-level', String(level));
      $item.attr('data-lead-color', color);
      $item.find('.sc-agent-item__lead').remove();
      var $nameRow = $item.find('.sc-agent-item__name');
      if ($nameRow.length) {
        var queueBadge = $item.is('[data-action]');
        $nameRow.html(sessionNameInnerHtml(name, level, color, queueBadge, lname));
      }
    });

    if (sid === sessionId) {
      applyChatTitleLeadColor(level, color);
    }
  }

  function renderLeadEditorCard(v) {
    var levels = (v.lead_levels && v.lead_levels.length) ? v.lead_levels : DEFAULT_LEAD_LEVELS;
    var presets = (v.preset_tags && v.preset_tags.length) ? v.preset_tags : DEFAULT_PRESET_TAGS;
    leadDraft.level = parseInt(v.lead_level, 10) || 0;
    leadDraft.tags = (v.tags || []).slice();
    leadDraft.notes = (v.agent_notes || '').toString();

    var stars = '<button type="button" class="sc-agent-lead-star sc-agent-lead-star--clear' + (leadDraft.level === 0 ? ' is-active' : '') + '" data-lead-level="0"><i class="bx bxs-star"></i> {{T "agent.index.star_none"}}</button>';
    levels.forEach(function (lv) {
      var active = leadDraft.level === lv.level ? ' is-active' : '';
      stars += '<button type="button" class="sc-agent-lead-star' + active + '" data-lead-level="' + lv.level + '" style="color:' + escapeAttr(lv.color) + '">'
        + '<i class="bx bxs-star"></i> ' + escapeHtml(lv.name) + '</button>';
    });

    var tags = '';
    presets.forEach(function (t) {
      var on = leadDraft.tags.indexOf(t) >= 0 ? ' is-on' : '';
      tags += '<button type="button" class="sc-agent-lead-tag' + on + '" data-lead-tag="' + escapeAttr(t) + '">' + escapeHtml(t) + '</button>';
    });

    return '<div class="sc-agent-vcard sc-agent-lead-card" id="visitorLeadCard">'
      + '<div class="sc-agent-vcard__label">{{T "agent.index.lead_mark"}}</div>'
      + '<div class="sc-agent-lead-stars">' + stars + '</div>'
      + '<div class="sc-agent-vcard__label" style="margin-top:.25rem">{{T "agent.index.quick_tags"}}</div>'
      + '<div class="sc-agent-lead-tags" id="visitorLeadTags">' + tags + '</div>'
      + '<div class="sc-agent-vcard__label" style="margin-top:.25rem">{{T "agent.index.follow_notes"}}</div>'
      + '<textarea class="sc-agent-lead-notes" id="visitorLeadNotes" maxlength="2000" placeholder="{{T "agent.index.notes_ph"}}…">' + escapeHtml(leadDraft.notes) + '</textarea>'
      + '<div class="d-flex justify-content-end mt-2"><button type="button" class="btn btn-primary btn-sm sc-agent-lead-save" id="btnSaveVisitorLead">{{T "agent.index.lead_save"}}</button></div>'
      + '</div>';
  }

  function syncLeadDraftFromUI() {
    leadDraft.notes = ($('#visitorLeadNotes').val() || '').trim();
  }

  function saveVisitorLead() {
    if (!currentVisitorData || !currentVisitorData.visitor_id) return;
    syncLeadDraftFromUI();
    var $btn = $('#btnSaveVisitorLead').prop('disabled', true);
    $.ajax({
      url: '/api/agent/visitors/' + currentVisitorData.visitor_id + '/lead',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({
        lead_level: leadDraft.level,
        tags: leadDraft.tags,
        agent_notes: leadDraft.notes
      })
    }).done(function (res) {
      if (!res.success || !res.data) {
        showAgentToast(false, (res && res.message) || {{jsString (T "agent.index.save_fail")}});
        return;
      }
      var d = res.data;
      currentVisitorData.lead_level = d.lead_level;
      currentVisitorData.lead_level_name = d.lead_level_name;
      currentVisitorData.lead_level_color = d.lead_level_color;
      currentVisitorData.tags = d.tags || [];
      currentVisitorData.agent_notes = d.agent_notes || '';
      updateSessionLeadUI(sessionId, d);
      renderVisitorPanel(currentVisitorData);
      var tip = d.lead_level > 0
        ? ({{jsString (T "agent.index.saved_prefix")}} + (d.lead_level_name || {{jsString (T "agent.index.mark_fallback")}}))
        : {{jsString (T "agent.index.cleared_visitor_mark")}};
      showAgentToast(true, tip);
    }).fail(function (xhr) {
      showAgentToast(false, (xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "agent.index.save_fail_retry")}});
    }).always(function () {
      $btn.prop('disabled', false);
    });
  }

  function setVisitorPanelCollapsed(collapsed, instant) {
    if (isMobileAgent()) return;
    var $wrap = $('#visitorWrap');
    var $restore = $('#btnVisitorRestore');
    if (collapsed) {
      $wrap.addClass('is-collapsed');
      $restore.removeClass('d-none');
      if (instant) {
        $restore.addClass('is-visible');
      } else {
        requestAnimationFrame(function () { $restore.addClass('is-visible'); });
      }
    } else {
      $wrap.removeClass('is-collapsed');
      $restore.removeClass('is-visible');
      if (visitorPanelTimer) clearTimeout(visitorPanelTimer);
      visitorPanelTimer = setTimeout(function () {
        if (!$wrap.hasClass('is-collapsed')) $restore.addClass('d-none');
      }, 320);
    }
    syncVisitorOpenButton();
    try { sessionStorage.setItem(VISITOR_PANEL_KEY, collapsed ? '1' : '0'); } catch (e) {}
  }

  function initVisitorPanelToggle() {
    $('#btnVisitorClose').on('click', function () { setVisitorPanelCollapsed(true); });
    $('#btnVisitorRestore').on('click', function () { setVisitorPanelCollapsed(false); });
    $('#btnVisitorOpen').on('click', function (e) {
      if (isMobileAgent()) return;
      e.preventDefault();
      setVisitorPanelCollapsed(false);
    });
    try {
      if (!isMobileAgent() && sessionStorage.getItem(VISITOR_PANEL_KEY) === '1') {
        setVisitorPanelCollapsed(true, true);
      }
    } catch (e) {}
  }

  function shouldNotifyIncoming() {
    return document.hidden || !document.hasFocus();
  }

  function notifyIncoming() {
    if (msgNotify && shouldNotifyIncoming()) msgNotify.notify();
  }

  function escapeHtml(text) {
    return $('<div>').text(text || '').html();
  }

  function escapeAttr(text) {
    return String(text || '')
      .replace(/&/g, '&amp;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;')
      .replace(/</g, '&lt;');
  }

  function renderQueueList(list) {
    var $list = $('#queueList');
    $list.empty();
    if (!list || !list.length) {
      $list.append(emptyStateHtml('queueEmpty', 'bx-time-five', {{jsString (T "agent.index.empty_queue")}}, 'sc-agent-empty--list'));
    } else {
      list.forEach(function (s) {
        $list.append(buildSessionItemHtml(s, { isQueue: true }));
      });
    }
    syncTabBadge($('#queueCount'), list || [], true);
    if (sessionId) {
      $('.sc-agent-item[data-session="' + sessionId + '"]').addClass('active');
    }
  }

  function renderMineList(list) {
    var $list = $('#mineList');
    $list.empty();
    if (!list || !list.length) {
      $list.append(emptyStateHtml('mineEmpty', 'bx-comment-dots', {{jsString (T "agent.index.empty_mine")}}, 'sc-agent-empty--list'));
    } else {
      list.forEach(function (s) {
        $list.append(buildSessionItemHtml(s, { isQueue: false }));
      });
    }
    syncTabBadge($('#mineCount'), list || [], false);
    if (sessionId) {
      $('.sc-agent-item[data-session="' + sessionId + '"]').addClass('active');
    }
  }

  function refreshSessionLists() {
    $.getJSON('/api/agent/session-lists', function (res) {
      if (!res.success || !res.data) return;
      renderQueueList(res.data.queued || []);
      renderMineList(res.data.mine || []);
      syncMobileSessionBadge();
    });
  }

  function formatMsgTime(ts) {
    if (!ts) return '';
    var d = new Date(ts * 1000);
    var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
    var now = new Date();
    var hm = pad(d.getHours()) + ':' + pad(d.getMinutes());
    if (d.toDateString() === now.toDateString()) return hm;
    var yesterday = new Date(now);
    yesterday.setDate(now.getDate() - 1);
    if (d.toDateString() === yesterday.toDateString()) return '{{T "agent.index.yesterday"}} ' + hm;
    return (d.getMonth() + 1) + {{jsString (T "agent.index.month")}} + d.getDate() + {{jsString (T "agent.index.day")}} + ' ' + hm;
  }

  function setEmptyState(show) {
    $('#msgEmpty').toggle(!!show);
  }

  function scrollMsgBox() {
    var box = document.getElementById('msgBox');
    if (box) box.scrollTop = box.scrollHeight;
  }

  function resetMsgMeta() {
    lastMsgMeta = { senderType: 0, createdAt: 0, $el: null };
  }

  function spacerAvatarHtml(side) {
    var cls = side === 'a'
      ? 'sc-msg__avatar sc-msg__avatar--a sc-msg__avatar--spacer'
      : 'sc-msg__avatar sc-msg__avatar--v sc-msg__avatar--spacer';
    return '<span class="' + cls + '"></span>';
  }

  function markAvatarSpacer($msgEl) {
    var $av = $msgEl.find('.sc-msg__avatar');
    if ($av.length && !$av.hasClass('sc-msg__avatar--spacer')) {
      $av.addClass('sc-msg__avatar--spacer').empty();
    }
  }

  function parseSessionHash() {
    var h = (location.hash || '').replace(/^#/, '').trim();
    if (!h) return 0;
    var m = h.match(/^s?(\d+)$/i);
    return m ? parseInt(m[1], 10) : 0;
  }

  function setSessionHash(id) {
    if (id) {
      if (location.hash !== '#s' + id) location.hash = 's' + id;
    } else if (location.hash) {
      history.replaceState(null, '', location.pathname + location.search);
    }
  }

  function activateSessionTab(id) {
    var $item = $('.sc-agent-item[data-session="' + id + '"]');
    if (!$item.length) return;
    var tabMine = document.getElementById('tabMineBtn');
    var tabQueue = document.getElementById('tabQueueBtn');
    if ($item.closest('#mineList').length && tabMine && window.bootstrap) {
      bootstrap.Tab.getOrCreateInstance(tabMine).show();
    } else if ($item.closest('#queueList').length && tabQueue && window.bootstrap) {
      bootstrap.Tab.getOrCreateInstance(tabQueue).show();
    }
  }

  function renderMsgContent(m) {
    var mt = (m.msg_type || 'text').toString();
    if (mt === 'image' || mt === 'file') {
      try {
        var meta = typeof m.content === 'string' ? JSON.parse(m.content) : m.content;
        if (meta && meta.url) {
          if (mt === 'image') {
            return '<a href="' + escapeAttr(meta.url) + '" target="_blank" rel="noopener"><img class="sc-msg__img" src="' + escapeAttr(meta.url) + '" alt="' + escapeAttr(meta.name || 'image') + '"></a>';
          }
          return '<a class="sc-msg__file" href="' + escapeAttr(meta.url) + '" target="_blank" rel="noopener"><i class="bx bx-file"></i> ' + escapeHtml(meta.name || {{jsString (T "agent.index.file_label")}}) + '</a>';
        }
      } catch (e) {}
    }
    return renderPlainTextHtml(m.content);
  }

  function appendMsg(m) {
    if (!m) return;
    if (m.id) {
      if (seenMsgIds[m.id]) return;
      seenMsgIds[m.id] = true;
    }
    sinceId = Math.max(sinceId, m.id || 0);
    setEmptyState(false);

    var content = renderMsgContent(m);
    var time = formatMsgTime(m.created_at);
    var html = '';
    var compact = false;

    if (m.sender_type == 3) {
      resetMsgMeta();
      html = '<div class="sc-msg sc-msg--system" data-sender-type="3" data-created-at="' + (m.created_at || 0) + '">'
        + '<div><span class="sc-msg__sys">' + content + '</span>'
        + (time ? '<time class="sc-msg__time">' + time + '</time>' : '')
        + '</div></div>';
    } else {
      if (lastMsgMeta.$el && lastMsgMeta.senderType === m.sender_type) {
        var gap = (m.created_at || 0) - (lastMsgMeta.createdAt || 0);
        if (gap >= 0 && gap <= MSG_GROUP_GAP_SEC) compact = true;
      }
      if (compact && lastMsgMeta.$el) {
        var wasCompact = lastMsgMeta.$el.hasClass('sc-msg--compact');
        lastMsgMeta.$el.addClass('sc-msg--compact');
        lastMsgMeta.$el.find('.sc-msg__time').remove();
        if (wasCompact) markAvatarSpacer(lastMsgMeta.$el);
      }
      var showTime = !compact && !!time;
      if (m.sender_type == 1) {
        var avV = compact ? spacerAvatarHtml('v') : '<span class="sc-msg__avatar sc-msg__avatar--v" title={{jsString (T "agent.index.visitor")}}><i class="bx bx-user"></i></span>';
        html = '<div class="sc-msg sc-msg--visitor' + (compact ? ' sc-msg--compact' : '') + '" data-sender-type="1" data-created-at="' + (m.created_at || 0) + '">'
          + avV
          + '<div class="sc-msg__body">'
          + '<div class="sc-msg__bubble sc-msg__bubble--v">' + content + '</div>'
          + (showTime ? '<time class="sc-msg__time">' + time + '</time>' : '')
          + '</div></div>';
      } else {
        var avA = compact
          ? spacerAvatarHtml('a')
          : '<span class="sc-msg__avatar sc-msg__avatar--a" title="' + escapeHtml(agentName) + '"><i class="bx bx-headphone"></i></span>';
        html = '<div class="sc-msg sc-msg--agent' + (compact ? ' sc-msg--compact' : '') + '" data-sender-type="2" data-created-at="' + (m.created_at || 0) + '">'
          + '<div class="sc-msg__body">'
          + '<div class="sc-msg__bubble sc-msg__bubble--a">' + content + '</div>'
          + (showTime ? '<time class="sc-msg__time">' + time + '</time>' : '')
          + '</div>'
          + avA
          + '</div>';
      }
    }

    var $el = $(html);
    $('#msgBox').append($el);
    if (m.sender_type != 3) {
      lastMsgMeta = { senderType: m.sender_type, createdAt: m.created_at || 0, $el: $el };
    }
    scrollMsgBox();
  }

  function sessionIdMatch(payloadSid) {
    return parseInt(payloadSid, 10) === sessionId;
  }

  function joinSessionRoom(sid) {
    if (!sid || !ws || ws.readyState !== 1) return;
    ws.send(JSON.stringify({ type: 'session.join', payload: { session_id: sid } }));
  }

  function fetchNewMessages() {
    if (!sessionId) return;
    $.getJSON('/api/agent/sessions/' + sessionId + '/messages?since_id=' + sinceId, function (res) {
      if (!res.success) return;
      var msgs = res.data.messages || [];
      if (msgs.length) {
        setEmptyState(false);
        msgs.forEach(appendMsg);
      }
    });
  }

  var wsReconnectTimer = null;
  var wsHeartbeatTimer = null;
  var wsReconnectDelay = 2000;
  var wsMaxReconnectDelay = 30000;

  function clearWsHeartbeat() {
    if (wsHeartbeatTimer) {
      clearInterval(wsHeartbeatTimer);
      wsHeartbeatTimer = null;
    }
  }

  function scheduleWsReconnect() {
    if (wsReconnectTimer) return;
    wsReconnectTimer = setTimeout(function () {
      wsReconnectTimer = null;
      connectWS(true);
    }, wsReconnectDelay);
    wsReconnectDelay = Math.min(wsMaxReconnectDelay, Math.round(wsReconnectDelay * 1.5));
  }

  function connectWS(isReconnect) {
    if (!isReconnect) wsReconnectDelay = 2000;
    if (ws) {
      try {
        ws.onclose = null;
        ws.onerror = null;
        ws.close();
      } catch (e) {}
      ws = null;
    }
    clearWsHeartbeat();
    var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
    ws = new WebSocket(proto + '//' + location.host + '/ws/agent');
    ws.onopen = function () {
      wsReconnectDelay = 2000;
      if (sessionId) joinSessionRoom(sessionId);
    };
    ws.onmessage = function (ev) {
      try {
        var d = JSON.parse(ev.data);
        if (d.type === 'message.new' && d.payload) {
          if (sessionIdMatch(d.payload.session_id)) {
            appendMsg(d.payload);
            if (parseInt(d.payload.sender_type, 10) === 1) clearSessionUnreadUI(d.payload.session_id);
          } else if (parseInt(d.payload.sender_type, 10) === 1) {
            bumpSessionUnread(d.payload.session_id);
          }
          if (d.payload.sender_type == 1) notifyIncoming();
        }
        if (d.type === 'session.updated' && d.payload) {
          refreshSessionLists();
          if (sessionIdMatch(d.payload.session_id)) fetchNewMessages();
          notifyIncoming();
        }
      } catch (e) {}
    };
    ws.onclose = function () {
      clearWsHeartbeat();
      scheduleWsReconnect();
    };
    ws.onerror = function () {};
    wsHeartbeatTimer = setInterval(function () {
      if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'heartbeat', payload: {} }));
    }, 30000);
  }

  function loadMessages() {
    if (!sessionId) return;
    $.getJSON('/api/agent/sessions/' + sessionId + '/messages?since_id=0', function (res) {
      if (!res.success) return;
      $('#msgBox').children('.sc-msg').remove();
      seenMsgIds = {};
      resetMsgMeta();
      var msgs = res.data.messages || [];
      if (!msgs.length) setEmptyState(true);
      else {
        setEmptyState(false);
        msgs.forEach(appendMsg);
      }
    });
  }

  function formatFullTime(ts) {
    if (!ts) return '—';
    var d = new Date(ts * 1000);
    var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
    return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate())
      + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
  }

  function formatShortUrl(url) {
    if (!url) return '—';
    try {
      var u = new URL(url);
      var path = u.pathname + u.search;
      if (path.length > 48) path = path.slice(0, 45) + '…';
      return u.hostname + path;
    } catch (e) {
      return url.length > 56 ? url.slice(0, 53) + '…' : url;
    }
  }

  function privacyHTML(kind, full) {
    if (!full && full !== 0) return '—';
    if (window.NCPrivacy && NCPrivacy.wrapHTML) return NCPrivacy.wrapHTML(kind, String(full));
    return escapeHtml(String(full));
  }

  function vRow(key, val, title) {
    var v = (val === 0 || val) ? String(val) : '—';
    return '<div class="sc-agent-vrow">'
      + '<span class="sc-agent-vrow__k">' + escapeHtml(key) + '</span>'
      + '<span class="sc-agent-vrow__v"' + (title ? ' title="' + escapeHtml(title) + '"' : '') + '>'
      + escapeHtml(v) + '</span></div>';
  }

  function vRowPrivacy(key, kind, full) {
    return '<div class="sc-agent-vrow">'
      + '<span class="sc-agent-vrow__k">' + escapeHtml(key) + '</span>'
      + '<span class="sc-agent-vrow__v">' + privacyHTML(kind, full) + '</span></div>';
  }

  function renderVisitorPanel(v) {
    currentVisitorData = v || null;
    if (!v) {
      $('#visitorContent').addClass('d-none');
      $('#visitorEmpty').removeClass('d-none');
      setEmptyText($('#visitorEmpty'), {{jsString (T "agent.index.visitor_empty")}});
      $('#chatTags').addClass('d-none').empty();
      return;
    }
    $('#visitorEmpty').addClass('d-none');
    var statsHtml = '<div class="sc-agent-vstat">'
      + '<div class="sc-agent-vstat__item"><div class="sc-agent-vstat__num">' + (v.sessions_today || 0) + '</div><div class="sc-agent-vstat__txt">{{T "agent.index.stat_today_consult"}}</div></div>'
      + '<div class="sc-agent-vstat__item"><div class="sc-agent-vstat__num">' + (v.total_sessions || 0) + '</div><div class="sc-agent-vstat__txt">{{T "agent.index.stat_total_chat"}}</div></div>'
      + '<div class="sc-agent-vstat__item"><div class="sc-agent-vstat__num">' + (v.consecutive_days || 0) + '</div><div class="sc-agent-vstat__txt">{{T "agent.index.stat_streak_days"}}</div></div>'
      + '<div class="sc-agent-vstat__item"><div class="sc-agent-vstat__num">' + (v.visit_count || 0) + '</div><div class="sc-agent-vstat__txt">{{T "agent.index.stat_visits"}}</div></div>'
      + '</div>';

    var contactHtml = '';
    if (v.phone) contactHtml += privacyHTML('phone', v.phone);

    var nameBadge = '';
    if (v.identity_verified) {
      nameBadge = ' <span class="badge text-bg-success" style="font-size:.65rem;vertical-align:middle">{{T "agent.index.verified_sig"}}</span>';
    } else if (v.external_user_id) {
      nameBadge = ' <span class="badge text-bg-secondary" style="font-size:.65rem;vertical-align:middle">{{T "agent.index.unverified_sig"}}</span>';
    }
    var nameRow = '<div class="sc-agent-vrow"><span class="sc-agent-vrow__k">{{T "agent.index.username"}}</span><span class="sc-agent-vrow__v">'
      + escapeHtml(v.name || '—') + nameBadge + '</span></div>';

    var html = renderLeadEditorCard(v)
      + statsHtml
      + '<div class="sc-agent-vcard" data-nc-privacy-menu><div class="sc-agent-vcard__label">{{T "agent.index.identity"}}</div>'
      + nameRow
      + (v.external_user_id ? vRowPrivacy({{jsString (T "agent.index.biz_user_id")}}, 'text', v.external_user_id) : '')
      + vRow({{jsString (T "agent.index.visitor_id_label")}}, v.visitor_token_short ? ('#' + v.visitor_token_short) : '')
      + (contactHtml ? ('<div class="sc-agent-vrow"><span class="sc-agent-vrow__k">{{T "agent.index.contact"}}</span><span class="sc-agent-vrow__v">' + contactHtml + '</span></div>') : '')
      + '</div>'
      + '<div class="sc-agent-vcard"><div class="sc-agent-vcard__label">{{T "agent.index.network"}}</div>'
      + vRowPrivacy('IP', 'ip', v.ip)
      + (v.geo_label ? vRow({{jsString (T "agent.index.region")}}, v.geo_label) : '')
      + vRow({{jsString (T "agent.index.device")}}, (v.device_label || '') + (v.browser ? (' · ' + v.browser) : '') + (v.os ? (' / ' + v.os) : ''))
      + (v.ua ? vRowPrivacy('UA', 'text', v.ua) : '')
      + '</div>'
      + '<div class="sc-agent-vcard"><div class="sc-agent-vcard__label">{{T "agent.index.time_section"}}</div>'
      + vRow({{jsString (T "agent.index.this_session")}}, formatFullTime(v.session_created_at))
      + vRow({{jsString (T "agent.index.first_consult")}}, formatFullTime(v.first_consult_at))
      + vRow({{jsString (T "agent.index.last_active")}}, formatFullTime(v.last_seen_at))
      + vRow({{jsString (T "agent.index.last_msg")}}, formatFullTime(v.last_message_at))
      + '</div>'
      + '<div class="sc-agent-vcard" data-nc-privacy-menu><div class="sc-agent-vcard__label">{{T "agent.index.source_trail"}}</div>'
      + vRowPrivacy({{jsString (T "agent.index.referrer_page")}}, 'url', v.referrer)
      + vRowPrivacy({{jsString (T "agent.index.landing_page")}}, 'url', v.landing_url)
      + vRowPrivacy({{jsString (T "agent.index.chat_page")}}, 'url', v.source_url);

    if (v.utm_source || v.utm_medium || v.utm_campaign) {
      var utm = [v.utm_source, v.utm_medium, v.utm_campaign].filter(Boolean).join(' / ');
      html += vRow('UTM', utm);
    }
    html += '</div>';

    if (v.trail && v.trail.length) {
      html += '<div class="sc-agent-vcard"><div class="sc-agent-vcard__label">{{T "agent.index.browse_trail"}}</div><ul class="sc-agent-vtrail">';
      v.trail.forEach(function (ev) {
        var label = ev.title ? privacyHTML('text', ev.title) : privacyHTML('url', ev.url || '');
        html += '<li><span class="sc-agent-vtrail__time">' + formatFullTime(ev.created_at) + '</span>' + label + '</li>';
      });
      html += '</ul></div>';
    }

    $('#visitorContent').html(html).removeClass('d-none');

    var tags = [];
    if (v.ip) tags.push('<span class="sc-agent-chat__tag"><i class="bx bx-globe"></i> ' + privacyHTML('ip', v.ip) + '</span>');
    if (v.geo_short) tags.push('<span class="sc-agent-chat__tag"><i class="bx bx-map"></i> ' + escapeHtml(v.geo_short) + '</span>');
    if (v.browser) tags.push('<span class="sc-agent-chat__tag">' + escapeHtml(v.browser) + '</span>');
    if (v.device_label) tags.push('<span class="sc-agent-chat__tag">' + escapeHtml(v.device_label) + '</span>');
    if (v.sessions_today > 1) tags.push('<span class="sc-agent-chat__tag">' + {{jsString (T "agent.index.today_nth_prefix")}} + v.sessions_today + {{jsString (T "agent.index.today_nth_suffix")}} + '</span>');
    if (v.lead_level > 0) {
      tags.push('<span class="sc-agent-chat__tag sc-agent-chat__tag--lead" style="border:1px solid ' + escapeAttr(v.lead_level_color || '#eab308') + ';color:' + escapeAttr(v.lead_level_color || '#92400e') + '"><i class="bx bxs-star"></i> ' + escapeHtml(v.lead_level_name || '') + '</span>');
    }
    if (v.tags && v.tags.length) {
      v.tags.forEach(function (t) {
        tags.push('<span class="sc-agent-chat__tag">' + escapeHtml(t) + '</span>');
      });
    }
    if (tags.length) {
      $('#chatTags').html(tags.join('')).removeClass('d-none');
    } else {
      $('#chatTags').addClass('d-none').empty();
    }
  }

  function loadVisitorInfo() {
    if (!sessionId) {
      renderVisitorPanel(null);
      return;
    }
    $('#visitorEmpty').removeClass('d-none');
    setEmptyText($('#visitorEmpty'), {{jsString (T "agent.index.loading_ellipsis")}});
    $('#visitorContent').addClass('d-none');
    $.getJSON('/api/agent/sessions/' + sessionId + '/visitor', function (res) {
      if (res.success && res.data) {
        renderVisitorPanel(res.data);
        updateSessionLeadUI(sessionId, res.data);
        var site = (res.data.site_name || '').toString();
        var meta = site;
        if (res.data.session_created_at) {
          meta = meta ? (meta + {{jsString (T "agent.index.session_sep")}} + formatFullTime(res.data.session_created_at)) : formatFullTime(res.data.session_created_at);
        }
        $('#chatMeta').text(meta || ({{jsString (T "agent.index.session_hash")}} + sessionId));
      } else {
        renderVisitorPanel(null);
      }
    }).fail(function () {
      renderVisitorPanel(null);
    });
  }

  function updateChatHead($item) {
    var name = ($item.data('name') || ({{jsString (T "agent.index.session_hash")}} + sessionId)).toString();
    var site = ($item.data('site') || '').toString();
    var time = ($item.data('time') || '').toString();
    var level = parseInt($item.attr('data-lead-level'), 10) || 0;
    var color = ($item.attr('data-lead-color') || '').toString();
    $('#chatTitle').text(name);
    applyChatTitleLeadColor(level, color);
    var meta = site;
    if (time) meta = meta ? (meta + ' · ' + time) : time;
    $('#chatMeta').text(meta || {{jsString (T "agent.index.session_hash")}} + sessionId);
    loadVisitorInfo();
  }

  function selectSession(id, accept) {
    sessionId = id;
    if (!id) closeVisitorDrawer();
    syncVisitorOpenButton();
    setSessionHash(id);
    joinSessionRoom(id);
    var $item = $('.sc-agent-item[data-session="' + id + '"]');
    $('.sc-agent-item').removeClass('active');
    $item.addClass('active');
    activateSessionTab(id);
    updateChatHead($item);
    clearSessionUnreadUI(id);
    $('#msgInput,#btnSend,#btnCanned,#fileUpload').prop('disabled', false);
    if (accept) {
      $.post('/api/agent/sessions/' + id + '/accept', function () {
        loadMessages();
        $('#btnAccept').addClass('d-none');
        var $clone = $item.clone().removeAttr('data-action');
        $item.remove();
        $('#queueEmpty').remove();
        $('#mineList').prepend($clone);
        $('#mineCount').text($('#mineList .sc-agent-item').length);
        $('#queueCount').text($('#queueList .sc-agent-item').length);
        syncTabBadgesFromDom();
        if (!$('#queueList .sc-agent-item').length && !$('#queueEmpty').length) {
          $('#queueList').append(emptyStateHtml('queueEmpty', 'bx-time-five', {{jsString (T "agent.index.empty_queue")}}, 'sc-agent-empty--list'));
        }
        var tabMine = document.getElementById('tabMineBtn');
        if (tabMine && window.bootstrap) bootstrap.Tab.getOrCreateInstance(tabMine).show();
      });
    } else {
      loadMessages();
      $('#btnAccept').toggleClass('d-none', !$item.is('[data-action]'));
    }
    if (isMobileAgent()) closeSessionsDrawer();
  }

  $(document).on('click', '.sc-agent-item', function () {
    selectSession(parseInt($(this).data('session'), 10), !!$(this).data('action'));
  });

  $('#btnAccept').on('click', function () {
    if (sessionId) selectSession(sessionId, true);
  });

  function sendMessage() {
    var raw = ($('#msgInput').val() || '').trim();
    if (!raw || !sessionId) return;
    var c = typeof sanitizePlainText === 'function' ? sanitizePlainText(raw) : raw;
    if (!c) {
      showAgentToast(false, {{jsString (T "agent.index.no_html")}});
      return;
    }
    $('#btnSend').prop('disabled', true);
    $.ajax({
      url: '/api/agent/sessions/' + sessionId + '/messages',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({ content: c }),
      success: function (res) {
        if (res.success) {
          $('#msgInput').val('').trigger('input');
          appendMsg(res.data.message);
        } else {
          showAgentToast(false, (res && res.message) || {{jsString (T "agent.index.err_send")}});
        }
      },
      error: function (xhr) {
        showAgentToast(false, (xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "agent.index.send_fail_retry")}});
      },
      complete: function () {
        $('#btnSend').prop('disabled', !sessionId);
      }
    });
  }

  $('#btnSend').on('click', sendMessage);
  var cannedCache = null;
  var cannedFromSlash = false;
  var slashRange = null;
  function loadCanned(cb) {
    if (cannedCache) { cb(cannedCache); return; }
    $.getJSON('/api/agent/canned', function (res) {
      cannedCache = (res.success && res.data && res.data.items) ? res.data.items : [];
      cb(cannedCache);
    }).fail(function () { cb([]); });
  }
  function closeCanned() {
    $('#cannedDrop').addClass('d-none');
    cannedFromSlash = false;
    slashRange = null;
  }
  function currentSlashToken(el) {
    if (!el) return null;
    var pos = el.selectionStart || 0;
    var before = String(el.value || '').slice(0, pos);
    var m = before.match(/(^|\s)(\/[^\s]*)$/);
    if (!m) return null;
    var token = m[2];
    return { start: pos - token.length, end: pos, query: token.slice(1) };
  }
  function filterCanned(items, q) {
    q = String(q || '').toLowerCase();
    if (!q) return items || [];
    return (items || []).filter(function (it) {
      var title = String(it.title || '').toLowerCase();
      var shortcut = String(it.shortcut || '').toLowerCase().replace(/^\//, '');
      var content = String(it.content || '').toLowerCase();
      return title.indexOf(q) >= 0 || shortcut.indexOf(q) >= 0 || content.indexOf(q) >= 0;
    });
  }
  function setCannedActive(index) {
    var $items = $('#cannedMenu .canned-item');
    $items.removeClass('is-active');
    var el = $items.get(index);
    if (!el) return;
    $(el).addClass('is-active');
    if (el.scrollIntoView) el.scrollIntoView({ block: 'nearest' });
  }
  function renderCannedMenu(items, fromSlash) {
    cannedFromSlash = !!fromSlash;
    var $menu = $('#cannedMenu').empty();
    if (!items.length) {
      $menu.append('<div class="dropdown-item-text text-muted small">' + (fromSlash ? {{jsString (T "agent.index.no_canned_match")}} : {{jsString (T "agent.index.no_canned")}}) + '</div>');
    } else {
      items.forEach(function (it) {
        var label = escapeHtml(it.title || {{jsString (T "agent.index.canned")}});
        if (it.shortcut) label += ' <code>' + escapeHtml(it.shortcut) + '</code>';
        $menu.append('<button type="button" class="dropdown-item canned-item" data-content="' + escapeAttr(it.content || '') + '">' + label + '</button>');
      });
      setCannedActive(0);
    }
    $('#cannedDrop').removeClass('d-none');
  }
  function applyCanned(content, fromSlash) {
    var el = document.getElementById('msgInput');
    if (!el) return;
    if (fromSlash && slashRange) {
      var val = el.value || '';
      el.value = val.slice(0, slashRange.start) + content + val.slice(slashRange.end);
      var pos = slashRange.start + content.length;
      if (el.setSelectionRange) el.setSelectionRange(pos, pos);
    } else {
      el.value = content;
    }
    closeCanned();
    $(el).trigger('input').focus();
  }
  function syncSlashCanned() {
    var el = document.getElementById('msgInput');
    if (!el || el.disabled || !sessionId) {
      if (cannedFromSlash) closeCanned();
      return;
    }
    var hit = currentSlashToken(el);
    if (!hit) {
      if (cannedFromSlash) closeCanned();
      return;
    }
    loadCanned(function (items) {
      var again = currentSlashToken(document.getElementById('msgInput'));
      if (!again) {
        if (cannedFromSlash) closeCanned();
        return;
      }
      slashRange = again;
      renderCannedMenu(filterCanned(items, again.query), true);
    });
  }
  $('#msgInput').on('keydown', function (e) {
    if (e.isComposing || e.keyCode === 229) return;
    if (!$('#cannedDrop').hasClass('d-none')) {
      var $items = $('#cannedMenu .canned-item');
      if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && $items.length) {
        e.preventDefault();
        var cur = $items.index($items.filter('.is-active'));
        var next = e.key === 'ArrowDown' ? cur + 1 : cur - 1;
        if (next < 0) next = $items.length - 1;
        if (next >= $items.length) next = 0;
        setCannedActive(next);
        return;
      }
      if (e.key === 'Enter' && !e.shiftKey) {
        var $active = $items.filter('.is-active');
        if ($active.length) {
          e.preventDefault();
          applyCanned($active.attr('data-content') || '', cannedFromSlash);
          return;
        }
      }
      if (e.key === 'Escape') {
        e.preventDefault();
        closeCanned();
        return;
      }
    }
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  });
  $('#msgInput').on('input', syncSlashCanned);
  $('#btnCanned').on('click', function (e) {
    e.stopPropagation();
    if (!sessionId) return;
    if (!$('#cannedDrop').hasClass('d-none') && !cannedFromSlash) {
      closeCanned();
      return;
    }
    loadCanned(function (items) {
      slashRange = null;
      renderCannedMenu(items, false);
    });
  });
  $('#cannedMenu').on('mousedown', function (e) { e.preventDefault(); });
  $(document).on('click', '.canned-item', function (e) {
    e.stopPropagation();
    applyCanned($(this).attr('data-content') || '', cannedFromSlash);
  });
  $(document).on('mouseenter', '.canned-item', function () {
    $('#cannedMenu .canned-item').removeClass('is-active');
    $(this).addClass('is-active');
  });
  $(document).on('click', function (e) {
    if ($(e.target).closest('#cannedDrop, #btnCanned, #msgInput').length) return;
    closeCanned();
  });

  var agentUploadXhr = null;
  function hideAgentUpload() {
    agentUploadXhr = null;
    $('#agentUploadBox').addClass('d-none');
    $('#agentUploadBar').css('width', '0%');
    $('#agentUploadTrack').attr('aria-valuenow', 0);
  }
  function showAgentUpload(name) {
    $('#agentUploadName').text(name || {{jsString (T "agent.index.attachment")}});
    $('#agentUploadBar').css('width', '0%');
    $('#agentUploadTrack').attr('aria-valuenow', 0);
    $('#agentUploadBox').removeClass('d-none');
  }
  $('#agentUploadCancel').on('click', function () {
    if (agentUploadXhr) {
      var xhr = agentUploadXhr;
      agentUploadXhr = null;
      xhr.abort();
    }
    hideAgentUpload();
  });
  $('#fileUpload').on('change', function () {
    var f = this.files && this.files[0];
    this.value = '';
    if (!f || !sessionId) return;
    if (agentUploadXhr) {
      agentUploadXhr.abort();
      agentUploadXhr = null;
    }
    showAgentUpload(f.name);
    var fd = new FormData();
    fd.append('file', f);
    fd.append('session_id', String(sessionId));
    $.ajax({
      url: '/api/agent/upload', method: 'POST', data: fd, processData: false, contentType: false,
      xhr: function () {
        var xhr = $.ajaxSettings.xhr();
        agentUploadXhr = xhr;
        if (xhr.upload) {
          xhr.upload.addEventListener('progress', function (ev) {
            if (!ev.lengthComputable || !ev.total) return;
            var pct = Math.round(ev.loaded / ev.total * 100);
            $('#agentUploadBar').css('width', pct + '%');
            $('#agentUploadTrack').attr('aria-valuenow', pct);
          });
        }
        return xhr;
      },
      success: function (res) {
        hideAgentUpload();
        if (res.success && res.data && res.data.message) appendMsg(res.data.message);
        else showAgentToast(false, (res && res.message) || {{jsString (T "agent.index.upload_fail")}});
      },
      error: function (xhr, status) {
        hideAgentUpload();
        if (status === 'abort') return;
        showAgentToast(false, (xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "agent.index.upload_fail")}});
      }
    });
  });

  $(document).on('click', '.sc-agent-lead-star', function () {
    leadDraft.level = parseInt($(this).attr('data-lead-level'), 10) || 0;
    $('.sc-agent-lead-star').removeClass('is-active');
    $(this).addClass('is-active');
  });
  $(document).on('click', '.sc-agent-lead-tag', function () {
    var t = ($(this).attr('data-lead-tag') || '').trim();
    if (!t) return;
    var idx = leadDraft.tags.indexOf(t);
    if (idx >= 0) {
      leadDraft.tags.splice(idx, 1);
      $(this).removeClass('is-on');
    } else {
      if (leadDraft.tags.length >= 8) return;
      leadDraft.tags.push(t);
      $(this).addClass('is-on');
    }
  });
  $(document).on('click', '#btnSaveVisitorLead', saveVisitorLead);

  connectWS();
  initVisitorPanelToggle();
  initSidebarResize();
  syncTabBadgesFromDom();
  updateMobileHints();
  $(window).on('resize', updateMobileHints);
  var hashId = parseSessionHash();
  var q = '{{index .Data "SessionID"}}';
  var initId = hashId || (q ? parseInt(q, 10) : 0);
  if (initId) selectSession(initId, false);
})();
</script>
{{end}}