import { state, saveSystemUser, deleteSystemUser } from '../../core/state';
import { BaseModal } from './BaseModal';
import { setFieldValue } from './ModalUtils';
import { createIcons, X, Save } from 'lucide';
import { UI_TEXT } from '../../core/schema';

class UserModal extends BaseModal {
  constructor() {
    super('user', '임직원 정보');
  }

  protected renderFrameHTML(): string {
    return `
      <div id="user-asset-modal" class="modal-overlay hidden">
        <div class="modal-content narrow">
          <div class="modal-header">
            <div class="header-left">
              <h2 id="user-modal-title" class="modal-title">${this.title}</h2>
              <div id="user-header-identity" class="header-identity"></div>
            </div>
            <button id="btn-close-user-modal" class="btn-icon" aria-label="닫기">&times;</button>
          </div>
          <div class="modal-body">
            <form id="user-asset-form" class="grid-form vertical-form">
              <input type="hidden" id="user-id" name="id" />

              <div class="form-group">
                <label>사번</label>
                <input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required />
              </div>

              <div class="form-group">
                <label>사용자명</label>
                <input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required />
              </div>

              <div class="form-group">
                <label>사용조직 (부서)</label>
                <input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required />
              </div>

              <div class="form-group">
                <label>직무 (직급)</label>
                <input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required />
              </div>

              <div class="form-group">
                <label>상태</label>
                <select id="user-status" name="status">
                  <option value="재직">재직</option>
                  <option value="퇴직">퇴직</option>
                </select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button id="btn-delete-user-asset" class="btn btn-outline btn-danger">삭제</button>
            <div class="footer-actions">
              <button id="btn-revert-user-edit" class="btn btn-outline hidden">수정 취소</button>
              <button id="btn-cancel-user-modal" class="btn btn-outline">닫기</button>
              <button id="btn-save-user-asset" class="btn btn-primary">수정</button>
            </div>
          </div>
        </div>
      </div>
    `;
  }

  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
    const saveBtn = document.getElementById('btn-save-user-asset')!;
    const revertBtn = document.getElementById('btn-revert-user-edit')!;
    const deleteBtn = document.getElementById('btn-delete-user-asset')!;

    saveBtn.addEventListener('click', async () => {
      if (!this.currentAsset) return;
      if (!this.isEditMode) {
        this.setEditLockMode('edit');
        this.isEditMode = true;
        return;
      }

      const empNo = (document.getElementById('user-emp-no') as HTMLInputElement).value.trim();
      const userName = (document.getElementById('user-name-input') as HTMLInputElement).value.trim();
      const deptName = (document.getElementById('user-dept') as HTMLInputElement).value.trim();
      const position = (document.getElementById('user-position-input') as HTMLInputElement).value.trim();
      const status = (document.getElementById('user-status') as HTMLSelectElement).value;

      if (!empNo || !userName || !deptName || !position) {
        alert('모든 필수 입력 필드를 채워주세요.');
        return;
      }

      const updated = {
        id: this.currentAsset.id || null,
        emp_no: empNo,
        user_name: userName,
        dept_name: deptName,
        position: position,
        status: status
      };

      if (await saveSystemUser(updated)) {
        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
        onSave(); this.close(); closeModals();
      }
    });

    revertBtn.addEventListener('click', () => {
      this.setEditLockMode('view');
      if (this.currentAsset) this.fillFormData(this.currentAsset);
    });

    deleteBtn.addEventListener('click', async () => {
      if (!this.currentAsset || !this.currentAsset.id) return;
      if (!confirm('정말로 이 임직원 정보를 삭제하시겠습니까?')) return;

      if (await deleteSystemUser(this.currentAsset.id)) {
        alert('성공적으로 삭제되었습니다.');
        onSave(); this.close(); closeModals();
      }
    });
    
    createIcons({ icons: { Save, X } });
  }

  protected fillFormData(asset: any): void {
    setFieldValue('user-id', asset.id || '');
    setFieldValue('user-emp-no', asset.emp_no || '');
    setFieldValue('user-name-input', asset.user_name || '');
    setFieldValue('user-dept', asset.dept_name || '');
    setFieldValue('user-position-input', asset.position || '');
    setFieldValue('user-status', asset.status || '재직');
    this.updateHeaderIdentity(asset);
  }

  protected onAfterOpen(asset: any, mode: string): void {
    const titleEl = document.getElementById('user-modal-title');
    if (titleEl) {
      titleEl.textContent = (mode === 'add') ? '신규 임직원 등록' : '임직원 정보 수정';
    }

    const deleteBtn = document.getElementById('btn-delete-user-asset')!;
    const saveBtn = document.getElementById('btn-save-user-asset')!;

    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';

    if (mode === 'add' || mode === 'edit') {
      saveBtn.textContent = mode === 'add' ? '등록' : '저장';
      saveBtn.style.display = 'block';
    } else {
      saveBtn.textContent = '수정';
      saveBtn.style.display = 'block';
    }
    this.updateHeaderIdentity(asset);
  }

  private updateHeaderIdentity(asset: any) {
    const container = document.getElementById('user-header-identity');
    if (!container) return;
    
    if (this.currentMode === 'add') {
      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
      return;
    }

    const empNo = asset.emp_no || '';
    const userName = asset.user_name || '';
    const dept = asset.dept_name || '';

    container.innerHTML = `
      <span class="asset-code-title">${userName}</span>
      <span class="service-type-badge">${empNo}</span>
      <span class="asset-type-label">${dept}</span>
    `;
  }
}

export const userModal = new UserModal();
export function initUserModal(onSave: () => void, closeModals: () => void) { userModal.init(onSave, closeModals); }
export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { userModal.open(asset, mode); }