<%
  var _rows = rows || [];
  var _pages = Math.max(1, Math.ceil((total || 0) / perPage));
  var _filtered = !!(filters.w || filters.who || filters.problems || filters.q);
  var qs = function (extra) {
    var p = Object.assign({ w: filters.w, days: filters.days, who: filters.who, problems: filters.problems ? '1' : '', q: filters.q }, extra || {});
    return '/staff/chatbot-log?' + Object.keys(p).filter(function (k) { return p[k] !== '' && p[k] != null; }).map(function (k) { return k + '=' + encodeURIComponent(p[k]); }).join('&');
  };
%>
<div class="pg-head" style="margin-bottom:0">
  <div><div class="eyebrow">Operations</div></div>
  <div class="ph-right"><%- include('../partials/demo-toggle') %></div>
</div>

<h1 class="claim"><%= title %></h1>
<p class="claim-lede"><% if (total) { %><em><%= h.int(total) %></em> question<%= total === 1 ? '' : 's' %> in the last <%= filters.days %> days.<% } else { %>No questions in the last <%= filters.days %> days.<% } %></p>
<p class="claim-sub">Everything asked of the portal assistant, with its answer.</p>

<div class="bento" style="margin-top:22px">
  <div class="card shelf-c b3 sc-violet"><div class="cl">Chats</div><div class="cv tnum"><%= h.int(stats.chats) %></div></div>
  <div class="card shelf-c b3 sc-lime"><div class="cl">People</div><div class="cv tnum"><%= h.int(stats.people) %></div></div>
  <div class="card shelf-c b3 sc-sky"><div class="cl">Rated helpful / not</div><div class="cv tnum"><%= stats.up %> / <%= stats.down %></div></div>
  <div class="card shelf-c b3 sc-navy"><div class="cl">Total cost</div><div class="cv tnum">$<%= stats.cost < 0.01 && stats.cost > 0 ? stats.cost.toFixed(4) : stats.cost.toFixed(2) %></div><div class="rr-meta" style="margin-top:4px"><%= h.int(stats.tokens) %> tokens · <%= stats.errors %> error<%= stats.errors === 1 ? '' : 's' %></div></div>

  <div class="card b12"><div class="card-p">
    <form class="addform" method="GET" action="/staff/chatbot-log" style="align-items:flex-end">
      <div class="fld" style="min-width:200px"><label>Client</label>
        <select name="w"><option value="">All clients</option><% workspaces.forEach(function (w) { %><option value="<%= w.slug %>" <%= filters.w === w.slug ? 'selected' : '' %>><%= w.name %></option><% }) %></select></div>
      <div class="fld" style="min-width:140px"><label>Asked by</label>
        <select name="who"><option value="">Everyone</option><option value="client" <%= filters.who === 'client' ? 'selected' : '' %>>Clients</option><option value="staff" <%= filters.who === 'staff' ? 'selected' : '' %>>Staff</option></select></div>
      <div class="fld" style="min-width:130px"><label>Period</label>
        <select name="days"><% [7, 30, 90, 365].forEach(function (d) { %><option value="<%= d %>" <%= filters.days === d ? 'selected' : '' %>>Last <%= d %> days</option><% }) %></select></div>
      <div class="fld" style="min-width:150px"><label>Show</label>
        <select name="problems"><option value="">All</option><option value="1" <%= filters.problems ? 'selected' : '' %>>Errors and 👎 only</option></select></div>
      <div class="fld" style="min-width:200px"><label>Question contains</label><input name="q" value="<%= filters.q %>" placeholder="any word"></div>
      <button class="btn btn-primary btn-sm" type="submit">Filter</button>
      <% if (_filtered) { %><a class="btn btn-sm" href="/staff/chatbot-log">Clear</a><% } %>
    </form>
  </div></div>

  <div class="card b12">
    <div class="card-h"><h3>Questions</h3><span class="hint"><%= h.int(total) %><% if (total > perPage) { %>, page <%= page %> of <%= _pages %><% } %></span></div>
    <% if (!_rows.length) { %>
      <div class="card-p rr-meta" style="text-align:center; padding:34px 12px">Nothing<%= _filtered ? ' for this filter' : ' yet' %>.</div>
    <% } else { %>
    <div style="overflow-x:auto"><table class="tbl">
      <thead><tr><th>When</th><th>Client</th><th>Asked by</th><th>Question and answer</th><th>Rating</th><th>Cost</th></tr></thead>
      <tbody>
      <% _rows.forEach(function (r) { %>
        <tr style="vertical-align:top">
          <td class="muted" style="white-space:nowrap"><%= h.date(r.at) %><div class="rr-meta"><%= h.time(r.at) %></div></td>
          <td class="muted"><%= r.workspace ? r.workspace.name : '—' %></td>
          <td><div class="strong"><%= r.userName || '—' %></div><div class="rr-meta"><%= ['staff', 'admin'].indexOf(r.role) > -1 ? 'staff' : 'client' %><%= r.page ? ' · ' + r.page : '' %></div></td>
          <td style="max-width:560px">
            <div class="strong" style="word-break:break-word"><%= r.question %></div>
            <% if (r.error) { %><div class="rr-meta" style="color:var(--neg)">Error: <%= r.error %></div>
            <% } else { %><details><summary class="rr-meta" style="cursor:pointer"><%= String(r.answer || '').slice(0, 140) %><%= String(r.answer || '').length > 140 ? '…' : '' %></summary><div class="rr-meta" style="white-space:pre-wrap; word-break:break-word; margin-top:6px; color:var(--ink)"><%= r.answer %></div></details><% } %>
          </td>
          <td><%= r.rating === 'up' ? '👍' : r.rating === 'down' ? '👎' : '—' %></td>
          <td class="muted" style="white-space:nowrap"><b style="color:var(--ink)"><%= r.costUsd != null ? '$' + r.costUsd.toFixed(5) : '—' %></b><div class="rr-meta"><%= r.tokensIn != null ? h.int((r.tokensIn || 0) + (r.tokensOut || 0)) + ' tokens' : '' %></div><div class="rr-meta"><%= r.ms ? (Math.round(r.ms / 100) / 10) + 's' : '' %><%= r.model ? ' · ' + r.model : '' %></div></td>
        </tr>
      <% }) %>
      </tbody>
    </table></div>
    <% if (total > perPage) { %>
      <div class="card-p" style="display:flex; gap:10px; justify-content:center">
        <% if (page > 1) { %><a class="btn btn-sm" href="<%= qs({ page: page - 1 }) %>">← Newer</a><% } %>
        <% if (page * perPage < total) { %><a class="btn btn-sm" href="<%= qs({ page: page + 1 }) %>">Older →</a><% } %>
      </div>
    <% } %>
    <% } %>
  </div>
</div>
