import { state, saveJobSpec, deleteJobSpec } from '../../core/state';
import { BaseModal } from './BaseModal';
import { setFieldValue } from './ModalUtils';
import { UI_TEXT } from '../../core/schema';

class JobSpecModal extends BaseModal {
  constructor() {
    super('job-spec', '직무별 기준 사양');
  }

  protected renderFrameHTML(): string {
    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
    const inputStyle = sharedStyle;

    return `
      <div id="job-spec-asset-modal" class="modal-overlay hidden">
        <div class="modal-content" style="max-width: 500px; width: 100%;">
          <div class="modal-header">
            <h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
            <button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
          </div>
          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
            <form id="job-spec-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
              <input type="hidden" id="job-spec-id" name="id" />
              
              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무명</label>
                <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" />
              </div>

              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 CPU 사양</label>
                <input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="예: Intel Core i7-13700 이상" required style="\${inputStyle} width: 100%;" />
              </div>

              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 RAM 사양</label>
                <input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="예: 32GB" required style="\${inputStyle} width: 100%;" />
              </div>

              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 GPU 사양</label>
                <input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="예: RTX 4070 이상" required style="\${inputStyle} width: 100%;" />
              </div>

              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상)</label>
                <input type="number" id="job-spec-min-score" name="min_score" placeholder="예: 80" required style="\${inputStyle} width: 100%;" />
              </div>

              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">비고 (메모)</label>
                <textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" style="box-sizing: border-box !important; font-size: 13px; margin: 0; min-height: 80px; width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical;"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
            <button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
            <div class="footer-actions" style="display: flex; gap: 8px;">
              <button id="btn-revert-job-spec-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
              <button id="btn-cancel-job-spec-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
              <button id="btn-save-job-spec-asset" class="btn btn-primary" style="height: 42px;">수정</button>
            </div>
          </div>
        </div>
      </div>
    `;
  }

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

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

      const jobName = (document.getElementById('job-spec-job-name') as HTMLInputElement).value.trim();
      const cpuStd = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement).value.trim();
      const ramStd = (document.getElementById('job-spec-ram-standard') as HTMLInputElement).value.trim();
      const gpuStd = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement).value.trim();
      const minScoreStr = (document.getElementById('job-spec-min-score') as HTMLInputElement).value;
      const remarks = (document.getElementById('job-spec-remarks') as HTMLTextAreaElement).value.trim();

      if (!jobName) {
        alert('직무명을 입력해 주세요.');
        return;
      }

      const updated = {
        id: this.currentAsset.id || null,
        job_name: jobName,
        cpu_standard: cpuStd,
        ram_standard: ramStd,
        gpu_standard: gpuStd,
        min_score: minScoreStr !== '' ? parseInt(minScoreStr, 10) : 0,
        remarks: remarks
      };

      if (await saveJobSpec(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 deleteJobSpec(this.currentAsset.id)) {
        alert('성공적으로 삭제되었습니다.');
        onSave(); this.close(); closeModals();
      }
    });
  }

  protected fillFormData(asset: any): void {
    setFieldValue('job-spec-id', asset.id || '');
    setFieldValue('job-spec-job-name', asset.job_name || '');
    setFieldValue('job-spec-cpu-standard', asset.cpu_standard || '');
    setFieldValue('job-spec-ram-standard', asset.ram_standard || '');
    setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
    setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '0');
    setFieldValue('job-spec-remarks', asset.remarks || '');
  }

  protected onAfterOpen(asset: any, mode: string): void {
    const titleEl = document.getElementById('job-spec-modal-title');

    if (titleEl) {
      if (mode === 'add') {
        titleEl.textContent = '신규 직무별 기준 사양 등록';
      } else {
        titleEl.textContent = '직무별 기준 사양 상세 편집';
      }
    }

    const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
    const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
    
    // 추가 모드일 때는 삭제 버튼 숨김
    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';

    if (mode === 'add') {
      this.setEditLockMode('edit');
      this.isEditMode = true;
      saveBtn.textContent = '등록';
      saveBtn.style.display = 'block';
    } else {
      this.setEditLockMode('view');
      this.isEditMode = false;
      saveBtn.textContent = '수정';
      saveBtn.style.display = 'block';
    }
  }
}

export const jobSpecModal = new JobSpecModal();

export function initJobSpecModal(onSave: () => void, closeModals: () => void) {
  jobSpecModal.init(onSave, closeModals);
}

export function openJobSpecModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
  jobSpecModal.open(asset, mode);
}