import { state } from '../../core/state';
import { SoftwareAsset } from '../../core/excelHandler';
import { openModal } from './BaseModal';
import { createIcons, X, History, Plus } from 'lucide';

const SW_MODAL_HTML = `
  <div id="sw-asset-modal" class="modal-overlay hidden">
    <div class="modal-content wide">
      <div class="modal-header">
        <h2 id="sw-modal-title">S/W 상세 정보</h2>
        <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
      </div>
      <div class="modal-body">
        <div class="modal-body-split">
          <div class="modal-form-area">
            <form id="sw-asset-form" class="grid-form">
              <input type="hidden" id="sw-asset-id" />
              <input type="hidden" id="sw-asset-type" />
              <div class="form-group">
                <label for="sw-분야">분야</label>
                <select id="sw-분야" required>
                  <option value="업무공통">업무공통</option><option value="개발S/W">개발S/W</option><option value="디자인">디자인</option><option value="설계S/W">설계S/W</option>
                </select>
              </div>
              <div class="form-group">
                <label for="sw-법인">법인</label>
                <select id="sw-법인" required>
                  <option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
                </select>
              </div>
              <div class="form-group">
                <label for="sw-부서">부서</label>
                <input type="text" id="sw-부서" placeholder="ex) 경영지원팀" required />
              </div>
              <div class="form-group">
                <label for="sw-구매일">구매일</label>
                <input type="date" id="sw-구매일" />
              </div>
              <div class="form-group" id="sw-구독일-group" style="grid-column: span 2;">
                <label>구독 기간</label>
                <div style="display: flex; align-items: center; gap: 0.5rem;">
                  <input type="date" id="sw-구독일-시작" style="flex: 1;" />
                  <span>~</span>
                  <input type="date" id="sw-구독일-종료" style="flex: 1;" />
                </div>
              </div>
              <div class="form-group" id="sw-유지보수-group" style="display:none;">
                <label for="sw-유지보수여부">유지보수 여부</label>
                <label style="display:flex; align-items:center; gap:0.5rem; height: 38px; cursor: pointer;">
                  <input type="checkbox" id="sw-유지보수여부" /> 대상 여부
                </label>
              </div>
              <div class="form-group">
                <label for="sw-금액">금액</label>
                <input type="text" id="sw-금액" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" />
              </div>
              <div class="form-group">
                <label for="sw-수량">수량 (보유량)</label>
                <input type="number" id="sw-수량" min="1" value="1" />
              </div>
              <div class="form-group">
                <label for="sw-계정명">계정명</label>
                <input type="text" id="sw-계정명" />
              </div>
              <div class="form-group">
                <label for="sw-납품업체">납품업체</label>
                <input type="text" id="sw-납품업체" />
              </div>
              <div class="form-group full-width">
                <label for="sw-비고">비고</label>
                <input type="text" id="sw-비고" />
              </div>
            </form>
          </div>
          <div class="modal-history-area">
            <div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
              <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 업데이트 내역</h3>
              <button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm"><i data-lucide="plus" style="width:14px;height:14px;"></i> 업데이트 추가</button>
            </div>
            <div id="sw-history-list" class="history-timeline">
              <div class="empty-history">내역이 없습니다.</div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
        <div class="footer-actions">
          <button id="btn-revert-sw-edit" class="btn btn-outline hidden">수정 취소</button>
          <button id="btn-close-sw-footer" class="btn btn-outline">닫기</button>
          <button id="btn-save-sw-asset" class="btn btn-primary">수정</button>
        </div>
      </div>
    </div>
  </div>

  <div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
    <div class="modal-content" style="max-width: 400px;">
      <div class="modal-header">
        <h2>계약 업데이트 반영</h2>
        <button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
      </div>
      <div class="modal-body">
        <div class="grid-form" style="grid-template-columns: 1fr;">
          <div class="form-group">
            <label>업데이트 일자</label>
            <input type="date" id="sw-update-date" />
          </div>
          <div class="form-group sub-sw-update">
            <label>새로운 구독 기간</label>
            <div style="display: flex; align-items: center; gap: 0.5rem;">
              <input type="date" id="sw-update-start" style="flex: 1;" />
              <span>~</span>
              <input type="date" id="sw-update-end" style="flex: 1;" />
            </div>
          </div>
          <div class="form-group perm-sw-update" style="display:none;">
            <label>유지보수 체결 (상태 연동)</label>
            <label style="display:flex; align-items:center; gap:0.5rem; height: 38px; cursor: pointer;">
              <input type="checkbox" id="sw-update-maintenance" /> 유효 상태로 갱신
            </label>
          </div>
          <div class="form-group">
            <label>발생 비용</label>
            <input type="text" id="sw-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 500,000" />
          </div>
          <div class="form-group">
            <label>상세 내용 (메모)</label>
            <input type="text" id="sw-update-note" placeholder="예: 25년도 구독 연장 결제 완료" />
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div></div>
        <div class="footer-actions">
          <button id="btn-cancel-sw-update" class="btn btn-outline">취소</button>
          <button id="btn-save-sw-update" class="btn btn-primary">반영하기</button>
        </div>
      </div>
    </div>
  </div>
`;

export let currentAsset: SoftwareAsset | null = null;
export let isEditMode = false;

export function setEditMode(edit: boolean) {
  isEditMode = edit;
  const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
  const btnSaveSw = document.getElementById('btn-save-sw-asset') as HTMLButtonElement;
  const btnRevertEdit = document.getElementById('btn-revert-sw-edit') as HTMLButtonElement;
  const btnCloseFooter = document.getElementById('btn-close-sw-footer') as HTMLButtonElement;

  if (edit) {
    swForm.classList.add('is-edit-mode');
    swForm.classList.remove('is-view-mode');
    btnSaveSw.textContent = '저장';
    btnRevertEdit.classList.remove('hidden');
    btnCloseFooter.classList.add('hidden');
    Array.from(swForm.elements).forEach((el: any) => el.disabled = false);
  } else {
    swForm.classList.add('is-view-mode');
    swForm.classList.remove('is-edit-mode');
    btnSaveSw.textContent = '수정';
    btnRevertEdit.classList.add('hidden');
    btnCloseFooter.classList.remove('hidden');
    Array.from(swForm.elements).forEach((el: any) => el.disabled = true);
    if (currentAsset) fillFormData(currentAsset);
  }
}

export function fillFormData(asset: SoftwareAsset) {
  (document.getElementById('sw-asset-id') as HTMLInputElement).value = asset.id;
  (document.getElementById('sw-asset-type') as HTMLInputElement).value = asset.type;
  (document.getElementById('sw-분야') as HTMLSelectElement).value = asset.분야 || '업무공통';
  (document.getElementById('sw-법인') as HTMLSelectElement).value = asset.법인;
  (document.getElementById('sw-부서') as HTMLInputElement).value = asset.부서 || '';
  (document.getElementById('sw-제품명') as HTMLInputElement).value = asset.제품명;
  (document.getElementById('sw-구매일') as HTMLInputElement).value = asset.구매일 || '';
  
  if (asset.구독일) {
    const parts = asset.구독일.split('~');
    (document.getElementById('sw-구독일-시작') as HTMLInputElement).value = parts[0]?.trim() || '';
    (document.getElementById('sw-구독일-종료') as HTMLInputElement).value = parts[1]?.trim() || '';
  } else {
    (document.getElementById('sw-구독일-시작') as HTMLInputElement).value = '';
    (document.getElementById('sw-구독일-종료') as HTMLInputElement).value = '';
  }
  
  (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked = !!asset.유지보수여부;
  (document.getElementById('sw-금액') as HTMLInputElement).value = asset.금액 || '';
  (document.getElementById('sw-수량') as HTMLInputElement).value = String(asset.수량);
  (document.getElementById('sw-계정명') as HTMLInputElement).value = asset.계정명 || '';
  (document.getElementById('sw-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
  (document.getElementById('sw-비고') as HTMLInputElement).value = asset.비고 || '';

  document.getElementById('btn-open-sw-update')!.style.display = 'flex';
  renderSwHistory(asset.id);
}

export function initSwModal(renderContent: () => void, closeModals: () => void) {
  if (!document.getElementById('sw-asset-modal')) {
    document.body.insertAdjacentHTML('beforeend', SW_MODAL_HTML);
  }

  const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
  const btnRevertEdit = document.getElementById('btn-revert-sw-edit') as HTMLButtonElement;
  const btnSaveSw = document.getElementById('btn-save-sw-asset') as HTMLButtonElement;
  const btnDeleteSw = document.getElementById('btn-delete-sw-asset') as HTMLButtonElement;
  const btnCloseHeader = document.getElementById('btn-close-sw-modal') as HTMLButtonElement;
  const btnCloseFooter = document.getElementById('btn-close-sw-footer') as HTMLButtonElement;

  btnRevertEdit?.addEventListener('click', () => setEditMode(false));
  btnCloseHeader?.addEventListener('click', closeModals);
  btnCloseFooter?.addEventListener('click', closeModals);

  btnSaveSw?.addEventListener('click', (e) => {
    e.preventDefault();
    if (!isEditMode) {
      setEditMode(true);
      return;
    }
    
    if (!swForm.checkValidity()) { swForm.reportValidity(); return; }
    
    const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
    const start = (document.getElementById('sw-구독일-시작') as HTMLInputElement).value;
    const end = (document.getElementById('sw-구독일-종료') as HTMLInputElement).value;
    const 구독일Str = (start || end) ? `${start || ''} ~ ${end || ''}` : '';

    const newAsset: SoftwareAsset = {
      id: id || Math.random().toString(36).substring(2, 9),
      type: (document.getElementById('sw-asset-type') as HTMLInputElement).value,
      분야: (document.getElementById('sw-분야') as HTMLSelectElement).value,
      법인: (document.getElementById('sw-법인') as HTMLSelectElement).value,
      부서: (document.getElementById('sw-부서') as HTMLInputElement).value,
      제품명: (document.getElementById('sw-제품명') as HTMLInputElement).value,
      구매일: (document.getElementById('sw-구매일') as HTMLInputElement).value,
      구독일: 구독일Str,
      유지보수여부: (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked,
      금액: (document.getElementById('sw-금액') as HTMLInputElement).value,
      수량: parseInt((document.getElementById('sw-수량') as HTMLInputElement).value || '1', 10),
      계정명: (document.getElementById('sw-계정명') as HTMLInputElement).value,
      납품업체: (document.getElementById('sw-납품업체') as HTMLInputElement).value,
      비고: (document.getElementById('sw-비고') as HTMLInputElement).value,
    };

    if (id) {
      const idx = state.masterData.sw.findIndex(a => a.id === id);
      if(idx !== -1) state.masterData.sw[idx] = newAsset;
    } else {
      state.masterData.sw.push(newAsset);
      
      const now = new Date();
      state.masterData.logs = state.masterData.logs || [];
      state.masterData.logs.push({
        id: Math.random().toString(36).substring(2, 9),
        assetId: newAsset.id,
        date: `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`,
        user: '관리자',
        details: '신규 등록'
      });
    }
    
    closeModals();
    renderContent();
  });

  btnDeleteSw?.addEventListener('click', (e) => {
    e.preventDefault();
    const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
    if (confirm('삭제하시겠습니까?')) {
      state.masterData.sw = state.masterData.sw.filter(a => a.id !== id);
      closeModals();
      renderContent();
    }
  });

  // Update Sub-modal integration
  const subModal = document.getElementById('sw-update-modal')!;
  const btnOpenUpdate = document.getElementById('btn-open-sw-update')!;
  const btnCloseUpdate = document.getElementById('btn-close-sw-update')!;
  const btnCancelUpdate = document.getElementById('btn-cancel-sw-update')!;
  const btnSaveUpdate = document.getElementById('btn-save-sw-update')!;

  const closeUpdateModal = () => subModal.classList.add('hidden');
  btnCloseUpdate?.addEventListener('click', closeUpdateModal);
  btnCancelUpdate?.addEventListener('click', closeUpdateModal);

  btnOpenUpdate?.addEventListener('click', (e) => {
    e.preventDefault();
    const isSub = (document.getElementById('sw-asset-type') as HTMLInputElement).value === '구독SW';
    subModal.classList.remove('hidden');
    
    // Set default values
    (document.getElementById('sw-update-date') as HTMLInputElement).value = new Date().toISOString().substring(0, 10);
    (document.getElementById('sw-update-start') as HTMLInputElement).value = '';
    (document.getElementById('sw-update-end') as HTMLInputElement).value = '';
    (document.getElementById('sw-update-cost') as HTMLInputElement).value = '';
    (document.getElementById('sw-update-note') as HTMLInputElement).value = '';

    if (isSub) {
      document.querySelector('.sub-sw-update')!.setAttribute('style', 'display:flex; flex-direction:column;');
      document.querySelector('.perm-sw-update')!.setAttribute('style', 'display:none');
    } else {
      document.querySelector('.sub-sw-update')!.setAttribute('style', 'display:none');
      document.querySelector('.perm-sw-update')!.setAttribute('style', 'display:flex; flex-direction:column;');
      (document.getElementById('sw-update-maintenance') as HTMLInputElement).checked = (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked;
    }
  });

  btnSaveUpdate?.addEventListener('click', (e) => {
    e.preventDefault();
    const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
    if (!id) { alert('자산이 저장되지 않았습니다. 메인 폼을 먼저 저장해주세요.'); return; }
    
    const isSub = (document.getElementById('sw-asset-type') as HTMLInputElement).value === '구독SW';
    const date = (document.getElementById('sw-update-date') as HTMLInputElement).value;
    const start = (document.getElementById('sw-update-start') as HTMLInputElement).value;
    const end = (document.getElementById('sw-update-end') as HTMLInputElement).value;
    const maintenance = (document.getElementById('sw-update-maintenance') as HTMLInputElement).checked;
    const cost = (document.getElementById('sw-update-cost') as HTMLInputElement).value;
    const note = (document.getElementById('sw-update-note') as HTMLInputElement).value;

    const periodStr = (start || end) ? `${start || ''} ~ ${end || ''}` : '';

    let details = `[업데이트] ${note || (isSub ? '구독 갱신' : '유지보수 계약')}\n`;
    if (cost) details += `발생 비용: ${cost}원\n`;

    if (isSub) {
      if (periodStr) details += `구독 변경: -> ${periodStr}\n`;
      // Always update main fields if period is provided
      if (periodStr) {
        (document.getElementById('sw-구독일-시작') as HTMLInputElement).value = start;
        (document.getElementById('sw-구독일-종료') as HTMLInputElement).value = end;
      }
    } else {
      details += `유지보수 상태: -> ${maintenance ? '유효' : '없음'}\n`;
      (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked = maintenance;
    }
    
    if (cost) (document.getElementById('sw-금액') as HTMLInputElement).value = cost;

    state.masterData.logs.push({
      id: Math.random().toString(36).substring(2, 9),
      assetId: id,
      date,
      details,
      user: '관리자'
    });

    closeUpdateModal();
    renderSwHistory(id);
    
    // 메인 테이블 리렌더링도 트리거 (뒤에 보일 수 있게)
    renderContent();
  });
}

function renderSwHistory(assetId: string) {
  const historyList = document.getElementById('sw-history-list');
  if (!historyList) return;
  if (!state.masterData.logs) state.masterData.logs = [];

  const logs = state.masterData.logs
    .filter(l => l.assetId === assetId)
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());

  if (logs.length === 0) {
    historyList.innerHTML = '<div class="empty-history">업데이트 내역이 없습니다.</div>';
    return;
  }

  historyList.innerHTML = logs.map(log => `
    <div class="history-item">
      <div class="history-date">${log.date}</div>
      <div class="history-user">작업자: ${log.user}</div>
      <div class="history-details">${log.details.replace(/\\n/g, '<br>')}</div>
    </div>
  `).join('');
  createIcons({ icons: { X, History, Plus } });
}

export function openSwModal(asset?: SoftwareAsset) {
  currentAsset = asset || null;
  const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
  const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
  
  openModal('sw-asset-modal');
  swForm.reset();

  const subGroup = document.getElementById('sw-구독일-group')!;
  const permGroup = document.getElementById('sw-유지보수-group')!;
  if (state.activeSubTab === '구독SW') {
    subGroup.style.display = 'flex';
    permGroup.style.display = 'none';
  } else {
    subGroup.style.display = 'none';
    permGroup.style.display = 'flex';
  }

  if (asset) {
    document.getElementById('sw-modal-title')!.textContent = `${state.activeSubTab} 상세 정보 수정`;
    deleteBtn.style.display = 'block';
    fillFormData(asset);
    setEditMode(false);
  } else {
    document.getElementById('sw-modal-title')!.textContent = `신규 ${state.activeSubTab} 자산 추가`;
    deleteBtn.style.display = 'none';
    (document.getElementById('sw-asset-id') as HTMLInputElement).value = '';
    (document.getElementById('sw-asset-type') as HTMLInputElement).value = state.activeSubTab;
    document.getElementById('btn-open-sw-update')!.style.display = 'none';
    renderSwHistory('');
    setEditMode(true);
  }
  
  createIcons({ icons: { X, History, Plus } });
}