{{define "admin/ai_embeddings.html"}}
{{template "admin_shell_open" .}}
<style>
.adm-emb-panel-box,
.adm-emb-rebuild-box {
  border: 1px solid rgba(13, 110, 253, 0.18);
  border-radius: .75rem;
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.04) 0%, rgba(255, 255, 255, 1) 100%);
}
.adm-emb-panel-box .form-label,
.adm-emb-rebuild-box .form-label {
  letter-spacing: .02em;
  white-space: nowrap;
}
.adm-emb-panel-box .form-select,
.adm-emb-rebuild-box .form-select {
  width: 100%;
  max-width: 100%;
  min-height: calc(1.5em + .85rem + 2px);
  border-color: rgba(13, 110, 253, 0.28);
  background-color: #fff;
}
.adm-emb-panel-box .form-select:focus,
.adm-emb-rebuild-box .form-select:focus {
  border-color: rgba(13, 110, 253, 0.55);
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, 0.12);
}
.adm-emb-model-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  min-height: 1.75rem;
}
.adm-emb-model-meta .adm-emb-meta-label {
  font-size: .75rem;
  color: var(--bs-secondary-color);
  margin-right: .15rem;
  white-space: nowrap;
}
.adm-emb-model-meta code {
  font-size: .8125rem;
  color: #0a58ca;
  background: rgba(13, 110, 253, 0.08);
  padding: .2rem .5rem;
  border-radius: .35rem;
  word-break: break-all;
}
.adm-emb-meta-badge {
  font-size: .7rem;
  font-weight: 600;
  padding: .25rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.adm-emb-btn-save,
.adm-emb-btn-rebuild {
  width: 100%;
  min-height: calc(1.5em + .85rem + 2px);
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
@media (min-width: 1200px) {
  .adm-emb-btn-save,
  .adm-emb-btn-rebuild {
    width: auto;
    min-width: 10rem;
  }
  .adm-emb-btn-rebuild {
    min-width: 15rem;
  }
}
</style>
<div class="cs-admin-page cs-admin-page--narrow">
{{template "admin_flash" .}}
{{template "admin_pagehead" (dict "Icon" "bx-chip" "Title" (T "admin.ai_embeddings.title") "Desc" (T "admin.ai_embeddings.desc"))}}

<div class="alert alert-warning small py-2 mb-3 d-none" id="admEmbWarn" role="alert"></div>

<div class="row g-3 mb-4">
  <div class="col-md-4">
    <div class="card cs-admin-section h-100">
      <div class="cs-admin-section__body small">
        <div class="text-muted mb-1">{{T "admin.ai_embeddings.stat_pub"}}</div>
        <div class="fs-4 fw-semibold text-primary" id="admEmbStatPub">{{.Data.PublishedCount}}</div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card cs-admin-section h-100">
      <div class="cs-admin-section__body small">
        <div class="text-muted mb-1">{{T "admin.ai_embeddings.stat_idx"}}</div>
        <div class="fs-4 fw-semibold text-primary" id="admEmbStatIdx">{{.Data.IndexedActive}}</div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card cs-admin-section h-100">
      <div class="cs-admin-section__body small">
        <div class="text-muted mb-1">{{T "admin.ai_embeddings.stat_prog"}}</div>
        <div class="fs-6 fw-semibold" id="admEmbProgText">{{if .Data.RebuildBusy}}{{T "admin.ai_embeddings.busy"}}{{else}}{{T "admin.ai_embeddings.idle"}}{{end}}</div>
        <div class="small text-muted font-monospace" id="admEmbProgNum">{{.Data.ProgressDone}} / {{.Data.ProgressTotal}}</div>
        <div class="small text-secondary mt-1 mb-0">{{T "admin.ai_embeddings.prog_note"}}</div>
      </div>
    </div>
  </div>
</div>

<div class="card cs-admin-section mb-4">
  <div class="card-header bg-white fw-semibold small">{{T "admin.ai_embeddings.default_card"}}</div>
  <div class="card-body">
    <p class="small text-muted mb-3">{{html (T "admin.ai_embeddings.default_intro_html")}}</p>
    {{if .Data.Providers}}
    <form method="post" action="/admin/ai-embeddings" class="cs-admin-ajax-form adm-emb-panel-box p-3 p-md-4 mb-0" data-cs-reload="1" id="admEmbDefaultForm">
      <input type="hidden" name="_action" value="save_default">
      <div class="row g-2 mb-1">
        <div class="col-12">
          <label class="form-label small fw-semibold text-body mb-0 d-inline-flex align-items-center gap-1" for="admEmbDefaultSel">
            <i class="bx bx-pin text-primary" aria-hidden="true"></i>
            <span>{{T "admin.ai_embeddings.label_default"}}</span>
          </label>
        </div>
      </div>
      <div class="row g-3 align-items-end">
        <div class="col-12 col-xl-9">
          <select class="form-select form-select-sm" name="provider_id" id="admEmbDefaultSel" required>
            {{range .Data.Providers}}
            <option value="{{index . "id"}}"
              data-embedding="{{index . "embedding_model"}}"
              {{if gt $.Data.ConfiguredDefaultProviderID 0}}{{if eq $.Data.ConfiguredDefaultProviderID (asInt (index . "id"))}}selected{{end}}{{else}}{{if eq $.Data.DefaultProviderID (asInt (index . "id"))}}selected{{end}}{{end}}>
              #{{index . "id"}} · {{index . "name"}} · Embedding: {{index . "embedding_model"}}
            </option>
            {{end}}
          </select>
        </div>
        <div class="col-12 col-xl-3 d-grid">
          <button type="submit" class="btn btn-outline-primary btn-sm adm-emb-btn-save d-inline-flex align-items-center justify-content-center gap-1">
            <i class="bx bx-save" aria-hidden="true"></i>
            <span>{{T "admin.ai_embeddings.save_default"}}</span>
          </button>
        </div>
      </div>
      <div class="row g-0 mt-3">
        <div class="col-12">
          <div class="adm-emb-model-meta pt-3 border-top border-primary border-opacity-10" id="admEmbDefaultMeta" aria-live="polite"></div>
        </div>
      </div>
    </form>
    {{else}}
    <div class="alert alert-warning small mb-0 py-2">{{html (T "admin.ai_embeddings.no_provider")}}</div>
    {{end}}
  </div>
</div>

<div class="card cs-admin-section">
  <div class="card-header bg-white fw-semibold small">{{T "admin.ai_embeddings.rebuild_card"}}</div>
  <div class="card-body">
    <p class="small text-muted mb-3">{{html (T "admin.ai_embeddings.rebuild_intro_html")}}</p>
    {{if .Data.Providers}}
    <form method="post" action="/admin/ai-embeddings" class="cs-admin-ajax-form adm-emb-rebuild-box p-3 p-md-4" data-cs-reload="0" id="admEmbRebuildForm">
      <input type="hidden" name="_action" value="rebuild_all">
      <div class="row g-2 mb-1">
        <div class="col-12">
          <label class="form-label small fw-semibold text-body mb-0 d-inline-flex align-items-center gap-1" for="admEmbProviderSel">
            <i class="bx bx-cloud text-primary" aria-hidden="true"></i>
            <span>{{T "admin.ai_embeddings.label_provider"}}</span>
          </label>
        </div>
      </div>
      <div class="row g-3 align-items-end">
        <div class="col-12 col-xl-9">
          <select class="form-select form-select-sm" name="provider_id" id="admEmbProviderSel" required {{if .Data.RebuildBusy}}disabled{{end}}>
            {{range .Data.Providers}}
            <option value="{{index . "id"}}"
              data-embedding="{{index . "embedding_model"}}"
              data-use-chat="{{if ne (asInt (index . "use_for_chat")) 0}}1{{else}}0{{end}}"
              {{if eq $.Data.DefaultProviderID (asInt (index . "id"))}}selected{{end}}>
              #{{index . "id"}} · {{index . "name"}} · Embedding: {{index . "embedding_model"}}
            </option>
            {{end}}
          </select>
        </div>
        <div class="col-12 col-xl-3 d-grid">
          <button type="submit" class="btn btn-primary btn-sm adm-emb-btn-rebuild d-inline-flex align-items-center justify-content-center gap-1" id="admEmbBtnRebuild" title="{{T "admin.ai_embeddings.rebuild_title"}}" {{if .Data.RebuildBusy}}disabled{{end}}>
            <i class="bx bx-analyse" aria-hidden="true"></i>
            <span>{{T "admin.ai_embeddings.rebuild_btn"}}</span>
          </button>
        </div>
      </div>
      <div class="row g-0 mt-3">
        <div class="col-12">
          <div class="adm-emb-model-meta pt-3 border-top border-primary border-opacity-10" id="admEmbProviderMeta" aria-live="polite"></div>
        </div>
      </div>
    </form>
    {{else}}
    <div class="alert alert-warning small mb-0 py-2">{{html (T "admin.ai_embeddings.no_provider_rebuild")}}</div>
    {{end}}
    <p class="small text-secondary mt-2 mb-0">{{html (T "admin.ai_embeddings.rebuild_note_html")}}</p>
  </div>
</div>

<script>
(function ($) {
  'use strict';
  var L = {
    metaWillUse: {{jsString (T "admin.ai_embeddings.meta_will_use")}},
    metaChat: {{jsString (T "admin.ai_embeddings.meta_chat")}},
    busy: {{jsString (T "admin.ai_embeddings.busy")}},
    idle: {{jsString (T "admin.ai_embeddings.idle")}},
    warnFailPrefix: {{jsString (T "admin.ai_embeddings.warn_fail_prefix")}},
    warnOk: {{jsString (T "admin.ai_embeddings.warn_ok")}},
    warnFail: {{jsString (T "admin.ai_embeddings.warn_fail")}},
    warnProv: {{jsString (T "admin.ai_embeddings.warn_prov")}},
    warnErr: {{jsString (T "admin.ai_embeddings.warn_err")}},
    warnQuota: {{jsString (T "admin.ai_embeddings.warn_quota")}},
    okAllPrefix: {{jsString (T "admin.ai_embeddings.ok_all_prefix")}},
    okAllMid: {{jsString (T "admin.ai_embeddings.ok_all_mid")}},
    okAllSuf: {{jsString (T "admin.ai_embeddings.ok_all_suf")}}
  };
  var timer = null;
  var $sel = $('#admEmbProviderSel');
  var $defSel = $('#admEmbDefaultSel');
  var providerLabels = {};
  {{range .Data.Providers}}
  providerLabels[String({{index . "id"}})] = {{jsString (index . "name")}};
  {{end}}

  function syncProviderHint($selectEl, $metaEl, showChatBadge) {
    if (!$selectEl.length || !$metaEl.length) return;
    var $opt = $selectEl.find('option:selected');
    var emb = $opt.attr('data-embedding') || '';
    if (!emb) {
      $metaEl.empty();
      return;
    }
    var html = '<span class="adm-emb-meta-label">' + L.metaWillUse + '</span>' +
      '<span class="adm-emb-meta-badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25">Embedding</span>' +
      '<code>' + escHtml(emb) + '</code>';
    if (showChatBadge && $opt.attr('data-use-chat') === '1') {
      html += '<span class="adm-emb-meta-badge bg-info bg-opacity-10 text-primary border border-primary border-opacity-25">' + L.metaChat + '</span>';
    }
    $metaEl.html(html);
  }

  function syncRebuildHint() {
    syncProviderHint($sel, $('#admEmbProviderMeta'), true);
  }

  function syncDefaultHint() {
    syncProviderHint($defSel, $('#admEmbDefaultMeta'), false);
  }

  function escHtml(s) {
    return String(s == null ? '' : s)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }

  function bump() {
    $.getJSON('/admin/ai-embeddings/status', function (d) {
      if (!d || !d.ok) return;
      $('#admEmbStatPub').text(String(d.published != null ? d.published : '—'));
      $('#admEmbStatIdx').text(String(d.indexed_active != null ? d.indexed_active : '—'));
      $('#admEmbProgNum').text(String(d.progress_done || 0) + ' / ' + String(d.progress_total || 0));
      var $w = $('#admEmbWarn');
      if (!d.busy && (d.last_rebuild_fail | 0) > 0) {
        var provTail = '';
        if (d.last_rebuild_provider_id) {
          var pn = providerLabels[String(d.last_rebuild_provider_id)] || '';
          provTail = L.warnProv + d.last_rebuild_provider_id + (pn ? (' ' + pn) : '');
        }
        var tail = d.last_rebuild_err_first ? (L.warnErr + String(d.last_rebuild_err_first)) : '';
        $w.removeClass('d-none').removeClass('alert-success').addClass('alert-danger')
          .html(L.warnFailPrefix + '<strong>' + L.warnOk + ' ' + (d.last_rebuild_ok || 0) + '</strong>，<strong>' + L.warnFail + ' ' + (d.last_rebuild_fail || 0) + '</strong>' + provTail + tail +
            L.warnQuota);
      } else if (!d.busy && (d.last_rebuild_ok | 0) > 0 && (d.last_rebuild_fail | 0) === 0) {
        var okProv = '';
        if (d.last_rebuild_provider_id) {
          var pn2 = providerLabels[String(d.last_rebuild_provider_id)] || '';
          okProv = '（' + L.warnProv.trim().replace(/^·\s*/, '') + d.last_rebuild_provider_id + (pn2 ? (' ' + pn2) : '') + '）';
        }
        $w.removeClass('d-none alert-danger').addClass('alert-success')
          .html(L.okAllPrefix + '<strong>' + L.okAllMid + (d.last_rebuild_ok || 0) + L.okAllSuf + '</strong>' + okProv + '。');
      } else if (!d.busy && (d.last_rebuild_unix || 0) <= 0) {
        $w.addClass('d-none').empty();
      }
      if (d.busy) {
        $('#admEmbProgText').text(L.busy);
        $('#admEmbBtnRebuild').prop('disabled', true);
        $sel.prop('disabled', true);
      } else {
        $('#admEmbProgText').text(L.idle);
        $('#admEmbBtnRebuild').prop('disabled', false);
        $sel.prop('disabled', false);
        if (timer) {
          clearInterval(timer);
          timer = null;
        }
      }
    });
  }
  function startPolling() {
    bump();
    if (timer) clearInterval(timer);
    timer = setInterval(bump, 2500);
  }
  if ($sel.length) {
    $sel.on('change', syncRebuildHint);
    syncRebuildHint();
  }
  if ($defSel.length) {
    $defSel.on('change', syncDefaultHint);
    syncDefaultHint();
  }
  $('#admEmbRebuildForm').on('submit', function () {
    setTimeout(startPolling, 600);
  });
  {{if .Data.RebuildBusy}}startPolling();{{end}}
})(jQuery);
</script>
</div>

{{template "admin_shell_close" .}}
{{end}}