import { state } from '../../core/state';
import { openSwModal } from '../../components/Modal/SWModal';
import { formatPrice } from '../../core/utils';
import { createIcons, Cloud, CreditCard, DollarSign } from 'lucide';

export function renderCloudList(container: HTMLElement) {
  // DB에서 직접 로드된 전용 배열을 사용하여 데이터 소스를 일원화함
  const getFullList = () => state.masterData.cloud || [];
  
  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-payment">
        <option value="">전체 결제수단</option>
        <option value="법인카드">법인카드</option>
        <option value="인보이스">인보이스 (월별송금)</option>
      </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>
        <th style="text-align:center;">결제일</th>
        <th style="text-align:center;">당월 청구액</th>
        <th style="text-align:center;">비고</th>
      </tr>
    </thead>
    <tbody id="cloud-tbody"></tbody>
  `;
  
  tableWrapper.appendChild(table);
  container.appendChild(tableWrapper);
  const tbody = table.querySelector('tbody')!;

  const updateTable = () => {
    const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
    const paymentSelect = document.getElementById('filter-payment') as HTMLSelectElement;

    const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
    const payment = paymentSelect ? paymentSelect.value : '';

    const filtered = getFullList().filter(asset => {
      const kwMatch = !keyword || 
        (asset.제품명 || '').toLowerCase().includes(keyword) || 
        (asset.부서 || '').toLowerCase().includes(keyword) || 
        (asset.계정명 || '').toLowerCase().includes(keyword);
      const payMatch = !payment || asset.결제수단 === payment;
      return kwMatch && payMatch;
    });

    tbody.innerHTML = '';
    if (filtered.length === 0) {
      tbody.innerHTML = '<tr><td colspan="10" style="text-align:center; padding: 3rem; color: var(--text-muted);">등록된 클라우드 서비스가 없습니다.</td></tr>';
      return;
    }

    filtered.forEach((asset, idx) => {
      const tr = document.createElement('tr');
      tr.style.cursor = 'pointer';
      
      const paymentBadge = asset.결제수단 === '법인카드' 
        ? '<span style="color:#6366f1; font-weight:600;"><i data-lucide="credit-card" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i>법인카드 (' + (asset.연결카드번호||'미상') + ')</span>'
        : (asset.결제수단 === '인보이스' 
            ? '<span style="color:#10b981; font-weight:600;"><i data-lucide="dollar-sign" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i>인보이스</span>'
            : '<span style="color:var(--text-muted)">미설정</span>');

      tr.innerHTML = `
        <td style="text-align:center;">${idx+1}</td>
        <td style="font-weight:600; color:var(--primary-color)"><i data-lucide="cloud" style="width:14px; height:14px; vertical-align:middle; margin-right:4px;"></i> ${asset.플랫폼명||'미지정'}</td>
        <td style="text-align:center;">${asset.법인||''}</td>
        <td style="text-align:center;">${asset.부서||''}</td>
        <td>${asset.제품명||''}</td>
        <td>${asset.계정명||''}</td>
        <td style="text-align:center;">${paymentBadge}</td>
        <td style="text-align:center;">${asset.결제일 ? asset.결제일 + '일' : ''}</td>
        <td style="text-align:right; font-weight:600;">${asset.당월청구액 ? '₩ ' + formatPrice(asset.당월청구액) : '₩ 0'}</td>
        <td>${asset.비고||''}</td>
      `;
      
      tr.addEventListener('click', () => openSwModal(asset, 'view'));
      tbody.appendChild(tr);
    });
    createIcons({ icons: { Cloud, CreditCard, DollarSign } });
  };

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

  updateTable();
}