import { state } from '../core/state';
import { openHwModal } from '../components/Modal/HWModal';
import { ASSET_SCHEMA } from '../core/schema';
import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';

/**
 * 위치 중심 자산 현황 뷰 (Refined)
 */
export async function renderLocationView(container: HTMLElement) {
  if (!container) return;

  // 로컬 상태 (UI 제어용)
  let currentLoc = '기술개발센터';
  let currentDetail = '서버실';
  let currentPage = 0; 
  let mapConfig: any = {};

  try {
    const res = await fetch('/api/maps');
    mapConfig = await res.json();
  } catch (err) { console.error('Failed to load map config', err); }

  const render = () => {
    const locImages = (IMAGE_LOCATIONS[currentLoc] && IMAGE_LOCATIONS[currentLoc][currentDetail]) 
                     ? IMAGE_LOCATIONS[currentLoc][currentDetail] 
                     : [];
    const mapPath = locImages[currentPage] || '';
    
    // 자산이 등록된(좌표가 일치하는) 구역만 필터링하여 표시
    const allBoxes = mapConfig[mapPath] || [];
    const boxes = allBoxes.filter((box: any) => 
      state.masterData.hw.some(a => 
        a.location === currentLoc && 
        a.location_detail === currentDetail && 
        String(a.loc_x) === String(box.x) && 
        String(a.loc_y) === String(box.y)
      )
    );

    container.innerHTML = `
      <div class="location-view-wrapper">
        <!-- 2단계 필터 바 -->
        <div class="location-filter-bar">
          <div class="filter-group">
            <label>건물/위치</label>
            <select id="sel-loc-main">
              ${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
            </select>
          </div>
          <div class="filter-group">
            <label>상세 위치</label>
            <div style="display: flex; align-items: center; gap: 0.5rem;">
              <select id="sel-loc-detail">
                ${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
              </select>

              <!-- 페이지네이션을 상세 위치 바로 옆으로 이동 -->
              ${locImages.length > 1 ? `
              <div class="map-pagination" style="margin-left: 0; padding-left: 0.5rem; border-left: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.5rem;">
                <div class="page-btns">
                  <button id="btn-prev-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
                  <button id="btn-next-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
                </div>
                <span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
              </div>
              ` : ''}
            </div>
          </div>
        </div>

        <div class="location-main-content" style="height: calc(100vh - 180px); align-items: stretch; gap: 1rem; padding: 1rem; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr;">
          <!-- 지도 섹션: 상단 고정 정렬로 밀림 방지 -->
          <div class="map-container-section" style="position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--border-color); background: #f1f5f9; display: flex; align-items: flex-start; justify-content: center;">
            <div class="map-frame-wrapper" style="position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center;">
              ${mapPath ? `
                <img src="${mapPath}" id="main-map-img" style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;">
                <div id="box-overlay" style="position: absolute; pointer-events: none; transition: none;">
                  ${boxes.map((box: any, idx: number) => {
                    const name = box.name || `#${idx+1}`;
                    return `
                    <div class="location-box-point" 
                         data-name="${name}"
                         data-x="${box.x}"
                         data-y="${box.y}"
                         style="position: absolute; left:${box.x}%; top:${box.y}%; width:${box.w}%; height:${box.h}%;
                                border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto;">
                    </div>
                  `}).join('')}
                </div>
              ` : '<div style="padding: 5rem; text-align:center; color: #999;">해당 위치의 도면이 등록되지 않았습니다.</div>'}
            </div>
          </div>

          <!-- 상세 정보 섹션: 내부 스크롤만 허용 -->
          <div class="asset-list-section" style="display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border-radius: 8px; border: 1px solid var(--border-color);">
            <div class="section-header" style="flex-shrink: 0; background: #f8fafc; border-bottom: 1px solid var(--border-color); padding: 1rem;">
               <h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 700;">📍 구역을 선택하세요</h4>
            </div>
            <div id="loc-asset-table-container" class="mini-table-wrapper" style="flex: 1; overflow-y: auto; padding: 0;">
               <div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>
            </div>
          </div>
        </div>
        <div style="padding: 0 1.5rem 0.5rem; flex-shrink: 0;">
          <p style="font-size:0.75rem; color:var(--text-muted); margin: 0;">* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.</p>
        </div>
      </div>
    `;

    // 이미지 로드 및 윈도우 리사이즈 시 오버레이 크기와 위치를 이미지에 정확히 맞춤
    const syncOverlaySize = () => {
      const img = container.querySelector('#main-map-img') as HTMLImageElement;
      const overlay = container.querySelector('#box-overlay') as HTMLElement;
      if (img && overlay && img.complete) {
        overlay.style.width = img.clientWidth + 'px';
        overlay.style.height = img.clientHeight + 'px';
        overlay.style.left = img.offsetLeft + 'px';
        overlay.style.top = img.offsetTop + 'px';
      }
    };

    const img = container.querySelector('#main-map-img') as HTMLImageElement;
    if (img) {
      if (img.complete) {
        syncOverlaySize();
        setTimeout(syncOverlaySize, 50); // 레이아웃 안정화 대기
      } else {
        img.onload = syncOverlaySize;
      }
    }
    
    window.removeEventListener('resize', syncOverlaySize);
    window.addEventListener('resize', syncOverlaySize);

    // 이벤트 바인딩
    const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
    selMain?.addEventListener('change', () => {
      currentLoc = selMain.value;
      currentDetail = LOCATION_DATA[currentLoc][0];
      currentPage = 0;
      render();
    });

    const selDetail = container.querySelector('#sel-loc-detail') as HTMLSelectElement;
    selDetail?.addEventListener('change', () => {
      currentDetail = selDetail.value;
      currentPage = 0;
      render();
    });

    container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
    container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });

    container.querySelectorAll('.location-box-point').forEach(box => {
      box.addEventListener('click', () => {
        const x = box.getAttribute('data-x');
        const y = box.getAttribute('data-y');

        const targetAsset = state.masterData.hw.find(a => 
          a.location === currentLoc && 
          a.location_detail === currentDetail && 
          String(a.loc_x) === String(x) && 
          String(a.loc_y) === String(y)
        );

        if (targetAsset) {
          renderAssetDetail(targetAsset);
        }

        container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
        (box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
      });
    });
  };

  const renderAssetDetail = (asset: any) => {
    const title = container.querySelector('#loc-list-title')!;
    const tableContainer = container.querySelector('#loc-asset-table-container')!;
    title.innerHTML = `
      <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
        <button id="btn-back-to-list" class="btn-icon" style="background: none; border: none; cursor: pointer; color: var(--primary-color); font-size: 1.2rem; padding: 0 4px;">←</button>
        <span style="flex: 1;">📍 자산 상세 정보</span>
        <button id="btn-edit-from-loc" class="btn btn-primary btn-sm" style="font-size: 11px; height: 28px;">수정</button>
      </div>
    `;

    const renderSection = (title: string, fields: { label: string; value: any }[]) => `
      <div class="detail-section" style="margin-bottom: 20px; padding: 0 1rem;">
        <div style="font-size: 12px; font-weight: 700; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 6px; margin-bottom: 10px;">${title}</div>
        <div style="display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px;">
          ${fields.map(f => `
            <div style="font-size: 12px; color: var(--text-muted);">${f.label}</div>
            <div style="font-size: 12px; color: var(--text-main); font-weight: 500; word-break: break-all;">${f.value || '-'}</div>
          `).join('')}
        </div>
      </div>
    `;

    const sectionsHTML = [
      renderSection('기본 관리 정보', [
        { label: ASSET_SCHEMA.ASSET_CODE.ui, value: asset.asset_code },
        { label: ASSET_SCHEMA.PURCHASE_CORP.ui, value: asset.purchase_corp },
        { label: ASSET_SCHEMA.CATEGORY.ui, value: asset.category },
        { label: ASSET_SCHEMA.ASSET_TYPE.ui, value: asset.asset_type },
        { label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status }
      ]),
      renderSection('시스템 사양', [
        { label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
        { label: ASSET_SCHEMA.OS.ui, value: asset.os },
        { label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
        { label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
        { label: ASSET_SCHEMA.GPU.ui, value: asset.gpu }
      ]),
      renderSection('네트워크 정보', [
        { label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
        { label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
        { label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool }
      ]),
      renderSection('구매 및 기타', [
        { label: ASSET_SCHEMA.PURCHASE_DATE.ui, value: asset.purchase_date },
        { label: ASSET_SCHEMA.PURCHASE_AMOUNT.ui, value: asset.purchase_amount ? `${Number(asset.purchase_amount).toLocaleString()}원` : '-' },
        { label: ASSET_SCHEMA.MEMO.ui, value: asset.memo }
      ])
    ].join('');

    tableContainer.innerHTML = `
      <div class="asset-detail-sidebar" style="padding-top: 1rem; background: #fff; max-height: 100%; overflow-y: auto;">
        ${sectionsHTML}
      </div>
    `;

    container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
      title.textContent = `📍 구역을 선택하세요`;
      tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>`;
    });

    container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
      openHwModal(asset, 'edit');
    });
  };

  render();
}