{% extends "manage_base.html" %}
{% block manage_content %}
<style>
.ai-evaluation-manage {
  --aem-accent: #2563eb;
  --aem-border: #dbe4ef;
  --aem-muted: #64748b;
  --aem-soft: #f8fafc;
  --aem-text: #1e293b;
  container-name: evaluation-admin;
  container-type: inline-size;
}
.ai-evaluation-manage .aem-header,
.ai-evaluation-manage .aem-toolbar,
.ai-evaluation-manage .aem-actions,
.ai-evaluation-manage .aem-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ai-evaluation-manage .aem-header {
  justify-content: space-between;
  width: 100%;
}
.ai-evaluation-manage .aem-help {
  margin: 0;
  color: var(--aem-muted);
  font-size: 13px;
  line-height: 1.6;
}
.ai-evaluation-manage .aem-notice {
  margin: 0 0 14px;
}
.ai-evaluation-manage .aem-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.ai-evaluation-manage .aem-stat {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--aem-border);
  border-radius: 8px;
  background: var(--aem-soft);
}
.ai-evaluation-manage .aem-stat__label {
  overflow: hidden;
  color: var(--aem-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-evaluation-manage .aem-stat__value {
  margin-top: 3px;
  color: var(--aem-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.ai-evaluation-manage .aem-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--aem-border);
  border-radius: 8px;
  background: var(--aem-soft);
}
.ai-evaluation-manage .aem-filter__item {
  min-width: 0;
}
.ai-evaluation-manage .aem-filter__item--query {
  grid-column: span 2;
}
.ai-evaluation-manage .aem-filter label {
  display: block;
  margin-bottom: 5px;
  color: var(--aem-text);
  font-size: 13px;
  font-weight: 600;
}
.ai-evaluation-manage .aem-filter .textbox,
.ai-evaluation-manage .aem-filter .select {
  width: 100%;
}
.ai-evaluation-manage .aem-filter__check {
  display: flex;
  align-items: center;
  min-height: 36px;
  gap: 6px;
}
.ai-evaluation-manage .aem-toolbar {
  justify-content: space-between;
  min-height: 38px;
  margin: 4px 0 10px;
}
.ai-evaluation-manage .aem-selection {
  color: var(--aem-muted);
  font-size: 13px;
}
.ai-evaluation-manage .aem-select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--aem-text);
  font-size: 13px;
}
.ai-evaluation-manage .aem-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ai-evaluation-manage .aem-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--aem-border);
  border-radius: 8px;
}
.ai-evaluation-manage .aem-table {
  min-width: 1140px;
  margin: 0;
}
.ai-evaluation-manage .aem-table th,
.ai-evaluation-manage .aem-table td {
  vertical-align: top;
}
.ai-evaluation-manage .aem-table th:first-child,
.ai-evaluation-manage .aem-table td:first-child {
  width: 38px;
  text-align: center;
}
.ai-evaluation-manage .aem-table th:last-child,
.ai-evaluation-manage .aem-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff;
  box-shadow: -8px 0 10px -10px rgba(15, 23, 42, .55);
}
.ai-evaluation-manage .aem-table th:last-child {
  z-index: 3;
  background: var(--aem-soft);
}
.ai-evaluation-manage .aem-table tbody tr:nth-child(even) td:last-child {
  background: var(--aem-soft);
}
.ai-evaluation-manage .aem-row--stuck td:first-child {
  box-shadow: inset 3px 0 #a855f7;
}
.ai-evaluation-manage .aem-primary {
  color: var(--aem-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ai-evaluation-manage .aem-secondary,
.ai-evaluation-manage .aem-id {
  margin-top: 3px;
  color: var(--aem-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ai-evaluation-manage .aem-id code {
  color: inherit;
  white-space: normal;
}
.ai-evaluation-manage .aem-badge,
.ai-evaluation-manage .aem-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.ai-evaluation-manage .aem-status--pending { background: #fef3c7; color: #92400e; }
.ai-evaluation-manage .aem-status--running { background: #dbeafe; color: #1d4ed8; }
.ai-evaluation-manage .aem-status--succeeded,
.ai-evaluation-manage .aem-status--success { background: #dcfce7; color: #166534; }
.ai-evaluation-manage .aem-status--failed,
.ai-evaluation-manage .aem-status--failed_to_submit,
.ai-evaluation-manage .aem-status--error { background: #fee2e2; color: #991b1b; }
.ai-evaluation-manage .aem-status--not_created,
.ai-evaluation-manage .aem-status--unknown { background: #e2e8f0; color: #475569; }
.ai-evaluation-manage .aem-status--stuck,
.ai-evaluation-manage .aem-stuck { background: #f3e8ff; color: #7e22ce; }
.ai-evaluation-manage .aem-error {
  max-width: 290px;
  margin-top: 5px;
  color: #b42318;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ai-evaluation-manage .aem-actions {
  min-width: 0;
}
.ai-evaluation-manage .aem-actions form {
  display: inline;
  margin: 0;
}
.ai-evaluation-manage .aem-actions .button {
  margin: 0;
}
.ai-evaluation-manage .aem-empty {
  padding: 36px 20px !important;
  color: var(--aem-muted);
  text-align: center;
}
.ai-evaluation-manage .aem-pager {
  justify-content: flex-end;
  margin-top: 14px;
}
.theme--dark .ai-evaluation-manage {
  --aem-border: #364152;
  --aem-muted: #94a3b8;
  --aem-soft: #1e293b;
  --aem-text: #e2e8f0;
}
.theme--dark .ai-evaluation-manage .aem-table-wrap {
  background: #172033;
}
.theme--dark .ai-evaluation-manage .aem-table td:last-child {
  background: #172033;
}
.theme--dark .ai-evaluation-manage .aem-table th:last-child,
.theme--dark .ai-evaluation-manage .aem-table tbody tr:nth-child(even) td:last-child {
  background: #1e293b;
}
.theme--dark .ai-evaluation-manage .aem-error {
  color: #fca5a5;
}
@media screen and (min-width: 1280px) {
  .page--manage_summary_evaluations .main > .row {
    width: calc(100% - 48px);
    max-width: 1600px;
  }
  .page--manage_summary_evaluations .main > .row > .medium-9 {
    width: calc(100% - 260px);
  }
  .page--manage_summary_evaluations .main > .row > .medium-3 {
    width: 260px;
  }
}
@container evaluation-admin (max-width: 1199px) {
  .ai-evaluation-manage .aem-stats {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  }
  .ai-evaluation-manage .aem-filter {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}
@container evaluation-admin (max-width: 620px) {
  .ai-evaluation-manage .aem-stats { grid-template-columns: repeat(2, minmax(92px, 1fr)); }
  .ai-evaluation-manage .aem-filter { grid-template-columns: 1fr; }
  .ai-evaluation-manage .aem-filter__item--query { grid-column: auto; }
  .ai-evaluation-manage .aem-header { align-items: flex-start; }
  .ai-evaluation-manage .aem-toolbar { align-items: flex-start; flex-direction: column; }
}
</style>

<div class="section ai-evaluation-manage">
  <div class="section__header">
    <div class="aem-header">
      <div>
        <h1 class="section__title" data-heading>AI 评测记录</h1>
        <p class="aem-help">集中查看课程小结和比赛总结的 AI 评测状态。同步只读取现有任务；重新评测会创建新的模型调用。</p>
      </div>
    </div>
  </div>
  <div class="section__body">
    {% if not evaluationEnabled %}
    <blockquote class="warn aem-notice">AI 评测服务尚未启用，当前只能查看已保存的记录，无法同步或重新评测。</blockquote>
    {% endif %}

    {% if messages and messages.length %}
      {% for message in messages %}
        {% set messageText = message.text or message.message or message %}
        {% if message.type == 'error' %}
        <blockquote class="warn aem-notice">{{ messageText|escape }}</blockquote>
        {% else %}
        <blockquote class="note aem-notice">{{ messageText|escape }}</blockquote>
        {% endif %}
      {% endfor %}
    {% endif %}

    <div class="aem-stats" aria-label="AI 评测概览">
      <div class="aem-stat"><div class="aem-stat__label">记录总数</div><div class="aem-stat__value">{{ stats.total }}</div></div>
      <div class="aem-stat"><div class="aem-stat__label">未创建</div><div class="aem-stat__value">{{ stats.uncreated }}</div></div>
      <div class="aem-stat"><div class="aem-stat__label">等待评测</div><div class="aem-stat__value">{{ stats.pending }}</div></div>
      <div class="aem-stat"><div class="aem-stat__label">正在评测</div><div class="aem-stat__value">{{ stats.running }}</div></div>
      <div class="aem-stat"><div class="aem-stat__label">评测成功</div><div class="aem-stat__value">{{ stats.succeeded }}</div></div>
      <div class="aem-stat"><div class="aem-stat__label">评测失败</div><div class="aem-stat__value">{{ stats.failed }}</div></div>
      <div class="aem-stat"><div class="aem-stat__label">提交评测失败</div><div class="aem-stat__value">{{ stats.failedToSubmit }}</div></div>
      <div class="aem-stat"><div class="aem-stat__label">未知状态</div><div class="aem-stat__value">{{ stats.unknown }}</div></div>
      <div class="aem-stat"><div class="aem-stat__label">疑似卡住</div><div class="aem-stat__value">{{ stats.stuck }}</div></div>
    </div>

    <form class="aem-filter" method="get" action="{{ listUrl }}">
      <div class="aem-filter__item">
        <label for="aem-source">内容来源</label>
        <select class="select" id="aem-source" name="source">
          <option value="all" {% if not filters.source or filters.source == 'all' %}selected{% endif %}>全部来源</option>
          <option value="contest" {% if filters.source == 'contest' %}selected{% endif %}>比赛总结</option>
          <option value="course" {% if filters.source == 'course' %}selected{% endif %}>课程小结</option>
        </select>
      </div>
      <div class="aem-filter__item">
        <label for="aem-status">评测状态</label>
        <select class="select" id="aem-status" name="status">
          <option value="all" {% if not filters.status or filters.status == 'all' %}selected{% endif %}>全部状态</option>
          <option value="not_created" {% if filters.status == 'not_created' %}selected{% endif %}>未创建</option>
          <option value="pending" {% if filters.status == 'pending' %}selected{% endif %}>等待评测</option>
          <option value="running" {% if filters.status == 'running' %}selected{% endif %}>正在评测</option>
          <option value="succeeded" {% if filters.status == 'succeeded' %}selected{% endif %}>评测成功</option>
          <option value="failed" {% if filters.status == 'failed' %}selected{% endif %}>评测失败</option>
          <option value="failed_to_submit" {% if filters.status == 'failed_to_submit' %}selected{% endif %}>提交评测失败</option>
          <option value="unknown" {% if filters.status == 'unknown' %}selected{% endif %}>未知状态</option>
        </select>
      </div>
      <div class="aem-filter__item">
        <label for="aem-domain">域</label>
        <select class="select" id="aem-domain" name="targetDomain">
          <option value="" {% if not filters.domainId %}selected{% endif %}>全部域</option>
          {% for domain in domains %}
            {% set domainValue = domain.id or domain._id or domain.domainId or domain %}
            {% set domainLabel = domain.name or domain.title or domainValue %}
            <option value="{{ domainValue }}" {% if domainValue == filters.domainId %}selected{% endif %}>{{ domainLabel }}（{{ domainValue }}）</option>
          {% endfor %}
        </select>
      </div>
      <div class="aem-filter__item">
        <label for="aem-uid">用户 UID</label>
        <input class="textbox" id="aem-uid" name="uid" inputmode="numeric" value="{{ filters.uid }}" placeholder="例如：123">
      </div>
      <div class="aem-filter__item aem-filter__item--query">
        <label for="aem-query">关键词</label>
        <input class="textbox" id="aem-query" name="q" value="{{ filters.q }}" placeholder="文章标题、评测 ID、题目标识或错误信息">
      </div>
      <div class="aem-filter__item">
        <label class="aem-filter__check" for="aem-stuck">
          <input id="aem-stuck" type="checkbox" name="stuck" value="1" {% if filters.stuck %}checked{% endif %}>
          只看疑似卡住
        </label>
      </div>
      <div class="aem-filter__item aem-actions">
        <button class="button rounded primary" type="submit">筛选</button>
        <a class="button rounded" href="{{ listUrl }}">重置</a>
      </div>
    </form>

    <form id="aem-batch-sync" method="post" action="{{ actionUrl }}">
      <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
      <input type="hidden" name="action" value="batch_sync">
    </form>
    <div class="aem-toolbar">
      <div class="aem-actions">
        <label class="aem-select-all" for="aem-select-all">
          <input type="checkbox" id="aem-select-all">
          选择本页可同步记录
        </label>
        <button class="button rounded" id="aem-batch-submit" type="submit" form="aem-batch-sync" disabled>同步所选记录</button>
        <span class="aem-selection"><span id="aem-selected-count">0</span>/20 条已选择</span>
      </div>
      <p class="aem-help">批量同步每次最多处理 20 条；同步不会创建新的模型调用。</p>
    </div>

    <div class="aem-table-wrap table-layout-guard">
      <table class="data-table aem-table">
        <colgroup>
          <col style="width:38px">
          <col style="width:88px">
          <col style="width:190px">
          <col style="width:95px">
          <col style="width:110px">
          <col style="width:55px">
          <col style="width:165px">
          <col style="width:180px">
          <col style="width:220px">
        </colgroup>
        <thead>
          <tr>
            <th><span class="aem-sr-only">选择</span></th>
            <th>来源</th>
            <th>域与内容</th>
            <th>用户</th>
            <th>状态</th>
            <th>分数</th>
            <th>评测标识</th>
            <th>更新时间与错误</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {% if rows.length %}
            {% for row in rows %}
            <tr data-source="{{ row.source }}" data-status="{{ row.status }}" {% if row.stuck %}class="aem-row--stuck"{% endif %}>
              <td class="aem-cell--select">
                <input
                  class="aem-row-check"
                  type="checkbox"
                  name="sids"
                  value="{{ row.key }}"
                  form="aem-batch-sync"
                  aria-label="选择 {{ row.sourceText }}：{{ row.targetTitle }}"
                  {% if not evaluationEnabled or not row.canSync %}disabled{% endif %}>
              </td>
              <td data-label="来源">
                <span class="aem-badge">{{ row.sourceText }}</span>
                <div class="aem-secondary">{{ row.source }}</div>
              </td>
              <td class="aem-cell--target" data-label="域与内容">
                {% if row.detailUrl %}
                <a class="aem-primary" href="{{ row.detailUrl }}">{{ row.targetTitle }}</a>
                {% else %}
                <div class="aem-primary">{{ row.targetTitle }}</div>
                {% endif %}
                <div class="aem-secondary">{{ row.domainName }}（{{ row.domainId }}）</div>
                {% if row.problemId %}<div class="aem-id">任务：<code>{{ row.problemId }}</code></div>{% endif %}
              </td>
              <td data-label="用户">
                <div class="aem-primary">{{ row.userName }}</div>
                <div class="aem-secondary">UID {{ row.uid }}</div>
              </td>
              <td data-label="状态">
                <span class="aem-status aem-status--{{ row.statusClass|escape }}">{{ row.statusText }}</span>
                {% if row.stuck %}<div style="margin-top:5px;"><span class="aem-status aem-stuck">疑似卡住</span></div>{% endif %}
              </td>
              <td data-label="分数">{% if row.score != null %}<strong>{{ row.score }}</strong>{% else %}<span class="aem-secondary">—</span>{% endif %}</td>
              <td data-label="评测标识">
                {% if row.evaluationId %}
                <div class="aem-id"><code>{{ row.evaluationId }}</code></div>
                {% else %}
                <span class="aem-secondary">尚未创建</span>
                {% endif %}
              </td>
              <td class="aem-cell--meta" data-label="更新时间与错误">
                {% if row.evaluationUpdatedAt %}
                <div>{{ datetimeSpan(row.evaluationUpdatedAt, false, 'YYYY-MM-DD HH:mm:ss')|safe }}</div>
                {% else %}
                <span class="aem-secondary">—</span>
                {% endif %}
                {% if row.errorText %}<div class="aem-error">{{ row.errorText|escape }}</div>{% endif %}
              </td>
              <td class="aem-cell--actions" data-label="操作">
                <div class="aem-actions">
                  {% if row.detailUrl %}<a class="button rounded small" href="{{ row.detailUrl }}">查看</a>{% endif %}
                  {% if evaluationEnabled and row.canSync %}
                  <form method="post" action="{{ actionUrl }}">
                    <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
                    <input type="hidden" name="action" value="sync">
                    <input type="hidden" name="source" value="{{ row.source }}">
                    <input type="hidden" name="sid" value="{{ row.id }}">
                    <button class="button rounded small" type="submit">同步</button>
                  </form>
                  {% endif %}
                  {% if evaluationEnabled and row.canRetry %}
                  <form method="post" action="{{ actionUrl }}" onsubmit="return confirm('重新评测会创建一次新的模型调用，并可能产生费用，确认继续吗？');">
                    <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
                    <input type="hidden" name="action" value="retry">
                    <input type="hidden" name="source" value="{{ row.source }}">
                    <input type="hidden" name="sid" value="{{ row.id }}">
                    <button class="button rounded small primary" type="submit">重新评测（调用模型）</button>
                  </form>
                  {% endif %}
                  {% if not row.detailUrl and (not evaluationEnabled or (not row.canSync and not row.canRetry)) %}<span class="aem-secondary">—</span>{% endif %}
                </div>
              </td>
            </tr>
            {% endfor %}
          {% else %}
          <tr><td class="aem-empty" colspan="9">当前筛选条件下没有 AI 评测记录。</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>

    {% if pcount > 1 %}
      {% set glue = '&' if queryBase else '' %}
      <div class="aem-pager">
        {% if page > 1 %}<a class="button rounded" href="{{ listUrl }}?{{ queryBase }}{{ glue }}page={{ page - 1 }}">上一页</a>{% endif %}
        <span class="aem-selection">第 {{ page }} / {{ pcount }} 页</span>
        {% if page < pcount %}<a class="button rounded" href="{{ listUrl }}?{{ queryBase }}{{ glue }}page={{ page + 1 }}">下一页</a>{% endif %}
      </div>
    {% endif %}
  </div>
</div>

<script>
(function () {
  var selectAll = document.getElementById('aem-select-all');
  var submit = document.getElementById('aem-batch-submit');
  var count = document.getElementById('aem-selected-count');
  var boxes = Array.prototype.slice.call(document.querySelectorAll('.aem-row-check:not(:disabled)'));
  if (!selectAll || !submit || !count) return;
  selectAll.disabled = boxes.length === 0;

  function updateSelection() {
    var selected = boxes.filter(function (box) { return box.checked; });
    count.textContent = String(selected.length);
    submit.disabled = selected.length === 0 || selected.length > 20;
    selectAll.checked = boxes.length > 0 && selected.length === boxes.length;
    selectAll.indeterminate = selected.length > 0 && selected.length < boxes.length;
  }

  selectAll.addEventListener('change', function () {
    var target = selectAll.checked;
    boxes.forEach(function (box, index) {
      box.checked = target && index < 20;
    });
    updateSelection();
  });
  boxes.forEach(function (box) { box.addEventListener('change', updateSelection); });
  document.getElementById('aem-batch-sync').addEventListener('submit', function (event) {
    var selected = boxes.filter(function (box) { return box.checked; });
    if (!selected.length || selected.length > 20) {
      event.preventDefault();
      window.alert('请选择 1 到 20 条可同步记录。');
    }
  });
  updateSelection();
}());
</script>
{% endblock %}