{% extends "erp_base.html" %}

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

{% block content %}
{% include "cafe24/_nav.html" %}
{% set qs = (list_query ~ '&') if list_query else '' %}

{% if flash %}<div class="cf24-flash cf24-flash-ok">{{ flash }}</div>{% endif %}
{% if flash_error %}<div class="cf24-flash cf24-flash-err">{{ flash_error }}</div>{% endif %}

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

<div class="cf24-split cf24-split-3">

  {# ── 왼쪽: 상품 목록 ──────────────────────────────────────── #}
  <aside class="erp-card cf24-pane cf24-pane-list">
    <form class="cf24-filters" method="get" action="/cafe24/" id="cf24-filter-form">
      {# 폼이 제출됐음을 알리는 표식. 없으면 체크 해제를 "첫 방문"과 구분할 수 없다. #}
      <input type="hidden" name="f" value="1" />
      {% if selected %}<input type="hidden" name="selected" value="{{ selected }}" />{% endif %}
      <input class="cf24-search" type="search" name="q" value="{{ keyword }}"
             placeholder="상품명 검색" />
      <div class="cf24-checks">
        <label><input type="checkbox" name="display" value="1"
                      {% if only_display %}checked{% endif %} /> 진열중</label>
        <label><input type="checkbox" name="selling" value="1"
                      {% if only_selling %}checked{% endif %} /> 판매중</label>
      </div>
      <div class="cf24-list-count">
        {{ shown }}건{% if shown != total %} / 전체 {{ total }}건{% endif %}
        {% if truncated %}<span class="cf24-warn">(상한 도달)</span>{% endif %}
      </div>
    </form>

    <div class="cf24-list-scroll">
      <table class="erp-table cf24-list-table" id="cf24-list">
        <thead>
          <tr>
            <th class="cf24-col-no"   data-sort-key="no"      data-sort-type="num">번호</th>
            <th class="cf24-col-name" data-sort-key="name"    data-sort-type="text">상품명</th>
            <th class="cf24-col-flag" data-sort-key="display" data-sort-type="num">진열</th>
            <th class="cf24-col-flag" data-sort-key="selling" data-sort-type="num">판매</th>
            <th class="cf24-col-date" data-sort-key="updated" data-sort-type="text">수정</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr class="cf24-row {% if selected == r.product_no %}is-active{% endif %}"
              data-no="{{ r.product_no }}"
              data-name="{{ r.product_name }}"
              data-display="{{ 1 if r.display else 0 }}"
              data-selling="{{ 1 if r.selling else 0 }}"
              data-updated="{{ r.updated_date }}">
            <td class="cf24-col-no">{{ r.product_no }}</td>
            <td class="cf24-col-name" title="{{ r.product_name }}">
              <a href="/cafe24/?{{ qs }}selected={{ r.product_no }}">{{ r.product_name }}</a>
            </td>
            <td class="cf24-col-flag">
              {% if r.display %}<span class="cf24-dot cf24-dot-on" title="진열중"></span>
              {% else %}<span class="cf24-dot" title="미진열"></span>{% endif %}
            </td>
            <td class="cf24-col-flag">
              {% if r.selling %}<span class="cf24-dot cf24-dot-on" title="판매중"></span>
              {% else %}<span class="cf24-dot" title="판매중지"></span>{% endif %}
            </td>
            {# 연도는 생략(월-일 시:분). 전체 값은 title 로 확인 #}
            <td class="cf24-col-date" title="{{ r.updated_date }}">{{ r.updated_date[5:16] }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% if not rows and not error %}
      <p class="cf24-muted" style="padding:12px;">조건에 맞는 상품이 없습니다.</p>
      {% endif %}
    </div>
  </aside>

  {# ── 가운데: 상세페이지 편집 ──────────────────────────────── #}
  <section class="erp-card cf24-pane cf24-pane-editor" id="cf24-editor-pane">
    {% if selected %}
      {% include "cafe24/_editor.html" %}
    {% else %}
    <div class="cf24-empty-pane">
      <h3>왼쪽에서 상품을 선택하세요.</h3>
      <p class="cf24-muted">
        선택한 상품의 상세페이지 HTML 을 여기서 바로 편집하고 카페24에 적용할 수 있습니다.<br />
        적용 직전 내용은 자동으로 백업되어 되돌릴 수 있습니다.
      </p>
    </div>
    {% endif %}
  </section>

  {# ── 오른쪽: 상품 정보 패널(상품명·가격 / 대표 이미지 / 옵션·품목) ── #}
  <section class="erp-card cf24-pane cf24-pane-side" id="cf24-side-pane">
    {% if selected %}
      {% include "cafe24/_side.html" %}
    {% else %}
    <div class="cf24-empty-pane">
      <p class="cf24-muted">상품을 선택하면 상품명·가격, 대표 이미지, 옵션/품목을 여기서 수정할 수 있습니다.</p>
    </div>
    {% endif %}
  </section>
</div>

{# ── 옵션/품목 편집 모달 — 오른쪽 패널(380px)은 품목 표를 담기에 좁아 별도 창에서
   편집한다. 페이지에 하나만 두고(패널 조각 교체와 무관), 열 때마다 카페24에서 새로
   읽는다. 내용은 products.html 의 JS(setupOptions → render) 가 그린다. #}
<div class="cf24-modal" id="cf24-options-modal" hidden aria-hidden="true">
  <div class="cf24-modal-box" role="dialog" aria-modal="true" aria-labelledby="cf24-options-title">
    <div class="cf24-modal-head">
      <h3 class="cf24-modal-title">옵션 / 품목 — <span id="cf24-options-title"></span></h3>
      <button type="button" class="cf24-modal-close" id="cf24-options-close" aria-label="닫기">✕</button>
    </div>
    <div class="cf24-modal-body cf24-options-body" id="cf24-options-body"></div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/cafe24-options.js?v=20260918e"></script>
<script>
(function () {
  var pane = document.getElementById("cf24-editor-pane");
  var listQuery = {{ list_query | tojson }};
  var dirty = false;

  /* ── 문법 강조 ──────────────────────────────────────────────
     색칠된 <pre> 를 투명한 <textarea> 뒤에 겹쳐 놓는 방식. 외부 라이브러리를
     쓰지 않는다(자체 호스팅 원칙). 태그·속성이름·속성값·주석·기호를 구분한다. */
  var TOKEN_RE = /(<!--[\s\S]*?-->)|(<![^>]*>)|(<\/?)([a-zA-Z][\w:.-]*)((?:"[^"]*"|'[^']*'|[^>"'])*)(>)/g;
  var ATTR_RE = /([\w:.-]+)(?:(\s*=\s*)("[^"]*"|'[^']*'|[^\s"'>]+))?/g;
  // 이 길이를 넘으면 강조를 끈다 — 타이핑마다 다시 칠하면 느려진다.
  var HL_LIMIT = 200000;

  function esc(text) {
    return text.replace(/[&<>]/g, function (c) {
      return c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&gt;";
    });
  }

  function paintAttrs(text) {
    return text.replace(ATTR_RE, function (whole, name, eq, val) {
      if (!name) return esc(whole);
      var out = '<span class="cf24-t-attr">' + esc(name) + "</span>";
      if (eq) out += '<span class="cf24-t-pun">' + esc(eq) + "</span>";
      if (val) out += '<span class="cf24-t-val">' + esc(val) + "</span>";
      return out;
    });
  }

  function paintHtml(src) {
    var out = "", last = 0, m;
    TOKEN_RE.lastIndex = 0;
    while ((m = TOKEN_RE.exec(src)) !== null) {
      out += esc(src.slice(last, m.index));
      last = TOKEN_RE.lastIndex;
      if (m[1]) { out += '<span class="cf24-t-com">' + esc(m[1]) + "</span>"; continue; }
      if (m[2]) { out += '<span class="cf24-t-doc">' + esc(m[2]) + "</span>"; continue; }
      out += '<span class="cf24-t-pun">' + esc(m[3]) + "</span>" +
             '<span class="cf24-t-tag">' + esc(m[4]) + "</span>" +
             paintAttrs(m[5]) +
             '<span class="cf24-t-pun">' + esc(m[6]) + "</span>";
    }
    return out + esc(src.slice(last));
  }

  function setupCodeEditor() {
    var ta = document.getElementById("cf24-html-pc");
    var hl = document.getElementById("cf24-hl-pc");
    var gutter = document.getElementById("cf24-gutter-pc");
    if (!ta || !hl) return;

    var timer = null;

    function renderGutter(count) {
      if (!gutter || gutter.dataset.lines === String(count)) return;
      var out = "";
      for (var i = 1; i <= count; i++) out += i + "\n";
      gutter.textContent = out;
      gutter.dataset.lines = String(count);
    }

    // 스크롤 주체는 textarea 다. 색칠 층과 줄 번호를 같은 양만큼 이동시켜
    // 글자 위치를 맞춘다(크기를 계산해 맞추는 방식은 긴 줄에서 어긋났다).
    function sync() {
      var x = ta.scrollLeft, y = ta.scrollTop;
      hl.style.transform = "translate(" + -x + "px," + -y + "px)";
      if (gutter) gutter.style.transform = "translateY(" + -y + "px)";
    }

    function repaint() {
      // 마지막 줄이 잘리지 않게 개행을 하나 덧붙인다(<pre> 특성).
      if (ta.value.length > HL_LIMIT) hl.textContent = ta.value + "\n";
      else hl.innerHTML = paintHtml(ta.value) + "\n";
      renderGutter(ta.value.split("\n").length);
      sync();
    }

    function refresh() {
      // 짧은 소스는 바로 칠해야 줄 번호가 즉시 따라온다.
      if (ta.value.length < 50000) { repaint(); return; }
      clearTimeout(timer);
      timer = setTimeout(repaint, 80);
    }

    /* ── 편집 단축키 공용 헬퍼 ──
       lineRange() : 지금 선택(없으면 커서)이 걸친 **줄 전체** 범위.
       applyEdit() : 그 범위를 새 문자열로 바꾸고 선택을 다시 잡는다. */

    function lineRange() {
      var value = ta.value;
      var start = ta.selectionStart, end = ta.selectionEnd;
      // 선택이 개행에서 끝나면 그 다음 줄은 대상이 아니다(드래그로 줄 끝까지
      // 끌었을 때 아래 줄까지 딸려오는 것을 막는다).
      if (end > start && value.charAt(end - 1) === "\n") end -= 1;
      var from = value.lastIndexOf("\n", start - 1) + 1;
      var to = value.indexOf("\n", end);
      if (to === -1) to = value.length;
      return { value: value, start: start, end: end, from: from, to: to };
    }

    function applyEdit(from, to, text, selStart, selEnd) {
      // execCommand 로 넣어야 브라우저의 실행취소(Ctrl+Z) 이력에 남는다.
      // 지원하지 않으면 value 를 직접 바꾼다(되돌리기만 안 될 뿐 동작은 같다).
      var value = ta.value;
      ta.selectionStart = from;
      ta.selectionEnd = to;
      var inserted = false;
      try {
        // 빈 문자열은 insertText 가 브라우저에 따라 무시된다 — 삭제는 delete 로.
        inserted = text === ""
          ? document.execCommand("delete")
          : document.execCommand("insertText", false, text);
      } catch (err) { inserted = false; }
      if (!inserted) ta.value = value.slice(0, from) + text + value.slice(to);
      ta.selectionStart = selStart;
      ta.selectionEnd = selEnd;
      dirty = true;
      refresh();
    }

    /* Ctrl+/ (Mac ⌘+/) 로 HTML 주석 토글.
       - 선택이 있으면 그 선택이 걸친 **줄 전체**가 대상이다(반쯤 걸친 줄이
         잘려 태그가 깨지지 않게).
       - 선택이 없으면 커서가 있는 줄 하나.
       - 대상 안에 주석 기호가 하나라도 있으면 **제거**, 없으면 블록 전체를
         <!-- --> 로 감싼다. HTML 주석은 중첩이 안 되므로 "이미 주석인 부분을
         또 감싸기"를 피하는 것이 이 규칙의 이유다. */
    var COMMENT_MARK = /<!--[ \t]?|[ \t]?-->/g;

    function toggleComment() {
      var r = lineRange();
      var block = r.value.slice(r.from, r.to);
      if (!block.trim()) return;   // 빈 줄에서는 아무 것도 하지 않는다

      var caretIn = r.start - r.from;   // 블록 안에서의 커서 위치
      var shift = 0, out;

      COMMENT_MARK.lastIndex = 0;
      if (COMMENT_MARK.test(block)) {
        COMMENT_MARK.lastIndex = 0;
        out = block.replace(COMMENT_MARK, function (mark, offset) {
          if (offset < caretIn) shift -= mark.length;   // 커서 앞이 줄어든 만큼
          return "";
        });
      } else {
        var indent = block.match(/^[ \t]*/)[0];
        out = indent + "<!-- " + block.slice(indent.length) + " -->";
        shift = caretIn >= indent.length ? 5 : 0;       // "<!-- " 길이
      }

      if (r.start === r.end) {
        var pos = r.from + Math.min(out.length, Math.max(0, caretIn + shift));
        applyEdit(r.from, r.to, out, pos, pos);
      } else {
        // 바꾼 범위를 계속 선택해 둔다(연달아 다시 누르면 그대로 되돌아온다).
        applyEdit(r.from, r.to, out, r.from, r.from + out.length);
      }
    }

    /* Alt+↑/↓ — 커서가 있는 줄(선택이 있으면 그 줄들)을 위/아래로 옮긴다.
       윗줄/아랫줄과 통째로 자리를 바꾸는 방식이라 줄 수는 그대로다. */
    function moveLines(down) {
      var r = lineRange();
      var block = r.value.slice(r.from, r.to);
      if (!down) {
        if (r.from === 0) return;                       // 첫 줄 위로는 못 간다
        var prevFrom = r.value.lastIndexOf("\n", r.from - 2) + 1;
        var prev = r.value.slice(prevFrom, r.from - 1);
        var up = -(prev.length + 1);
        applyEdit(prevFrom, r.to, block + "\n" + prev, r.start + up, r.end + up);
      } else {
        if (r.to >= r.value.length) return;             // 마지막 줄 아래로는 못 간다
        var nextTo = r.value.indexOf("\n", r.to + 1);
        if (nextTo === -1) nextTo = r.value.length;
        var next = r.value.slice(r.to + 1, nextTo);
        var dn = next.length + 1;
        applyEdit(r.from, nextTo, next + "\n" + block, r.start + dn, r.end + dn);
      }
    }

    /* Alt+Shift+↑/↓ — 같은 줄을 하나 더 만든다.
       위로 복사하면 커서는 원래 자리(위쪽 사본)에, 아래로 복사하면 새로 생긴
       아래쪽 사본으로 옮긴다(VS Code 와 같은 느낌). */
    function duplicateLines(down) {
      var r = lineRange();
      var block = r.value.slice(r.from, r.to);
      var text = block + "\n" + block;
      var shift = down ? block.length + 1 : 0;
      applyEdit(r.from, r.to, text, r.start + shift, r.end + shift);
    }

    /* Shift+Delete — 커서가 있는 줄(선택이 있으면 그 줄들)을 통째로 지운다.
       줄바꿈까지 같이 지워야 빈 줄이 남지 않는다. 마지막 줄이면 대신 앞의
       줄바꿈을 지운다(문서 끝에 빈 줄이 생기지 않게). */
    function deleteLines() {
      var r = lineRange();
      var from = r.from, to = r.to;
      if (to < r.value.length) to += 1;
      else if (from > 0) from -= 1;
      if (from === to) return;                 // 빈 문서 — 지울 것이 없다

      var rest = r.value.slice(0, from) + r.value.slice(to);
      // 커서는 지운 자리로 올라온 줄의 같은 칸에 둔다(칸이 모자라면 줄 끝).
      var lineFrom = rest.lastIndexOf("\n", from - 1) + 1;
      var lineTo = rest.indexOf("\n", lineFrom);
      if (lineTo === -1) lineTo = rest.length;
      var col = Math.min(Math.max(0, r.start - r.from), lineTo - lineFrom);
      applyEdit(from, to, "", lineFrom + col, lineFrom + col);
    }

    ta.addEventListener("scroll", sync);
    ta.addEventListener("input", function () { dirty = true; refresh(); });
    ta.addEventListener("keydown", function (e) {
      // Ctrl+/ · ⌘+/ — 자판에 따라 key 가 "/" 가 아닐 수 있어 code 도 함께 본다.
      if ((e.ctrlKey || e.metaKey) && !e.altKey &&
          (e.key === "/" || e.code === "Slash" || e.code === "NumpadDivide")) {
        e.preventDefault();
        toggleComment();
        return;
      }
      // Alt+↑/↓ 줄 이동, Alt+Shift+↑/↓ 줄 복사.
      var isUp = e.key === "ArrowUp" || e.code === "ArrowUp";
      var isDown = e.key === "ArrowDown" || e.code === "ArrowDown";
      if (e.altKey && !e.ctrlKey && !e.metaKey && (isUp || isDown)) {
        e.preventDefault();
        if (e.shiftKey) duplicateLines(isDown);
        else moveLines(isDown);
        return;
      }
      // Shift+Delete — 줄 삭제. (윈도우 기본 동작인 "잘라내기"를 대신한다)
      if (e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey &&
          (e.key === "Delete" || e.code === "Delete")) {
        e.preventDefault();
        deleteLines();
        return;
      }
      // Tab 은 포커스 이동이 아니라 들여쓰기로 쓴다.
      if (e.key !== "Tab") return;
      e.preventDefault();
      var start = ta.selectionStart, end = ta.selectionEnd;
      ta.value = ta.value.slice(0, start) + "  " + ta.value.slice(end);
      ta.selectionStart = ta.selectionEnd = start + 2;
      dirty = true;
      refresh();
    });

    repaint();
  }

  // ── 편집기 조각을 새로 끼워 넣은 뒤 다시 연결 ──
  window.cf24BindEditor = function () {
    dirty = false;
    setupCodeEditor();

    pane.querySelectorAll("[data-copy]").forEach(function (btn) {
      btn.addEventListener("click", function () {
        var box = document.getElementById(btn.dataset.copy);
        if (!box) return;
        var done = function () {
          var old = btn.textContent;
          btn.textContent = "복사됨";
          setTimeout(function () { btn.textContent = old; }, 1500);
        };
        if (navigator.clipboard && window.isSecureContext) {
          navigator.clipboard.writeText(box.value).then(done, function () { box.select(); });
        } else {
          box.select();
          try { document.execCommand("copy"); done(); } catch (e) { /* 직접 복사 */ }
        }
      });
    });

    // 「다시 읽기」/「다시 확인」 — 카페24 관리자에서 방금 고친 경우 현재 소스를 강제로
    // 다시 받는다(도구 막대 버튼 + 반영 대기 배너 버튼, 둘 다 같은 동작).
    pane.querySelectorAll("[data-reload]").forEach(function (reloadBtn) {
      reloadBtn.addEventListener("click", function () {
        confirmLeave().then(function (ok) {
          if (ok) select(reloadBtn.dataset.reload, false);
        });
      });
    });

    // 예약 시각 — 네이티브 date/time input 은 투명하게 두고(opacity:0), 보이는
    // 글자는 우리가 원하는 형식으로 직접 그린다("2026년 08월 20일" / "오후 07시 30분").
    // input 의 value 자체는 그대로 YYYY-MM-DD / HH:MM 이라 제출 로직은 안 바뀐다.
    (function setupScheduleDateTime() {
      var dateEl = document.getElementById("cf24-schedule-date");
      var timeEl = document.getElementById("cf24-schedule-time");
      var dateOut = document.getElementById("cf24-schedule-date-display");
      var timeOut = document.getElementById("cf24-schedule-time-display");
      if (!dateEl || !timeEl) return;

      var WEEKDAY = ["일", "월", "화", "수", "목", "금", "토"];

      function pad2(n) { return (n < 10 ? "0" : "") + n; }

      function paintDate() {
        var v = dateEl.value; // "YYYY-MM-DD"
        if (!v) { dateOut.textContent = "연도.월.일"; return; }
        var p = v.split("-");
        var y = parseInt(p[0], 10), mo = parseInt(p[1], 10), d = parseInt(p[2], 10);
        // new Date(y, mo-1, d) 는 로컬 시간대로 만들어져 날짜가 밀리지 않는다
        // (문자열을 그대로 new Date("YYYY-MM-DD") 로 파싱하면 UTC 로 해석돼 하루
        // 어긋날 수 있다).
        var weekday = WEEKDAY[new Date(y, mo - 1, d).getDay()];
        dateOut.textContent = p[0] + "년 " + p[1] + "월 " + p[2] + "일 (" + weekday + ")";
      }

      function paintTime() {
        var v = timeEl.value; // "HH:MM" (24시간제 고정 — 로캘과 무관)
        if (!v) { timeOut.textContent = "시:분"; return; }
        var parts = v.split(":");
        var h = parseInt(parts[0], 10);
        var period = h < 12 ? "오전" : "오후";
        var h12 = h % 12;
        if (h12 === 0) h12 = 12;
        timeOut.textContent = period + " " + pad2(h12) + "시 " + parts[1] + "분";
      }

      // 네이티브 달력/시간 팝업은 브라우저가 자체 아이콘(우측 끝) 클릭에만 반응하고
      // 칸 전체 클릭에는 반응하지 않는다. showPicker() 를 직접 호출해 칸 어디를
      // 클릭해도 팝업이 뜨게 한다. 지원하지 않는 브라우저에서는 조용히 무시되고
      // 포커스만 이동한다(기존 동작 그대로 유지되므로 안전).
      function openPicker(el) {
        if (typeof el.showPicker === "function") {
          try { el.showPicker(); } catch (err) { /* 사용자 제스처 밖 호출 등 — 무시 */ }
        }
      }
      dateEl.addEventListener("click", function () { openPicker(dateEl); });
      timeEl.addEventListener("click", function () { openPicker(timeEl); });

      dateEl.addEventListener("input", paintDate);
      dateEl.addEventListener("change", paintDate);
      timeEl.addEventListener("input", paintTime);
      timeEl.addEventListener("change", paintTime);
      paintDate();
      paintTime();
    })();

    // 예약 폼 — 편집기 내용을 hidden 에 복사해 함께 보낸다(폼이 서로 형제라서).
    // 날짜·시간도 두 개의 별도 input 값을 합쳐 서버가 기대하는 형식으로 만든다.
    var schedForm = pane.querySelector("#cf24-schedule-form");
    if (schedForm) {
      schedForm.addEventListener("submit", function (e) {
        var box = document.getElementById("cf24-html-pc");
        var holder = document.getElementById("cf24-schedule-html");
        var wantHtml = schedForm.querySelector('[name="apply_html"]').checked;
        if (holder && box) holder.value = wantHtml ? box.value : "";

        var dateEl = document.getElementById("cf24-schedule-date");
        var timeEl = document.getElementById("cf24-schedule-time");
        var atHolder = document.getElementById("cf24-schedule-at");
        // date/time 이 필수(required)라 브라우저가 빈 값이면 여기까지 오지 않는다.
        if (atHolder && dateEl && timeEl) atHolder.value = dateEl.value + "T" + timeEl.value;

        // 확인창이 비동기라 일단 제출을 멈추고, 확인을 받으면 다시 보낸다.
        // (required 검사는 이미 통과한 뒤라 form.submit() 으로 보내도 안전하다)
        e.preventDefault();
        window.erpConfirm(schedForm.dataset.confirm).then(function (ok) {
          if (!ok) return;
          dirty = false;   // 예약 등록으로 화면을 떠나므로 편집 중 경고를 끈다.
          schedForm.submit();
        });
      });
    }

    // ── 상품명 수정 ──
    // 연필 → 입력칸, 저장 시 POST /products/{no}/name. 서버가 쓰기 전에 카페24
    // 현재값을 읽어 이전 이름을 감사로그에 남긴다.
    (function setupRename() {
      var box = pane.querySelector("#cf24-name");
      var form = box && box.querySelector("#cf24-name-form");
      if (!box || !form) return;   // 조회 실패 시엔 수정 버튼 자체가 없다
      var no = box.dataset.productNo;
      var view = box.querySelector("#cf24-name-view");
      var text = box.querySelector("#cf24-name-text");
      var input = box.querySelector("#cf24-name-input");
      var saveBtn = box.querySelector("#cf24-name-save");
      var cancelBtn = box.querySelector("#cf24-name-cancel");

      function open(on) {
        view.classList.toggle("is-hidden", on);
        form.classList.toggle("is-hidden", !on);
        if (on) { input.value = text.textContent; input.focus(); input.select(); }
      }

      // 왼쪽 목록도 다시 받지 않으므로 같은 상품 행의 이름·정렬키를 직접 맞춘다.
      function paintRow(name) {
        var tr = document.querySelector('#cf24-list tr.cf24-row[data-no="' + no + '"]');
        if (!tr) return;
        tr.dataset.name = name;
        var cell = tr.querySelector(".cf24-col-name");
        if (!cell) return;
        cell.title = name;
        var link = cell.querySelector("a");
        (link || cell).textContent = name;
      }

      function busy(state) {
        saveBtn.disabled = state;
        cancelBtn.disabled = state;
        input.disabled = state;
      }

      function save() {
        var name = input.value.trim();
        if (!name) {
          window.erpAlert("상품명을 입력하세요.").then(function () { input.focus(); });
          return;
        }
        if (name === text.textContent) { open(false); return; }
        window.erpConfirm("상품명을 「" + name + "」(으)로 바꿉니다.\n카페24 쇼핑몰에 바로 반영됩니다. 계속할까요?")
          .then(function (ok) { if (ok) send(name); });
      }

      function send(name) {
        busy(true);
        fetch("/cafe24/products/" + no + "/name", {
          method: "POST",
          credentials: "same-origin",
          cache: "no-store",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ name: name })
        })
          .then(function (res) {
            return res.json().catch(function () { return {}; }).then(function (data) {
              if (!res.ok) throw new Error(data.detail || "HTTP " + res.status);
              return data;
            });
          })
          .then(function (data) {
            // 화면은 요청값이 아니라 카페24가 확인해 준 이름으로 그린다.
            var applied = data.product_name || name;
            text.textContent = applied;
            input.value = applied;
            paintRow(applied);
            open(false);
          })
          .catch(function (err) {
            window.erpAlert("상품명 변경에 실패했습니다: " + err.message);
          })
          .then(function () { busy(false); });
      }

      box.querySelector("#cf24-name-edit").addEventListener("click", function () { open(true); });
      cancelBtn.addEventListener("click", function () { open(false); });
      saveBtn.addEventListener("click", save);
      input.addEventListener("keydown", function (e) {
        if (e.key === "Enter") { e.preventDefault(); save(); }
        else if (e.key === "Escape") { e.preventDefault(); open(false); }
      });
    })();

    // ── 진열/판매 배지 클릭 = 상태 토글 ──
    // 쓰기는 서버가 한다(POST /products/{no}/status). 화면은 **응답에 담긴 실제
    // 상태**로 다시 그린다 — 요청값을 낙관적으로 반영하면 실패했을 때 화면과
    // 카페24가 어긋난다.
    (function setupStatusToggle() {
      var box = pane.querySelector("#cf24-status");
      if (!box) return;
      var no = box.dataset.productNo;
      var LABEL = {
        display: { word: "진열", on: "진열", off: "미진열", dotOn: "진열중", dotOff: "미진열" },
        selling: { word: "판매", on: "판매", off: "중지", dotOn: "판매중", dotOff: "판매중지" }
      };
      var buttons = box.querySelectorAll("[data-status-field]");

      function paint(btn, on) {
        var label = LABEL[btn.dataset.statusField];
        btn.dataset.statusOn = on ? "1" : "0";
        btn.textContent = on ? label.on : label.off;
        btn.classList.toggle("cf24-badge-ok", on);
        btn.classList.toggle("cf24-badge-off", !on);
      }

      // 왼쪽 목록은 다시 불러오지 않으므로 같은 상품 행의 점도 직접 맞춘다.
      // data-display/data-selling 은 정렬 기준이라 함께 갱신한다.
      function paintRow(state) {
        var tr = document.querySelector('#cf24-list tr.cf24-row[data-no="' + no + '"]');
        if (!tr) return;
        ["display", "selling"].forEach(function (field, i) {
          var on = !!state[field];
          var label = LABEL[field];
          tr.dataset[field] = on ? "1" : "0";
          var dot = tr.querySelectorAll(".cf24-dot")[i];
          if (!dot) return;
          dot.classList.toggle("cf24-dot-on", on);
          dot.title = on ? label.dotOn : label.dotOff;
        });
      }

      function busy(state) {
        buttons.forEach(function (b) { b.disabled = state; });
      }

      buttons.forEach(function (btn) {
        btn.addEventListener("click", function () {
          var field = btn.dataset.statusField;
          var label = LABEL[field];
          var want = btn.dataset.statusOn !== "1";
          var msg = label.word + " 상태를 「" + (want ? label.on : label.off) + "」(으)로 바꿉니다.\n" +
                    "카페24 쇼핑몰에 바로 반영됩니다. 계속할까요?";
          window.erpConfirm(msg).then(function (ok) { if (ok) send(field, want); });
        });
      });

      function send(field, want) {
        busy(true);
        fetch("/cafe24/products/" + no + "/status", {
          method: "POST",
          credentials: "same-origin",
          cache: "no-store",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ field: field, value: want })
        })
          .then(function (res) {
            return res.json().catch(function () { return {}; }).then(function (data) {
              if (!res.ok) throw new Error(data.detail || "HTTP " + res.status);
              return data;
            });
          })
          .then(function (data) {
            buttons.forEach(function (b) { paint(b, !!data[b.dataset.statusField]); });
            paintRow(data);
          })
          .catch(function (err) {
            window.erpAlert("상태 변경에 실패했습니다: " + err.message);
          })
          .then(function () { busy(false); });
      }
    })();

    var form = pane.querySelector(".cf24-editor-form");
    if (form) {
      form.addEventListener("submit", function (e) {
        e.preventDefault();
        window.erpConfirm(form.dataset.confirm).then(function (ok) {
          if (!ok) return;
          dirty = false;
          form.submit();
        });
      });
    }
  };

  /* ════════════════════════════════════════════════════════════
     오른쪽 상품 정보 패널 — 상품명·가격 / 대표 이미지 / 옵션·품목
     쓰기는 전부 routes_product_info.py 의 JSON API. 화면은 **응답값**으로 그린다
     (요청값을 낙관 반영하면 실패했을 때 카페24와 어긋난다). 카페24 GET 은 쓰기
     직후 한동안 예전 값을 돌려주므로, 저장 뒤에 다시 GET 하지 않는다.
     ════════════════════════════════════════════════════════════ */
  function escHtml(text) {
    return String(text == null ? "" : text).replace(/[&<>"']/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }

  function apiJson(method, url, body) {
    var opts = { method: method, credentials: "same-origin", cache: "no-store", headers: {} };
    if (body instanceof FormData) {
      opts.body = body;
    } else if (body !== undefined) {
      opts.headers["Content-Type"] = "application/json";
      opts.body = JSON.stringify(body);
    }
    return fetch(url, opts).then(function (res) {
      return res.json().catch(function () { return {}; }).then(function (data) {
        if (!res.ok) throw new Error(data.detail || "HTTP " + res.status);
        return data;
      });
    });
  }

  function wonText(value) {
    var n = parseInt(String(value || "").replace(/,/g, ""), 10);
    return isNaN(n) ? "" : n.toLocaleString("ko-KR") + "원";
  }

  function bust(url) {
    // 같은 경로에 새 이미지가 올라가면 브라우저가 옛 그림을 재사용한다 — 시각을 붙인다.
    if (!url) return "";
    return url + (url.indexOf("?") === -1 ? "?" : "&") + "t=" + Date.now();
  }

  function setMsg(el, text, kind) {
    if (!el) return;
    el.textContent = text || "";
    el.classList.remove("is-ok", "is-err");
    if (kind) el.classList.add(kind);
  }

  // 입력칸의 값이 처음 값(defaultValue)과 다르면 표시한다.
  function trackDirty(container) {
    container.querySelectorAll("input[type='text'], select, textarea").forEach(function (el) {
      var mark = function () {
        var base = el.tagName === "SELECT" ? el.dataset.initial : el.defaultValue;
        el.classList.toggle("is-dirty", el.value !== (base == null ? "" : base));
      };
      if (el.tagName === "SELECT" && el.dataset.initial == null) el.dataset.initial = el.value;
      el.addEventListener("input", mark);
      el.addEventListener("change", mark);
    });
  }

  function commitValues(container) {
    container.querySelectorAll("input[type='text'], select, textarea").forEach(function (el) {
      if (el.tagName === "SELECT") el.dataset.initial = el.value;
      else el.defaultValue = el.value;
      el.classList.remove("is-dirty");
    });
  }

  // ── 옵션/품목 모달 — 페이지에 하나. 열기/닫기만 여기서, 내용은 setupOptions 가 그린다.
  var optModal = (function () {
    var el = document.getElementById("cf24-options-modal");
    var body = el ? el.querySelector("#cf24-options-body") : null;
    var title = el ? el.querySelector("#cf24-options-title") : null;
    var api = {
      el: el, body: body,
      isOpen: function () { return !!el && !el.hidden; },
      open: function (name) {
        if (!el) return;
        if (title) title.textContent = name || "";
        el.hidden = false;
        el.setAttribute("aria-hidden", "false");
        document.body.classList.add("cf24-modal-open");
      },
      close: function (force) {
        if (!el || el.hidden) return Promise.resolve(true);
        var dirty = !force && el.querySelector(".is-dirty");
        var ask = dirty ? window.erpConfirm("저장하지 않은 변경이 있습니다. 창을 닫을까요?") : Promise.resolve(true);
        return ask.then(function (ok) {
          if (!ok) return false;
          el.hidden = true;
          el.setAttribute("aria-hidden", "true");
          document.body.classList.remove("cf24-modal-open");
          if (body) body.innerHTML = "";
          return true;
        });
      }
    };
    if (el) {
      el.querySelector("#cf24-options-close").addEventListener("click", function () { api.close(false); });
      // 어두운 배경 클릭 = 닫기 (창 안 클릭은 무시)
      el.addEventListener("click", function (e) { if (e.target === el) api.close(false); });
      document.addEventListener("keydown", function (e) {
        if (e.key === "Escape" && api.isOpen()) api.close(false);
      });
    }
    return api;
  })();

  window.cf24BindSide = function () {
    var sideRoot = document.getElementById("cf24-side-pane");
    var root = sideRoot && sideRoot.querySelector("#cf24-side");
    if (!root) return;
    var no = root.dataset.productNo;

    // ── 기본 정보: 상품명 · 판매가 · 공급가 · 소비자가 ──
    (function setupBasic() {
      var form = root.querySelector("#cf24-basic-form");
      if (!form) return;
      var msg = form.querySelector("#cf24-basic-msg");
      var btn = form.querySelector("#cf24-basic-save");
      trackDirty(form);

      function paintTitle(name) {
        var text = document.getElementById("cf24-name-text");
        if (text) text.textContent = name;
        var input = document.getElementById("cf24-name-input");
        if (input) input.value = name;
        var tr = document.querySelector('#cf24-list tr.cf24-row[data-no="' + no + '"]');
        if (!tr) return;
        tr.dataset.name = name;
        var cell = tr.querySelector(".cf24-col-name");
        if (!cell) return;
        cell.title = name;
        var link = cell.querySelector("a");
        (link || cell).textContent = name;
      }

      form.addEventListener("submit", function (e) {
        e.preventDefault();
        var payload = {};
        var labels = { product_name: "상품명", price: "판매가", supply_price: "공급가", retail_price: "소비자가" };
        var lines = [];
        form.querySelectorAll("input[type='text']").forEach(function (el) {
          if (el.value !== el.defaultValue) {
            payload[el.name] = el.value.trim();
            lines.push(labels[el.name] + ": " + (el.defaultValue || "(없음)") + " → " + (el.value.trim() || "(없음)"));
          }
        });
        if (!lines.length) { setMsg(msg, "바뀐 값이 없습니다.", ""); return; }
        if (payload.product_name === "") {
          window.erpAlert("상품명은 비울 수 없습니다.");
          return;
        }
        window.erpConfirm("다음 항목을 카페24에 바로 반영합니다. 계속할까요?\n\n" + lines.join("\n"))
          .then(function (ok) {
            if (!ok) return;
            btn.disabled = true;
            setMsg(msg, "저장 중…", "");
            apiJson("POST", "/cafe24/products/" + no + "/basic", payload)
              .then(function (data) {
                var p = data.product || {};
                form.querySelector('[name="product_name"]').value = p.product_name || "";
                form.querySelector('[name="price"]').value = p.price ? String(parseInt(p.price, 10)) : "";
                form.querySelector('[name="supply_price"]').value = p.supply_price ? String(parseInt(p.supply_price, 10)) : "";
                form.querySelector('[name="retail_price"]').value = p.retail_price ? String(parseInt(p.retail_price, 10)) : "";
                commitValues(form);
                if (p.product_name) paintTitle(p.product_name);
                setMsg(msg, (data.changed && data.changed.length) ? "카페24에 반영했습니다." : "변경된 값이 없어 보내지 않았습니다.", "is-ok");
              })
              .catch(function (err) { setMsg(msg, "실패: " + err.message, "is-err"); })
              .then(function () { btn.disabled = false; });
          });
      });
    })();

    // ── 대표 이미지 ──
    (function setupImage() {
      var form = root.querySelector("#cf24-image-form");
      if (!form) return;
      var fileEl = form.querySelector("#cf24-image-file");
      var nameEl = form.querySelector("#cf24-image-filename");
      var msg = form.querySelector("#cf24-image-msg");
      var btn = form.querySelector("#cf24-image-save");
      var img = root.querySelector("#cf24-image-main");
      var link = root.querySelector("#cf24-image-link");
      var empty = root.querySelector("#cf24-image-empty");

      function paint(p) {
        if (p.detail_image && img) {
          img.src = bust(p.detail_image);
          if (link) { link.href = p.detail_image; link.classList.remove("is-hidden"); }
          if (empty) empty.classList.add("is-hidden");
        }
        root.querySelectorAll("[data-image-key]").forEach(function (el) {
          var v = p[el.dataset.imageKey];
          if (!v) return;
          el.src = bust(v);
          var fig = el.closest("[data-image-figure]");
          if (fig) fig.classList.remove("is-hidden");
        });
      }

      fileEl.addEventListener("change", function () {
        var f = fileEl.files && fileEl.files[0];
        nameEl.textContent = f ? f.name + " (" + Math.round(f.size / 1024) + "KB)" : "선택된 파일 없음";
        btn.disabled = !f;
        if (f && f.size > 10 * 1024 * 1024) {
          setMsg(msg, "10MB 를 넘는 파일은 올릴 수 없습니다.", "is-err");
          btn.disabled = true;
          return;
        }
        if (f && img) {
          // 업로드 전 미리보기 — 실제 교체는 응답을 받은 뒤 서버 경로로 다시 그린다.
          img.src = URL.createObjectURL(f);
          if (link) link.classList.remove("is-hidden");
          if (empty) empty.classList.add("is-hidden");
          setMsg(msg, "미리보기입니다. 「업로드하여 교체」를 누르면 카페24에 반영됩니다.", "");
        }
      });

      form.addEventListener("submit", function (e) {
        e.preventDefault();
        var f = fileEl.files && fileEl.files[0];
        if (!f) return;
        window.erpConfirm("대표 이미지를 「" + f.name + "」(으)로 교체합니다.\n카페24 쇼핑몰에 바로 반영되며 목록/축소 이미지도 함께 바뀝니다. 계속할까요?")
          .then(function (ok) {
            if (!ok) return;
            var fd = new FormData();
            fd.append("file", f);
            btn.disabled = true;
            setMsg(msg, "업로드 중… (파일 크기에 따라 수십 초 걸릴 수 있습니다)", "");
            apiJson("POST", "/cafe24/products/" + no + "/image", fd)
              .then(function (data) {
                paint(data.product || {});
                fileEl.value = "";
                nameEl.textContent = "선택된 파일 없음";
                setMsg(msg, "카페24에 반영했습니다.", "is-ok");
              })
              .catch(function (err) { setMsg(msg, "실패: " + err.message, "is-err"); btn.disabled = false; });
          });
      });
    })();

    // ── 옵션 / 품목 — 모달 로직은 /static/cafe24-options.js 에 있다(크기 때문에 분리).
    //    통합 목록(옵션값+품목 한 행) · 드래그 순서 · 옵션값 불러오기 · 저장 한 번에 처리.
    if (window.cf24SetupOptions) {
      window.cf24SetupOptions({
        root: root, productNo: no, modal: optModal,
        apiJson: apiJson, escHtml: escHtml, setMsg: setMsg,
        trackDirty: trackDirty, commitValues: commitValues
      });
    }
  };

  // 공용 확인창(erp-dialog.js)은 비동기다 — 기본 confirm() 과 달리 Promise 를
  // 돌려주므로 호출부는 모두 then() 안에서 이어간다.
  function confirmLeave() {
    if (!dirty) return Promise.resolve(true);
    return window.erpConfirm("편집한 내용이 저장되지 않았습니다. 이동할까요?");
  }

  // ── 목록 클릭 → 가운데(편집기)·오른쪽(정보 패널)만 교체 ──
  // /pane 응답 하나에 두 조각이 담겨 온다([data-pane=editor] / [data-pane=side]).
  var sidePane = document.getElementById("cf24-side-pane");

  function select(no, push) {
    optModal.close(true);  // 다른 상품으로 넘어가면 열려 있던 옵션 창은 무효
    pane.innerHTML = '<p class="cf24-muted" style="padding:16px;">불러오는 중…</p>';
    if (sidePane) sidePane.innerHTML = "";
    var url = "/cafe24/products/" + no + "/pane" + (listQuery ? "?" + listQuery : "");
    // no-store: 캐시된 조각이 뜨면 카페24의 현재 소스가 아닌 예전 것을 편집하게 된다.
    fetch(url, { credentials: "same-origin", cache: "no-store" })
      .then(function (res) {
        if (res.redirected) { window.location.href = res.url; return null; }
        if (!res.ok) throw new Error("HTTP " + res.status);
        return res.text();
      })
      .then(function (htmlText) {
        if (htmlText === null) return;
        var holder = document.createElement("div");
        holder.innerHTML = htmlText;
        var editorPart = holder.querySelector('[data-pane="editor"]');
        var sidePart = holder.querySelector('[data-pane="side"]');
        pane.innerHTML = editorPart ? editorPart.innerHTML : htmlText;
        if (sidePane) sidePane.innerHTML = sidePart ? sidePart.innerHTML : "";
        window.cf24BindEditor();
        window.cf24BindSide();
        pane.scrollTop = 0;
        if (sidePane) sidePane.scrollTop = 0;
        if (push) {
          var target = "/cafe24/?" + (listQuery ? listQuery + "&" : "") + "selected=" + no;
          history.pushState({ no: no }, "", target);
        }
      })
      .catch(function () {
        // 조각 로드가 실패하면 평범한 페이지 이동으로 대체한다.
        window.location.href = "/cafe24/?" + (listQuery ? listQuery + "&" : "") + "selected=" + no;
      });
  }

  document.querySelectorAll("#cf24-list tbody tr.cf24-row").forEach(function (tr) {
    tr.addEventListener("click", function (e) {
      if (e.target.tagName === "A") e.preventDefault();
      confirmLeave().then(function (ok) {
        if (!ok) return;
        document.querySelectorAll("#cf24-list tr.is-active").forEach(function (el) {
          el.classList.remove("is-active");
        });
        tr.classList.add("is-active");
        select(tr.dataset.no, true);
      });
    });
  });

  window.addEventListener("popstate", function () {
    window.location.reload();
  });

  // ── 필터 체크박스는 즉시 적용 ──
  var filterForm = document.getElementById("cf24-filter-form");
  filterForm.querySelectorAll('input[type="checkbox"]').forEach(function (cb) {
    cb.addEventListener("change", function () {
      confirmLeave().then(function (ok) {
        // 확인창이 비동기라 체크는 이미 바뀌어 있다 — 취소하면 되돌린다.
        if (ok) filterForm.submit();
        else cb.checked = !cb.checked;
      });
    });
  });

  // ── 제목행 클릭 정렬(오름/내림 토글) ──
  var table = document.getElementById("cf24-list");
  var tbody = table.querySelector("tbody");
  var sortKey = null, sortAsc = true;

  table.querySelectorAll("th[data-sort-key]").forEach(function (th) {
    th.classList.add("cf24-sortable");
    th.addEventListener("click", function () {
      var key = th.dataset.sortKey;
      sortAsc = key === sortKey ? !sortAsc : true;
      sortKey = key;

      table.querySelectorAll("th[data-sort-key]").forEach(function (other) {
        other.classList.remove("is-asc", "is-desc");
      });
      th.classList.add(sortAsc ? "is-asc" : "is-desc");

      var numeric = th.dataset.sortType === "num";
      var rows = Array.prototype.slice.call(tbody.querySelectorAll("tr.cf24-row"));
      rows.sort(function (a, b) {
        var x = a.dataset[key] || "", y = b.dataset[key] || "";
        var cmp = numeric
          ? (parseFloat(x) || 0) - (parseFloat(y) || 0)
          : x.localeCompare(y, "ko");
        return sortAsc ? cmp : -cmp;
      });
      rows.forEach(function (tr) { tbody.appendChild(tr); });
    });
  });

  window.addEventListener("beforeunload", function (e) {
    if (dirty) { e.preventDefault(); e.returnValue = ""; }
  });

  if (pane.querySelector(".cf24-editor-form")) window.cf24BindEditor();
  window.cf24BindSide();
})();
</script>
{% endblock %}