{% extends "app/base.html" %}
{% load static %}

{% block title %}{{ T.sm_test_page|default:'小模型测试' }} - {{ settings.name|default:"Monitor" }}{% endblock %}
{% block nav_small_models %}active{% endblock %}
{% block page_title %}{{ T.sm_test_page|default:'小模型测试' }}{% endblock %}

{% block extra_head %}
<style>
.test-wrap{max-width:1200px;margin:0 auto;padding-bottom:20px;}
.test-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.test-top h2{margin:0;font-size:16px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px;}
.test-top h2 .badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:12px;background:#ecfdf5;color:#065f46;border:1px solid #d1fae5;}
.test-back{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;font-size:12px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;color:#64748b;text-decoration:none;}
.test-top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.btn-clear{padding:6px 12px;font-size:12px;border-radius:6px;border:1px solid #fecaca;background:#fff;color:#dc2626;cursor:pointer;}
.btn-clear:hover{background:#fef2f2;border-color:#f87171;}

.test-grid{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start;}
@media(max-width:900px){.test-grid{grid-template-columns:1fr;}}

.panel{background:#fff;border-radius:10px;border:1px solid #eef2f6;box-shadow:0 1px 8px rgba(15,23,42,.04);overflow:hidden;}
.panel-head{padding:10px 14px;background:#fafbfc;border-bottom:1px solid #f1f5f9;}
.panel-head h3{margin:0;font-size:13px;font-weight:600;color:#475569;}
.panel-body{padding:12px 14px;}

.param-list{display:flex;flex-direction:column;gap:6px;}
.param-item{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:7px 10px;background:#f8fafc;border-radius:6px;font-size:11px;}
.param-item .k{color:#94a3b8;font-weight:600;flex-shrink:0;}
.param-item .v{color:#334155;text-align:right;word-break:break-all;font-family:Consolas,Monaco,monospace;font-size:10px;}
.param-item .v.tags{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end;}
.param-tag{font-size:9px;padding:1px 6px;border-radius:8px;background:#e0f2fe;color:#0369a1;font-family:inherit;}

.work-zone{padding:14px;}

/* 紧凑上传栏 */
.upload-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;background:#f8fafc;border:1px dashed #dbeafe;border-radius:8px;cursor:pointer;transition:.15s;}
.upload-bar:hover,.upload-bar.drag{border-color:#169F85;background:#f0fdf9;}
.upload-bar input{display:none;}
.btn-upload{flex-shrink:0;padding:6px 14px;font-size:12px;font-weight:600;border-radius:6px;border:1px solid #169F85;background:#fff;color:#169F85;cursor:pointer;pointer-events:none;}
.upload-bar:hover .btn-upload{background:#169F85;color:#fff;}
.upload-meta{flex:1;min-width:120px;}
.upload-meta .name{font-size:12px;color:#334155;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;}
.upload-meta .hint{font-size:11px;color:#94a3b8;margin-top:2px;}

/* 原图 / 渲染对比 */
.media-compare{display:none;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.media-compare.show{display:grid;}
@media(max-width:640px){.media-compare{grid-template-columns:1fr;}}
.media-pane{border:1px solid #eef2f6;border-radius:8px;overflow:hidden;background:#fff;}
.media-pane-head{padding:6px 10px;font-size:11px;font-weight:600;color:#64748b;background:#fafbfc;border-bottom:1px solid #f1f5f9;}
.media-pane-body{height:200px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;overflow:hidden;position:relative;}
.media-pane-body img,.media-pane-body video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.media-pane-body img{cursor:zoom-in;}
.media-pane-body video{cursor:zoom-in;}
.media-pane-body .placeholder{font-size:11px;color:#94a3b8;text-align:center;padding:12px;}
.media-zoom-hint{position:absolute;right:8px;bottom:6px;font-size:10px;color:#94a3b8;background:rgba(255,255,255,.85);padding:2px 6px;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .15s;}
.media-pane-body:hover .media-zoom-hint{opacity:1;}

.media-lightbox{display:none;position:fixed;inset:0;z-index:10050;background:rgba(15,23,42,.82);align-items:center;justify-content:center;padding:24px;}
.media-lightbox.show{display:flex;}
.media-lightbox-inner{position:relative;max-width:min(96vw,1400px);max-height:92vh;display:flex;flex-direction:column;align-items:center;}
.media-lightbox-close{position:absolute;top:-36px;right:0;width:32px;height:32px;border:none;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:22px;line-height:1;cursor:pointer;}
.media-lightbox-close:hover{background:rgba(255,255,255,.28);}
.media-lightbox-title{margin-bottom:8px;font-size:12px;color:#e2e8f0;text-align:center;}
.media-lightbox-body{display:flex;align-items:center;justify-content:center;max-width:96vw;max-height:calc(92vh - 32px);overflow:auto;}
.media-lightbox-body img,.media-lightbox-body video{max-width:96vw;max-height:calc(92vh - 32px);width:auto;height:auto;object-fit:contain;display:block;border-radius:6px;box-shadow:0 8px 32px rgba(0,0,0,.35);}

.run-bar{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;}
.btn-run{padding:7px 18px;font-size:12px;font-weight:600;border:none;border-radius:6px;cursor:pointer;background:#169F85;color:#fff;transition:.15s;}
.btn-run:hover:not(:disabled){background:#12836d;}
.btn-run:disabled{opacity:.5;cursor:not-allowed;}
.btn-ghost{padding:7px 14px;font-size:12px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;color:#64748b;cursor:pointer;}
.btn-ghost:hover{border-color:#169F85;color:#169F85;}
.btn-ghost:disabled{opacity:.5;cursor:not-allowed;}

.progress-wrap{margin-top:10px;display:none;}
.progress-wrap.show{display:block;}
.progress-label{display:flex;justify-content:space-between;font-size:11px;color:#64748b;margin-bottom:4px;}
.progress-track{height:4px;background:#e2e8f0;border-radius:99px;overflow:hidden;}
.progress-fill{height:100%;width:0;border-radius:99px;background:#169F85;transition:width .25s ease;}
.progress-msg{font-size:10px;color:#94a3b8;margin-top:4px;}

.result-section{margin-top:14px;display:none;}
.result-section.show{display:block;}
.result-card{border:1px solid #eef2f6;border-radius:8px;overflow:hidden;background:#fff;}
.result-card-head{padding:8px 12px;background:#fafbfc;border-bottom:1px solid #f1f5f9;font-size:11px;font-weight:600;color:#475569;}
.result-card-body{padding:10px 12px;}
.report-table{width:100%;border-collapse:collapse;font-size:11px;}
.report-table th,.report-table td{padding:5px 8px;text-align:left;border-bottom:1px solid #f8fafc;}
.report-table th{color:#94a3b8;font-weight:600;width:38%;}
.report-table td{color:#334155;font-family:Consolas,Monaco,monospace;font-size:10px;}
.summary-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.summary-chip{font-size:10px;padding:2px 8px;border-radius:10px;background:#ecfdf5;color:#065f46;border:1px solid #d1fae5;}

.state-running .upload-bar{pointer-events:none;opacity:.65;}
</style>
{% endblock %}

{% block content %}
<div class="test-wrap state-idle" id="testWrap">
  <div class="test-top">
    <h2>
      <span>{{ T.sm_test_page|default:'小模型测试' }}</span>
      <span class="badge" id="algoBadge">#</span>
    </h2>
    <div class="test-top-actions">
      <button type="button" class="btn-clear" onclick="clearTempFiles()">{{ T.sm_test_clear_temp|default:'清理测试临时文件' }}</button>
      <a href="/smallmodel/index" class="test-back">← {{ T.sm_back_list|default:'返回小模型列表' }}</a>
    </div>
  </div>

  <div class="test-grid">
    <div class="panel">
      <div class="panel-head"><h3>{{ T.sm_test_params|default:'小模型参数' }}</h3></div>
      <div class="panel-body">
        <div class="param-list" id="paramList">
          <div style="text-align:center;color:#94a3b8;font-size:12px;padding:16px">{{ T.index_loading|default:'加载中...' }}</div>
        </div>
      </div>
    </div>

    <div class="panel">
      <div class="panel-head"><h3>{{ T.sm_test_workspace|default:'小模型测试工作台' }}</h3></div>
      <div class="work-zone">
        <div id="reidDetectorPanel" style="display:none;margin-bottom:12px;padding:10px 12px;background:#f0f9ff;border:1px solid #bfdbfe;border-radius:8px;">
          <label style="display:block;font-size:12px;font-weight:600;color:#1e40af;margin-bottom:6px;">{{ T.sm_reid_detector|default:'辅助检测小模型 (YOLO)' }} *</label>
          <select id="detectorAlgoId" style="width:100%;padding:8px 10px;font-size:13px;border:1px solid #bfdbfe;border-radius:6px;" onchange="onDetectorChange()"></select>
          <div style="font-size:11px;color:#64748b;margin-top:6px;">{{ T.sm_reid_detector_hint|default:'ReID 需先用检测模型定位行人，再提取特征并关联 track_id' }}</div>
        </div>
        <div class="upload-bar" id="dropArea">
          <input type="file" id="fileInput" accept="image/*,video/*,.mp4,.avi,.mov,.mkv,.webm">
          <span class="btn-upload">{{ T.sm_test_pick_file|default:'选择测试文件' }}</span>
          <div class="upload-meta">
            <div class="name" id="pickedName">{{ T.sm_test_upload_hint|default:'JPG / PNG / MP4，最大 100MB' }}</div>
            <div class="hint" id="pickedHint">{{ T.sm_test_upload_sub|default:'点击或拖拽到此处' }}</div>
          </div>
        </div>

        <div class="media-compare" id="mediaCompare">
          <div class="media-pane">
            <div class="media-pane-head">{{ T.sm_test_input_preview|default:'原始样本' }}</div>
            <div class="media-pane-body" id="inputPane">
              <div class="placeholder" id="inputEmpty">{{ T.sm_test_preview_empty|default:'选择文件后可预览' }}</div>
              <img id="previewImg" style="display:none" alt="preview">
              <video id="previewVideo" style="display:none" controls muted playsinline></video>
              <span class="media-zoom-hint">{{ T.sm_test_click_zoom|default:'点击放大' }}</span>
            </div>
          </div>
          <div class="media-pane">
            <div class="media-pane-head">{{ T.sm_test_output|default:'渲染结果' }}</div>
            <div class="media-pane-body" id="outputPane">
              <div class="placeholder" id="outputEmpty">{{ T.sm_test_output_wait|default:'小模型测试完成后显示' }}</div>
              <span class="media-zoom-hint">{{ T.sm_test_click_zoom|default:'点击放大' }}</span>
            </div>
          </div>
        </div>

        <div class="run-bar">
          <button type="button" class="btn-run" id="btnRun" disabled onclick="startTest()">{{ T.sm_test_run|default:'开始小模型测试' }}</button>
          <button type="button" class="btn-ghost" id="btnReset" onclick="resetTest()">{{ T.sm_test_reset|default:'重置' }}</button>
        </div>

        <div class="progress-wrap" id="progressWrap">
          <div class="progress-label">
            <span id="progressLabel">{{ T.sm_test_running|default:'小模型测试中...' }}</span>
            <span id="progressPct">0%</span>
          </div>
          <div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
          <div class="progress-msg" id="progressMsg"></div>
        </div>

        <div class="result-section" id="resultSection">
          <div class="result-card">
            <div class="result-card-head">{{ T.sm_test_report|default:'小模型测试报告' }}</div>
            <div class="result-card-body" id="reportBody"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="media-lightbox" id="mediaLightbox" onclick="closeMediaLightbox(event)">
  <div class="media-lightbox-inner" onclick="event.stopPropagation()">
    <button type="button" class="media-lightbox-close" onclick="closeMediaLightbox()" aria-label="close">&times;</button>
    <div class="media-lightbox-title" id="lightboxTitle"></div>
    <div class="media-lightbox-body" id="lightboxBody"></div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
var g_algoId = 0;
var g_algo = null;
var g_file = null;
var g_pollTimer = null;
var g_taskId = '';
var g_previewUrl = '';
var g_detectorId = 0;
var g_detectors = [];

function isReidAlgo(){
  return g_algo && (g_algo.task_type || '').toLowerCase() === 'reid';
}

function updateRunButtonState(){
  var needDetector = isReidAlgo();
  var detectorOk = !needDetector || g_detectorId > 0;
  document.getElementById('btnRun').disabled = !g_file || !g_algo || !g_algo.model_file || !detectorOk;
}

function typeLabel(t){
  return ({yolo5:'YOLOv5',yolo8:'YOLOv8',yolo11:'YOLOv11',yolo26:'YOLO26',osnet:'OSNet ReID'})[t] || t || '-';
}

function qsId(){
  var m = /[?&]id=(\d+)/.exec(window.location.search);
  return m ? parseInt(m[1], 10) : 0;
}

function engineLabel(name){
  if(name==='yolo_pytorch') return 'Yolo-PyTorch';
  if(name==='onnxruntime') return 'OnnxRuntime';
  if(name==='openvino') return 'OpenVINO';
  return name || '-';
}

function renderParams(a){
  var labels = a.labels || [];
  var labelsHtml = '';
  if(labels.length){
    labelsHtml = '<div class="v tags">' + labels.slice(0,8).map(function(l){
      return '<span class="param-tag">'+escapeHtml(l)+'</span>';
    }).join('') + (labels.length>8?' <span class="param-tag">+'+(labels.length-8)+'</span>':'') + '</div>';
  } else {
    labelsHtml = '<span class="v">-</span>';
  }
  var rows = [
    [_t('sm_name','小模型名称'), escapeHtml(a.name)],
    [_t('sm_type','模型类型'), typeLabel(a.algorithm_type)],
    [_t('sm_task_type','任务类型'), (a.task_type||'detect').toUpperCase()],
    [_t('sm_engine','推理引擎'), engineLabel(a.inference_engine)],
    [_t('sm_device','推理设备'), (a.device||'cpu').toUpperCase()],
    [_t('sm_resolution','分辨率'), (a.input_width||640)+'×'+(a.input_height||640)],
  ];
  if((a.task_type||'detect').toLowerCase() !== 'reid'){
    rows.push([_t('sm_conf_threshold','置信度'), String(a.conf_threshold)]);
    rows.push([_t('sm_labels','类别'), labelsHtml, true]);
  }
  rows.push([_t('sm_model_file','模型'), escapeHtml(a.model_file||'-')]);
  var html = '';
  rows.forEach(function(r){
    if(r[2]) html += '<div class="param-item"><span class="k">'+r[0]+'</span>'+r[1]+'</div>';
    else html += '<div class="param-item"><span class="k">'+r[0]+'</span><span class="v">'+r[1]+'</span></div>';
  });
  document.getElementById('paramList').innerHTML = html;
  document.getElementById('algoBadge').textContent = '#'+a.id+' '+a.name;
}

function renderDetectorSelect(){
  var panel = document.getElementById('reidDetectorPanel');
  var sel = document.getElementById('detectorAlgoId');
  if(!panel || !sel) return;
  if(!isReidAlgo()){
    panel.style.display = 'none';
    g_detectorId = 0;
    updateRunButtonState();
    return;
  }
  panel.style.display = 'block';
  sel.innerHTML = '';
  if(!g_detectors.length){
    var o = document.createElement('option');
    o.value = '';
    o.textContent = _t('sm_reid_no_detector','暂无可用检测小模型，请先在列表中添加 YOLO Detect 模型');
    sel.appendChild(o);
    g_detectorId = 0;
  } else {
    var picked = null;
    g_detectors.forEach(function(d){
      var o = document.createElement('option');
      o.value = d.id;
      var eng = engineLabel(d.inference_engine);
      o.textContent = '#'+d.id+' '+d.name+' ('+eng+')';
      sel.appendChild(o);
      if(d.is_default === 1) picked = d.id;
    });
    g_detectorId = picked || g_detectors[0].id;
    sel.value = String(g_detectorId);
  }
  updateRunButtonState();
}

function onDetectorChange(){
  var sel = document.getElementById('detectorAlgoId');
  g_detectorId = sel && sel.value ? parseInt(sel.value, 10) : 0;
  updateRunButtonState();
}

function loadDetectors(cb){
  Api.get('/smallmodel/openDetectors').then(function(res){
    g_detectors = (res && res.code===1000 && res.data) ? res.data : [];
    renderDetectorSelect();
    if(cb) cb();
  });
}

function loadAlgorithm(){
  g_algoId = qsId();
  if(!g_algoId){
    showToast(_t('sm_test_no_id','缺少小模型 ID'), 'error');
    setTimeout(function(){ window.location.href='/smallmodel/index'; }, 1200);
    return;
  }
  Api.get('/smallmodel/openDetail', {id: g_algoId}).then(function(res){
    if(!res || res.code!==1000 || !res.data || !res.data.id){
      showToast(res?res.msg:_t('load_failed','加载失败'), 'error');
      return;
    }
    g_algo = res.data;
    renderParams(g_algo);
    if(isReidAlgo()){
      loadDetectors();
    } else {
      renderDetectorSelect();
    }
    if(!g_algo.model_file){
      showToast(_t('sm_no_model_file','请先配置模型文件'), 'warning');
    }
    updateRunButtonState();
  });
}

function isVideoFile(f){
  return f && (/^video\//.test(f.type) || /\.(mp4|avi|mov|mkv|webm|m4v)$/i.test(f.name));
}

function isImageFile(f){
  return f && (/^image\//.test(f.type) || /\.(jpg|jpeg|png|bmp|webp)$/i.test(f.name));
}

function revokePreviewUrl(){
  if(g_previewUrl){ URL.revokeObjectURL(g_previewUrl); g_previewUrl = ''; }
}

function setFile(f){
  if(!f) return;
  if(!isVideoFile(f) && !isImageFile(f)){
    showToast(_t('sm_test_bad_type','不支持的文件类型'), 'warning');
    return;
  }
  g_file = f;
  document.getElementById('pickedName').textContent = f.name;
  document.getElementById('pickedHint').textContent = formatBytes(f.size);
  updateRunButtonState();

  var img = document.getElementById('previewImg');
  var vid = document.getElementById('previewVideo');
  var inputEmpty = document.getElementById('inputEmpty');
  revokePreviewUrl();
  g_previewUrl = URL.createObjectURL(f);
  img.style.display = 'none';
  vid.style.display = 'none';
  inputEmpty.style.display = 'none';
  if(isVideoFile(f)){
    vid.src = g_previewUrl;
    vid.style.display = 'block';
  } else {
    img.src = g_previewUrl;
    img.style.display = 'block';
  }
  document.getElementById('mediaCompare').classList.add('show');
  clearOutputPane(true);
  document.getElementById('resultSection').classList.remove('show');
}

function clearOutputPane(showPlaceholder){
  var pane = document.getElementById('outputPane');
  var empty = document.getElementById('outputEmpty');
  pane.querySelectorAll('img,video').forEach(function(el){ el.remove(); });
  if(showPlaceholder){
    empty.style.display = 'block';
    empty.textContent = _t('sm_test_output_wait','小模型测试完成后显示');
    empty.style.color = '';
    if(!pane.contains(empty)) pane.appendChild(empty);
  } else {
    empty.style.display = 'none';
  }
}

function openMediaLightbox(type, src, title){
  if(!src) return;
  var box = document.getElementById('mediaLightbox');
  var body = document.getElementById('lightboxBody');
  var titleEl = document.getElementById('lightboxTitle');
  body.innerHTML = '';
  titleEl.textContent = title || '';
  if(type === 'video'){
    var vid = document.createElement('video');
    vid.src = src;
    vid.controls = true;
    vid.autoplay = true;
    vid.playsInline = true;
    body.appendChild(vid);
  } else {
    var img = document.createElement('img');
    img.src = src;
    img.alt = title || 'preview';
    body.appendChild(img);
  }
  box.classList.add('show');
  document.body.style.overflow = 'hidden';
}

function closeMediaLightbox(e){
  if(e && e.target && e.target.id !== 'mediaLightbox' && !e.target.classList.contains('media-lightbox-close')) return;
  var box = document.getElementById('mediaLightbox');
  var body = document.getElementById('lightboxBody');
  box.classList.remove('show');
  body.innerHTML = '';
  document.body.style.overflow = '';
}

function initMediaZoom(){
  function onPaneClick(e){
    var t = e.target;
    if(t.tagName === 'IMG' && t.src){
      e.preventDefault();
      e.stopPropagation();
      var title = t.closest('.media-pane') ? t.closest('.media-pane').querySelector('.media-pane-head').textContent : '';
      openMediaLightbox('image', t.src, title);
    } else if(t.tagName === 'VIDEO' && t.src){
      e.preventDefault();
      e.stopPropagation();
      var titleV = t.closest('.media-pane') ? t.closest('.media-pane').querySelector('.media-pane-head').textContent : '';
      openMediaLightbox('video', t.src, titleV);
    }
  }
  document.getElementById('inputPane').addEventListener('click', onPaneClick);
  document.getElementById('outputPane').addEventListener('click', onPaneClick);
  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape') closeMediaLightbox({target: document.getElementById('mediaLightbox')});
  });
}

function formatBytes(n){
  if(!n) return '0 B';
  if(n<1024*1024) return (n/1024).toFixed(1)+' KB';
  return (n/1024/1024).toFixed(2)+' MB';
}

(function initDrop(){
  var zone = document.getElementById('dropArea');
  var input = document.getElementById('fileInput');
  zone.addEventListener('click', function(e){
    if(document.getElementById('testWrap').classList.contains('state-running')) return;
    if(e.target.tagName==='VIDEO') return;
    input.click();
  });
  input.addEventListener('change', function(e){ if(e.target.files[0]) setFile(e.target.files[0]); });
  zone.addEventListener('dragover', function(e){ e.preventDefault(); zone.classList.add('drag'); });
  zone.addEventListener('dragleave', function(){ zone.classList.remove('drag'); });
  zone.addEventListener('drop', function(e){
    e.preventDefault(); zone.classList.remove('drag');
    if(e.dataTransfer.files[0]) setFile(e.dataTransfer.files[0]);
  });
})();

function setRunning(running){
  document.getElementById('testWrap').classList.toggle('state-running', running);
  updateRunButtonState();
  if(running) document.getElementById('btnRun').disabled = true;
  document.getElementById('btnReset').disabled = running;
  document.getElementById('progressWrap').classList.toggle('show', running);
}

function updateProgress(pct, msg){
  document.getElementById('progressFill').style.width = Math.min(100, pct)+'%';
  document.getElementById('progressPct').textContent = Math.round(pct)+'%';
  document.getElementById('progressMsg').textContent = msg || '';
}

function startTest(){
  if(!g_file || !g_algoId) return;
  if(g_pollTimer){ clearInterval(g_pollTimer); g_pollTimer = null; }
  document.getElementById('resultSection').classList.remove('show');
  clearOutputPane(true);
  setRunning(true);
  updateProgress(2, _t('sm_test_uploading','上传样本...'));
  var fd = new FormData();
  fd.append('algorithm_id', g_algoId);
  fd.append('file', g_file);
  if(isReidAlgo() && g_detectorId){
    fd.append('detector_algorithm_id', g_detectorId);
  }
  Api.postForm('/smallmodel/openTestStart', fd).then(function(res){
    if(!res || res.code!==1000 || !res.data || !res.data.task_id){
      setRunning(false);
      showToast(res?res.msg:_t('msg_unknown_error','失败'), 'error');
      return;
    }
    g_taskId = res.data.task_id;
    updateProgress(8, _t('sm_test_queued','任务已排队...'));
    g_pollTimer = setInterval(pollStatus, 800);
    pollStatus();
  });
}

function pollStatus(){
  if(!g_taskId) return;
  Api.get('/smallmodel/openTestStatus', {task_id: g_taskId}).then(function(res){
    if(!res || res.code!==1000 || !res.data) return;
    var d = res.data;
    updateProgress(d.progress||0, d.message||'');
    if(d.status==='done'){
      clearInterval(g_pollTimer); g_pollTimer = null;
      setRunning(false);
      showResult(d);
      showToast(_t('sm_test_done','小模型测试完成'), 'success');
    } else if(d.status==='error'){
      clearInterval(g_pollTimer); g_pollTimer = null;
      setRunning(false);
      var errMsg = d.error || d.message || _t('msg_unknown_error','失败');
      showToast(errMsg, 'error');
      clearOutputPane(true);
      document.getElementById('outputEmpty').textContent = errMsg;
      document.getElementById('outputEmpty').style.color = '#f87171';
      document.getElementById('resultSection').classList.remove('show');
    }
  });
}

function showResult(d){
  var rep = d.report || {};
  var html = '<table class="report-table">';
  html += row(_t('sm_test_media','媒体类型'), rep.media_type||'-');
  html += row(_t('sm_test_input_size','输入尺寸'), (rep.input_size||[]).join('×')||'-');
  if(rep.media_type==='video'){
    html += row(_t('sm_test_frames','处理帧数'), (rep.processed_frames||0)+'/'+(rep.frame_count||'?'));
    html += row('FPS', rep.fps||'-');
  }
  html += row(_t('sm_test_det_count','检测总数'), rep.detection_count||0);
  if(rep.task_type === 'reid'){
    html += row(_t('sm_test_embedding_count','特征提取数'), rep.embedding_count||0);
    html += row(_t('sm_test_track_count','轨迹峰值'), rep.track_count||0);
    if(rep.reid_sim_mean != null) html += row(_t('sm_test_reid_sim','特征时序相似度均值'), rep.reid_sim_mean);
    if(rep.detector_name) html += row(_t('sm_reid_detector','辅助检测小模型'), escapeHtml(rep.detector_name));
  }
  html += row(_t('sm_test_infer_avg','平均推理'), (rep.inference_ms_avg||0)+' ms');
  html += row(_t('sm_test_elapsed','总耗时'), (rep.elapsed_ms||0)+' ms');
  html += '</table>';
  var summary = rep.detections_summary || [];
  if(summary.length){
    html += '<div class="summary-chips">';
    summary.slice(0,12).forEach(function(s){
      html += '<span class="summary-chip">'+escapeHtml(s.label)+' ×'+s.count+'</span>';
    });
    html += '</div>';
  }
  document.getElementById('reportBody').innerHTML = html;

  clearOutputPane(false);
  var pane = document.getElementById('outputPane');
  if(d.output_url){
    var src = d.output_url + (d.output_url.indexOf('?') >= 0 ? '&' : '?') + 't=' + Date.now();
    if(d.output_type === 'video'){
      var vid = document.createElement('video');
      vid.src = src;
      vid.controls = true;
      vid.muted = true;
      vid.playsInline = true;
      pane.appendChild(vid);
    } else {
      var img = document.createElement('img');
      img.alt = 'result';
      img.src = src;
      img.onerror = function(){
        clearOutputPane(true);
        document.getElementById('outputEmpty').textContent = _t('sm_test_output_load_fail','渲染结果加载失败');
        document.getElementById('outputEmpty').style.color = '#f87171';
      };
      pane.appendChild(img);
    }
  } else {
    clearOutputPane(true);
  }
  document.getElementById('resultSection').classList.add('show');
}

function row(k,v){
  return '<tr><th>'+k+'</th><td>'+v+'</td></tr>';
}

function resetTest(){
  if(g_pollTimer){ clearInterval(g_pollTimer); g_pollTimer = null; }
  g_taskId = '';
  g_file = null;
  revokePreviewUrl();
  document.getElementById('fileInput').value = '';
  document.getElementById('pickedName').textContent = _t('sm_test_upload_hint','JPG / PNG / MP4，最大 100MB');
  document.getElementById('pickedHint').textContent = _t('sm_test_upload_sub','点击或拖拽到此处');
  document.getElementById('previewImg').style.display = 'none';
  document.getElementById('previewVideo').style.display = 'none';
  document.getElementById('inputEmpty').style.display = 'block';
  document.getElementById('mediaCompare').classList.remove('show');
  clearOutputPane(true);
  document.getElementById('resultSection').classList.remove('show');
  document.getElementById('progressWrap').classList.remove('show');
  setRunning(false);
}

function clearTempFiles(){
  if(!confirm(_t('sm_test_clear_confirm','确认清理所有小模型测试临时文件？'))) return;
  Api.post('/smallmodel/openTestClearTemp', {}).then(function(res){
    showToast(res.msg, res.code===1000?'success':'error');
    if(res.code===1000){
      resetTest();
    }
  });
}

loadAlgorithm();
initMediaZoom();
</script>
{% endblock %}