{% extends "erp_base.html" %}

{% block head_extra %}
<link rel="stylesheet" href="/static/cafe24.css?v=20260814i" />
{% endblock %}

{% block content %}
{% include "cafe24/_nav.html" %}

{% if error %}
<div class="cf24-flash cf24-flash-err">
  카페24 조회에 실패했습니다: {{ error }}<br />
  <a href="/cafe24/system">시스템 화면에서 연결 상태를 확인하세요.</a>
</div>
{% endif %}

<div class="erp-card cf24-card">
  <div class="cf24-card-head">
    <h3>상세페이지 &lt;style&gt; 블록 통일</h3>
    <span class="cf24-muted">전체 {{ total }}건</span>
  </div>

  <p class="cf24-note">
    각 상품 상세설명의 <strong>맨 위 <code>&lt;style&gt;</code> 블록 하나</strong>를 아래 내용으로 바꿉니다.
    아래쪽에 <code>&lt;style&gt;</code> 이 더 있으면 그건 건드리지 않고 「블록 2개」로 표시합니다.<br />
    <strong class="cf24-warn">지금 들어 있는 CSS 는 사라집니다.</strong>
    비디오 반응형처럼 필요한 규칙이 있을 수 있으니, <strong>먼저 검사</strong>해서 무엇이 지워지는지
    확인하고 상품을 골라 적용하세요. 적용 직전 내용은 상품별 <code>BACKUP</code> 버전으로 보관됩니다.
    PC/모바일 분리 상품은 모바일도 함께 바꿉니다.
  </p>

  <label class="cf24-label" for="cf24-target">교체할 내용</label>
  <textarea id="cf24-target" class="cf24-html" rows="6" readonly>{{ target_style }}</textarea>

  <div class="cf24-toolbar" style="margin-top:12px;">
    <button class="erp-btn erp-btn-primary" type="button" id="cf24-scan">1. 전체 검사</button>
    <button class="erp-btn erp-btn-outline" type="button" id="cf24-apply" disabled>2. 선택한 상품에 적용</button>
    <span class="cf24-muted" id="cf24-progress">검사를 먼저 실행하세요.</span>
  </div>
</div>

<div class="erp-card cf24-card">
  <div class="cf24-card-head">
    <h3>검사 결과</h3>
    <span class="cf24-muted">변경이 필요한 상품만 자동 선택됩니다</span>
  </div>
  <div class="cf24-scroll">
    <table class="erp-table cf24-compact" id="cf24-bulk-table">
      <thead>
        <tr>
          <th style="width:34px;"><input type="checkbox" id="cf24-check-all" /></th>
          <th style="width:60px;">번호</th>
          <th>상품명</th>
          <th style="width:70px;">style</th>
          <th>현재 내용 (지워질 부분)</th>
          <th style="width:90px;">상태</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
        <tr data-no="{{ r.product_no }}">
          <td><input type="checkbox" class="cf24-pick" disabled /></td>
          <td class="cf24-nowrap">{{ r.product_no }}</td>
          <td>{{ r.product_name }}</td>
          <td class="cf24-nowrap cf24-cell-count">—</td>
          <td class="cf24-cell-current"><span class="cf24-muted">검사 전</span></td>
          <td class="cf24-nowrap cf24-cell-state"><span class="cf24-muted">대기</span></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  var rows = Array.prototype.slice.call(document.querySelectorAll("#cf24-bulk-table tbody tr"));
  var scanBtn = document.getElementById("cf24-scan");
  var applyBtn = document.getElementById("cf24-apply");
  var progress = document.getElementById("cf24-progress");
  var checkAll = document.getElementById("cf24-check-all");

  function cell(tr, name) { return tr.querySelector(".cf24-cell-" + name); }
  function setState(tr, text, cls) {
    cell(tr, "state").innerHTML = '<span class="' + (cls || "cf24-muted") + '">' + text + "</span>";
  }

  // 한 건씩 순차 호출한다 — 87건을 한 요청으로 묶으면 프록시 타임아웃에 걸리고,
  // 동시에 던지면 카페24 호출 제한(429)에 걸린다.
  function walk(list, step, done) {
    var i = 0;
    (function next() {
      if (i >= list.length) { done(); return; }
      var tr = list[i++];
      step(tr, function () {
        progress.textContent = i + " / " + list.length;
        next();
      });
    })();
  }

  scanBtn.addEventListener("click", function () {
    scanBtn.disabled = true;
    applyBtn.disabled = true;
    progress.textContent = "검사 중… 0 / " + rows.length;
    walk(rows, function (tr, next) {
      setState(tr, "검사 중…");
      fetch("/cafe24/bulk/scan/" + tr.dataset.no, { credentials: "same-origin" })
        .then(function (res) { return res.ok ? res.json() : Promise.reject(res); })
        .then(function (data) {
          var pick = tr.querySelector(".cf24-pick");
          cell(tr, "count").textContent = data.pc.style_count + "개";
          if (data.pc.style_count > 1) {
            cell(tr, "count").innerHTML += ' <span class="cf24-warn">주의</span>';
          }
          var current = data.pc.current_style || "";
          cell(tr, "current").innerHTML = current
            ? "<code>" + current.replace(/[&<>]/g, function (c) {
                return c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&gt;";
              }).slice(0, 400) + "</code>"
            : '<span class="cf24-muted">없음 (새로 넣습니다)</span>';
          pick.disabled = !data.will_change;
          pick.checked = data.will_change;
          if (data.pc.already_target && !data.will_change) setState(tr, "이미 동일", "cf24-muted");
          else setState(tr, "변경 필요", "cf24-warn");
          if (data.separated_mobile) {
            cell(tr, "count").innerHTML += ' <span class="cf24-muted">/ 모바일분리</span>';
          }
          next();
        })
        .catch(function (res) {
          setState(tr, "검사 실패", "cf24-err");
          if (res && res.status === 401) window.location.href = "/login";
          next();
        });
    }, function () {
      scanBtn.disabled = false;
      applyBtn.disabled = false;
      var picked = rows.filter(function (tr) { return tr.querySelector(".cf24-pick").checked; }).length;
      progress.textContent = "검사 완료 — 변경 필요 " + picked + "건 선택됨";
    });
  });

  checkAll.addEventListener("change", function () {
    rows.forEach(function (tr) {
      var pick = tr.querySelector(".cf24-pick");
      if (!pick.disabled) pick.checked = checkAll.checked;
    });
  });

  applyBtn.addEventListener("click", function () {
    var picked = rows.filter(function (tr) { return tr.querySelector(".cf24-pick").checked; });
    if (!picked.length) { window.alert("선택된 상품이 없습니다."); return; }
    if (!window.confirm(picked.length + "개 상품의 상세페이지에 바로 반영됩니다.\n\n" +
        "지금 들어 있는 <style> 내용은 사라집니다(상품별 BACKUP 버전으로 보관).\n계속할까요?")) return;

    scanBtn.disabled = true;
    applyBtn.disabled = true;
    progress.textContent = "적용 중… 0 / " + picked.length;
    var ok = 0, fail = 0, skip = 0;
    walk(picked, function (tr, next) {
      setState(tr, "적용 중…");
      fetch("/cafe24/bulk/apply/" + tr.dataset.no, { method: "POST", credentials: "same-origin" })
        .then(function (res) {
          return res.json().then(function (body) {
            if (!res.ok) return Promise.reject(body);
            return body;
          });
        })
        .then(function (data) {
          if (data.result === "SKIPPED") { skip++; setState(tr, "변경 없음", "cf24-muted"); }
          else { ok++; setState(tr, "완료", "cf24-badge-ok"); tr.querySelector(".cf24-pick").checked = false; }
          next();
        })
        .catch(function (body) {
          fail++;
          setState(tr, "실패", "cf24-err");
          if (body && body.detail) cell(tr, "current").innerHTML =
            '<span class="cf24-err">' + String(body.detail).slice(0, 200) + "</span>";
          next();
        });
    }, function () {
      scanBtn.disabled = false;
      applyBtn.disabled = false;
      progress.textContent = "적용 완료 — 성공 " + ok + " / 변경없음 " + skip + " / 실패 " + fail;
    });
  });
})();
</script>
{% endblock %}