import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
import { BaseModal } from './BaseModal';
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
import { createIcons, X, Save, Database, Edit2, Plus } from 'lucide';
import { UI_TEXT } from '../../core/schema';

class PartsMasterModal extends BaseModal {
  constructor() {
    super('parts-master', '부품 표준 정보');
  }

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

    return `
      <div id="parts-master-asset-modal" class="modal-overlay hidden">
        <div class="modal-content" style="max-width: 500px; width: 100%;">
          <div class="modal-header">
            <h2 id="parts-master-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">${this.title}</h2>
            <button id="btn-close-parts-master-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="parts-master-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
              <input type="hidden" id="parts-master-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>
                <select id="parts-master-category" name="category" style="${selectStyle}">
                  <option value="CPU">CPU</option>
                  <option value="GPU">GPU</option>
                  <option value="RAM">RAM</option>
                </select>
              </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="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" 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="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" 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="parts-master-deduction" name="deduction" placeholder="예: 5" required style="${inputStyle} width: 100%;" />
              </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-parts-master-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
            <div class="footer-actions" style="display: flex; gap: 8px;">
              <button id="btn-revert-parts-master-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
              <button id="btn-cancel-parts-master-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
              <button id="btn-save-parts-master-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-parts-master-asset')!;
    const revertBtn = document.getElementById('btn-revert-parts-master-edit')!;
    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;

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

      const category = (document.getElementById('parts-master-category') as HTMLSelectElement).value;
      const compName = (document.getElementById('parts-master-component-name') as HTMLInputElement).value.trim();
      const tier = (document.getElementById('parts-master-score-tier') as HTMLInputElement).value.trim();
      const deductStr = (document.getElementById('parts-master-deduction') as HTMLInputElement).value;

      if (!compName || !tier || deductStr === '') {
        alert('모든 필드를 올바르게 입력해 주세요.');
        return;
      }

      const updated = {
        id: this.currentAsset.id || null,
        category,
        component_name: compName,
        score_tier: tier,
        deduction: parseInt(deductStr, 10)
      };

      if (await savePartsMaster(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('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;

      if (await deletePartsMaster(this.currentAsset.id)) {
        alert('성공적으로 삭제되었습니다.');
        onSave(); this.close(); closeModals();
      }
    });
  }

  protected fillFormData(asset: any): void {
    setFieldValue('parts-master-id', asset.id || '');
    setFieldValue('parts-master-category', asset.category || 'CPU');
    setFieldValue('parts-master-component-name', asset.component_name || '');
    setFieldValue('parts-master-score-tier', asset.score_tier || '');
    setFieldValue('parts-master-deduction', asset.deduction !== undefined ? asset.deduction.toString() : '0');
  }

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

    if (titleEl) {
      if (mode === 'add') {
        titleEl.textContent = '신규 부품 마스터 등록';
      } else {
        titleEl.textContent = '부품 마스터 상세 편집';
      }
    }

    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
    const saveBtn = document.getElementById('btn-save-parts-master-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 partsMasterModal = new PartsMasterModal();

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

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