{{define "admin/ai_search_chats.html"}}
{{template "admin_shell_open" .}}
<style>
.adm-ai-chat-toolbar .form-control,
.adm-ai-chat-toolbar .form-select { min-height: calc(1.5em + .5rem + 2px); }
.adm-ai-chat-bubble { border-radius: .5rem; padding: .65rem .85rem; margin-bottom: .65rem; border: 1px solid var(--bs-border-color); }
.adm-ai-chat-bubble.user { background: rgba(13, 110, 253, 0.06); border-color: rgba(13, 110, 253, 0.22); }
.adm-ai-chat-bubble.assistant { background: var(--bs-body-bg); }
.adm-ai-chat-bubble .adm-role { font-size: .7rem; font-weight: 600; color: var(--bs-secondary); margin-bottom: .35rem; }
.adm-ai-chat-bubble .adm-msg-pre { white-space: pre-wrap; word-break: break-word; font-size: .875rem; margin-bottom: 0; }
.adm-ai-chat-meta pre { font-size: .72rem; max-height: 240px; overflow: auto; margin-bottom: 0; }
</style>

<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-conversation" "Title" (T "admin.ai_search_chats.title") "Desc" (T "admin.ai_search_chats.desc"))}}

<div class="card cs-admin-section cs-admin-section--toolbar mb-3">
  <div class="cs-admin-section__body py-3">
<form class="row g-2 adm-ai-chat-toolbar" method="get" action="/admin/ai-search-chats">
  <div class="col-12 col-sm-auto">
    <label class="form-label small mb-0 text-muted d-block">{{T "admin.ai_search_chats.user_id"}}</label>
    <input type="number" class="form-control form-control-sm" name="user_id" value="{{if gt .Data.UserIDFilter 0}}{{printf "%d" .Data.UserIDFilter}}{{end}}" placeholder="{{T "admin.ai_search_chats.user_id_ph"}}" min="0" style="min-width:11rem">
  </div>
  <div class="col min-w-0">
    <label class="form-label small mb-0 text-muted d-block">{{T "admin.ai_search_chats.title_kw"}}</label>
    <input type="search" class="form-control form-control-sm" name="q" value="{{.Data.QQ}}" placeholder="{{T "admin.ai_search_chats.title_ph"}}" autocomplete="off">
  </div>
  <div class="col-12 col-sm-auto d-flex align-items-end gap-1">
    <button type="submit" class="btn btn-primary btn-sm">{{T "admin.ai_search_chats.filter"}}</button>
    <a class="btn btn-outline-secondary btn-sm" href="/admin/ai-search-chats">{{T "admin.ai_search_chats.reset"}}</a>
  </div>
</form>
  </div>
</div>

<div class="card cs-admin-section"><div class="cs-admin-section__body cs-admin-section__body--flush"><div class="table-responsive">
<table class="table table-sm align-middle mb-0">
<thead class="table-light">
<tr>
  <th>{{T "admin.ai_search_chats.col_id"}}</th>
  <th>{{T "admin.ai_search_chats.col_user"}}</th>
  <th>{{T "admin.ai_search_chats.col_guest"}}</th>
  <th>{{T "admin.ai_search_chats.col_title"}}</th>
  <th class="text-center">{{T "admin.ai_search_chats.col_msgs"}}</th>
  <th>{{T "admin.ai_search_chats.col_provider"}}</th>
  <th class="text-nowrap">{{T "admin.ai_search_chats.col_updated"}}</th>
  <th class="text-end">{{T "admin.ai_search_chats.col_actions"}}</th>
</tr>
</thead>
<tbody>
{{range .Data.Rows}}
{{$cid := index . "id"}}
<tr>
  <td class="font-monospace small">{{$cid}}</td>
  <td class="small">{{if gt (asInt (index . "user_id")) 0}}#{{index . "user_id"}} {{index . "username"}}{{else}}<span class="text-muted">{{T "admin.ai_search_chats.guest"}}</span>{{end}}</td>
  <td class="small font-monospace text-muted">{{index . "guest_key_short"}}</td>
  <td class="small text-break" style="max-width:280px">{{index . "title"}}</td>
  <td class="text-center small">{{index . "msg_count"}}</td>
  <td class="small">{{if gt (asInt (index . "provider_id")) 0}}#{{index . "provider_id"}} {{index . "provider_name"}}{{else}}<span class="text-muted">—</span>{{end}}</td>
  <td class="small text-muted text-nowrap">{{unixTime (index . "updated_at")}}</td>
  <td class="text-end text-nowrap p-2">
    <button type="button" class="btn btn-sm btn-outline-primary js-admin-ai-chat-view" data-chat-id="{{$cid}}">{{T "admin.ai_search_chats.btn_view"}}</button>
  </td>
</tr>
{{else}}
<tr><td colspan="8" class="text-center text-muted py-4">{{T "admin.ai_search_chats.empty"}}</td></tr>
{{end}}
</tbody>
</table></div></div></div>

{{$pg := .Data.Page}}{{$ps := .Data.PageSize}}
{{if or (gt $pg 1) (eq (len .Data.Rows) $ps)}}
<nav class="mt-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
  <span class="small text-muted">{{T "admin.ai_search_chats.total_prefix"}} {{.Data.Total}} {{T "admin.ai_search_chats.total_mid"}} {{$ps}} {{T "admin.ai_search_chats.total_suffix"}}</span>
  <div class="btn-group btn-group-sm">
    {{if gt $pg 1}}<a class="btn btn-outline-secondary" href="/admin/ai-search-chats?user_id={{if gt $.Data.UserIDFilter 0}}{{printf "%d" $.Data.UserIDFilter}}{{end}}&q={{urlEncode $.Data.QQ}}&page={{sub $pg 1}}">{{T "admin.ai_search_chats.prev"}}</a>{{end}}
    {{if eq (len .Data.Rows) $ps}}<a class="btn btn-outline-secondary" href="/admin/ai-search-chats?user_id={{if gt $.Data.UserIDFilter 0}}{{printf "%d" $.Data.UserIDFilter}}{{end}}&q={{urlEncode $.Data.QQ}}&page={{add $pg 1}}">{{T "admin.ai_search_chats.next"}}</a>{{end}}
  </div>
</nav>
{{else}}
<p class="small text-muted mt-2 mb-0">{{T "admin.ai_search_chats.total_prefix"}} {{.Data.Total}} {{T "admin.ai_search_chats.total_suffix"}}</p>
{{end}}

<div class="modal fade" id="adminAiChatModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bx bx-message-detail me-1"></i><span id="admAiChatModalTitle">{{T "admin.ai_search_chats.modal_title"}}</span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "admin.ai_search_chats.close"}}"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted small mb-2" id="admAiChatModalMeta">{{T "admin.ai_search_chats.loading"}}</p>
        <div id="admAiChatModalBody"><p class="text-muted small mb-0">{{T "admin.ai_search_chats.loading"}}</p></div>
      </div>
    </div>
  </div>
</div>

<script>
(function ($) {
  'use strict';
  var L = {
    metaLabel: {{jsString (T "admin.ai_search_chats.meta_label")}},
    chatPrefix: {{jsString (T "admin.ai_search_chats.chat_title_prefix")}},
    loading: {{jsString (T "admin.ai_search_chats.loading")}},
    loadFailed: {{jsString (T "admin.ai_search_chats.load_failed")}},
    guest: {{jsString (T "admin.ai_search_chats.guest")}},
    metaUser: {{jsString (T "admin.ai_search_chats.meta_user")}},
    metaGuest: {{jsString (T "admin.ai_search_chats.meta_guest")}},
    metaProvider: {{jsString (T "admin.ai_search_chats.meta_provider")}},
    metaCreated: {{jsString (T "admin.ai_search_chats.meta_created")}},
    metaUpdated: {{jsString (T "admin.ai_search_chats.meta_updated")}},
    noMessages: {{jsString (T "admin.ai_search_chats.no_messages")}},
    roleUser: {{jsString (T "admin.ai_search_chats.role_user")}},
    roleAssistant: {{jsString (T "admin.ai_search_chats.role_assistant")}},
    netFail: {{jsString (T "admin.ai_search_chats.net_fail")}}
  };
  function esc(t) {
    if (window.csAdminModal && typeof csAdminModal.escHtml === 'function') {
      return csAdminModal.escHtml(t);
    }
    return String(t == null ? '' : t)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }
  function metaBlock(meta) {
    if (meta == null) return '';
    var raw;
    try {
      raw = JSON.stringify(meta, null, 2);
    } catch (e) {
      raw = String(meta);
    }
    return '<div class="adm-ai-chat-meta mt-2 pt-2 border-top"><div class="small text-muted mb-1">' + L.metaLabel + '</div><pre class="bg-light border rounded p-2">' + esc(raw) + '</pre></div>';
  }
  var modalEl = document.getElementById('adminAiChatModal');
  var bsModal = modalEl && window.bootstrap ? new bootstrap.Modal(modalEl) : null;
  $(document).on('click', '.js-admin-ai-chat-view', function () {
    var id = $(this).data('chatId');
    if (id == null || id === '' || !bsModal) return;
    $('#admAiChatModalTitle').text(L.chatPrefix + id);
    $('#admAiChatModalMeta').text(L.loading);
    $('#admAiChatModalBody').html('<p class="text-muted small mb-0">' + L.loading + '</p>');
    bsModal.show();
    $.getJSON('/admin/ai-search-chats/messages?chat_id=' + encodeURIComponent(id) + '&_ajax=1', function (res) {
      if (!res || !res.data) {
        $('#admAiChatModalMeta').text('');
        $('#admAiChatModalBody').html('<p class="text-danger small mb-0">' + L.loadFailed + '</p>');
        return;
      }
      if (!res.success) {
        var errMsg = (res.data && res.data.error) ? String(res.data.error) : L.loadFailed;
        $('#admAiChatModalMeta').text('');
        $('#admAiChatModalBody').html('<p class="text-danger small mb-0">' + esc(errMsg) + '</p>');
        return;
      }
      var chat = res.data.chat || {};
      var msgs = res.data.messages || [];
      var uid = chat.user_id != null ? Number(chat.user_id) : 0;
      var who = uid > 0 ? ('#' + uid + ' ' + (chat.username || '')) : L.guest;
      var guest = chat.guest_key_short != null ? String(chat.guest_key_short) : '—';
      var prov = '';
      if (chat.provider_id != null && Number(chat.provider_id) > 0) {
        prov = '#' + chat.provider_id + ' ' + (chat.provider_name || '');
      } else {
        prov = '—';
      }
      $('#admAiChatModalMeta').html(
        '<span class="text-break">' + esc(chat.title || '') + '</span><br>' +
        '<span class="small text-muted">' + L.metaUser + esc(who) +
        ' · ' + L.metaGuest + esc(guest) +
        ' · ' + L.metaProvider + esc(prov) +
        ' · ' + L.metaCreated + ' ' + esc(chat.created_at_str || '') +
        ' · ' + L.metaUpdated + ' ' + esc(chat.updated_at_str || '') +
        '</span>'
      );
      if (!msgs.length) {
        $('#admAiChatModalBody').html('<p class="text-muted small mb-0">' + L.noMessages + '</p>');
        return;
      }
      var h = '';
      for (var i = 0; i < msgs.length; i++) {
        var m = msgs[i];
        var role = (m.role || '').toLowerCase();
        var cls = role === 'assistant' ? 'assistant' : 'user';
        var roleLab = role === 'assistant' ? L.roleAssistant : (role === 'user' ? L.roleUser : esc(m.role || ''));
        h += '<div class="adm-ai-chat-bubble ' + cls + '">';
        h += '<div class="adm-role">' + roleLab + ' · ' + esc(m.created_at_str || '') + '</div>';
        h += '<p class="adm-msg-pre">' + esc(m.content != null ? String(m.content) : '') + '</p>';
        if (role === 'assistant' && m.meta != null) {
          h += metaBlock(m.meta);
        }
        h += '</div>';
      }
      $('#admAiChatModalBody').html(h);
    }).fail(function (xhr) {
      $('#admAiChatModalMeta').text('');
      var errMsg = L.netFail;
      try {
        var j = xhr.responseJSON;
        if (!j && xhr.responseText) {
          j = JSON.parse(xhr.responseText);
        }
        if (j && j.data && j.data.error) {
          errMsg = String(j.data.error);
        } else if (j && j.message) {
          errMsg = String(j.message);
        }
      } catch (e) { /* ignore */ }
      $('#admAiChatModalBody').html('<p class="text-danger small mb-0">' + esc(errMsg) + '</p>');
    });
  });
})(jQuery);
</script>
</div>
{{template "admin_shell_close" .}}
{{end}}