/**
 * KT AI 기반 소상공인 이벤트 자동 생성 서비스
 * 공통 JavaScript 유틸리티
 *
 * 작성일: 2025-01-20
 * 버전: 1.0
 */

(function() {
  'use strict';

  // ============================================
  // 1. 상태 관리
  // ============================================
  window.AppState = {
    // 사용자 정보
    user: null,

    // 매장 정보
    store: null,

    // 현재 이벤트 정보
    currentEvent: null,

    // localStorage에서 데이터 로드
    load() {
      try {
        this.user = JSON.parse(localStorage.getItem('kt_user') || 'null');
        this.store = JSON.parse(localStorage.getItem('kt_store') || 'null');
        this.currentEvent = JSON.parse(localStorage.getItem('kt_current_event') || 'null');
      } catch (e) {
        console.error('Failed to load app state:', e);
      }
    },

    // localStorage에 데이터 저장
    save() {
      try {
        localStorage.setItem('kt_user', JSON.stringify(this.user));
        localStorage.setItem('kt_store', JSON.stringify(this.store));
        localStorage.setItem('kt_current_event', JSON.stringify(this.currentEvent));
      } catch (e) {
        console.error('Failed to save app state:', e);
      }
    },

    // 상태 초기화
    clear() {
      this.user = null;
      this.store = null;
      this.currentEvent = null;
      localStorage.removeItem('kt_user');
      localStorage.removeItem('kt_store');
      localStorage.removeItem('kt_current_event');
    }
  };

  // 페이지 로드 시 상태 복원
  document.addEventListener('DOMContentLoaded', function() {
    window.AppState.load();
  });

  // ============================================
  // 2. Toast 알림
  // ============================================
  window.Toast = {
    show(message, duration = 3000) {
      // 기존 토스트 제거
      const existingToast = document.querySelector('.toast');
      if (existingToast) {
        existingToast.remove();
      }

      // 새 토스트 생성
      const toast = document.createElement('div');
      toast.className = 'toast';
      toast.textContent = message;
      toast.setAttribute('role', 'status');
      toast.setAttribute('aria-live', 'polite');

      document.body.appendChild(toast);

      // 자동 제거
      setTimeout(() => {
        toast.classList.add('hide');
        setTimeout(() => {
          toast.remove();
        }, 200);
      }, duration);
    },

    success(message) {
      this.show('✓ ' + message);
    },

    error(message) {
      this.show('✕ ' + message);
    },

    info(message) {
      this.show('ℹ ' + message);
    }
  };

  // ============================================
  // 3. Modal 다이얼로그
  // ============================================
  window.Modal = {
    show(options) {
      const {
        title = '',
        body = '',
        confirmText = '확인',
        cancelText = '취소',
        onConfirm = () => {},
        onCancel = () => {},
        showCancel = true
      } = options;

      // 백드롭 생성
      const backdrop = document.createElement('div');
      backdrop.className = 'modal-backdrop';

      // 모달 생성
      const modal = document.createElement('div');
      modal.className = 'modal';
      modal.setAttribute('role', 'dialog');
      modal.setAttribute('aria-labelledby', 'modal-title');
      modal.setAttribute('aria-modal', 'true');

      modal.innerHTML = `
        <div class="modal__header">
          <h2 class="modal__title" id="modal-title">${title}</h2>
          <button class="modal__close" aria-label="닫기">
            <span class="material-icons">close</span>
          </button>
        </div>
        <div class="modal__body">
          ${body}
        </div>
        <div class="modal__footer">
          ${showCancel ? `<button class="btn btn-secondary btn-md modal__cancel">${cancelText}</button>` : ''}
          <button class="btn btn-primary btn-md modal__confirm">${confirmText}</button>
        </div>
      `;

      // 닫기 함수
      const close = () => {
        backdrop.remove();
        modal.remove();
        document.body.style.overflow = '';
      };

      // 이벤트 리스너
      modal.querySelector('.modal__close').addEventListener('click', () => {
        close();
        onCancel();
      });

      if (showCancel) {
        modal.querySelector('.modal__cancel').addEventListener('click', () => {
          close();
          onCancel();
        });
      }

      modal.querySelector('.modal__confirm').addEventListener('click', () => {
        close();
        onConfirm();
      });

      backdrop.addEventListener('click', (e) => {
        if (e.target === backdrop) {
          close();
          onCancel();
        }
      });

      // 추가
      document.body.appendChild(backdrop);
      document.body.appendChild(modal);
      document.body.style.overflow = 'hidden';

      // 첫 번째 버튼에 포커스
      modal.querySelector('button').focus();
    },

    confirm(title, body, onConfirm) {
      this.show({
        title,
        body,
        confirmText: '확인',
        cancelText: '취소',
        onConfirm,
        showCancel: true
      });
    },

    alert(title, body, onConfirm = () => {}) {
      this.show({
        title,
        body,
        confirmText: '확인',
        onConfirm,
        showCancel: false
      });
    }
  };

  // ============================================
  // 4. Bottom Sheet
  // ============================================
  window.BottomSheet = {
    show(content, options = {}) {
      const {
        onClose = () => {}
      } = options;

      // 백드롭 생성
      const backdrop = document.createElement('div');
      backdrop.className = 'bottom-sheet-backdrop';

      // Bottom Sheet 생성
      const sheet = document.createElement('div');
      sheet.className = 'bottom-sheet';
      sheet.setAttribute('role', 'dialog');
      sheet.setAttribute('aria-modal', 'true');

      sheet.innerHTML = `
        <div class="bottom-sheet__handle"></div>
        <div class="bottom-sheet__content">
          ${content}
        </div>
      `;

      // 닫기 함수
      const close = () => {
        backdrop.remove();
        sheet.remove();
        document.body.style.overflow = '';
        onClose();
      };

      // 이벤트 리스너
      backdrop.addEventListener('click', close);

      // Handle 드래그로 닫기 (간단한 구현)
      let startY = 0;
      const handle = sheet.querySelector('.bottom-sheet__handle');

      handle.addEventListener('touchstart', (e) => {
        startY = e.touches[0].clientY;
      });

      handle.addEventListener('touchend', (e) => {
        const endY = e.changedTouches[0].clientY;
        if (endY - startY > 50) { // 50px 이상 드래그하면 닫기
          close();
        }
      });

      // 추가
      document.body.appendChild(backdrop);
      document.body.appendChild(sheet);
      document.body.style.overflow = 'hidden';

      return { close };
    }
  };

  // ============================================
  // 5. 로딩 인디케이터
  // ============================================
  window.Loading = {
    show(message = '처리중...') {
      // 기존 로딩 제거
      this.hide();

      const overlay = document.createElement('div');
      overlay.className = 'loading-overlay';
      overlay.id = 'app-loading';
      overlay.innerHTML = `
        <div style="text-align: center; color: white;">
          <div class="spinner" style="margin: 0 auto 16px;"></div>
          <div class="body-m">${message}</div>
        </div>
      `;

      document.body.appendChild(overlay);
      document.body.style.overflow = 'hidden';
    },

    hide() {
      const overlay = document.getElementById('app-loading');
      if (overlay) {
        overlay.remove();
        document.body.style.overflow = '';
      }
    }
  };

  // ============================================
  // 6. 폼 검증 유틸리티
  // ============================================
  window.FormValidator = {
    // 이메일 검증
    isValidEmail(email) {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return re.test(email);
    },

    // 전화번호 검증 (010-XXXX-XXXX)
    isValidPhone(phone) {
      const re = /^010-\d{4}-\d{4}$/;
      return re.test(phone);
    },

    // 사업자번호 검증 (XXX-XX-XXXXX)
    isValidBusinessNumber(number) {
      const re = /^\d{3}-\d{2}-\d{5}$/;
      return re.test(number);
    },

    // 이름 검증 (2자 이상)
    isValidName(name) {
      return name && name.length >= 2;
    },

    // 필드에 에러 표시
    showError(inputElement, message) {
      inputElement.classList.add('error');

      // 기존 에러 메시지 제거
      const existingError = inputElement.parentElement.querySelector('.form-error');
      if (existingError) {
        existingError.remove();
      }

      // 새 에러 메시지 추가
      if (message) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'form-error';
        errorDiv.textContent = message;
        errorDiv.setAttribute('role', 'alert');
        inputElement.parentElement.appendChild(errorDiv);
      }
    },

    // 필드에서 에러 제거
    clearError(inputElement) {
      inputElement.classList.remove('error');
      const errorDiv = inputElement.parentElement.querySelector('.form-error');
      if (errorDiv) {
        errorDiv.remove();
      }
    },

    // 전체 폼 검증
    validateForm(formElement) {
      let isValid = true;
      const inputs = formElement.querySelectorAll('[required]');

      inputs.forEach(input => {
        if (!input.value.trim()) {
          this.showError(input, '필수 입력 항목입니다.');
          isValid = false;
        } else {
          this.clearError(input);
        }
      });

      return isValid;
    }
  };

  // ============================================
  // 7. 네비게이션 유틸리티
  // ============================================
  window.Navigation = {
    // 페이지 이동
    goto(page) {
      window.location.href = page;
    },

    // 뒤로가기
    back() {
      window.history.back();
    },

    // Bottom Navigation 활성화 상태 설정
    updateBottomNav(activePage) {
      const navItems = document.querySelectorAll('.bottom-nav__item');
      navItems.forEach(item => {
        if (item.getAttribute('data-page') === activePage) {
          item.classList.add('active');
        } else {
          item.classList.remove('active');
        }
      });
    }
  };

  // ============================================
  // 8. 유틸리티 함수
  // ============================================
  window.Utils = {
    // 숫자 포맷 (1000 -> 1,000)
    formatNumber(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },

    // 날짜 포맷 (YYYY-MM-DD)
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },

    // 날짜 포맷 (YYYY.MM.DD)
    formatDateDot(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${year}.${month}.${day}`;
    },

    // 랜덤 ID 생성
    generateId() {
      return 'id-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
    },

    // Debounce 함수
    debounce(func, wait) {
      let timeout;
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout);
          func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    },

    // AI 처리 시뮬레이션
    simulateAI(duration = 3000) {
      return new Promise(resolve => {
        setTimeout(resolve, duration);
      });
    },

    // 이미지 로드 체크
    preloadImage(src) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = src;
      });
    }
  };

  // ============================================
  // 9. 공통 이벤트 핸들러
  // ============================================

  // 뒤로가기 버튼
  document.addEventListener('click', function(e) {
    if (e.target.closest('.app-bar__back')) {
      e.preventDefault();
      window.Navigation.back();
    }
  });

  // 입력 필드 실시간 검증
  document.addEventListener('input', function(e) {
    const input = e.target;

    // 이메일 필드
    if (input.type === 'email' && input.value) {
      if (!window.FormValidator.isValidEmail(input.value)) {
        window.FormValidator.showError(input, '올바른 이메일 형식을 입력하세요.');
      } else {
        window.FormValidator.clearError(input);
      }
    }

    // 전화번호 필드
    if (input.name === 'phone' && input.value) {
      // 자동 하이픈 추가
      let value = input.value.replace(/[^0-9]/g, '');
      if (value.length > 3 && value.length <= 7) {
        value = value.slice(0, 3) + '-' + value.slice(3);
      } else if (value.length > 7) {
        value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7, 11);
      }
      input.value = value;

      // 검증
      if (value.length === 13) {
        if (!window.FormValidator.isValidPhone(value)) {
          window.FormValidator.showError(input, '올바른 전화번호 형식을 입력하세요.');
        } else {
          window.FormValidator.clearError(input);
        }
      }
    }

    // 사업자번호 필드
    if (input.name === 'business_number' && input.value) {
      // 자동 하이픈 추가
      let value = input.value.replace(/[^0-9]/g, '');
      if (value.length > 3 && value.length <= 5) {
        value = value.slice(0, 3) + '-' + value.slice(3);
      } else if (value.length > 5) {
        value = value.slice(0, 3) + '-' + value.slice(3, 5) + '-' + value.slice(5, 10);
      }
      input.value = value;

      // 검증
      if (value.length === 12) {
        if (!window.FormValidator.isValidBusinessNumber(value)) {
          window.FormValidator.showError(input, '올바른 사업자번호 형식을 입력하세요.');
        } else {
          window.FormValidator.clearError(input);
        }
      }
    }
  });

  // Material Icons 로드 확인
  if (!document.querySelector('link[href*="material-icons"]')) {
    const link = document.createElement('link');
    link.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
    link.rel = 'stylesheet';
    document.head.appendChild(link);
  }

  // Pretendard 폰트 로드 확인
  if (!document.querySelector('link[href*="pretendard"]')) {
    const link = document.createElement('link');
    link.href = 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css';
    link.rel = 'stylesheet';
    document.head.appendChild(link);
  }

  console.log('KT Event Marketing App - Common JS loaded');

})();
