{{define "user/session_chat_modal"}}
<style>
.user-chat-modal { display: flex; flex-direction: column; min-height: 320px; max-height: min(560px, 68vh); }
.user-chat-modal__meta {
  flex-shrink: 0; padding: .75rem 1rem; border-bottom: 1px solid #e2e8f0;
  background: #f8fafc; font-size: .8125rem;
}
.user-chat-modal__meta-row { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: #64748b; }
.user-chat-modal__meta-row strong { color: #334155; font-weight: 600; }
.user-chat-modal__msgs {
  flex: 1; overflow-y: auto; padding: 1rem; background: #fff;
}
.user-chat-modal__msg { margin-bottom: .75rem; max-width: 88%; }
.user-chat-modal__msg--agent { margin-left: auto; text-align: right; }
.user-chat-modal__msg--system { max-width: 100%; text-align: center; margin-bottom: .5rem; }
.user-chat-modal__bubble {
  display: inline-block; padding: .45rem .75rem; border-radius: .65rem;
  font-size: .875rem; line-height: 1.45; word-break: break-word; text-align: left;
}
.user-chat-modal__msg--visitor .user-chat-modal__bubble { background: #f1f5f9; color: #1e293b; }
.user-chat-modal__msg--agent .user-chat-modal__bubble { background: #2563eb; color: #fff; }
.user-chat-modal__msg--system .user-chat-modal__bubble {
  background: transparent; color: #94a3b8; font-size: .75rem; padding: 0;
}
.user-chat-modal__time { font-size: .6875rem; color: #94a3b8; margin-top: .2rem; }
.user-chat-modal__empty { text-align: center; color: #94a3b8; padding: 2rem 1rem; font-size: .875rem; }
.user-chat-modal__loading { text-align: center; padding: 3rem 1rem; color: #64748b; }
#userSessionChatModal .modal-body { min-height: 200px; }

/* 表格内访客链接 / 查看对话按钮（sessions、leads 共用） */
.ut-visitor-chat-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: 100%;
  padding: .28rem .55rem .28rem .35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(37, 99, 235, 0.06);
  color: var(--ut-text, #0f172a);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ut-visitor-chat-link__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #dbeafe 0%, #eff6ff 100%);
  color: var(--ut-primary, #2563eb);
  font-size: .95rem;
}
.ut-visitor-chat-link__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ut-visitor-chat-link__arrow {
  flex-shrink: 0;
  font-size: 1rem;
  color: #94a3b8;
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity .18s ease, transform .18s ease, color .18s ease;
}
.ut-visitor-chat-link:hover,
.ut-visitor-chat-link:focus-visible {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.22);
  color: var(--ut-primary-dark, #1e40af);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
}
.ut-visitor-chat-link:hover .ut-visitor-chat-link__avatar,
.ut-visitor-chat-link:focus-visible .ut-visitor-chat-link__avatar {
  background: linear-gradient(145deg, #bfdbfe 0%, #dbeafe 100%);
}
.ut-visitor-chat-link:hover .ut-visitor-chat-link__arrow,
.ut-visitor-chat-link:focus-visible .ut-visitor-chat-link__arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--ut-primary, #2563eb);
}
.ut-session-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .55rem;
  border-radius: var(--ut-radius-sm, 8px);
  border: 1px solid var(--ut-border, #e2e8f0);
  background: #fff;
  color: var(--ut-text-muted, #64748b);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ut-session-chat-btn i { font-size: .95rem; color: var(--ut-primary, #2563eb); }
.ut-session-chat-btn:hover,
.ut-session-chat-btn:focus-visible {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.28);
  color: var(--ut-primary-dark, #1e40af);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.06);
}
</style>

<div class="modal fade" id="userSessionChatModal" tabindex="-1" aria-labelledby="userSessionChatModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content border-0 shadow">
      <div class="modal-header flex-shrink-0">
        <h2 class="modal-title fs-6 fw-semibold" id="userSessionChatModalLabel">{{T "user.chat_modal.title"}}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "user.chat_modal.close_aria"}}"></button>
      </div>
      <div class="modal-body p-0" id="userSessionChatModalBody">
        <div class="user-chat-modal__loading"><div class="spinner-border spinner-border-sm text-primary" role="status"></div><div class="mt-2 small">{{T "user.chat_modal.loading"}}</div></div>
      </div>
      <div class="modal-footer flex-shrink-0 py-2" id="userSessionChatModalFooter">
        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "user.chat_modal.close"}}</button>
      </div>
    </div>
  </div>
</div>

<script>
window.addEventListener('load', function () {
  'use strict';
  if (typeof bootstrap === 'undefined' || typeof bootstrap.Modal !== 'function') return;

  var modalEl = document.getElementById('userSessionChatModal');
  var titleEl = document.getElementById('userSessionChatModalLabel');
  var bodyEl = document.getElementById('userSessionChatModalBody');
  var footEl = document.getElementById('userSessionChatModalFooter');
  var chatModal = modalEl ? bootstrap.Modal.getOrCreateInstance(modalEl) : null;

  function esc(s) {
    return $('<div/>').text(s == null ? '' : String(s)).html();
  }

  function formatTs(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 statusBadge(status, text) {
    var cls = 'secondary';
    if (status === 0) cls = 'warning';
    else if (status === 1) cls = 'success';
    return '<span class="badge text-bg-' + cls + '">' + esc(text || '—') + '</span>';
  }

  function showLoading() {
    if (bodyEl) {
      bodyEl.innerHTML = '<div class="user-chat-modal__loading"><div class="spinner-border spinner-border-sm text-primary" role="status"></div><div class="mt-2 small">{{T "user.chat_modal.loading"}}</div></div>';
    }
    if (footEl) {
      footEl.innerHTML = '<button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "user.chat_modal.close"}}</button>';
    }
  }

  function showMessage(msg, type) {
    var cls = type === 'danger' ? 'alert-danger' : 'alert-info';
    if (bodyEl) {
      bodyEl.innerHTML = '<div class="p-4"><div class="alert ' + cls + ' mb-0 small">' + esc(msg) + '</div></div>';
    }
    if (footEl) {
      footEl.innerHTML = '<button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "user.chat_modal.close"}}</button>';
    }
  }

  function renderMessages(msgs) {
    if (!msgs || !msgs.length) {
      return '<div class="user-chat-modal__empty">' + {{jsString (T "user.chat_modal.empty_msgs")}} + '</div>';
    }
    var html = '';
    msgs.forEach(function (m) {
      var st = parseInt(m.sender_type, 10) || 0;
      var time = formatTs(m.created_at);
      if (st === 3) {
        html += '<div class="user-chat-modal__msg user-chat-modal__msg--system">'
          + '<div class="user-chat-modal__bubble">' + renderPlainTextHtml(m.content) + '</div>'
          + (time ? '<div class="user-chat-modal__time">' + esc(time) + '</div>' : '')
          + '</div>';
        return;
      }
      var roleCls = st === 2 ? 'agent' : 'visitor';
      html += '<div class="user-chat-modal__msg user-chat-modal__msg--' + roleCls + '">'
        + '<div class="user-chat-modal__bubble">' + renderPlainTextHtml(m.content) + '</div>'
        + (time ? '<div class="user-chat-modal__time">' + esc(time) + '</div>' : '')
        + '</div>';
    });
    return html;
  }

  function renderChatContent(data) {
    var s = data.session || {};
    var v = data.visitor || {};
    function privacyHTML(kind, full) {
      if (!full && full !== 0) return '—';
      if (window.NCPrivacy && NCPrivacy.wrapHTML) return NCPrivacy.wrapHTML(kind, String(full));
      return esc(String(full));
    }
    var meta = '<div class="user-chat-modal__meta" data-nc-privacy-menu>'
      + '<div class="user-chat-modal__meta-row mb-1">'
      + '<span><strong>' + privacyHTML('text', v.name || {{jsString (T "user.chat_modal.visitor")}}) + '</strong></span>'
      + '<span>' + {{jsString (T "user.chat_modal.site_prefix")}} + esc(s.site_name || v.site_name || '—') + '</span>'
      + '<span>' + {{jsString (T "user.chat_modal.status_prefix")}} + statusBadge(s.status, s.status_text) + '</span>'
      + '</div>'
      + '<div class="user-chat-modal__meta-row">'
      + '<span>' + {{jsString (T "user.chat_modal.ip_prefix")}} + privacyHTML('text', v.ip_masked || '—') + (v.geo_label ? '（' + esc(v.geo_label) + '）' : '') + '</span>'
      + '<span>' + esc(v.browser || '—') + ' / ' + esc(v.os || '—') + '</span>'
      + '<span>' + {{jsString (T "user.chat_modal.updated_prefix")}} + esc(formatTs(s.updated_at) || '—') + '</span>'
      + '</div></div>';
    if (bodyEl) {
      bodyEl.innerHTML = '<div class="user-chat-modal">'
        + meta
        + '<div class="user-chat-modal__msgs">' + renderMessages(data.messages) + '</div>'
        + '</div>';
      var $box = $(bodyEl).find('.user-chat-modal__msgs');
      if ($box.length) $box.scrollTop($box[0].scrollHeight);
    }
    if (footEl) {
      var footHtml = '<button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "user.chat_modal.close"}}</button>';
      if (s.id) {
        var detailHref = s.session_ref ? ('/user/sessions/' + esc(String(s.session_ref))) : '#';
        footHtml = '<a class="btn btn-outline-secondary btn-sm" href="' + detailHref + '" target="_blank" rel="noopener">' + {{jsString (T "user.chat_modal.view_detail")}} + ' <i class="bx bx-link-external"></i></a>'
          + footHtml;
      }
      footEl.innerHTML = footHtml;
    }
  }

  window.openUserSessionChat = function (options) {
    if (!chatModal) return;
    options = options || {};
    var sessionId = options.sessionId;
    var visitorId = options.visitorId;
    var title = options.title;
    var url;
    if (sessionId) {
      url = '/api/user/sessions/' + encodeURIComponent(sessionId) + '/chat';
    } else if (visitorId) {
      url = '/api/user/visitors/' + encodeURIComponent(visitorId) + '/chat';
    } else {
      return;
    }
    if (titleEl) titleEl.textContent = title || {{jsString (T "user.chat_modal.title")}};
    showLoading();
    chatModal.show();
    $.getJSON(url)
      .done(function (res) {
        if (!res || !res.success) {
          showMessage((res && res.message) || {{jsString (T "user.chat_modal.load_fail")}}, 'danger');
          return;
        }
        var data = res.data || {};
        if (data.no_session) {
          showMessage({{jsString (T "user.chat_modal.no_session")}}, 'info');
          return;
        }
        var s = data.session || {};
        var v = data.visitor || {};
        if (titleEl) titleEl.textContent = title || ({{jsString (T "user.chat_modal.session_hash")}} + (s.id || '') + ' · ' + (v.name || {{jsString (T "user.chat_modal.visitor")}}));
        renderChatContent(data);
      })
      .fail(function () {
        showMessage({{jsString (T "user.chat_modal.load_fail_retry")}}, 'danger');
      });
  };

  $(document).on('click', '.js-user-session-chat', function (e) {
    e.preventDefault();
    var $el = $(this);
    window.openUserSessionChat({
      sessionId: $el.data('session-id'),
      visitorId: $el.data('visitor-id'),
      title: $el.data('title') || $.trim($el.text())
    });
  });
});
</script>
{{end}}