{% extends "erp_base.html" %}

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

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

{% 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="erp-card cf24-card">
  <div class="cf24-card-head">
    <h3>{{ info.product_name or '상품' }}</h3>
    <span class="cf24-muted">상품번호 {{ product_no }}</span>
  </div>

  <table class="erp-table cf24-kv">
    <tbody>
      <tr><th>상품코드</th><td><code>{{ info.product_code or '—' }}</code></td></tr>
      <tr><th>판매가</th><td>{{ info.price or '—' }}</td></tr>
      <tr>
        <th>진열 / 판매</th>
        <td>
          {% if info.display %}<span class="erp-badge cf24-badge-ok">진열</span>
          {% else %}<span class="erp-badge cf24-badge-off">미진열</span>{% endif %}
          {% if info.selling %}<span class="erp-badge cf24-badge-ok">판매</span>
          {% else %}<span class="erp-badge cf24-badge-off">중지</span>{% endif %}
        </td>
      </tr>
      <tr><th>최근 수정</th><td>{{ info.updated_date or '—' }}</td></tr>
      <tr><th>요약설명</th><td>{{ info.summary_description or '—' }}</td></tr>
    </tbody>
  </table>

  <div class="cf24-actions">
    <a class="erp-btn erp-btn-outline" href="/cafe24/">← 상품 목록</a>
  </div>
</div>

{# ── 상세설명 편집 ─────────────────────────────────────────── #}
{% if desc %}
<div class="erp-card cf24-card">
  <div class="cf24-card-head">
    <h3>상세페이지 HTML 편집</h3>
    <span class="cf24-muted">적용하면 쇼핑몰에 바로 반영됩니다</span>
  </div>

  <table class="erp-table cf24-kv">
    <tbody>
      <tr><th>PC 상세설명</th><td>{{ desc.description | length }}자</td></tr>
      <tr>
        <th>모바일 상세설명</th>
        <td>
          {{ desc.mobile_description | length }}자 ·
          {% if desc.separated_mobile %}
          <span class="cf24-warn">PC와 분리 사용</span> — 아래 적용은 PC 만 바꿉니다.
          모바일은 카페24 관리자에서 따로 반영해야 합니다.
          {% else %}
          <span class="cf24-muted">PC와 동일 설정</span> — 적용 시 모바일도 같은 내용으로 함께 반영됩니다.
          {% endif %}
          {% if desc.mobile_differs %}<span class="cf24-warn">현재 내용 불일치</span>{% endif %}
        </td>
      </tr>
    </tbody>
  </table>

  <p class="cf24-note">
    이미지 경로의 한글 파일명은 카페24에 <code>%EC%9A%A9…</code> 형태로 저장되어 있습니다.
    편집기에서는 읽기 쉽게 <strong>한글로 풀어서</strong> 보여주고, 적용할 때 원래 형식으로
    되돌려 저장합니다. 경로를 직접 고칠 때도 한글로 그냥 쓰시면 됩니다.
  </p>

  <form method="post" action="/cafe24/products/{{ product_no }}/apply"
        onsubmit="return confirm('카페24 쇼핑몰에 바로 반영됩니다. 적용할까요?\n\n직전 내용은 자동으로 백업되어 되돌릴 수 있습니다.');">
    <input type="hidden" name="base_fingerprint" value="{{ fingerprint }}" />

    <label class="cf24-label" for="cf24-html-pc">PC 상세설명 HTML</label>
    <textarea id="cf24-html-pc" class="cf24-html" name="html" rows="22"
              spellcheck="false">{{ html_pc }}</textarea>

    <div class="cf24-toolbar" style="margin-top:12px;">
      <input class="cf24-search" style="flex:1 1 320px;" type="text" name="memo" maxlength="200"
             placeholder="변경 메모 (버전 이력에 남습니다 — 예: 8월 프로모션 배너 교체)" />
      <button class="erp-btn erp-btn-primary" type="submit">카페24에 적용</button>
      <button class="erp-btn erp-btn-outline" type="button" data-copy="cf24-html-pc">HTML 복사</button>
      <a class="erp-btn erp-btn-outline" href="/cafe24/products/{{ product_no }}">되돌리기(새로고침)</a>
    </div>
  </form>

  {% if desc.separated_mobile or desc.mobile_differs %}
  <label class="cf24-label" for="cf24-html-mo">모바일 상세설명 HTML (읽기 전용)</label>
  <textarea id="cf24-html-mo" class="cf24-html" rows="12" readonly spellcheck="false"
            >{{ html_mobile }}</textarea>
  <div class="cf24-actions">
    <button type="button" class="erp-btn erp-btn-outline" data-copy="cf24-html-mo">HTML 복사</button>
  </div>
  {% endif %}
</div>

{# ── 버전 이력 ─────────────────────────────────────────────── #}
<div class="erp-card cf24-card">
  <div class="cf24-card-head">
    <h3>버전 이력</h3>
    <span class="cf24-muted">최근 20건 · 적용 직전 내용은 BACKUP 으로 자동 보관</span>
  </div>
  {% if revisions %}
  <div class="cf24-scroll">
    <table class="erp-table">
      <thead>
        <tr><th>시각</th><th>유형</th><th>길이</th><th>작업자</th><th>메모</th></tr>
      </thead>
      <tbody>
        {% for rev in revisions %}
        <tr>
          <td class="cf24-nowrap">{{ rev.created_at }}</td>
          <td class="cf24-nowrap"><code>{{ rev.revision_type }}</code></td>
          <td class="cf24-nowrap">{{ rev.html_length }}자</td>
          <td class="cf24-nowrap">{{ rev.created_by or '—' }}</td>
          <td>{{ rev.memo or '' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <p class="cf24-muted">되돌리기(버전 선택 복원)는 Phase 6 에서 화면에 붙습니다. 지금도 내용은 모두 보관됩니다.</p>
  {% else %}
  <p class="cf24-muted">아직 이 상품의 변경 이력이 없습니다.</p>
  {% endif %}
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
  // HTML 복사 — clipboard API 가 막히면 textarea 선택으로 대체한다.
  document.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) { /* 사용자가 직접 복사 */ }
      }
    });
  });

  // 편집 중 실수로 페이지를 벗어나는 것 방지.
  (function () {
    var box = document.getElementById("cf24-html-pc");
    if (!box || box.readOnly) return;
    var initial = box.value;
    var form = box.form;
    var submitting = false;
    if (form) form.addEventListener("submit", function () { submitting = true; });
    window.addEventListener("beforeunload", function (e) {
      if (!submitting && box.value !== initial) {
        e.preventDefault();
        e.returnValue = "";
      }
    });
  })();
</script>
{% endblock %}