{{define "user/faq.html"}}
{{template "user/layout_head" .}}
{{$siteID := index .Data "SiteID"}}
{{$ai := index .Data "SiteAI"}}
{{template "user_pagehead" (dict "Icon" "bx-book-content" "Title" (T "user.faq.page_title") "Desc" (T "user.faq.page_desc"))}}
<form class="mb-3" method="get" action="/user/faq">
  <label class="form-label small">{{T "user.faq.site"}}</label>
  <select name="site_id" class="form-select form-select-sm" style="max-width:20rem" onchange="this.form.submit()">
    {{range index .Data "Sites"}}
    <option value="{{.id}}" {{if eq (asInt .id) (asInt $siteID)}}selected{{end}}>{{.name}}</option>
    {{end}}
  </select>
</form>
{{if $siteID}}
<div class="row g-3 mb-4">
  <div class="col-lg-6">
    <div class="card border-0 shadow-sm p-3">
      <h2 class="h6 fw-bold">{{T "user.faq.ai_title"}}</h2>
      <div class="form-check form-switch mb-2">
        <input class="form-check-input" type="checkbox" id="aiEnabled" {{if index $ai "ai_enabled"}}checked{{end}}>
        <label class="form-check-label" for="aiEnabled">{{T "user.faq.ai_switch"}}</label>
      </div>
      <div class="mb-2"><label class="form-label small">Base URL</label><input class="form-control form-control-sm" id="aiBase" value="{{index $ai "ai_base_url"}}"></div>
      <div class="mb-2"><label class="form-label small">Model</label><input class="form-control form-control-sm" id="aiModel" value="{{index $ai "ai_model"}}"></div>
      <div class="mb-2"><label class="form-label small">API Key {{if index $ai "ai_api_key_set"}}<span class="text-success small">{{T "user.faq.key_set"}}</span>{{end}}</label><input class="form-control form-control-sm" id="aiKey" type="password" placeholder="{{T "user.faq.key_keep"}}"></div>
      <div class="mb-2"><label class="form-label small">{{T "user.faq.system_prompt"}}</label><textarea class="form-control form-control-sm" id="aiSystem" rows="3">{{index $ai "ai_system"}}</textarea></div>
      <button type="button" class="btn btn-primary btn-sm" id="btnSaveAI">{{T "user.faq.save_ai"}}</button>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card border-0 shadow-sm p-3">
      <h2 class="h6 fw-bold">{{T "user.faq.add"}}</h2>
      <input type="hidden" id="faqId" value="0">
      <div class="mb-2"><label class="form-label small">{{T "user.faq.q_display"}}</label><input class="form-control form-control-sm" id="faqQ"></div>
      <div class="mb-2"><label class="form-label small">{{T "user.faq.keywords"}}</label><input class="form-control form-control-sm" id="faqKw" placeholder="{{T "user.faq.kw_ph"}}"></div>
      <div class="mb-2"><label class="form-label small">{{T "user.faq.answer"}}</label><textarea class="form-control form-control-sm" id="faqA" rows="4"></textarea></div>
      <div class="mb-2">
        <select class="form-select form-select-sm" id="faqMode"><option value="contains">{{T "user.faq.match_contains"}}</option><option value="exact">{{T "user.faq.match_exact"}}</option></select>
      </div>
      <button type="button" class="btn btn-primary btn-sm" id="btnSaveFAQ">{{T "user.faq.save_faq"}}</button>
    </div>
  </div>
</div>
<div class="list-group shadow-sm">
  {{range index .Data "Items"}}
  <div class="list-group-item d-flex justify-content-between gap-2">
    <div>
      <strong>{{.question}}</strong>
      <span class="badge text-bg-light border">{{T "user.faq.hit_prefix"}} {{.hit_count}}</span>
      <div class="small text-muted">{{T "user.faq.kw_label"}}{{.keywords}}</div>
      <div class="small">{{.answer}}</div>
    </div>
    <button type="button" class="btn btn-sm btn-outline-danger" data-del-faq="{{.id}}">{{T "user.faq.delete"}}</button>
  </div>
  {{else}}
  <div class="list-group-item text-muted">{{T "user.faq.empty"}}</div>
  {{end}}
</div>
<script>
(function () {
  var siteId = {{$siteID}};
  $('#btnSaveAI').on('click', function () {
    $.ajax({
      url: '/api/user/sites/ai', method: 'POST', contentType: 'application/json',
      data: JSON.stringify({
        site_id: siteId,
        ai_enabled: $('#aiEnabled').is(':checked'),
        ai_base_url: $('#aiBase').val(),
        ai_model: $('#aiModel').val(),
        ai_api_key: $('#aiKey').val(),
        ai_system: $('#aiSystem').val()
      }),
      success: function (res) { alert(res.success ? {{jsString (T "user.faq.saved")}} : (res.message || {{jsString (T "user.faq.failed")}})); }
    });
  });
  $('#btnSaveFAQ').on('click', function () {
    $.ajax({
      url: '/api/user/faq', method: 'POST', contentType: 'application/json',
      data: JSON.stringify({
        site_id: siteId,
        question: $('#faqQ').val(),
        keywords: $('#faqKw').val(),
        answer: $('#faqA').val(),
        match_mode: $('#faqMode').val(),
        enabled: true
      }),
      success: function (res) {
        if (res.success) location.reload();
        else alert(res.message || {{jsString (T "user.faq.failed")}});
      }
    });
  });
  $('[data-del-faq]').on('click', function () {
    var id = $(this).data('del-faq');
    if (!confirm({{jsString (T "user.faq.confirm_del")}})) return;
    $.post('/api/user/faq/' + id + '/delete', function (res) {
      if (res.success) location.reload();
    });
  });
})();
</script>
{{else}}
<div class="alert alert-warning">{{T "user.faq.need_site"}}</div>
{{end}}
{{template "user/layout_foot" .}}
{{end}}