{% extends "erp_base.html" %}

{% block content %}
<section class="erp-expense">

  <!-- ── 페이지 액션 ── -->
  <div class="erp-page-actions">
    <a class="erp-btn erp-btn-outline" href="/expense/reports">월별 집계</a>
    {% if is_approver %}
    <a class="erp-btn erp-btn-outline" href="/expense/pending">
      승인 대기 {% if pending_count %}<strong style="margin-left:6px;">{{ pending_count }}</strong>{% endif %}
    </a>
    {% endif %}
    <a class="erp-btn erp-btn-outline" href="/expense/api/export.xlsx?scope=mine">엑셀(내 항목)</a>
    {% if is_approver %}
    <a class="erp-btn erp-btn-outline" href="/expense/api/export.xlsx?scope=all">엑셀(전체)</a>
    {% endif %}
  </div>

  <!-- ── 요약 카드 ── -->
  <div class="erp-summary-grid">
    <div class="erp-summary-card">
      <span class="erp-summary-label">총 건수</span>
      <strong class="erp-summary-value">{{ summary.count }} 건</strong>
    </div>
    <div class="erp-summary-card">
      <span class="erp-summary-label">총 금액</span>
      <strong class="erp-summary-value" id="ex-total-amount">
        {{ "{:,}".format(summary.total) }} 원
      </strong>
    </div>
    {% for status in statuses %}
    <div class="erp-summary-card erp-summary-card--mini">
      <span class="erp-summary-label">{{ status }}</span>
      <strong class="erp-summary-value erp-summary-value--sm">
        {{ summary.by_status.get(status, 0) }}
      </strong>
    </div>
    {% endfor %}
  </div>

  <!-- ── 입력 폼 ── -->
  <div class="erp-card-block">
    <div class="erp-card-block-head">
      <h2>경비 등록</h2>
      <span class="erp-muted">필수 항목 입력 후 등록. 등록 후 항목별로 첨부/제출.</span>
    </div>
    <form id="ex-form" class="erp-form-grid">
      <input type="hidden" name="id" />
      <label class="erp-field"><span>사용일</span><input type="date" name="spent_at" required /></label>
      <label class="erp-field"><span>분류</span>
        <select name="category" required>
          {% for c in categories %}<option value="{{ c }}">{{ c }}</option>{% endfor %}
        </select>
      </label>
      <label class="erp-field"><span>결제수단</span>
        <select name="method" required>
          {% for m in methods %}<option value="{{ m }}">{{ m }}</option>{% endfor %}
        </select>
      </label>
      <label class="erp-field"><span>금액</span>
        <input type="number" name="amount" min="0" step="1" required placeholder="원" />
      </label>
      <label class="erp-field erp-field-wide"><span>가맹점/사용처</span>
        <input type="text" name="merchant" placeholder="예) 스타벅스 강남점" />
      </label>
      <label class="erp-field erp-field-wide"><span>메모</span>
        <input type="text" name="memo" placeholder="비고" />
      </label>
      <div class="erp-form-actions">
        <button type="reset" class="erp-btn erp-btn-outline" id="ex-reset">초기화</button>
        <button type="submit" class="erp-btn erp-btn-primary" id="ex-submit">등록</button>
      </div>
    </form>
  </div>

  <!-- ── 항목 목록 ── -->
  <div class="erp-card-block">
    <div class="erp-card-block-head">
      <h2>경비 내역</h2>
      <span class="erp-muted" id="ex-count">{{ items | length }}건</span>
    </div>
    <div class="erp-table-wrap">
      <table class="erp-table" id="ex-table">
        <thead>
          <tr>
            <th style="width: 110px;">사용일</th>
            <th style="width: 90px;">분류</th>
            <th style="width: 100px;">수단</th>
            <th>가맹점</th>
            <th style="width: 120px; text-align: right;">금액</th>
            <th style="width: 90px;">상태</th>
            <th style="width: 280px; text-align: right;">동작</th>
          </tr>
        </thead>
        <tbody id="ex-tbody">
          {% for it in items %}
          <tr data-id="{{ it.id }}" data-status="{{ it.status }}">
            <td>{{ it.spent_at }}</td>
            <td>{{ it.category }}</td>
            <td>{{ it.method }}</td>
            <td>
              <div>{{ it.merchant }}</div>
              {% if it.memo %}<div class="erp-row-sub">{{ it.memo }}</div>{% endif %}
              {% if it.reject_reason %}
              <div class="erp-row-sub" style="color: var(--color-callout-red);">반려: {{ it.reject_reason }}</div>
              {% endif %}
            </td>
            <td style="text-align: right; font-variant-numeric: tabular-nums;">
              {{ "{:,}".format(it.amount) }} 원
            </td>
            <td>
              {% if it.status == '작성중' or it.status == '반려' %}
                <span class="erp-badge erp-badge-outline">{{ it.status }}</span>
              {% elif it.status == '제출' %}
                <span class="erp-badge erp-badge-neutral">{{ it.status }}</span>
              {% elif it.status == '승인' %}
                <span class="erp-badge erp-badge-inverse">{{ it.status }}</span>
              {% else %}
                <span class="erp-badge erp-badge-neutral">{{ it.status }}</span>
              {% endif %}
            </td>
            <td style="text-align: right;" class="js-actions">
              {% if it.status in ('작성중', '반려') and supports_workflow %}
                <label class="erp-btn erp-btn-outline erp-btn-sm" title="영수증 첨부">
                  📎영수증<input type="file" class="js-upload" data-kind="receipt" hidden />
                </label>
                <label class="erp-btn erp-btn-outline erp-btn-sm" title="기타파일 첨부">
                  📎기타<input type="file" class="js-upload" data-kind="other" hidden />
                </label>
              {% endif %}
              {% if it.status in ('작성중', '반려') %}
                <button class="erp-btn erp-btn-ghost erp-btn-sm js-edit">수정</button>
                <button class="erp-btn erp-btn-ghost erp-btn-sm js-delete">삭제</button>
                {% if supports_workflow %}
                <button class="erp-btn erp-btn-primary erp-btn-sm js-submit">제출</button>
                {% endif %}
              {% elif it.status == '제출' and supports_workflow %}
                <button class="erp-btn erp-btn-ghost erp-btn-sm js-revert">취소(작성중)</button>
              {% endif %}
            </td>
          </tr>
          {% if supports_workflow %}
          <tr class="ex-detail" data-detail-for="{{ it.id }}">
            <td colspan="7">
              <div class="ex-detail-box">
                <ul class="ex-attach-list" data-list="{{ it.id }}">
                  <li class="erp-muted">불러오는 중…</li>
                </ul>
                {% if it.approver_email %}
                <div class="erp-muted" style="margin-top: 6px;">
                  결재: {{ it.approver_email }} · {{ (it.decided_at or '')[:16].replace('T',' ') }}
                </div>
                {% endif %}
              </div>
            </td>
          </tr>
          {% endif %}
          {% else %}
          <tr id="ex-empty"><td colspan="7" class="erp-empty">등록된 경비가 없습니다.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</section>

<style>
  .erp-page-actions {
    display: flex; gap: var(--sp-8); margin-bottom: var(--sp-16); flex-wrap: wrap;
  }
  /* detail 행은 메인 행 바로 아래 — 위쪽 보더만 살짝, 좌측 들여쓰기 */
  tr.ex-detail > td { padding: 6px var(--sp-16) var(--sp-12) 110px; background: var(--color-canvas-white); }
  tr.ex-detail + tr[data-id] > td { border-top: 1px solid var(--color-subtle-ash); }
  .ex-detail-box { background: transparent; padding: 0; }
  .ex-attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .ex-attach-list li {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    background: var(--color-canvas-white); border: 1px solid var(--color-subtle-ash); border-radius: 6px;
    font-size: 13px;
  }
  .ex-attach-list li .ex-kind {
    padding: 1px 6px; border-radius: 8px; font-size: 11px;
    background: var(--color-ghost-gray); color: var(--color-midtone-gray);
  }
  .ex-attach-list li .ex-name { flex: 1; }
  .ex-attach-list li .ex-size { color: var(--color-midtone-gray); font-size: 12px; }
</style>
{% endblock %}

{% block scripts %}
<script>
(function () {
  const supportsWorkflow = {{ 'true' if supports_workflow else 'false' }};
  const form = document.getElementById("ex-form");
  const submitBtn = document.getElementById("ex-submit");
  const resetBtn = document.getElementById("ex-reset");
  const tbody = document.getElementById("ex-tbody");
  const countEl = document.getElementById("ex-count");
  const totalEl = document.getElementById("ex-total-amount");

  const fmt = (n) => `${Number(n || 0).toLocaleString("ko-KR")} 원`;
  const fmtSize = (b) => {
    b = Number(b || 0);
    if (b < 1024) return `${b} B`;
    if (b < 1024*1024) return `${(b/1024).toFixed(1)} KB`;
    return `${(b/1024/1024).toFixed(2)} MB`;
  };

  function setEditing(id, data) {
    form.id.value = id || "";
    if (data) {
      form.spent_at.value = data.spent_at || "";
      form.category.value = data.category || "";
      form.method.value = data.method || "";
      form.amount.value = data.amount || 0;
      form.merchant.value = data.merchant || "";
      form.memo.value = data.memo || "";
      submitBtn.textContent = "수정 저장";
    } else {
      submitBtn.textContent = "등록";
    }
  }
  resetBtn.addEventListener("click", () => setEditing("", null));

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const id = form.id.value.trim();
    const payload = {
      spent_at: form.spent_at.value,
      category: form.category.value,
      method: form.method.value,
      amount: parseInt(form.amount.value || "0", 10),
      merchant: form.merchant.value,
      memo: form.memo.value,
    };
    const url = id ? `/expense/api/items/${id}` : "/expense/api/items";
    const method = id ? "PUT" : "POST";
    try {
      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error((await res.json()).detail || res.status);
      location.reload();
    } catch (err) {
      alert(`저장 실패: ${err.message || err}`);
    }
  });

  async function postAction(id, action, body) {
    const res = await fetch(`/expense/api/items/${id}/${action}`, {
      method: "POST",
      headers: body ? { "Content-Type": "application/json" } : undefined,
      body: body ? JSON.stringify(body) : undefined,
    });
    if (!res.ok) throw new Error((await res.json()).detail || res.status);
    return res.json();
  }

  async function loadAttachments(itemId) {
    const ul = tbody.querySelector(`.ex-attach-list[data-list="${itemId}"]`);
    if (!ul) return;
    ul.innerHTML = `<li class="erp-muted">불러오는 중…</li>`;
    try {
      const res = await fetch(`/expense/api/items/${itemId}/attachments`);
      if (!res.ok) throw new Error((await res.json()).detail || res.status);
      const { attachments } = await res.json();
      if (!attachments.length) {
        ul.innerHTML = `<li class="erp-muted">첨부 없음</li>`;
        return;
      }
      ul.innerHTML = "";
      attachments.forEach((a) => {
        const li = document.createElement("li");
        li.innerHTML = `
          <span class="ex-kind">${a.kind === 'receipt' ? '영수증' : '기타'}</span>
          <a class="ex-name" href="/expense/api/attachments/${a.id}" target="_blank">${a.filename}</a>
          <span class="ex-size">${fmtSize(a.size_bytes)}</span>
          <button class="erp-btn erp-btn-ghost erp-btn-sm js-del-att" data-att="${a.id}">삭제</button>
        `;
        ul.appendChild(li);
      });
    } catch (err) {
      ul.innerHTML = `<li style="color: var(--color-callout-red);">로드 실패: ${err.message || err}</li>`;
    }
  }

  tbody.addEventListener("click", async (e) => {
    const btn = e.target.closest("button");
    if (!btn) return;
    // 메인 행 또는 detail 행 모두 처리
    const mainTr = btn.closest("tr[data-id]");
    const detailTr = btn.closest("tr.ex-detail");
    const id = mainTr ? mainTr.dataset.id : (detailTr ? detailTr.dataset.detailFor : null);
    if (!id) return;

    if (btn.classList.contains("js-edit")) {
      const res = await fetch(`/expense/api/items`);
      if (!res.ok) return;
      const { items } = await res.json();
      const found = items.find((x) => x.id === id);
      if (found) setEditing(id, found);
      window.scrollTo({ top: 0, behavior: "smooth" });
    } else if (btn.classList.contains("js-delete")) {
      if (!confirm("이 항목을 삭제할까요? 첨부도 함께 삭제됩니다.")) return;
      const res = await fetch(`/expense/api/items/${id}`, { method: "DELETE" });
      if (res.ok) location.reload(); else alert((await res.json()).detail || "삭제 실패");
    } else if (btn.classList.contains("js-submit")) {
      if (!confirm("결재 제출할까요? 제출 후에는 수정할 수 없습니다.")) return;
      try { await postAction(id, "submit"); location.reload(); }
      catch (err) { alert(`제출 실패: ${err.message || err}`); }
    } else if (btn.classList.contains("js-revert")) {
      if (!confirm("작성중 상태로 되돌릴까요?")) return;
      try { await postAction(id, "revert"); location.reload(); }
      catch (err) { alert(`취소 실패: ${err.message || err}`); }
    } else if (btn.classList.contains("js-del-att")) {
      if (!confirm("첨부를 삭제할까요?")) return;
      const attId = btn.dataset.att;
      const res = await fetch(`/expense/api/attachments/${attId}`, { method: "DELETE" });
      if (res.ok) loadAttachments(id); else alert((await res.json()).detail || "삭제 실패");
    }
  });

  // 첨부 업로드 (메인 행 동작셀 input)
  tbody.addEventListener("change", async (e) => {
    const input = e.target.closest("input.js-upload");
    if (!input || !input.files.length) return;
    const mainTr = input.closest("tr[data-id]");
    if (!mainTr) return;
    const itemId = mainTr.dataset.id;
    const fd = new FormData();
    fd.append("file", input.files[0]);
    fd.append("kind", input.dataset.kind || "other");
    try {
      const res = await fetch(`/expense/api/items/${itemId}/attachments`, {
        method: "POST", body: fd,
      });
      if (!res.ok) throw new Error((await res.json()).detail || res.status);
      input.value = "";
      loadAttachments(itemId);
    } catch (err) {
      alert(`업로드 실패: ${err.message || err}`);
    }
  });

  // 페이지 로드 시 모든 detail 행의 첨부 자동 로드
  if (supportsWorkflow) {
    tbody.querySelectorAll("tr.ex-detail[data-detail-for]").forEach((tr) => {
      loadAttachments(tr.dataset.detailFor);
    });
  }

  if (!form.spent_at.value) {
    const d = new Date();
    form.spent_at.value = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`;
  }
})();
</script>
{% endblock %}