{% extends "base.html" %}
{% block title %}진단 상태 — {{ name }}{% endblock %}

{% block head %}
<style>
  .scan-wrap { max-width: 720px; margin: 5vh auto 0; }
  .scan-wrap h1 { font-size: 20px; margin: 0 0 4px; }
  .scan-name { color: var(--muted); font-family: Consolas, monospace; font-size: 13px; margin-bottom: 20px; word-break: break-all; }

  /* ---- 단계 체크리스트 ---- */
  .steps { list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .step { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
  .step:last-child { border-bottom: 0; }
  .step .ico { width: 18px; height: 18px; flex: 0 0 18px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
  .step .lbl { flex: 1; }
  .step .st { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

  .step.pending .lbl { color: var(--muted); }
  .step.pending .ico { color: var(--line); }
  .step.pending .ico::before { content: "○"; }

  .step.running .lbl { color: var(--fg); font-weight: 600; }
  .step.running .st { color: var(--low); font-weight: 700; }
  .step.running .ico { position: relative; }
  .step.running .ico::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--low); box-shadow: 0 0 0 0 var(--low); animation: pulse 1.1s infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--low) 70%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

  .step.done .ico { color: var(--low); }
  .step.done .ico::before { content: "\2713"; }   /* ✓ */
  .step.done .st { color: var(--low); }

  .step.failed .ico { color: var(--crit); }
  .step.failed .ico::before { content: "\2715"; }  /* ✕ */
  .step.failed .st { color: var(--crit); }

  /* ---- 진행 바 ---- */
  .pbar { height: 9px; background: var(--sunken); border: 1px solid var(--line); border-radius:0; overflow: hidden; margin: 0 0 7px; }
  .pfill { height: 100%; width: 0; background: var(--accent); border-radius:0; transition: width .3s ease; }
  .pfill.indet { width: 34% !important; transition: none; animation: indet 1.15s ease-in-out infinite; }
  @keyframes indet { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }
  .pfill.err { background: var(--crit); }
  .pmeta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin: 0 0 18px; font-variant-numeric: tabular-nums; }

  /* ---- 구동 상태 로그 ---- */
  .logwrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .logwrap .hd { padding: 7px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--line); }
  .logfeed { height: 190px; overflow: auto; margin: 0; padding: 10px 14px; background: var(--sunken); font-family: Consolas, monospace; font-size: 12px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; }
  .logfeed .cur { color: var(--fg); }

  .footer { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
  .footer .meta { color: var(--muted); font-size: 13px; margin-right: auto; }
  #goto:disabled { opacity: .45; cursor: default; }
</style>
{% endblock %}

{% block content %}
<div class="scan-wrap">
  <h1 id="title">진단 진행 중</h1>
  <div class="scan-name">{{ name }}</div>

  <ul class="steps" id="steps"></ul>

  <div class="pbar"><div class="pfill" id="pfill"></div></div>
  <div class="pmeta"><span id="pphase">진단을 준비하고 있습니다…</span><span id="ppct"></span></div>

  <div class="logwrap">
    <div class="hd">구동 상태 로그</div>
    <pre class="logfeed" id="log">진단을 준비하고 있습니다…</pre>
  </div>

  <div class="err" id="err" hidden style="margin-top:16px"></div>

  <div class="footer">
    <span class="meta" id="meta"></span>
    <a class="btn ghost" href="/">목록</a>
    <button class="btn ghost" id="stop">중단</button>
    <button class="btn" id="goto" disabled>프로젝트로 이동 →</button>
  </div>
</div>

<script>
// 중단 — 스캐너가 파일마다 부르는 진행 콜백에서 멈추므로, 누른 즉시는 아니고
// 진행 중인 단계가 다음 파일로 넘어갈 때 끝난다.
(function () {
  var b = document.getElementById('stop');
  if (!b) return;
  b.onclick = function () {
    cgConfirm('이 진단을 중단할까요? 지금까지의 결과는 저장되지 않습니다.', '진단 중단')
      .then(function (yes) {
        if (!yes) return;
        b.disabled = true; b.textContent = '중단 중…';
        var csrf = (document.cookie.match(/csrftoken=([^;]+)/) || [])[1] || '';
        fetch(location.pathname + 'cancel', { method: 'POST', headers: { 'X-CSRFToken': csrf } });
      });
  };
})();
(function () {
  var JOB = "{{ job_id|escapejs }}";
  var LABEL = { extract: '압축 해제', parse: '소스 파싱', dataflow: '데이터 흐름 분석',
                triage: 'LLM 트리아지', pattern: '패턴 검사', sca: '오픈소스 취약점 조회',
                save: '결과 집계·저장' };
  var DEFAULT_STEPS = ['extract', 'parse', 'dataflow', 'pattern', 'save'];
  var el = function (id) { return document.getElementById(id); };
  function fmt(s) { s = Math.max(0, Math.floor(s)); return String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0'); }

  var pk = null, timer = setInterval(poll, 400);
  poll();

  function stateText(key, d) {
    if ((key === 'parse' || key === 'pattern') && d.phase === key && d.total > 0) return d.done + ' / ' + d.total;
    return '';
  }

  function renderSteps(d) {
    var steps = (d.steps && d.steps.length) ? d.steps : DEFAULT_STEPS;
    var cur = steps.indexOf(d.phase);
    var html = '';
    for (var i = 0; i < steps.length; i++) {
      var key = steps[i], cls, st;
      if (d.status === 'error') {
        if (i < cur) { cls = 'done'; st = '완료'; }
        else if (i === cur) { cls = 'failed'; st = '실패'; }
        else { cls = 'pending'; st = '대기'; }
      } else if (d.status === 'done') {
        cls = 'done'; st = '완료';
      } else if (cur < 0) {
        cls = 'pending'; st = '대기';
      } else if (i < cur) {
        cls = 'done'; st = '완료';
      } else if (i === cur) {
        cls = 'running'; st = (stateText(key, d) || '진행 중');
      } else {
        cls = 'pending'; st = '대기';
      }
      html += '<li class="step ' + cls + '"><span class="ico"></span>' +
              '<span class="lbl">' + (LABEL[key] || key) + '</span>' +
              '<span class="st">' + st + '</span></li>';
    }
    el('steps').innerHTML = html;
  }

  function renderBar(d) {
    var fill = el('pfill'), phase = el('pphase'), pct = el('ppct');
    var name = LABEL[d.phase] || d.phase || '';
    if (d.status === 'done') {
      fill.classList.remove('indet', 'err'); fill.style.width = '100%'; phase.textContent = '완료'; pct.textContent = '100%'; return;
    }
    if (d.status === 'error') {
      fill.classList.remove('indet'); fill.classList.add('err');
      fill.style.width = (d.total > 0 ? Math.round(d.done / d.total * 100) : 100) + '%';
      phase.textContent = name + ' 실패'; pct.textContent = ''; return;
    }
    if (d.total > 0) {   // 파일 수 아는 단계 — 실제 퍼센트
      var p = Math.min(100, Math.round(d.done / d.total * 100));
      fill.classList.remove('indet', 'err'); fill.style.width = p + '%';
      phase.textContent = name + ' · ' + d.done + ' / ' + d.total; pct.textContent = p + '%';
    } else {             // 총량 미상 단계(집계·저장 등) — 멈춤처럼 안 보이게 무한 애니메이션
      fill.classList.remove('err'); fill.classList.add('indet');
      phase.textContent = (name || '준비 중…') + ' …'; pct.textContent = '';
    }
  }

  function renderLog(d) {
    var lines = d.log || [];
    if (!lines.length) return;
    var box = el('log');
    var atBottom = box.scrollTop + box.clientHeight >= box.scrollHeight - 8;
    var html = lines.map(function (l, i) {
      return i === lines.length - 1 ? '<span class="cur">' + esc(l) + '</span>' : esc(l);
    }).join('\n');
    box.innerHTML = html;
    if (atBottom) box.scrollTop = box.scrollHeight;
  }
  function esc(s) { return String(s).replace(/[&<>]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]; }); }

  function poll() {
    fetch('/scan/progress/' + JOB + '/status').then(function (r) { return r.json(); }).then(function (d) {
      if (d.status === 'unknown') { clearInterval(timer); el('title').textContent = '만료된 작업'; return; }
      renderSteps(d);
      renderBar(d);
      renderLog(d);
      el('meta').textContent = '탐지 ' + (d.findings || 0) + '건 · 경과 ' + fmt(d.elapsed);

      if (d.status === 'error') {
        clearInterval(timer);
        el('title').textContent = '진단 실패';
        el('err').hidden = false; el('err').textContent = '스캔 실패 — ' + (d.error || '');
        return;
      }
      if (d.status === 'done' && d.pk) {
        clearInterval(timer);
        pk = d.pk;
        el('title').textContent = '진단 완료 ✓';
        var b = el('goto');
        b.disabled = false;
        b.onclick = function () { location.href = '/scan/' + pk + '/'; };
        b.focus();
      }
    }).catch(function () {});
  }
})();
</script>
{% endblock %}