ITAM/src/components/Modal/DashboardDetailModal.ts

import { state } from '../../core/state';
import { ASSET_SCHEMA } from '../../core/schema';
import { createIcons, X } from 'lucide';

const DASHBOARD_DETAIL_MODAL_HTML = `
  <div id="dashboard-detail-modal" class="modal-overlay hidden">
    <div class="modal-content wide" style="max-width: 1000px;">
      <div class="modal-header">
        <h2 id="dashboard-detail-modal-title">상세 목록</h2>
        <button id="btn-close-dashboard-detail-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
      </div>
      <div class="modal-body">
        <div class="table-container">
          <table style="width:100%;">
            <thead></thead>
            <tbody id="dashboard-detail-tbody"></tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <div></div>
        <button id="btn-cancel-dashboard-detail-modal" class="btn btn-outline">닫기</button>
      </div>
    </div>
  </div>
`;

export function initDashboardDetailModal() {
  if (!document.getElementById('dashboard-detail-modal')) {
    document.body.insertAdjacentHTML('beforeend', DASHBOARD_DETAIL_MODAL_HTML);
  }

  const modal = document.getElementById('dashboard-detail-modal')!;
  const closeBtn = document.getElementById('btn-close-dashboard-detail-modal')!;
  const cancelBtn = document.getElementById('btn-cancel-dashboard-detail-modal')!;
  
  const closeModal = () => modal.classList.add('hidden');
  closeBtn.addEventListener('click', closeModal);
  cancelBtn.addEventListener('click', closeModal);
  modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
  
  createIcons({ icons: { X } });
}

export function openDashboardDetail(title: string, list: any[]) {
  const modal = document.getElementById('dashboard-detail-modal');
  if (!modal) return;
  const titleEl = document.getElementById('dashboard-detail-modal-title');
  const tbody = document.getElementById('dashboard-detail-tbody');
  if (!titleEl || !tbody) return;
  const thead = tbody.closest('table')?.querySelector('thead');
  if (!thead) return;

  titleEl.textContent = title;
  thead.innerHTML = `<tr><th>No</th><th>유형</th><th>명칭/모델</th><th>위치</th><th>담당/사용자</th><th>구매일자</th><th>금액</th></tr>`;
  tbody.innerHTML = '';
  if (list.length === 0) {
    tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding: 2rem;">해당 조건의 자산이 없습니다.</td></tr>`;
  } else {
    list.forEach((asset, idx) => {
      let manager = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || asset.user_current || '-';
      let name = asset[ASSET_SCHEMA.MODEL_NAME.key] || asset[ASSET_SCHEMA.ASSET_NAME.key] || '-';
      const tr = document.createElement('tr');
      tr.innerHTML = `<td>${idx+1}</td><td>${asset.category || asset[ASSET_SCHEMA.ASSET_TYPE.key]}</td><td>${name}</td><td>${asset[ASSET_SCHEMA.LOCATION.key]||'-'}</td><td>${manager}</td><td>${asset[ASSET_SCHEMA.PURCHASE_DATE.key]||'-'}</td><td>${asset[ASSET_SCHEMA.PURCHASE_AMOUNT.key]||'-'}</td>`;
      tbody.appendChild(tr);
    });
  }
  modal.classList.remove('hidden');
}

export function openSwDashboardDetail(title: string, list: any[]) {
  const modal = document.getElementById('dashboard-detail-modal');
  if (!modal) return;
  const titleEl = document.getElementById('dashboard-detail-modal-title');
  const tbody = document.getElementById('dashboard-detail-tbody');
  if (!titleEl || !tbody) return;
  const thead = tbody.closest('table')?.querySelector('thead');
  if (!thead) return;

  titleEl.textContent = title;
  thead.innerHTML = `<tr><th>No</th><th>유형</th><th>법인</th><th>제품명</th><th>수량</th><th>금액</th></tr>`;
  tbody.innerHTML = '';
  list.forEach((sw, idx) => {
    const tr = document.createElement('tr');
    tr.innerHTML = `<td>${idx+1}</td><td>${sw.asset_type || sw.type}</td><td>${sw[ASSET_SCHEMA.PURCHASE_CORP.key]}</td><td>${sw[ASSET_SCHEMA.PRODUCT_NAME.key]}</td><td>${sw[ASSET_SCHEMA.ASSET_COUNT.key]}</td><td>${sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key]}</td>`;
    tbody.appendChild(tr);
  });
  modal.classList.remove('hidden');
}

export function openSwUsageDetail(title: string, list: any[]) {
  const modal = document.getElementById('dashboard-detail-modal');
  if (!modal) return;
  const titleEl = document.getElementById('dashboard-detail-modal-title');
  const tbody = document.getElementById('dashboard-detail-tbody');
  if (!titleEl || !tbody) return;
  const thead = tbody.closest('table')?.querySelector('thead');
  if (!thead) return;

  titleEl.textContent = title;
  thead.innerHTML = `<tr><th>No</th><th>법인</th><th>제품명</th><th>수량</th><th>사용중</th><th>사용가능</th></tr>`;
  tbody.innerHTML = '';
  list.forEach((sw, idx) => {
    const assigned = state.masterData.swUsers.filter(u => u.sw_id === sw.id).length;
    const qty = Number(sw[ASSET_SCHEMA.ASSET_COUNT.key] || 0);
    const tr = document.createElement('tr');
    tr.innerHTML = `<td>${idx+1}</td><td>${sw[ASSET_SCHEMA.PURCHASE_CORP.key]}</td><td>${sw[ASSET_SCHEMA.PRODUCT_NAME.key]}</td><td>${qty}</td><td>${assigned}</td><td>${qty - assigned}</td>`;
    tbody.appendChild(tr);
  });
  modal.classList.remove('hidden');
}

export function openCloudDashboardDetail(title: string, list: any[]) {
  const modal = document.getElementById('dashboard-detail-modal');
  if (!modal) return;
  const titleEl = document.getElementById('dashboard-detail-modal-title');
  const tbody = document.getElementById('dashboard-detail-tbody');
  if (!titleEl || !tbody) return;
  const thead = tbody.closest('table')?.querySelector('thead');
  if (!thead) return;

  titleEl.textContent = title;
  thead.innerHTML = `<tr><th>No</th><th>플랫폼/목적</th><th>법인</th><th>제품명</th><th>결제일</th><th>당월청구액(원)</th></tr>`;
  tbody.innerHTML = '';
  if (list.length === 0) {
    tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding: 2rem;">해당 내역이 없습니다.</td></tr>`;
  } else {
    list.forEach((sw, idx) => {
      const priceStr = sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key] ? Number(String(sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key]).replace(/[^0-9]/g, '')).toLocaleString() : '0';
      const tr = document.createElement('tr');
      tr.innerHTML = `<td>${idx+1}</td><td>${sw[ASSET_SCHEMA.DEV_OBJ.key]||'-'}</td><td>${sw[ASSET_SCHEMA.PURCHASE_CORP.key]||'-'}</td><td>${sw[ASSET_SCHEMA.PRODUCT_NAME.key]||'-'}</td><td>${sw.pay_day ? sw.pay_day + '일' : '-'}</td><td>₩ ${priceStr}</td>`;
      tbody.appendChild(tr);
    });
  }
  modal.classList.remove('hidden');
}