import { createIcons, BookOpen, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide';
import { state } from '../core/state';

// ─── 자산별 가이드 콘텐츠 정의 (SW_Table 브랜치 전체 복구) ───
interface GuideTabConfig {
  id: string;
  label: string;
  content: string;
}

const GUIDE_TABS: GuideTabConfig[] = [
  {
    id: 'overview',
    label: '📋 개요',
    content: `
      <section class="guide-section">
        <h3>IT 자산관리 시스템 개요</h3>
        <p class="guide-text">
          HM IT 자산관리 시스템(ITAM)은 기업의 IT 자산을 <strong>도입부터 폐기까지</strong> 전 과정에서 효율적으로 관리하기 위한 통합 플랫폼입니다.<br>
          하드웨어(PC, 서버, 스토리지, 전산비품, 모바일기기)와 소프트웨어(구독SW, 영구SW, 클라우드)를 체계적으로 추적하고 유지보수합니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>전체 자산관리 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">1</span>
              <div><span class="step-label">도입/구매</span><p class="step-desc">자산 구매 요청 → 승인 → 발주</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">2</span>
              <div><span class="step-label">등록/배정</span><p class="step-desc">자산번호 부여 → 시스템 등록 → 사용자 할당</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">3</span>
              <div><span class="step-label">운영/유지</span><p class="step-desc">현황 모니터링 → 점검/수리 → 이력 관리</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">4</span>
              <div><span class="step-label">반납/폐기</span><p class="step-desc">자산 회수 → 데이터 소거 → 폐기 처리</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>시스템 기본 사용방법</h3>
        <table class="guide-info-table">
          <thead><tr><th>기능</th><th>방법</th></tr></thead>
          <tbody>
            <tr><td><strong>자산 조회</strong></td><td>상단 카테고리(하드웨어/소프트웨어) 및 하위 탭 선택 후 데이터 조회</td></tr>
            <tr><td><strong>자산 등록</strong></td><td>[자산 추가] 버튼 클릭 후 상세 정보 입력 및 저장</td></tr>
            <tr><td><strong>정보 수정</strong></td><td>목록 행 클릭 후 나타나는 모달에서 내용 변경 및 저장</td></tr>
            <tr><td><strong>엑셀 업로드</strong></td><td>[업로드] 버튼 선택 후 표준 양식의 .xlsx 파일 선택</td></tr>
            <tr><td><strong>전체 엑셀저장</strong></td><td>[엑셀저장] 버튼 클릭 시 현재 전체 자산 데이터를 Excel로 백업</td></tr>
            <tr><td><strong>표준 양식</strong></td><td>[양식] 버튼 클릭 시 데이터 업로드용 빈 양식 다운로드</td></tr>
          </tbody>
        </table>
      </section>
    `
  },
  {
    id: 'pc',
    label: '💻 개인PC',
    content: `
      <section class="guide-section">
        <h3>개인PC 관리 가이드</h3>
        <p class="guide-text">
          임직원에게 지급되는 데스크톱 및 노트북을 관리합니다. 자산의 지급, 교체, 반납까지의 전체 생애주기를 시스템에서 추적합니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>관리 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">1</span>
              <div><span class="step-label">구매 및 입고</span><p class="step-desc">구매 요청 → 발주 → 입고 검수</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">2</span>
              <div><span class="step-label">자산 등록</span><p class="step-desc">자산번호 부여, 상세 사양 등록</p></div>
            </div>
          </div>
          <i data-lucide="chevron-down" class="flow-arrow"></i>
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">3</span>
              <div><span class="step-label">사용자 지급</span><p class="step-desc">사용자 지정 및 설치위치 기록</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">4</span>
              <div><span class="step-label">운영 관리</span><p class="step-desc">보안 점검 및 수리 이력 관리</p></div>
            </div>
          </div>
          <i data-lucide="chevron-down" class="flow-arrow"></i>
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">5</span>
              <div><span class="step-label">교체/반납</span><p class="step-desc">장비 회수 및 데이터 소거</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">6</span>
              <div><span class="step-label">폐기 처리</span><p class="step-desc">불용 처리 및 매각/폐기 등록</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>주요 관리 항목</h3>
        <table class="guide-info-table">
          <thead><tr><th>항목</th><th>설명</th><th>관리 주기</th></tr></thead>
          <tbody>
            <tr><td>구매법인</td><td>자산의 소유 법인</td><td>등록 시</td></tr>
            <tr><td>사용자/조직</td><td>실제 사용자 및 소속 부서</td><td>변동 시</td></tr>
            <tr><td>자산번호</td><td>고유 식별 번호 (바코드)</td><td>등록 시</td></tr>
            <tr><td>모델명/사양</td><td>제조사 모델 및 CPU/RAM 등</td><td>등록 시</td></tr>
            <tr><td>도입금액</td><td>구매 비용 (부가세 포함)</td><td>등록 시</td></tr>
          </tbody>
        </table>
      </section>

      <div class="guide-tip">
        <strong>관리 팁:</strong> 자산 이력에서 '분출'과 '반납' 로그를 꼼꼼히 기록하면 자산의 실제 위치를 정확히 파악할 수 있습니다.
      </div>
    `
  },
  {
    id: 'server',
    label: '🖥️ 서버/스토리지',
    content: `
      <section class="guide-section">
        <h3>인프라 자산 관리 가이드</h3>
        <p class="guide-text">
          서버실 및 IDC에 설치된 물리 서버와 스토리지 장비를 관리합니다. 고가의 자산이므로 담당자(정/부) 지정이 필수입니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>관리 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">1</span>
              <div><span class="step-label">도입 계획</span><p class="step-desc">사양 확정 및 구매 승인</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">2</span>
              <div><span class="step-label">설치 및 등록</span><p class="step-desc">네트워크 설정 및 자산번호 부여</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">3</span>
              <div><span class="step-label">운영 관리</span><p class="step-desc">정기 점검 및 장애 이력 관리</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>필수 입력 항목</h3>
        <table class="guide-info-table">
          <thead><tr><th>항목</th><th>중요성</th></tr></thead>
          <tbody>
            <tr><td><strong>IP 주소</strong></td><td>서버 접속 및 모니터링을 위한 필수 정보</td></tr>
            <tr><td><strong>설치위치</strong></td><td>IDC 또는 서버실 내의 정확한 랙 위치</td></tr>
            <tr><td><strong>담당자(정/부)</strong></td><td>비상 시 연락 가능한 관리 책임자</td></tr>
            <tr><td><strong>용도/상세</strong></td><td>운영 중인 서비스 및 상세 업무 설명</td></tr>
          </tbody>
        </table>
      </section>

      <div class="guide-warn">
        <strong>주의 사항:</strong> 서버 자산의 IP가 변경될 경우 시스템에 즉시 반영하여 네트워크 관리 대장과의 정합성을 유지해야 합니다.
      </div>
    `
  },
  {
    id: 'software',
    label: '💾 소프트웨어',
    content: `
      <section class="guide-section">
        <h3>소프트웨어 자산 관리 가이드</h3>
        <p class="guide-text">
          구독형(SaaS) 및 영구형 라이선스를 관리합니다. 불법 소프트웨어 사용 방지와 비용 최적화가 주 목적입니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>라이선스 관리 포인트</h3>
        <table class="guide-info-table">
          <thead><tr><th>구분</th><th>관리 내용</th></tr></thead>
          <tbody>
            <tr><td><strong>구독형(Sub)</strong></td><td>구독 만료일 도래 전 갱신 여부 결정 및 비용 정산</td></tr>
            <tr><td><strong>영구형(Perm)</strong></td><td>보유 수량 대비 실제 설치 수량 매핑 (초과 사용 금지)</td></tr>
            <tr><td><strong>운영서비스</strong></td><td>도메인, 메일 등 매월 또는 매년 발생하는 비용 추적</td></tr>
          </tbody>
        </table>
      </section>

      <div class="guide-tip">
        <strong>팁:</strong> 소프트웨어 상세 페이지의 [사용자 할당] 기능을 활용하여 누가 어떤 라이선스를 사용하는지 체계적으로 관리하세요.
      </div>
    `
  }
];

// ─── 가이드 모달 초기화 ───
export function initGuide() {
  const body = document.body;
  if (document.getElementById('guide-overlay')) return;

  const overlay = document.createElement('div');
  overlay.className = 'modal-overlay hidden';
  overlay.id = 'guide-overlay';

  const tabsHtml = GUIDE_TABS.map((tab, i) =>
    `<div class="guide-tab ${i === 0 ? 'active' : ''}" data-guide-tab="${tab.id}">${tab.label}</div>`
  ).join('');

  const panelsHtml = GUIDE_TABS.map((tab, i) =>
    `<div class="guide-tab-panel ${i === 0 ? 'active' : ''}" data-guide-panel="${tab.id}">${tab.content}</div>`
  ).join('');

  overlay.innerHTML = `
    <div class="modal-content wide" id="guide-modal" style="height: 90vh;">
      <div class="modal-header">
        <h2><i data-lucide="book-open"></i> 자산관리 프로세스 가이드 (Standard)</h2>
        <button class="btn-icon" id="btn-close-guide">
          <i data-lucide="x"></i>
        </button>
      </div>
      <div class="guide-tabs-container">
        <div class="guide-tabs">${tabsHtml}</div>
      </div>
      <div class="modal-body" style="padding-top: 0;">
        <div class="guide-body">${panelsHtml}</div>
      </div>
    </div>
  `;

  body.appendChild(overlay);

  const openGuide = () => {
    console.log('📖 Opening Full Guide Modal...');
    overlay.classList.remove('hidden');
  };
  const closeGuide = () => overlay.classList.add('hidden');

  const triggerBtn = document.getElementById('btn-open-guide-header');
  if (triggerBtn) {
    triggerBtn.addEventListener('click', openGuide);
  }

  overlay.addEventListener('click', (e) => { if (e.target === overlay) closeGuide(); });
  document.getElementById('btn-close-guide')?.addEventListener('click', closeGuide);

  const tabs = overlay.querySelectorAll('.guide-tab');
  const panels = overlay.querySelectorAll('.guide-tab-panel');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const targetId = tab.getAttribute('data-guide-tab');
      tabs.forEach(t => t.classList.remove('active'));
      panels.forEach(p => p.classList.remove('active'));
      tab.classList.add('active');
      overlay.querySelector(`.guide-tab-panel[data-guide-panel="${targetId}"]`)?.classList.add('active');
    });
  });

  createIcons({ icons: { BookOpen, X, ChevronDown, ChevronRight, RefreshCw } });
}