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

const CLOUD_MODAL_HTML = `
  <div id="cloud-asset-modal" class="modal-overlay hidden">
    <div class="modal-content wide">
      <div class="modal-header">
        <h2 id="cloud-modal-title">클라우드 서비스 상세</h2>
        <button id="btn-close-cloud-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="cloud-asset-form" class="grid-form">
              <input type="hidden" id="cloud-asset-id" />
              <div class="form-group"><label>플랫폼명</label><input type="text" id="cloud-플랫폼명" placeholder="예: AWS, Cafe24" required /></div>
              <div class="form-group">
                <label>담당법인</label>
                <select id="cloud-법인" required>
                  <option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
                </select>
              </div>
              <div class="form-group" style="grid-column: span 2;"><label>사용용도(프로젝트/제품명)</label><input type="text" id="cloud-제품명" required /></div>
              <div class="form-group"><label>담당부서</label><input type="text" id="cloud-부서" /></div>
              <div class="form-group"><label>계정명(이메일)</label><input type="text" id="cloud-계정명" /></div>
              
              <div class="form-group"><label>결제수단</label>
                <select id="cloud-결제수단">
                  <option value="">선택안함</option>
                  <option value="법인카드">법인카드</option>
                  <option value="인보이스">인보이스</option>
                </select>
              </div>
              <div class="form-group"><label>연결카드번호(뒷4자리)</label><input type="text" id="cloud-연결카드번호" placeholder="1234" /></div>
              <div class="form-group"><label>결제일(기준일)</label><input type="number" min="1" max="31" id="cloud-결제일" placeholder="15" /></div>
              <div class="form-group"><label>당월 청구액(원)</label><input type="text" id="cloud-당월청구액" placeholder="0" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" /></div>
              <div class="form-group" style="grid-column: span 2;"><label>비고</label><input type="text" id="cloud-비고" /></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-cloud-update" class="btn btn-outline btn-sm"><i data-lucide="plus" style="width:14px;height:14px;"></i> 내역 추가</button>
            </div>
            <div id="cloud-history-list" class="history-timeline">
              <div class="empty-history">내역이 없습니다.</div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer" style="justify-content: space-between;">
        <button id="btn-delete-cloud-asset" class="btn btn-outline btn-danger">삭제</button>
        <div class="footer-actions">
          <button id="btn-revert-cloud-edit" class="btn btn-outline hidden">취소</button>
          <button id="btn-close-cloud-footer" class="btn btn-outline">닫기</button>
          <button id="btn-save-cloud-asset" class="btn btn-primary">수정</button>
        </div>
      </div>
    </div>
  </div>

  <div id="cloud-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-cloud-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="cloud-update-date" />
          </div>
          <div class="form-group">
            <label>청구 금액(원)</label>
            <input type="text" id="cloud-update-cost" oninput="this.value = this.value.replace(/[^0-9]/g, '') ? Number(this.value.replace(/[^0-9]/g, '')).toLocaleString() : ''" placeholder="ex) 150,000" />
          </div>
          <div class="form-group">
            <label>상세 내용 (메모)</label>
            <input type="text" id="cloud-update-note" placeholder="예: 트래픽 초과로 인한 요금 증가" />
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div></div>
        <div class="footer-actions">
          <button id="btn-cancel-cloud-update" class="btn btn-outline">취소</button>
          <button id="btn-save-cloud-update" class="btn btn-primary">반영하기</button>
        </div>
      </div>
    </div>
  </div>
`;

export let currentCloudAsset: SoftwareAsset | null = null;
export let isCloudEditMode = false;

export function setCloudEditMode(edit: boolean) {
  isCloudEditMode = edit;
  const form = document.getElementById('cloud-asset-form') as HTMLFormElement;
  const btnSave = document.getElementById('btn-save-cloud-asset') as HTMLButtonElement;
  const btnRevert = document.getElementById('btn-revert-cloud-edit') as HTMLButtonElement;
  const btnClose = document.getElementById('btn-close-cloud-footer') as HTMLButtonElement;

  if (edit) {
    form.classList.add('is-edit-mode');
    form.classList.remove('is-view-mode');
    btnSave.textContent = '저장';
    btnRevert.classList.remove('hidden');
    btnClose.classList.add('hidden');
    Array.from(form.elements).forEach((el: any) => el.disabled = false);
  } else {
    form.classList.add('is-view-mode');
    form.classList.remove('is-edit-mode');
    btnSave.textContent = '수정';
    btnRevert.classList.add('hidden');
    btnClose.classList.remove('hidden');
    Array.from(form.elements).forEach((el: any) => el.disabled = true);
    if (currentCloudAsset) fillCloudFormData(currentCloudAsset);
  }
}

export function fillCloudFormData(asset: SoftwareAsset) {
  (document.getElementById('cloud-asset-id') as HTMLInputElement).value = asset.id;
  (document.getElementById('cloud-플랫폼명') as HTMLInputElement).value = asset.플랫폼명 || '';
  (document.getElementById('cloud-법인') as HTMLSelectElement).value = asset.법인 || '한맥';
  (document.getElementById('cloud-제품명') as HTMLInputElement).value = asset.제품명 || '';
  (document.getElementById('cloud-부서') as HTMLInputElement).value = asset.부서 || '';
  (document.getElementById('cloud-계정명') as HTMLInputElement).value = asset.계정명 || '';
  (document.getElementById('cloud-결제수단') as HTMLSelectElement).value = asset.결제수단 || '';
  (document.getElementById('cloud-연결카드번호') as HTMLInputElement).value = asset.연결카드번호 || '';
  (document.getElementById('cloud-결제일') as HTMLInputElement).value = asset.결제일 || '';
  
  const billing = asset.당월청구액 ? asset.당월청구액.replace(/[^0-9]/g, '') : '';
  (document.getElementById('cloud-당월청구액') as HTMLInputElement).value = billing ? Number(billing).toLocaleString() : '';
  (document.getElementById('cloud-비고') as HTMLInputElement).value = asset.비고 || '';

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

function renderCloudHistory(assetId: string) {
  const historyList = document.getElementById('cloud-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 initCloudModal(renderContent: () => void, closeModals: () => void) {
  if (!document.getElementById('cloud-asset-modal')) {
    document.body.insertAdjacentHTML('beforeend', CLOUD_MODAL_HTML);
  }

  const form = document.getElementById('cloud-asset-form') as HTMLFormElement;
  const btnRevert = document.getElementById('btn-revert-cloud-edit');
  const btnSave = document.getElementById('btn-save-cloud-asset');
  const btnDelete = document.getElementById('btn-delete-cloud-asset');

  document.getElementById('btn-close-cloud-modal')?.addEventListener('click', closeModals);
  document.getElementById('btn-close-cloud-footer')?.addEventListener('click', closeModals);

  btnRevert?.addEventListener('click', (e) => {
    e.preventDefault();
    setCloudEditMode(false);
  });

  btnSave?.addEventListener('click', (e) => {
    e.preventDefault();
    if (!isCloudEditMode) {
      setCloudEditMode(true);
      return;
    }
    if (!form.checkValidity()) { form.reportValidity(); return; }

    const id = (document.getElementById('cloud-asset-id') as HTMLInputElement).value;
    const billingRaw = (document.getElementById('cloud-당월청구액') as HTMLInputElement).value.replace(/[^0-9]/g, '');

    const newAsset: SoftwareAsset = {
      id: id || Math.random().toString(36).substring(2, 9),
      type: '클라우드',
      플랫폼명: (document.getElementById('cloud-플랫폼명') as HTMLInputElement).value,
      법인: (document.getElementById('cloud-법인') as HTMLSelectElement).value,
      제품명: (document.getElementById('cloud-제품명') as HTMLInputElement).value,
      부서: (document.getElementById('cloud-부서') as HTMLInputElement).value,
      계정명: (document.getElementById('cloud-계정명') as HTMLInputElement).value,
      결제수단: (document.getElementById('cloud-결제수단') as HTMLSelectElement).value,
      연결카드번호: (document.getElementById('cloud-연결카드번호') as HTMLInputElement).value,
      결제일: (document.getElementById('cloud-결제일') as HTMLInputElement).value,
      당월청구액: billingRaw,
      비고: (document.getElementById('cloud-비고') as HTMLInputElement).value,
      구매일: '', 금액: '', 수량: 1, 납품업체: ''
    };

    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();
  });

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

  // 클라우드 업데이트 (이력) 모달 로직
  const updateModal = document.getElementById('cloud-update-modal')!;
  document.getElementById('btn-open-cloud-update')?.addEventListener('click', () => {
    updateModal.classList.remove('hidden');
    (document.getElementById('cloud-update-date') as HTMLInputElement).value = new Date().toISOString().split('T')[0];
    (document.getElementById('cloud-update-cost') as HTMLInputElement).value = '';
    (document.getElementById('cloud-update-note') as HTMLInputElement).value = '';
  });
  
  const closeUpdateModal = () => updateModal.classList.add('hidden');
  document.getElementById('btn-close-cloud-update')?.addEventListener('click', closeUpdateModal);
  document.getElementById('btn-cancel-cloud-update')?.addEventListener('click', closeUpdateModal);
  
  document.getElementById('btn-save-cloud-update')?.addEventListener('click', () => {
    const id = (document.getElementById('cloud-asset-id') as HTMLInputElement).value;
    if (!id) return;
    
    const date = (document.getElementById('cloud-update-date') as HTMLInputElement).value;
    const costRaw = (document.getElementById('cloud-update-cost') as HTMLInputElement).value.replace(/[^0-9]/g, '');
    const note = (document.getElementById('cloud-update-note') as HTMLInputElement).value;
    
    if (!date) return alert('업데이트 일자를 입력하세요.');
    
    let details = '결제/상태 업데이트';
    if (costRaw) details += ` (비용: ₩ ${Number(costRaw).toLocaleString()})`;
    if (note) details += `\n메모: ${note}`;
    
    state.masterData.logs = state.masterData.logs || [];
    state.masterData.logs.push({
      id: Math.random().toString(36).substring(2, 9),
      assetId: id,
      date,
      user: '관리자',
      details
    });
    
    // 금액 업데이트 반영
    if (costRaw) {
      const idx = state.masterData.sw.findIndex(a => a.id === id);
      if (idx !== -1) {
        state.masterData.sw[idx].당월청구액 = costRaw;
        (document.getElementById('cloud-당월청구액') as HTMLInputElement).value = Number(costRaw).toLocaleString();
      }
    }
    
    closeUpdateModal();
    renderCloudHistory(id);
    renderContent();
  });

  createIcons({ icons: { Save, X, Edit2, RotateCcw, History, Plus } });
}

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

  if (asset) {
    document.getElementById('cloud-modal-title')!.textContent = '클라우드 서비스 상세';
    deleteBtn.style.display = 'block';
    fillCloudFormData(asset);
    setCloudEditMode(false);
  } else {
    document.getElementById('cloud-modal-title')!.textContent = '신규 클라우드 서비스 등록';
    deleteBtn.style.display = 'none';
    (document.getElementById('cloud-asset-id') as HTMLInputElement).value = '';
    document.getElementById('btn-open-cloud-update')!.style.display = 'none';
    renderCloudHistory('');
    setCloudEditMode(true);
  }
  createIcons({ icons: { History, Plus } });
}