anvil-hosting/app.js

/**
 * Anvil Hosting - Main Application JavaScript
 * 대화형 서버 런처 및 가격 데이터 관리
 */

// 텔레그램 봇 URL 상수
const TELEGRAM_BOT_URL = 'https://t.me/AnvilForgeBot';

// 단일 가격 데이터 소스 (VAT 포함, 월간 기준)
const PRICING_DATA = {
  global: [
    { plan: 'Micro', vcpu: '1 Core', ram: '1 GB', ssd: '25 GB', transfer: '1 TB', price: 8500 },
    { plan: 'Starter', vcpu: '1 Core', ram: '2 GB', ssd: '50 GB', transfer: '2 TB', price: 20400 },
    { plan: 'Pro', vcpu: '2 Cores', ram: '4 GB', ssd: '80 GB', transfer: '4 TB', price: 40700, featured: true },
    { plan: 'Business', vcpu: '4 Cores', ram: '8 GB', ssd: '160 GB', transfer: '5 TB', price: 67800 }
  ],
  seoul: [
    { plan: 'Nano', vcpu: '1 Core', ram: '512 MB', ssd: '20 GB', transfer: '1 TB', price: 6000 },
    { plan: 'Micro', vcpu: '1 Core', ram: '1 GB', ssd: '40 GB', transfer: '2 TB', price: 8500 },
    { plan: 'Starter', vcpu: '1 Core', ram: '2 GB', ssd: '60 GB', transfer: '3 TB', price: 17000 },
    { plan: 'Pro', vcpu: '2 Cores', ram: '4 GB', ssd: '80 GB', transfer: '4 TB', price: 33900, featured: true },
    { plan: 'Business', vcpu: '2 Cores', ram: '8 GB', ssd: '160 GB', transfer: '5 TB', price: 67800 }
  ]
};

// 런처 모달용 가격 - PRICING_DATA에서 파생
const LAUNCHER_PRICES = Object.fromEntries(
  PRICING_DATA.global.map(p => [p.plan, {
    base: p.price,
    seoul: PRICING_DATA.seoul.find(s => s.plan === p.plan)?.price || p.price
  }])
);

// 플랜별 스펙 정보 - PRICING_DATA에서 파생
const PLAN_SPECS = Object.fromEntries(
  PRICING_DATA.global.map(p => [p.plan, `${p.vcpu} / ${p.ram} RAM`])
);

// 리전 정보
const REGIONS = [
  { id: 'Seoul', flag: '🇰🇷', name: '서울', ping: '2ms' },
  { id: 'Tokyo', flag: '🇯🇵', name: '도쿄', ping: '35ms' },
  { id: 'Singapore', flag: '🇸🇬', name: '싱가포르', ping: '65ms' },
  { id: 'HongKong', flag: '🇭🇰', name: '홍콩', ping: '45ms' }
];

// OS 정보
const OS_LIST = [
  { id: 'Debian 12', icon: '🐧', name: 'Debian 12' },
  { id: 'Ubuntu 24.04', icon: '🟠', name: 'Ubuntu 24.04' },
  { id: 'CentOS 9', icon: '🔵', name: 'CentOS 9' },
  { id: 'Alpine', icon: '🏔️', name: 'Alpine' }
];

// 결제 방식
const PAYMENT_METHODS = [
  { id: 'monthly', name: '월간 결제', desc: '매월 자동 결제', discount: 0 },
  { id: 'yearly', name: '연간 결제', desc: '2개월 무료 (17% 할인)', discount: 17 }
];

// 배포 시뮬레이션 타이밍 상수
const DEPLOY_TIMING = {
  IMAGE_READY: 1500,
  CONTAINER_CREATED: 3000,
  NETWORK_CONFIGURED: 4500,
  COMPLETE: 6000
};

/**
 * 가격 포맷팅 (한국 원화)
 */
function formatPrice(price) {
  return '₩' + price.toLocaleString('ko-KR');
}

/**
 * Alpine.js 메인 앱 데이터 - 대화형 위자드
 */
function anvilApp() {
  return {
    // 모달 상태
    launcherOpen: false,
    launching: false,
    wizardStep: 0,  // 0: region, 1: plan, 2: os, 3: payment, 4: confirm, 5+: deploying
    deployStep: 0,

    // 서버 구성
    config: {
      region: null,
      plan: null,
      os: null,
      payment: null
    },

    // 대화 메시지
    messages: [],

    // 배포 로그
    logs: [],

    // 데이터 접근자
    regions: REGIONS,
    osList: OS_LIST,
    paymentMethods: PAYMENT_METHODS,

    // 플랜 목록 (리전에 따라 다름)
    get plans() {
      return ['Micro', 'Starter', 'Pro', 'Business'];
    },

    // 가격 조회
    getPrice(plan) {
      const prices = LAUNCHER_PRICES[plan];
      if (!prices) return '0';
      const price = this.config.region === 'Seoul' ? prices.seoul : prices.base;
      return price.toLocaleString('ko-KR');
    },

    // 월간 가격 (할인 적용)
    getFinalPrice() {
      const prices = LAUNCHER_PRICES[this.config.plan];
      if (!prices) return 0;
      let price = this.config.region === 'Seoul' ? prices.seoul : prices.base;
      if (this.config.payment === 'yearly') {
        price = Math.round(price * 0.83); // 17% 할인
      }
      return price;
    },

    // 플랜 스펙 조회
    getPlanSpec(plan) {
      return PLAN_SPECS[plan] || '';
    },

    // 리전 선택
    selectRegion(region) {
      this.config.region = region.id;
      this.addMessage('user', `${region.flag} ${region.name}`);
      this.wizardStep = 1;
      setTimeout(() => this.addMessage('bot', '어떤 사양이 필요하신가요?'), 300);
    },

    // 플랜 선택
    selectPlan(plan) {
      this.config.plan = plan;
      this.addMessage('user', `${plan} (${this.getPlanSpec(plan)})`);
      this.wizardStep = 2;
      setTimeout(() => this.addMessage('bot', '어떤 운영체제를 설치할까요?'), 300);
    },

    // OS 선택
    selectOS(os) {
      this.config.os = os.id;
      this.addMessage('user', `${os.icon} ${os.name}`);
      this.wizardStep = 3;
      setTimeout(() => this.addMessage('bot', '결제 방식을 선택해주세요.'), 300);
    },

    // 결제 방식 선택
    selectPayment(payment) {
      this.config.payment = payment.id;
      this.addMessage('user', payment.name);
      this.wizardStep = 4;
      setTimeout(() => this.addMessage('bot', '구성을 확인하고 서버를 생성해주세요! 🚀'), 300);
    },

    // 메시지 추가
    addMessage(type, text) {
      this.messages.push({ type, text, time: new Date() });
      // 스크롤 하단으로
      this.$nextTick(() => {
        const container = document.getElementById('chat-container');
        if (container) container.scrollTop = container.scrollHeight;
      });
    },

    // 이전 단계로
    goBack() {
      if (this.wizardStep > 0 && !this.launching) {
        // 마지막 2개 메시지 제거 (사용자 선택 + 봇 질문)
        this.messages.pop();
        this.messages.pop();
        this.wizardStep--;

        // 선택 초기화
        if (this.wizardStep === 0) this.config.region = null;
        else if (this.wizardStep === 1) this.config.plan = null;
        else if (this.wizardStep === 2) this.config.os = null;
        else if (this.wizardStep === 3) this.config.payment = null;
      }
    },

    // 서버 배포 시작
    startLaunch() {
      this.launching = true;
      this.wizardStep = 5;
      this.deployStep = 1;
      this.logs = [
        '🔄 배포를 시작합니다...',
        `📍 ${this.config.region} 리전 노드 선택 중...`,
        `📦 ${this.config.os} 이미지 준비 중...`
      ];

      setTimeout(() => {
        this.logs.push('✅ 이미지 준비 완료');
        this.logs.push('🔧 컨테이너 인스턴스 생성 중...');
        this.deployStep = 2;
      }, DEPLOY_TIMING.IMAGE_READY);

      setTimeout(() => {
        this.logs.push('✅ 컨테이너 생성 완료');
        this.logs.push('🌐 네트워크 및 방화벽 구성 중...');
        this.deployStep = 3;
      }, DEPLOY_TIMING.CONTAINER_CREATED);

      setTimeout(() => {
        const randomIP = Math.floor(Math.random() * 254 + 1);
        this.logs.push(`✅ IP 할당 완료: 45.12.89.${randomIP}`);
        this.logs.push('⚙️ 시스템 서비스 시작 중...');
        this.deployStep = 4;
      }, DEPLOY_TIMING.NETWORK_CONFIGURED);

      setTimeout(() => {
        this.launching = false;
        this.deployStep = 5;
        this.logs.push('🎉 서버가 활성화되었습니다!');
      }, DEPLOY_TIMING.COMPLETE);
    },

    // 런처 열기
    openLauncher() {
      this.launcherOpen = true;
      this.messages = [{ type: 'bot', text: '어느 리전에 서버를 생성할까요?', time: new Date() }];
    },

    // 런처 초기화
    resetLauncher() {
      this.launcherOpen = false;
      this.launching = false;
      this.wizardStep = 0;
      this.deployStep = 0;
      this.config = { region: null, plan: null, os: null, payment: null };
      this.messages = [];
      this.logs = [];
    },

    // ESC 키로 모달 닫기
    handleKeydown(event) {
      if (event.key === 'Escape' && this.launcherOpen && !this.launching) {
        this.resetLauncher();
      }
    }
  };
}

/**
 * 가격표 컴포넌트
 */
function pricingTable() {
  return {
    region: 'global',

    get plans() {
      return PRICING_DATA[this.region] || [];
    },

    formatPrice(price) {
      return formatPrice(price);
    },

    isSeoul() {
      return this.region === 'seoul';
    }
  };
}

/**
 * 탭 전환 (n8n/Terraform)
 */
function switchTab(tab) {
  const btnN8n = document.getElementById('btn-n8n');
  const btnTf = document.getElementById('btn-tf');
  const panelN8n = document.getElementById('panel-n8n');
  const panelTf = document.getElementById('panel-tf');

  // Null checks for DOM elements
  if (!btnN8n || !btnTf || !panelN8n || !panelTf) return;

  if (tab === 'n8n') {
    // Update ARIA states for n8n tab
    btnN8n.setAttribute('aria-selected', 'true');
    btnN8n.setAttribute('tabindex', '0');
    btnTf.setAttribute('aria-selected', 'false');
    btnTf.setAttribute('tabindex', '-1');

    // Update classes
    btnN8n.className = 'px-4 py-2 rounded-lg bg-purple-600 text-white text-sm font-bold transition shadow-lg shadow-purple-500/20';
    btnTf.className = 'px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-sm font-bold border border-slate-700 hover:text-white transition';
    panelN8n.classList.remove('hidden');
    panelTf.classList.add('hidden');
  } else {
    // Update ARIA states for Terraform tab
    btnTf.setAttribute('aria-selected', 'true');
    btnTf.setAttribute('tabindex', '0');
    btnN8n.setAttribute('aria-selected', 'false');
    btnN8n.setAttribute('tabindex', '-1');

    // Update classes
    btnN8n.className = 'px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-sm font-bold border border-slate-700 hover:text-white transition';
    btnTf.className = 'px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-bold transition shadow-lg shadow-blue-500/20';
    panelN8n.classList.add('hidden');
    panelTf.classList.remove('hidden');
  }
}

/**
 * 실시간 Ping 시뮬레이션
 */
function updatePing() {
  const regions = [
    { id: 'ping-kr', base: 2, variance: 2 },
    { id: 'ping-jp', base: 35, variance: 5 },
    { id: 'ping-hk', base: 45, variance: 8 },
    { id: 'ping-sg', base: 65, variance: 10 }
  ];

  regions.forEach(region => {
    const el = document.getElementById(region.id);
    if (el) {
      const jitter = Math.floor(Math.random() * region.variance) - (region.variance / 2);
      let val = Math.max(1, Math.floor(region.base + jitter));
      el.innerText = val;
    }
  });
}

// Ping 업데이트 시작 (visibility-aware)
let pingInterval;

function startPingUpdates() {
  if (!pingInterval) {
    pingInterval = setInterval(updatePing, 2000);
  }
}

function stopPingUpdates() {
  if (pingInterval) {
    clearInterval(pingInterval);
    pingInterval = null;
  }
}

// Visibility change handler
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    stopPingUpdates();
  } else {
    startPingUpdates();
  }
});

// Initial start
startPingUpdates();

// Tab switching with event listeners and keyboard navigation
document.addEventListener('DOMContentLoaded', () => {
  const btnN8n = document.getElementById('btn-n8n');
  const btnTf = document.getElementById('btn-tf');

  if (btnN8n && btnTf) {
    // Click event listeners
    btnN8n.addEventListener('click', () => switchTab('n8n'));
    btnTf.addEventListener('click', () => switchTab('tf'));

    // Keyboard navigation (Arrow keys)
    [btnN8n, btnTf].forEach(btn => {
      btn.addEventListener('keydown', (e) => {
        const currentTab = btn.getAttribute('data-tab');

        if (e.key === 'ArrowRight') {
          e.preventDefault();
          if (currentTab === 'n8n') {
            btnTf.focus();
            switchTab('tf');
          }
        } else if (e.key === 'ArrowLeft') {
          e.preventDefault();
          if (currentTab === 'tf') {
            btnN8n.focus();
            switchTab('n8n');
          }
        }
      });
    });
  }
});