ITAM/src/views/List/SwListView.ts

import { state } from '../../core/state';
import { openSwModal } from '../../components/Modal/SWModal';
import { openSwUserModal } from '../../components/Modal/SWUserModal';
import { sortAssets } from '../../core/utils';
import { CORP_LIST } from '../../components/Modal/SharedData';
import { generateOptionsHTML } from '../../components/Modal/ModalUtils';
import { createIcons, Edit2, Users, RefreshCcw } from 'lucide';

export function renderSwList(container: HTMLElement) {
  const isSub = state.activeSubTab === '구독SW';
  const fullList = sortAssets(isSub ? state.masterData.subSw : state.masterData.permSw);
  
  const filterBar = document.createElement('div');
  filterBar.className = 'search-bar';
  filterBar.innerHTML = `
    <div class="search-item flex-1">
      <label>통합 검색 (제품명/부서)</label>
      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
    </div>
    <div class="search-item">
      <label>분야</label>
      <select id="filter-field">
        <option value="">전체 분야</option>
        <option value="업무공통">업무공통</option>
        <option value="개발S/W">개발S/W</option>
        <option value="디자인">디자인</option>
        <option value="설계S/W">설계S/W</option>
      </select>
    </div>
    <div class="search-item">
      <label>구매법인</label>
      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</select>
    </div>
    <button id="btn-reset-filters" class="btn btn-outline btn-reset">
      <i data-lucide="refresh-ccw"></i> 필터 초기화
    </button>
  `;
  container.appendChild(filterBar);

  const tableWrapper = document.createElement('div');
  tableWrapper.className = 'table-container';
  const table = document.createElement('table');
  table.innerHTML = `
    <thead>
      <tr>
        <th style="text-align:center;">No.</th>
        <th style="text-align:center;">상태</th>
        <th style="text-align:center;">분야</th>
        <th style="text-align:center;">구매법인</th>
        <th style="text-align:center;">부서</th>
        <th style="text-align:center;">제품명</th>
        <th style="text-align:center;">구매일</th>
        ${isSub ? '<th style="text-align:center;">구독일</th>' : ''}
        <th style="text-align:center;">금액</th>
        <th style="text-align:center;">수량</th>
        <th style="text-align:center;">사용가능</th>
        <th style="text-align:center;">관리</th>
      </tr>
    </thead>
    <tbody id="dynamic-tbody"></tbody>
  `;
  
  tableWrapper.appendChild(table);
  container.appendChild(tableWrapper);
  const tbody = table.querySelector('tbody')!;

  const updateTable = () => {
    const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
    const fieldSelect = document.getElementById('filter-field') as HTMLSelectElement;
    const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;

    const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
    const field = fieldSelect ? fieldSelect.value : '';
    const corp = corpSelect ? corpSelect.value : '';

    const filtered = fullList.filter(asset => {
      const matchKeyword = !keyword || (asset.제품명 || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
      const matchField = !field || asset.분야 === field;
      const matchCorp = !corp || asset.법인 === corp;
      return matchKeyword && matchField && matchCorp;
    });

    tbody.innerHTML = '';
    if (filtered.length === 0) {
      tbody.innerHTML = `<tr><td colspan="${isSub ? 12 : 11}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
      return;
    }

    filtered.forEach((asset, idx) => {
      const assigned = state.masterData.swUsers.filter(u => u.sw_id === asset.id).length;
      const qty = typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10);
      const avail = qty - assigned;
      
      let statusHtml = '';
      if (isSub) {
        let isExpired = false;
        if (asset.구독일) {
          const parts = asset.구독일.split('~');
          const endDateStr = parts[parts.length - 1].trim().replace(/\./g, '-');
          const endDate = new Date(endDateStr);
          if (!isNaN(endDate.getTime())) {
            endDate.setHours(23, 59, 59, 999);
            if (endDate < new Date()) isExpired = true;
          }
        }
        if (isExpired) statusHtml = `<span style="background: var(--danger, #ef4444); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">만료</span>`;
        else statusHtml = `<span style="background: var(--primary-color, #1E5149); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">사용중</span>`;
      } else {
        if (asset.유지보수여부) statusHtml = `<span style="background: #3b82f6; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">유효</span>`;
        else statusHtml = `<span style="background: #6b7280; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; white-space: nowrap;">없음</span>`;
      }

      const tr = document.createElement('tr');
      tr.style.cursor = 'pointer';
      
      tr.innerHTML = `
        <td style="text-align:center;">${idx+1}</td>
        <td style="text-align:center;">${statusHtml}</td>
        <td>${asset.분야||''}</td>
        <td>${asset.법인}</td>
        <td>${asset.부서||''}</td>
        <td>${asset.제품명}</td>
        <td style="text-align:center;">${asset.구매일||''}</td>
        ${isSub ? `<td style="text-align:center;">${asset.구독일||''}</td>` : ''}
        <td style="text-align:right;">${asset.금액||'0'}</td>
        <td style="text-align:center;">${qty}</td>
        <td style="text-align:center;"><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td>
        <td style="display:flex; justify-content:center; align-items:center; gap:0.5rem;">
          <button type="button" class="btn-icon btn-edit" title="수정" style="color: var(--text-muted);"><i data-lucide="edit-2"></i></button>
          <button type="button" class="btn-icon btn-users" title="사용자 관리" style="color: var(--primary-color);"><i data-lucide="users"></i></button>
        </td>
      `;
      
      tr.addEventListener('click', (e) => { 
        if (!(e.target as HTMLElement).closest('button')) {
          openSwModal(asset, 'view'); 
        }
      });
      tr.querySelector('.btn-edit')?.addEventListener('click', (e) => { 
        e.stopPropagation(); 
        openSwModal(asset, 'edit'); 
      });
      tr.querySelector('.btn-users')?.addEventListener('click', (e) => { e.stopPropagation(); openSwUserModal(asset); });
      tbody.appendChild(tr);
    });
    createIcons({ icons: { Edit2, Users, RefreshCcw } });
  };

  document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
  document.getElementById('filter-field')?.addEventListener('change', updateTable);
  document.getElementById('filter-corp')?.addEventListener('change', updateTable);
  document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
    (document.getElementById('filter-keyword') as HTMLInputElement).value = '';
    (document.getElementById('filter-field') as HTMLSelectElement).value = '';
    (document.getElementById('filter-corp') as HTMLSelectElement).value = '';
    updateTable();
  });

  updateTable();
}