{% extends "erp_base.html" %}

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

{% block content %}
<section class="cpg">

  <div class="erp-page-actions">
    <a class="erp-btn erp-btn-primary" href="/cupang/">◀◀ 달력</a>
  </div>

  <div class="cpg-prod-layout">

    <!-- ── 왼쪽: 미라네 주방 상품 목록 (다중선택 → 등록) ── -->
    <div class="erp-card cpg-form-card cpg-prod-left">
      <div class="cpg-card-head">
        <h2>미라네 주방 상품</h2>
        <span class="erp-muted">
          {% if search_enabled %}선택(다중) 후 등록. 이미 등록된 항목은 진한 회색.{% else %}
          검색 비활성: {{ search_reason }}{% endif %}
        </span>
      </div>

      <!-- 수기 추가: itemcode_db 에 없는 상품도 직접 등록 -->
      <form method="post" action="/cupang/products" class="cpg-prod-manual">
        <div class="cpg-prod-manual-head">
          <strong>수기 추가</strong>
          <span class="erp-muted">아래 목록에 없는 상품을 직접 등록합니다. 같은 제품코드는 덮어씁니다.</span>
        </div>
        <div class="cpg-prod-manual-row">
          <label class="erp-field"><span>제품명 *</span>
            <input class="erp-input" type="text" name="product_name" required placeholder="예: 미라네 12호 세트" /></label>
          <label class="erp-field"><span>제품코드 *</span>
            <input class="erp-input" type="text" name="product_code" required placeholder="예: MS-1012" /></label>
          <label class="erp-field"><span>쿠팡상품코드</span>
            <input class="erp-input" type="text" name="coupang_item_code" placeholder="예: 1234567890" /></label>
          <button type="submit" class="erp-btn erp-btn-primary">추가</button>
        </div>
      </form>

      {% if search_enabled %}
      <div class="cpg-inline-form" style="margin-bottom:10px;">
        <input class="erp-input" type="text" id="cpg-prod-q" placeholder="이름/코드 필터" style="min-width:200px" />
        <button type="button" class="erp-btn erp-btn-primary" id="cpg-prod-register">선택 등록</button>
      </div>
      <div id="cpg-src-list" class="cpg-src-list"><p class="erp-muted">불러오는 중…</p></div>
      {% else %}
      <p class="erp-muted">ITEMCODE_DB_URL / ITEMCODE_SEARCH_SQL 설정 후 사용 가능합니다.</p>
      {% endif %}
    </div>

    <!-- ── 오른쪽: 등록된 제품명 ── -->
    <div class="erp-card cpg-form-card cpg-prod-right">
      <div class="cpg-card-head"><h2>등록된 제품명 ({{ products|length }})</h2>
        <span class="erp-muted">폼의 제품명 드롭다운에 노출</span></div>
      <div class="erp-table-wrap cpg-reg-scroll">
        <table class="erp-table">
          <thead>
            <tr>
              <th><button type="button" class="cpg-sort" data-sort-key="name">제품명<span class="cpg-sort-ind" aria-hidden="true"></span></button></th>
              <th><button type="button" class="cpg-sort" data-sort-key="code">제품코드<span class="cpg-sort-ind" aria-hidden="true"></span></button></th>
              <th><button type="button" class="cpg-sort" data-sort-key="cpcode">쿠팡상품코드<span class="cpg-sort-ind" aria-hidden="true"></span></button></th>
              <th>상태</th>
              <th>동작</th>
            </tr>
          </thead>
          <tbody id="cpg-prod-tbody">
            {% for p in products %}
            <tr data-name="{{ p.product_name }}" data-code="{{ p.product_code }}"
                data-cpcode="{{ p.coupang_item_code }}"
                class="cpg-prod-row{% if not p.active %} is-inactive{% endif %}">
              <td title="{{ p.product_name }}">{{ p.product_name }}</td>
              <td title="{{ p.product_code }}">{{ p.product_code }}</td>
              <td class="cpg-cpcode" title="{{ p.coupang_item_code }}">{% if p.coupang_item_code %}{{ p.coupang_item_code }}{% else %}<span class="erp-muted">—</span>{% endif %}</td>
              <td>
                <!-- 배지 자체가 토글 버튼: 클릭 → 활성/비활성 전환 -->
                <button type="button" class="erp-badge cpg-active-toggle
                        {% if p.active %}erp-badge-success{% else %}erp-badge-neutral{% endif %}"
                        data-toggle-id="{{ p.id }}" aria-pressed="{{ 'true' if p.active else 'false' }}"
                        title="클릭하면 상태가 바뀝니다">{% if p.active %}활성{% else %}비활성{% endif %}</button>
              </td>
              <td>
                <div class="cpg-row-actions">
                  <button type="button" class="erp-btn erp-btn-outline cpg-prod-edit"
                          data-edit-id="{{ p.id }}">수정</button>
                  <form method="post" action="/cupang/products/{{ p.id }}/delete" class="cpg-inline-form"
                        onsubmit="return confirm('완전 삭제합니다. 계속할까요?');">
                    <button type="submit" class="erp-btn erp-btn-danger">삭제</button>
                  </form>
                </div>
              </td>
            </tr>
            {% endfor %}
            {% if not products %}
            <tr class="cpg-no-sort"><td colspan="5" class="erp-muted">등록된 제품명이 없습니다. 왼쪽에서 선택해 등록하세요.</td></tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>

  </div>
</section>

<script>
// 등록된 제품명 표 — 제품명/제품코드 오름차순·내림차순 정렬 (클라이언트).
(function () {
  var tbody = document.getElementById("cpg-prod-tbody");
  if (!tbody) return;
  var buttons = Array.prototype.slice.call(document.querySelectorAll(".cpg-sort"));
  var state = { key: null, dir: 1 };
  var collator = new Intl.Collator("ko", { numeric: true, sensitivity: "base" });

  function apply() {
    var rows = Array.prototype.slice.call(tbody.querySelectorAll("tr:not(.cpg-no-sort)"));
    if (rows.length < 2) return;
    rows.sort(function (a, b) {
      var av = a.getAttribute("data-" + state.key) || "";
      var bv = b.getAttribute("data-" + state.key) || "";
      return collator.compare(av, bv) * state.dir;
    });
    rows.forEach(function (r) { tbody.appendChild(r); });
  }

  buttons.forEach(function (btn) {
    btn.addEventListener("click", function () {
      var key = btn.getAttribute("data-sort-key");
      if (state.key === key) { state.dir = -state.dir; }
      else { state.key = key; state.dir = 1; }
      buttons.forEach(function (b) {
        var on = b === btn;
        b.classList.toggle("is-asc", on && state.dir === 1);
        b.classList.toggle("is-desc", on && state.dir === -1);
        b.closest("th").setAttribute("aria-sort", on ? (state.dir === 1 ? "ascending" : "descending") : "none");
      });
      apply();
    });
  });
})();
</script>

<!-- 등록된 제품 수정 팝업 -->
<div class="cpg-modal" id="cpg-edit-dlg" hidden>
  <div class="cpg-modal-back" data-edit-close></div>
  <div class="cpg-modal-box" role="dialog" aria-modal="true" aria-labelledby="cpg-edit-title">
    <h3 id="cpg-edit-title">제품 수정</h3>
    <label class="erp-field"><span>제품명 *</span>
      <input class="erp-input" type="text" id="cpg-edit-name" /></label>
    <label class="erp-field"><span>제품코드 *</span>
      <input class="erp-input" type="text" id="cpg-edit-code" /></label>
    <label class="erp-field"><span>쿠팡상품코드</span>
      <input class="erp-input" type="text" id="cpg-edit-cpcode" placeholder="비우면 지워집니다" /></label>
    <p class="erp-muted" id="cpg-edit-msg" style="margin:0;font-size:12px;"></p>
    <div class="cpg-dlg-actions erp-page-actions">
      <button type="button" class="erp-btn erp-btn-outline" data-edit-close>취소</button>
      <button type="button" class="erp-btn erp-btn-primary" id="cpg-edit-save">저장</button>
    </div>
  </div>
</div>

<script>
// 등록된 제품 수정 — [수정] 클릭 → 팝업에서 제품명/제품코드/쿠팡상품코드 변경.
(function () {
  var tbody = document.getElementById("cpg-prod-tbody");
  var dlg = document.getElementById("cpg-edit-dlg");
  if (!tbody || !dlg) return;
  var elName = document.getElementById("cpg-edit-name");
  var elCode = document.getElementById("cpg-edit-code");
  var elCp = document.getElementById("cpg-edit-cpcode");
  var elMsg = document.getElementById("cpg-edit-msg");
  var saveBtn = document.getElementById("cpg-edit-save");
  var editingId = null;

  function close() { dlg.hidden = true; editingId = null; saveBtn.disabled = false; }

  tbody.addEventListener("click", function (e) {
    var btn = e.target.closest(".cpg-prod-edit");
    if (!btn) return;
    var row = btn.closest("tr");
    editingId = btn.getAttribute("data-edit-id");
    elName.value = row.getAttribute("data-name") || "";
    elCode.value = row.getAttribute("data-code") || "";
    elCp.value = row.getAttribute("data-cpcode") || "";
    elMsg.textContent = "";
    dlg.hidden = false;
    elName.focus();
  });

  Array.prototype.forEach.call(dlg.querySelectorAll("[data-edit-close]"), function (el) {
    el.addEventListener("click", close);
  });
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && !dlg.hidden) close();
  });

  saveBtn.addEventListener("click", function () {
    if (!editingId) return;
    var body = {
      product_name: (elName.value || "").trim(),
      product_code: (elCode.value || "").trim(),
      coupang_item_code: (elCp.value || "").trim()
    };
    if (!body.product_name || !body.product_code) {
      elMsg.textContent = "제품명과 제품코드는 필수입니다."; return;
    }
    saveBtn.disabled = true;
    elMsg.textContent = "저장 중…";
    fetch("/cupang/api/products/" + editingId + "/edit", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body)
    }).then(function (r) {
      return r.json().then(function (d) {
        if (!r.ok) throw new Error((d && d.detail) || "저장 실패");
        return d;
      });
    }).then(function () { location.reload(); })
      .catch(function (err) {
        saveBtn.disabled = false;
        elMsg.textContent = err.message || "저장 실패";
      });
  });
})();
</script>

<script>
// 상태 배지 클릭 → 활성/비활성 토글 (페이지 새로고침 없음).
(function () {
  var tbody = document.getElementById("cpg-prod-tbody");
  if (!tbody) return;
  tbody.addEventListener("click", function (e) {
    var btn = e.target.closest(".cpg-active-toggle");
    if (!btn || btn.disabled) return;
    var id = btn.getAttribute("data-toggle-id");
    btn.disabled = true;
    fetch("/cupang/api/products/" + id + "/toggle", { method: "POST" })
      .then(function (r) { if (!r.ok) throw new Error("fail"); return r.json(); })
      .then(function (data) {
        var on = !!(data && data.active);
        btn.textContent = on ? "활성" : "비활성";
        btn.setAttribute("aria-pressed", on ? "true" : "false");
        btn.classList.toggle("erp-badge-success", on);
        btn.classList.toggle("erp-badge-neutral", !on);
        var row = btn.closest("tr");
        if (row) row.classList.toggle("is-inactive", !on);
      })
      .catch(function () { alert("상태 변경 실패"); })
      .finally(function () { btn.disabled = false; });
  });
})();
</script>

{% if search_enabled %}
<!-- 선택 등록 팝업 — 선택한 상품마다 쿠팡상품코드를 입력한 뒤 등록 -->
<div class="cpg-modal" id="cpg-reg-dlg" hidden>
  <div class="cpg-modal-back" data-reg-close></div>
  <div class="cpg-modal-box cpg-reg-box" role="dialog" aria-modal="true" aria-labelledby="cpg-reg-title">
    <h3 id="cpg-reg-title">쿠팡상품코드 입력</h3>
    <p class="erp-muted" style="margin:0;font-size:12px;">
      선택한 상품을 등록합니다. 쿠팡상품코드는 비워두면 나중에 채울 수 있습니다.
    </p>
    <div class="cpg-reg-list" id="cpg-reg-list"></div>
    <div class="cpg-dlg-actions erp-page-actions">
      <button type="button" class="erp-btn erp-btn-outline" data-reg-close>취소</button>
      <button type="button" class="erp-btn erp-btn-primary" id="cpg-reg-submit">등록</button>
    </div>
  </div>
</div>

<script type="application/json" id="cpg-registered">{{ registered_codes | tojson }}</script>
<script>
(function () {
  var listBox = document.getElementById("cpg-src-list");
  var filter = document.getElementById("cpg-prod-q");
  var regBtn = document.getElementById("cpg-prod-register");
  var registered = {};
  try { (JSON.parse(document.getElementById("cpg-registered").textContent || "[]")).forEach(function(c){ registered[c]=true; }); } catch(e){}
  var all = [];
  var selected = {};

  function esc(s){ var d=document.createElement("div"); d.textContent=s||""; return d.innerHTML; }

  function render() {
    var term = (filter.value || "").trim().toLowerCase();
    var rows = all.filter(function (it) {
      if (!term) return true;
      return (it.code + " " + it.name).toLowerCase().indexOf(term) >= 0;
    });
    if (!rows.length) { listBox.innerHTML = '<p class="erp-muted">결과 없음</p>'; return; }
    var html = "";
    rows.forEach(function (it) {
      var cls = "cpg-src-item";
      if (registered[it.code]) cls += " cpg-registered";
      if (selected[it.code]) cls += " is-selected";
      html += '<div class="' + cls + '" data-code="' + esc(it.code) + '">' +
              '<span class="cpg-src-name">' + esc(it.name) + '</span>' +
              '<span class="cpg-src-code">' + esc(it.code) + '</span>' +
              '</div>';
    });
    listBox.innerHTML = html;
  }

  listBox.addEventListener("click", function (e) {
    var item = e.target.closest(".cpg-src-item");
    if (!item) return;
    var code = item.getAttribute("data-code");
    if (selected[code]) { delete selected[code]; item.classList.remove("is-selected"); }
    else { selected[code] = true; item.classList.add("is-selected"); }
  });

  filter.addEventListener("input", render);

  // ── 선택 등록: 바로 등록하지 않고 쿠팡상품코드 입력 팝업을 먼저 띄운다 ──
  var regDlg = document.getElementById("cpg-reg-dlg");
  var regList = document.getElementById("cpg-reg-list");
  var regSubmit = document.getElementById("cpg-reg-submit");
  var pending = [];

  function closeRegDlg() {
    regDlg.hidden = true;
    regSubmit.disabled = false;
  }

  function openRegDlg(items) {
    pending = items;
    var html = "";
    items.forEach(function (it, i) {
      html += '<label class="erp-field cpg-reg-item">' +
              '<span>' + esc(it.name) + ' <em class="cpg-reg-code">' + esc(it.code) + '</em></span>' +
              '<input class="erp-input" type="text" data-reg-idx="' + i + '" ' +
              'placeholder="쿠팡상품코드" /></label>';
    });
    regList.innerHTML = html;
    regDlg.hidden = false;
    var first = regList.querySelector("input");
    if (first) first.focus();
  }

  Array.prototype.forEach.call(regDlg.querySelectorAll("[data-reg-close]"), function (el) {
    el.addEventListener("click", closeRegDlg);
  });
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && !regDlg.hidden) closeRegDlg();
  });

  regBtn.addEventListener("click", function () {
    var items = all.filter(function (it) { return selected[it.code]; })
                   .map(function (it) { return { code: it.code, name: it.name }; });
    if (!items.length) { alert("등록할 상품을 선택하세요."); return; }
    openRegDlg(items);
  });

  regSubmit.addEventListener("click", function () {
    // 빈 칸은 키 자체를 보내지 않는다 → 이미 등록된 제품의 쿠팡상품코드를 지우지 않음.
    Array.prototype.forEach.call(regList.querySelectorAll("input[data-reg-idx]"), function (inp) {
      var idx = parseInt(inp.getAttribute("data-reg-idx"), 10);
      var val = (inp.value || "").trim();
      if (!pending[idx]) return;
      if (val) { pending[idx].coupang_item_code = val; }
      else { delete pending[idx].coupang_item_code; }
    });
    regSubmit.disabled = true;
    fetch("/cupang/products/bulk", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: pending })
    }).then(function (r) { if (!r.ok) throw new Error("fail"); return r.json(); })
      .then(function () { location.reload(); })
      .catch(function () { regSubmit.disabled = false; alert("등록 실패"); });
  });

  fetch("/cupang/api/products/all")
    .then(function (r) { return r.json(); })
    .then(function (data) {
      all = (data && data.results) || [];
      if (!all.length) {
        var msg = "itemcode_db 결과 없음";
        if (data && data.error) { msg += " — 조회 오류: " + esc(data.error); }
        else if (data && !data.enabled && data.reason) { msg += " — " + esc(data.reason); }
        else { msg += " (테이블이 비었거나 검색 SQL 조건 불일치)"; }
        listBox.innerHTML = '<p class="erp-muted">' + msg + '</p>';
        return;
      }
      render();
    })
    .catch(function () { listBox.innerHTML = '<p class="erp-muted">목록 로드 실패</p>'; });
})();
</script>
{% endif %}
{% endblock %}