import { createIcons, Save, Edit2, RotateCcw } from 'lucide';

// 공통 옵션 생성 함수
export const generateOptionsHTML = (options: string[]) => 
  options.map(opt => `<option value="${opt}">${opt}</option>`).join('');

// 필드 값 설정 유틸리티
export function setFieldValue(id: string, value: any) {
  const el = document.getElementById(id) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
  if (el) {
    if (el.type === 'checkbox') (el as HTMLInputElement).checked = !!value;
    else el.value = value || '';
  }
}

// 필드 값 가져오기 유틸리티
export function getFieldValue(id: string): string {
  const el = document.getElementById(id) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
  if (!el) return '';
  if (el.type === 'checkbox') return (el as HTMLInputElement).checked ? 'Y' : 'N';
  return el.value || '';
}

// 폼 자동 채우기
export function autoFillForm(prefix: string, data: any, fieldMap: Record<string, string>) {
  Object.keys(fieldMap).forEach(fieldId => {
    const dataKey = fieldMap[fieldId];
    setFieldValue(`${prefix}-${fieldId}`, data[dataKey]);
  });
}

// 폼 데이터 자동 추출
export function autoExtractForm(prefix: string, fieldMap: Record<string, string>): any {
  const extracted: any = {};
  Object.keys(fieldMap).forEach(fieldId => {
    const dataKey = fieldMap[fieldId];
    extracted[dataKey] = getFieldValue(`${prefix}-${fieldId}`);
  });
  return extracted;
}

// 모달 편집 잠금/해제 유틸리티
export function setEditLock(formId: string, mode: 'view' | 'edit' | 'add', options: {
  saveBtnId: string,
  revertBtnId: string,
  generateBtnId?: string,
  addLogBtnId?: string
}) {
  const form = document.getElementById(formId) as HTMLFormElement;
  if (!form) return;

  const isView = mode === 'view';
  const inputs = form.querySelectorAll('input, select, textarea');
  
  inputs.forEach(input => {
    const el = input as HTMLInputElement;
    if (el.id.includes('자산코드') || el.id.includes('asset-id') || el.classList.contains('is-readonly-field')) {
      el.readOnly = true;
      el.disabled = false;
    } else {
      if (el.tagName === 'SELECT') (el as HTMLSelectElement).disabled = isView;
      else (el as HTMLInputElement).readOnly = isView;
    }
  });

  const saveBtn = document.getElementById(options.saveBtnId);
  const revertBtn = document.getElementById(options.revertBtnId);
  const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
  const addLogBtn = options.addLogBtnId ? document.getElementById(options.addLogBtnId) : null;

  if (saveBtn) {
    saveBtn.innerHTML = isView 
      ? `<i data-lucide="edit-2" style="width:16px; height:16px;"></i> 수정` 
      : `<i data-lucide="save" style="width:16px; height:16px;"></i> 저장`;
    saveBtn.className = isView ? 'btn btn-primary' : 'btn btn-success';
  }

  if (revertBtn) revertBtn.classList.toggle('hidden', isView);
  if (generateBtn) generateBtn.classList.toggle('hidden', isView);
  if (addLogBtn) addLogBtn.classList.toggle('hidden', isView);

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

// 위치 정보 파싱 및 설정
export function parseAndSetLocation(locationStr: string, bldgId: string, detailId: string, etcGroupId: string, etcInputId: string) {
  const bldgSelect = document.getElementById(bldgId) as HTMLSelectElement;
  const detailSelect = document.getElementById(detailId) as HTMLSelectElement;
  const etcGroup = document.getElementById(etcGroupId);
  const etcInput = document.getElementById(etcInputId) as HTMLInputElement;

  if (!locationStr) return;

  const parts = locationStr.split(' > ');
  if (parts.length >= 1) {
    bldgSelect.value = parts[0];
    bldgSelect.dispatchEvent(new Event('change'));
    if (parts.length >= 2) {
      setTimeout(() => {
        detailSelect.value = parts[1];
        if (parts[1] === '기타' && parts[2]) {
          if (etcGroup) etcGroup.style.display = 'flex';
          etcInput.value = parts[2];
        }
      }, 0);
    }
  }
}

// 위치 정보 취합
export function getCombinedLocation(bldgId: string, detailId: string, etcId: string): string {
  const bldg = getFieldValue(bldgId);
  const detail = getFieldValue(detailId);
  const etc = getFieldValue(etcId);

  if (!bldg) return '';
  if (detail === '기타') return `${bldg} > 기타 > ${etc}`;
  return detail ? `${bldg} > ${detail}` : bldg;
}

// 위치 이벤트 바인딩
import { LOCATION_DATA } from './SharedData';
export function bindLocationEvents(bldgId: string, detailId: string, etcGroupId: string, etcInputId: string) {
  const bldgSelect = document.getElementById(bldgId) as HTMLSelectElement;
  const detailSelect = document.getElementById(detailId) as HTMLSelectElement;
  const etcGroup = document.getElementById(etcGroupId);

  bldgSelect?.addEventListener('change', () => {
    const bldg = bldgSelect.value;
    const details = LOCATION_DATA[bldg] || [];
    detailSelect.innerHTML = `<option value="">선택</option>` + generateOptionsHTML(details) + `<option value="기타">직접 입력(기타)</option>`;
    if (etcGroup) etcGroup.style.display = 'none';
  });

  detailSelect?.addEventListener('change', () => {
    if (etcGroup) etcGroup.style.display = detailSelect.value === '기타' ? 'flex' : 'none';
  });
}

// 모달 프레임 HTML 생성 (2열 그리드 표준 레이아웃)
export function createModalFrameHTML(id: string, title: string, formHTML: string, options: { historyTitle?: string, addLogBtnId?: string }) {
  return `
    <div id="${id}-asset-modal" class="modal-overlay hidden">
      <div class="modal-content modal-lg">
        <div class="modal-header">
          <h2 id="${id}-modal-title">${title}</h2>
          <button id="btn-close-${id}-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="${id}-asset-form" class="grid-form">
                <input type="hidden" id="${id}-asset-id" />
                <input type="hidden" id="${id}-asset-type" />
                ${formHTML}
              </form>
            </div>
            <div class="modal-history-area">
              <div class="history-header">
                <h3><i data-lucide="history" style="width:16px; height:16px;"></i> ${options.historyTitle || '변경 이력'}</h3>
                <button type="button" id="${options.addLogBtnId || 'btn-add-log'}" class="btn btn-outline btn-sm">
                  이력 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i> 
                </button>
              </div>
              <div id="${id}-history-list" class="history-timeline"></div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button id="btn-delete-${id}-asset" class="btn btn-outline btn-danger">삭제</button>
          <div class="footer-actions">
            <button id="btn-revert-${id}-edit" class="btn btn-outline hidden">취소</button>
            <button id="btn-save-${id}-asset" class="btn btn-primary">수정</button>
            <button id="btn-cancel-${id}-modal" class="btn btn-outline">닫기</button>
          </div>
        </div>
      </div>
    </div>
  `;
}
