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

// API 설정 (프록시 사용 - /api/* 경로)
const API_CONFIG = {
  baseUrl: '/api',  // Cloudflare Pages Functions 프록시 사용
  apiKey: null,     // 프록시에서 처리
  timeout: 10000
};

/**
 * API 서비스 - cloud-instances-api 워커 호출
 */
const ApiService = {
  /**
   * API 요청 헬퍼
   */
  async request(endpoint, options = {}) {
    const url = `${API_CONFIG.baseUrl}${endpoint}`;
    const headers = {
      'Content-Type': 'application/json',
      ...(API_CONFIG.apiKey && { 'X-API-Key': API_CONFIG.apiKey }),
      ...options.headers
    };

    try {
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), API_CONFIG.timeout);

      const response = await fetch(url, {
        ...options,
        headers,
        signal: controller.signal
      });

      clearTimeout(timeoutId);

      if (!response.ok) {
        const error = await response.json().catch(() => ({ message: response.statusText }));
        throw new Error(error.message || `HTTP ${response.status}`);
      }

      return await response.json();
    } catch (error) {
      if (error.name === 'AbortError') {
        throw new Error('요청 시간이 초과되었습니다.');
      }
      throw error;
    }
  },

  // Removed: health(), getInstances(), recommend(), sync()
  // These methods referenced deleted API functions (health.ts, instances.ts, recommend.ts)
};

// 텔레그램 봇 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 }
  ]
};

// Removed: Old launcher constants (LAUNCHER_PRICES, PLAN_SPECS, REGIONS, OS_LIST, PAYMENT_METHODS, DEPLOY_TIMING)
// These were only used by the deprecated Server Launcher Modal

// Mock 데이터 (API 없이 UI 테스트용)
const MOCK_SERVERS = [
  {
    id: 'srv-001',
    name: 'production-web',
    region: '🇯🇵 Tokyo',
    ip: '45.12.89.101',
    os: 'Debian 12',
    plan: 'Pro',
    status: 'running',
    created_at: '2026-01-15',
    vcpu: '2 Cores',
    ram: '4 GB',
    cost: 40700
  },
  {
    id: 'srv-002',
    name: 'dev-api',
    region: '🇰🇷 Seoul',
    ip: '45.12.89.102',
    os: 'Ubuntu 24.04',
    plan: 'Starter',
    status: 'stopped',
    created_at: '2026-01-20',
    vcpu: '1 Core',
    ram: '2 GB',
    cost: 17000
  }
];

const MOCK_STATS = {
  totalCost: 57700,
  totalServers: 2,
  runningServers: 1,
  costBreakdown: [
    { plan: 'Pro', count: 1, cost: 40700 },
    { plan: 'Starter', count: 1, cost: 17000 }
  ]
};

const MOCK_NOTIFICATIONS = [
  { id: 'n-001', type: 'info', title: '서버 생성 완료', message: 'production-web 서버가 Tokyo 리전에 생성되었습니다.', time: '10분 전', read: false },
  { id: 'n-002', type: 'warning', title: '결제 예정', message: '이번 달 결제가 3일 후 예정되어 있습니다. (₩57,700)', time: '1시간 전', read: false },
  { id: 'n-003', type: 'success', title: '시스템 업데이트 완료', message: 'dev-api 서버의 Ubuntu 패키지가 업데이트되었습니다.', time: '2일 전', read: true }
];

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

// ============================================================
// 서버 추천 마법사 - 기술 스택 기반 추천 규칙
// ============================================================
const WIZARD_CONFIG = {
  // 용도 목록 (객체 형태)
  purposes: {
    web: { icon: '🌐', name: '웹 서비스', desc: '웹사이트, API, SaaS' },
    game: { icon: '🎮', name: '게임 서버', desc: '마인크래프트, 발하임 등' },
    ai: { icon: '🤖', name: 'AI / ML', desc: '머신러닝, LLM, 데이터 분석' },
    dev: { icon: '💻', name: '개발 환경', desc: 'CI/CD, 테스트, 스테이징' },
    db: { icon: '🗄️', name: '데이터베이스', desc: 'MySQL, PostgreSQL, Redis' },
    other: { icon: '📦', name: '기타', desc: 'VPN, 프록시, 기타 용도' }
  },

  // 기술 스택 (용도별 필터링, category 추가)
  stacks: {
    web: [
      { id: 'wordpress', icon: '📝', name: 'WordPress', ram: 1024, cpu: 1, category: 'CMS' },
      { id: 'nginx', icon: '🟢', name: 'Nginx / Static', ram: 512, cpu: 1, category: 'Web Server' },
      { id: 'nodejs', icon: '🟩', name: 'Node.js', ram: 1024, cpu: 1, category: 'Runtime' },
      { id: 'python', icon: '🐍', name: 'Python / Django', ram: 1024, cpu: 1, category: 'Framework' },
      { id: 'php', icon: '🐘', name: 'PHP / Laravel', ram: 1024, cpu: 1, category: 'Framework' },
      { id: 'nextjs', icon: '▲', name: 'Next.js / React', ram: 2048, cpu: 2, category: 'Framework' },
      { id: 'docker', icon: '🐳', name: 'Docker 컨테이너', ram: 2048, cpu: 2, category: 'Container' }
    ],
    game: [
      { id: 'minecraft', icon: '⛏️', name: 'Minecraft', ram: 4096, cpu: 2, category: 'Sandbox' },
      { id: 'valheim', icon: '⚔️', name: 'Valheim', ram: 4096, cpu: 2, category: 'Survival' },
      { id: 'ark', icon: '🦖', name: 'ARK', ram: 8192, cpu: 4, category: 'Survival' },
      { id: 'palworld', icon: '🐾', name: 'Palworld', ram: 16384, cpu: 4, category: 'Survival' },
      { id: 'rust', icon: '🔫', name: 'Rust', ram: 8192, cpu: 4, category: 'Survival' },
      { id: 'terraria', icon: '🌲', name: 'Terraria', ram: 1024, cpu: 1, category: 'Sandbox' }
    ],
    ai: [
      { id: 'jupyter', icon: '📓', name: 'Jupyter Notebook', ram: 4096, cpu: 2, category: 'IDE' },
      { id: 'ollama', icon: '🦙', name: 'Ollama / LLM', ram: 16384, cpu: 4, category: 'LLM' },
      { id: 'stable', icon: '🎨', name: 'Stable Diffusion', ram: 16384, cpu: 4, gpu: true, category: 'Image AI' },
      { id: 'pytorch', icon: '🔥', name: 'PyTorch / TensorFlow', ram: 8192, cpu: 4, category: 'ML Framework' }
    ],
    dev: [
      { id: 'gitlab', icon: '🦊', name: 'GitLab', ram: 4096, cpu: 2, category: 'DevOps' },
      { id: 'jenkins', icon: '🔧', name: 'Jenkins', ram: 2048, cpu: 2, category: 'CI/CD' },
      { id: 'n8n', icon: '🔀', name: 'n8n 자동화', ram: 1024, cpu: 1, category: 'Automation' },
      { id: 'vscode', icon: '💠', name: 'VS Code Server', ram: 2048, cpu: 2, category: 'IDE' }
    ],
    db: [
      { id: 'mysql', icon: '🐬', name: 'MySQL / MariaDB', ram: 2048, cpu: 2, category: 'RDBMS' },
      { id: 'postgresql', icon: '🐘', name: 'PostgreSQL', ram: 2048, cpu: 2, category: 'RDBMS' },
      { id: 'mongodb', icon: '🍃', name: 'MongoDB', ram: 2048, cpu: 2, category: 'NoSQL' },
      { id: 'redis', icon: '🔴', name: 'Redis', ram: 1024, cpu: 1, category: 'Cache' }
    ],
    other: [
      { id: 'vpn', icon: '🔒', name: 'VPN / WireGuard', ram: 512, cpu: 1, category: 'Network' },
      { id: 'proxy', icon: '🌐', name: '프록시 서버', ram: 512, cpu: 1, category: 'Network' },
      { id: 'storage', icon: '💾', name: '파일 스토리지', ram: 1024, cpu: 1, category: 'Storage' },
      { id: 'custom', icon: '⚙️', name: '커스텀 설정', ram: 1024, cpu: 1, category: 'Custom' }
    ]
  },

  // 규모 선택 (객체 형태)
  scales: {
    personal: { name: '개인', desc: '1-10명', users: '1-10명', multiplier: 1, icon: '👤' },
    small: { name: '소규모', desc: '10-100명', users: '10-100명', multiplier: 1.5, icon: '👥' },
    medium: { name: '중규모', desc: '100-1000명', users: '100-1,000명', multiplier: 2.5, icon: '🏢' },
    large: { name: '대규모', desc: '1000명+', users: '1,000명+', multiplier: 4, icon: '🏙️' }
  }
};

/**
 * 서버 추천 로직 (룰 기반)
 * @param {string[]} selectedStacks - 선택된 스택 ID 목록
 * @param {string} scale - 규모 키 (personal, small, medium, large)
 * @returns {Object} 추천 결과 { economy, recommended, performance }
 */
function calculateRecommendation(selectedStacks, scale) {
  // 기본 요구사항 계산
  let totalRam = 0;
  let totalCpu = 0;
  let needsGpu = false;

  selectedStacks.forEach(stackId => {
    // 모든 카테고리에서 스택 찾기
    for (const category of Object.values(WIZARD_CONFIG.stacks)) {
      const stack = category.find(s => s.id === stackId);
      if (stack) {
        totalRam += stack.ram;
        totalCpu += stack.cpu;
        if (stack.gpu) needsGpu = true;
        break;
      }
    }
  });

  // 규모에 따른 배율 적용 (이제 객체 형태)
  const scaleConfig = WIZARD_CONFIG.scales[scale];
  const multiplier = scaleConfig?.multiplier || 1;

  totalRam = Math.ceil(totalRam * multiplier);
  totalCpu = Math.ceil(totalCpu * multiplier);

  // 최소/최대 제한
  totalRam = Math.max(1024, Math.min(totalRam, 65536));
  totalCpu = Math.max(1, Math.min(totalCpu, 16));

  // 가격 계산 (대략적인 추정, 실제로는 API 호출 필요)
  const estimatePrice = (cpu, ram) => {
    // 기본 가격: vCPU당 $5, GB당 $2 (월간)
    return cpu * 5 + (ram / 1024) * 2;
  };

  // 추천 플랜 결정 (객체 형태로 반환)
  return {
    economy: {
      cpu: Math.max(1, Math.floor(totalCpu * 0.7)),
      ram: Math.max(1024, Math.floor(totalRam * 0.7)),
      price: estimatePrice(Math.max(1, Math.floor(totalCpu * 0.7)), Math.max(1024, Math.floor(totalRam * 0.7)))
    },
    recommended: {
      cpu: totalCpu,
      ram: totalRam,
      price: estimatePrice(totalCpu, totalRam)
    },
    performance: {
      cpu: Math.min(16, Math.ceil(totalCpu * 1.5)),
      ram: Math.min(65536, Math.ceil(totalRam * 1.5)),
      price: estimatePrice(Math.min(16, Math.ceil(totalCpu * 1.5)), Math.min(65536, Math.ceil(totalRam * 1.5)))
    },
    needsGpu,
    totalStacks: selectedStacks.length,
    scale
  };
}

/**
 * Alpine.js 메인 앱 데이터 - 대화형 위자드
 */
function anvilApp() {
  return {
    // ============================================================
    // 서버 추천 마법사 상태
    // ============================================================
    wizardOpen: false,
    wizardCurrentStep: 0, // 0: purpose, 1: stack, 2: scale, 3: result
    wizardPurpose: null,
    wizardStacks: [],  // 선택된 스택들 (다중 선택)
    wizardScale: null,
    wizardRecommendations: null,
    wizardSelectedPlan: null,

    // 마법사 데이터 접근자
    get wizardPurposes() { return WIZARD_CONFIG.purposes; },
    get wizardScales() { return WIZARD_CONFIG.scales; },

    // 현재 용도에 맞는 스택 목록
    get wizardAvailableStacks() {
      if (!this.wizardPurpose) return [];
      return WIZARD_CONFIG.stacks[this.wizardPurpose] || [];
    },

    // 마법사 열기
    openWizard() {
      this.wizardOpen = true;
      this.wizardCurrentStep = 0;
      this.wizardPurpose = null;
      this.wizardStacks = [];
      this.wizardScale = null;
      this.wizardRecommendations = null;
      this.wizardSelectedPlan = null;
    },

    // 마법사 닫기
    closeWizard() {
      this.wizardOpen = false;
    },

    // 용도 선택
    selectWizardPurpose(purposeId) {
      this.wizardPurpose = purposeId;
      this.wizardStacks = []; // 스택 초기화
      this.wizardCurrentStep = 1;
    },

    // 스택 토글 (다중 선택)
    toggleWizardStack(stackId) {
      const idx = this.wizardStacks.indexOf(stackId);
      if (idx === -1) {
        this.wizardStacks.push(stackId);
      } else {
        this.wizardStacks.splice(idx, 1);
      }
    },

    // 스택 선택 완료 → 규모 선택으로
    confirmWizardStacks() {
      if (this.wizardStacks.length === 0) {
        alert('최소 1개의 기술 스택을 선택해주세요.');
        return;
      }
      this.wizardCurrentStep = 2;
    },

    // 규모 선택 → 추천 결과로
    selectWizardScale(scaleId) {
      this.wizardScale = scaleId;
      this.wizardRecommendations = calculateRecommendation(this.wizardStacks, scaleId);
      this.wizardCurrentStep = 3;
    },

    // 이전 단계로
    wizardGoBack() {
      if (this.wizardCurrentStep > 0) {
        this.wizardCurrentStep--;
      }
    },

    // 추천 플랜 선택 → 텔레그램으로 연결
    selectWizardPlan(tierKey) {
      const plan = this.wizardRecommendations[tierKey];
      if (!plan) return;

      this.wizardSelectedPlan = plan;

      // 텔레그램 봇으로 연결 (선택한 사양 정보 포함)
      const purposeName = WIZARD_CONFIG.purposes[this.wizardPurpose]?.name || this.wizardPurpose;
      const scaleName = WIZARD_CONFIG.scales[this.wizardScale]?.name || this.wizardScale;
      const stackNames = this.wizardStacks.map(id => this.getWizardStackName(id)).join(', ');
      const tierLabels = { economy: 'Economy', recommended: 'Recommended', performance: 'Performance' };

      window.open(`https://t.me/AnvilForgeBot?start=wizard_${tierKey}_${plan.cpu}c_${plan.ram}m`, '_blank');

      this.closeWizard();
    },

    // RAM 포맷팅
    formatWizardRam(mb) {
      if (mb >= 1024) {
        return (mb / 1024).toFixed(mb % 1024 === 0 ? 0 : 1) + ' GB';
      }
      return mb + ' MB';
    },

    // 현재 용도에 맞는 스택 그룹 반환
    getWizardStacksByPurpose() {
      if (!this.wizardPurpose) return {};
      const purposeStacks = WIZARD_CONFIG.stacks[this.wizardPurpose] || [];
      // 카테고리별로 그룹핑
      const grouped = {};
      for (const stack of purposeStacks) {
        if (!grouped[stack.category]) {
          grouped[stack.category] = [];
        }
        grouped[stack.category].push(stack);
      }
      return grouped;
    },

    // 스택 ID로 이름 찾기
    getWizardStackName(stackId) {
      for (const purposeStacks of Object.values(WIZARD_CONFIG.stacks)) {
        const stack = purposeStacks.find(s => s.id === stackId);
        if (stack) return stack.name;
      }
      return stackId;
    },

    // 대시보드 상태
    dashboardMode: false,  // true면 대시보드, false면 랜딩
    currentView: 'servers', // 'servers' | 'stats' | 'notifications'

    // 텔레그램 연동
    telegram: {
      isAvailable: false,  // 텔레그램 환경인지
      user: null,          // 사용자 정보
      initData: null       // 검증용 데이터
    },

    // 웹 로그인 사용자 (텔레그램 로그인 위젯 사용)
    webUser: null,

    // 현재 로그인된 사용자 (텔레그램 또는 웹)
    get currentUser() {
      return this.telegram.user || this.webUser;
    },

    // 서버 목록
    servers: [],
    loadingServers: false,

    // 통계
    stats: {
      totalCost: 0,
      totalServers: 0,
      runningServers: 0,
      costBreakdown: []
    },

    // 알림
    notifications: [],
    unreadCount: 0,

    // API 상태
    apiLoading: false,
    apiError: null,

    // 초기화 (텔레그램 연동 + 대시보드)
    init() {
      if (window.Telegram?.WebApp) {
        const tg = window.Telegram.WebApp;
        tg.ready();
        tg.expand();

        this.telegram.isAvailable = true;
        this.telegram.user = tg.initDataUnsafe.user || null;
        this.telegram.initData = tg.initData;

        // 텔레그램 테마 색상 적용 (선택)
        // document.body.style.backgroundColor = tg.backgroundColor;

        console.log('[Telegram] Mini App initialized', {
          user: this.telegram.user,
          platform: tg.platform
        });

        // 텔레그램 환경이면 대시보드 모드 활성화
        // (user가 없어도 텔레그램에서 열린 경우 대시보드 표시)
        this.dashboardMode = true;
        this.loadDashboard();

        console.log('[Telegram] Dashboard mode activated', {
          isAvailable: this.telegram.isAvailable,
          hasUser: !!this.telegram.user
        });
      } else {
        console.log('[Telegram] Running in web browser mode');
      }
    },

    // 미니앱 전용 초기화 (/app 페이지용)
    initMiniApp() {
      const tg = window.Telegram?.WebApp;

      // 실제 텔레그램 환경인지 확인 (initData가 있어야 진짜 텔레그램)
      const isRealTelegram = tg && tg.initData && tg.initData.length > 0;

      if (isRealTelegram) {
        tg.ready();
        tg.expand();

        this.telegram.isAvailable = true;
        this.telegram.user = tg.initDataUnsafe.user || null;
        this.telegram.initData = tg.initData;

        console.log('[MiniApp] Telegram environment detected', {
          user: this.telegram.user,
          platform: tg.platform
        });

        // 미니앱은 무조건 대시보드 로드
        this.loadDashboard();
      } else {
        console.log('[MiniApp] Not in Telegram environment');
        this.telegram.isAvailable = false;

        // 웹 브라우저: localStorage에서 webUser 복원
        const savedUser = localStorage.getItem('anvil_web_user');
        if (savedUser) {
          try {
            this.webUser = JSON.parse(savedUser);
            console.log('[MiniApp] Web user restored from localStorage:', this.webUser);
            this.loadDashboard();
          } catch (e) {
            console.error('[MiniApp] Failed to parse saved user:', e);
            localStorage.removeItem('anvil_web_user');
            // 복원 실패시 로그인 위젯 표시
            this.loadTelegramLoginWidget();
          }
        } else {
          // 로그인 필요 - 텔레그램 로그인 위젯 로드
          this.loadTelegramLoginWidget();
        }
      }
    },

    // 텔레그램 로그인 위젯 동적 로드
    loadTelegramLoginWidget() {
      // Alpine이 DOM을 렌더링할 시간을 주기 위해 약간 지연
      setTimeout(() => {
        const container = document.getElementById('telegram-login-container');
        if (!container) {
          console.log('[MiniApp] Login container not found, retrying...');
          setTimeout(() => this.loadTelegramLoginWidget(), 100);
          return;
        }

        // 이미 위젯이 있으면 스킵
        if (container.querySelector('iframe')) {
          console.log('[MiniApp] Login widget already loaded');
          return;
        }

        console.log('[MiniApp] Loading Telegram Login Widget...');

        // 텔레그램 위젯 스크립트 동적 생성
        const script = document.createElement('script');
        script.src = 'https://telegram.org/js/telegram-widget.js?22';
        script.setAttribute('data-telegram-login', 'AnvilForgeBot');
        script.setAttribute('data-size', 'large');
        script.setAttribute('data-radius', '12');
        script.setAttribute('data-onauth', 'onTelegramAuth(user)');
        script.setAttribute('data-request-access', 'write');
        script.async = true;

        container.appendChild(script);
        console.log('[MiniApp] Telegram Login Widget script added');
      }, 50);
    },

    // 웹 텔레그램 로그인 핸들러
    handleWebLogin(user) {
      console.log('[MiniApp] Web login received:', user);

      // 사용자 정보 저장
      this.webUser = {
        id: user.id,
        first_name: user.first_name,
        last_name: user.last_name || '',
        username: user.username || '',
        photo_url: user.photo_url || '',
        auth_date: user.auth_date
      };

      // localStorage에 저장 (세션 유지)
      localStorage.setItem('anvil_web_user', JSON.stringify(this.webUser));

      console.log('[MiniApp] Web user logged in:', this.webUser);

      // 대시보드 로드
      this.loadDashboard();
    },

    // 로그아웃
    logout() {
      console.log('[MiniApp] Logging out...');

      // webUser 초기화
      this.webUser = null;
      localStorage.removeItem('anvil_web_user');

      // 서버/통계/알림 초기화
      this.servers = [];
      this.stats = { totalCost: 0, totalServers: 0, runningServers: 0, costBreakdown: [] };
      this.notifications = [];
      this.unreadCount = 0;

      console.log('[MiniApp] Logged out successfully');
    },

    // 대시보드 초기 로드
    async loadDashboard() {
      console.log('[Dashboard] Loading dashboard data...');
      await Promise.all([
        this.fetchServers(),
        this.fetchStats(),
        this.fetchNotifications()
      ]);
    },

    // 서버 목록 조회
    async fetchServers() {
      this.loadingServers = true;
      this.apiError = null;

      try {
        // TODO: 실제 API 호출로 교체
        // const response = await fetch('/api/servers', {
        //   headers: { 'X-Telegram-Init-Data': this.telegram.initData }
        // });
        // this.servers = await response.json();

        // Mock 데이터 사용
        await new Promise(resolve => setTimeout(resolve, 500));
        this.servers = [...MOCK_SERVERS];
        console.log('[Dashboard] Servers loaded:', this.servers.length);
      } catch (error) {
        console.error('[Dashboard] Failed to fetch servers:', error);
        this.apiError = '서버 목록을 불러오는데 실패했습니다.';
      } finally {
        this.loadingServers = false;
      }
    },

    // 통계 조회
    async fetchStats() {
      try {
        // TODO: 실제 API 호출로 교체
        await new Promise(resolve => setTimeout(resolve, 300));
        this.stats = { ...MOCK_STATS };
        console.log('[Dashboard] Stats loaded:', this.stats);
      } catch (error) {
        console.error('[Dashboard] Failed to fetch stats:', error);
      }
    },

    // 알림 조회
    async fetchNotifications() {
      try {
        // TODO: 실제 API 호출로 교체
        await new Promise(resolve => setTimeout(resolve, 400));
        this.notifications = [...MOCK_NOTIFICATIONS];
        this.unreadCount = this.notifications.filter(n => !n.read).length;
        console.log('[Dashboard] Notifications loaded:', this.notifications.length);
      } catch (error) {
        console.error('[Dashboard] Failed to fetch notifications:', error);
      }
    },

    // 서버 시작
    async startServer(serverId) {
      const server = this.servers.find(s => s.id === serverId);
      if (!server) return;

      console.log('[Dashboard] Starting server:', serverId);
      this.apiLoading = true;

      try {
        // TODO: 실제 API 호출로 교체
        await new Promise(resolve => setTimeout(resolve, 1000));
        server.status = 'running';
        this.stats.runningServers++;
        console.log('[Dashboard] Server started:', serverId);
      } catch (error) {
        console.error('[Dashboard] Failed to start server:', error);
        alert('서버를 시작하는데 실패했습니다.');
      } finally {
        this.apiLoading = false;
      }
    },

    // 서버 중지
    async stopServer(serverId) {
      const server = this.servers.find(s => s.id === serverId);
      if (!server) return;

      console.log('[Dashboard] Stopping server:', serverId);
      this.apiLoading = true;

      try {
        // TODO: 실제 API 호출로 교체
        await new Promise(resolve => setTimeout(resolve, 1000));
        server.status = 'stopped';
        this.stats.runningServers--;
        console.log('[Dashboard] Server stopped:', serverId);
      } catch (error) {
        console.error('[Dashboard] Failed to stop server:', error);
        alert('서버를 중지하는데 실패했습니다.');
      } finally {
        this.apiLoading = false;
      }
    },

    // 서버 삭제
    async deleteServer(serverId) {
      if (!confirm('정말로 이 서버를 삭제하시겠습니까?')) return;

      console.log('[Dashboard] Deleting server:', serverId);
      this.apiLoading = true;

      try {
        // TODO: 실제 API 호출로 교체
        await new Promise(resolve => setTimeout(resolve, 800));

        const serverIndex = this.servers.findIndex(s => s.id === serverId);
        if (serverIndex !== -1) {
          const deletedServer = this.servers[serverIndex];
          this.servers.splice(serverIndex, 1);

          // 통계 업데이트
          this.stats.totalServers--;
          this.stats.totalCost -= deletedServer.cost;
          if (deletedServer.status === 'running') {
            this.stats.runningServers--;
          }

          console.log('[Dashboard] Server deleted:', serverId);
        }
      } catch (error) {
        console.error('[Dashboard] Failed to delete server:', error);
        alert('서버를 삭제하는데 실패했습니다.');
      } finally {
        this.apiLoading = false;
      }
    },

    // 모든 알림 읽음 처리
    markAllRead() {
      this.notifications.forEach(n => n.read = true);
      this.unreadCount = 0;
      console.log('[Dashboard] All notifications marked as read');
    },

    // 뷰 전환
    switchView(view) {
      this.currentView = view;
      console.log('[Dashboard] View switched to:', view);
    },

    // Removed: API test methods (testApiHealth, fetchCloudInstances, getRecommendation)
    // These referenced deleted API functions
  };
}

/**
 * 가격표 컴포넌트 - API 연동 버전 (아시아 전용, 캐싱 적용)
 */
function pricingTable() {
  // 캐시 키 및 유효 시간 (1시간)
  const CACHE_KEY = 'anvil_pricing_cache_v3'; // v3: Global 탭 통합 (도쿄/오사카/싱가폴)
  const CACHE_TTL = 60 * 60 * 1000; // 1시간

  // Fallback 데이터 (API 실패 시 사용) - Linode: Tokyo R1/R2/Osaka/Singapore, Vultr: Seoul
  const FALLBACK_DATA = [
    { id: 'f1', vcpu: 1, memory_mb: 1024, storage_gb: 25, transfer_tb: 1, provider: { name: 'linode' }, region: { region_name: 'Tokyo 2, JP' }, pricing: { monthly_price: 5 } },
    { id: 'f2', vcpu: 2, memory_mb: 4096, storage_gb: 80, transfer_tb: 4, provider: { name: 'linode' }, region: { region_name: 'Tokyo 2, JP' }, pricing: { monthly_price: 24 } },
    { id: 'f3', vcpu: 1, memory_mb: 1024, storage_gb: 25, transfer_tb: 1, provider: { name: 'linode' }, region: { region_name: 'Tokyo 3, JP' }, pricing: { monthly_price: 5 } },
    { id: 'f4', vcpu: 2, memory_mb: 4096, storage_gb: 80, transfer_tb: 4, provider: { name: 'linode' }, region: { region_name: 'Tokyo 3, JP' }, pricing: { monthly_price: 24 } },
    { id: 'f5', vcpu: 1, memory_mb: 1024, storage_gb: 25, transfer_tb: 1, provider: { name: 'linode' }, region: { region_name: 'Osaka, JP', region_code: 'jp-osa' }, pricing: { monthly_price: 5 } },
    { id: 'f6', vcpu: 2, memory_mb: 4096, storage_gb: 80, transfer_tb: 4, provider: { name: 'linode' }, region: { region_name: 'Osaka, JP', region_code: 'jp-osa' }, pricing: { monthly_price: 24 } },
    { id: 'f7', vcpu: 1, memory_mb: 1024, storage_gb: 25, transfer_tb: 1, provider: { name: 'linode' }, region: { region_name: 'Singapore, SG' }, pricing: { monthly_price: 5 } },
    { id: 'f8', vcpu: 2, memory_mb: 4096, storage_gb: 80, transfer_tb: 4, provider: { name: 'linode' }, region: { region_name: 'Singapore, SG' }, pricing: { monthly_price: 24 } },
    { id: 'f9', vcpu: 1, memory_mb: 1024, storage_gb: 25, transfer_tb: 1, provider: { name: 'vultr' }, region: { region_name: 'Seoul, KR' }, pricing: { monthly_price: 6 } },
    { id: 'f10', vcpu: 2, memory_mb: 4096, storage_gb: 80, transfer_tb: 4, provider: { name: 'vultr' }, region: { region_name: 'Seoul, KR' }, pricing: { monthly_price: 24 } },
  ];

  return {
    // 필터 상태
    sortBy: 'vcpu',          // 'vcpu' | 'memory' | 'price'
    sortOrder: 'asc',        // 'asc' | 'desc'
    selectedCity: 'global', // 'global' | 'seoul' | 'gpu-japan' | 'gpu-korea'
    selectedSeoulType: 'vc2', // 'vc2' | 'vhf' (서울 서브탭)
    selectedGlobalType: 'standard', // 'standard' | 'dedicated' | 'premium' (글로벌 서브탭)

    // 도시 목록: Linode(도쿄/오사카/싱가폴 동일가격), Seoul(Vultr), GPU
    cities: [
      { id: 'global', name: '도쿄/오사카/싱가폴', flag: '🌏', provider: 'linode' },
      { id: 'seoul', name: 'Seoul', flag: '🇰🇷', provider: 'vultr' },
      { id: 'gpu-japan', name: 'GPU Japan', flag: '🇯🇵', provider: 'linode', isGpu: true },
      { id: 'gpu-korea', name: 'GPU Korea', flag: '🇰🇷', provider: 'vultr', isGpu: true },
    ],

    // 글로벌(Linode) 서브탭 (인스턴스 타입별)
    globalTypes: [
      { id: 'standard', name: 'Standard', tooltip: '공유 CPU · 1-32 vCPU · 1-192GB RAM\n버스트 가능한 CPU로 비용 효율적\n웹서버, 개발환경에 적합' },
      { id: 'dedicated', name: 'Dedicated', tooltip: '전용 CPU · 4-64 vCPU · 8-512GB RAM\n100% CPU 자원 보장\nCI/CD, 게임서버, 고부하 작업에 적합' },
      { id: 'premium', name: 'Premium', tooltip: 'AMD EPYC 9004 · 1-64 vCPU · 2-512GB RAM\nDDR5 메모리 · NVMe 스토리지\n최신 세대 고성능 컴퓨팅' },
      { id: 'highmem', name: 'High Memory', tooltip: '고밀도 메모리 · 2-16 vCPU · 24-300GB RAM\nvCPU당 RAM 비율 최대화\n데이터베이스, 캐싱, 분석 워크로드' },
    ],

    // 서울 서브탭 (인스턴스 타입별)
    seoulTypes: [
      { id: 'vc2', name: 'Cloud Compute', tooltip: '일반 SSD · 1-24 vCPU · 1-96GB RAM\n가성비 좋은 범용 인스턴스\n웹호스팅, 소규모 앱에 적합' },
      { id: 'vhf', name: 'High Frequency', tooltip: 'NVMe SSD · 3GHz+ CPU · 1-12 vCPU\n고클럭 프로세서로 단일 스레드 성능 극대화\n게임서버, 실시간 처리에 적합' },
      { id: 'vhp', name: 'High Performance', tooltip: 'AMD EPYC · 1-16 vCPU · 1-64GB RAM\n전용 CPU 코어 · NVMe 스토리지\n고성능 컴퓨팅, ML 추론에 적합' },
      { id: 'voc', name: 'Optimized', tooltip: '특화 인스턴스 · 다양한 구성\nCPU/메모리/스토리지 최적화 버전\n특정 워크로드에 맞춤 선택' },
      { id: 'vx1', name: 'Extreme', tooltip: '초고밀도 · 4-24 vCPU · 96-384GB RAM\n고메모리 비율 인스턴스\n대규모 DB, 인메모리 캐시에 적합' },
    ],

    // 데이터 상태
    instances: [],
    filteredInstances: [],
    loading: false,
    error: null,
    lastUpdate: null,
    fromCache: false,

    // 지원 리전 패턴 (Tokyo, Osaka, Singapore = Linode / Seoul = Vultr)
    supportedRegions: ['Tokyo', 'Osaka', 'Singapore', 'Seoul', 'ap-northeast', 'ap-southeast', 'jp-osa'],

    // 초기화
    async init() {
      await this.loadInstances();
    },

    // 캐시에서 로드 또는 API 호출
    async loadInstances() {
      // 캐시 확인
      const cached = this.getCache();
      if (cached) {
        console.log('[PricingTable] Using cached data');
        this.instances = this.filterAndSort(cached.instances);
        this.filteredInstances = this.applyFilters(this.instances);
        this.lastUpdate = new Date(cached.timestamp);
        this.fromCache = true;
        return;
      }

      // 캐시 없으면 API 호출
      await this.fetchFromApi();
    },

    // 캐시 조회
    getCache() {
      try {
        const data = localStorage.getItem(CACHE_KEY);
        if (!data) return null;

        const parsed = JSON.parse(data);
        const age = Date.now() - parsed.timestamp;

        if (age > CACHE_TTL) {
          console.log('[PricingTable] Cache expired');
          localStorage.removeItem(CACHE_KEY);
          return null;
        }

        return parsed;
      } catch (e) {
        console.error('[PricingTable] Cache read error:', e);
        return null;
      }
    },

    // 캐시 저장
    setCache(instances) {
      try {
        const data = {
          instances,
          timestamp: Date.now()
        };
        localStorage.setItem(CACHE_KEY, JSON.stringify(data));
        console.log('[PricingTable] Cache saved');
      } catch (e) {
        console.error('[PricingTable] Cache write error:', e);
      }
    },

    // API에서 인스턴스 가져오기 (D1 직접 조회 - rate limit 없음)
    async fetchFromApi() {
      this.loading = true;
      this.error = null;
      this.fromCache = false;

      try {
        // D1 직접 조회 엔드포인트 사용 (rate limit 없음)
        const response = await fetch('/api/pricing');
        const data = await response.json();

        if (!response.ok || !data.success) {
          throw new Error(data.error || `HTTP ${response.status}`);
        }

        const instances = data.instances || [];
        console.log('[PricingTable] Fetched', instances.length, 'instances from D1');
        console.log('[PricingTable] Region counts:', data.region_counts);

        if (instances.length > 0) {
          // 캐시에 저장
          this.setCache(instances);

          this.instances = this.filterAndSort(instances);
          this.filteredInstances = this.applyFilters(this.instances);
          this.lastUpdate = new Date();

          console.log('[PricingTable] Loaded', this.instances.length, 'instances (Linode: JP/SG, Vultr: KR)');
        } else {
          throw new Error('인스턴스 데이터가 없습니다.');
        }
      } catch (err) {
        console.error('[PricingTable] Error:', err);

        // 에러 시 만료된 캐시 사용
        const expiredCache = localStorage.getItem(CACHE_KEY);
        if (expiredCache) {
          try {
            const parsed = JSON.parse(expiredCache);
            this.instances = this.filterAndSort(parsed.instances);
            this.filteredInstances = this.applyFilters(this.instances);
            this.lastUpdate = new Date(parsed.timestamp);
            this.fromCache = true;
            this.error = null;
            console.log('[PricingTable] Using expired cache as fallback');
            return;
          } catch (e) {
            // 캐시 파싱 실패, fallback 사용
          }
        }

        // 캐시도 없으면 fallback 데이터 사용
        console.log('[PricingTable] Using fallback data');
        this.instances = this.filterAndSort(FALLBACK_DATA);
        this.filteredInstances = this.applyFilters(this.instances);
        this.fromCache = true;
        this.error = null;
      } finally {
        this.loading = false;
      }
    },

    // 필터 및 정렬 적용 (모든 인스턴스 표시)
    filterAndSort(instances) {
      let filtered = [...instances];

      // 정렬 적용
      filtered.sort((a, b) => {
        switch (this.sortBy) {
          case 'price':
            return (a.pricing?.monthly_price || 0) - (b.pricing?.monthly_price || 0);
          case 'vcpu':
            return (b.vcpu || 0) - (a.vcpu || 0);
          case 'memory':
            return (b.memory_mb || 0) - (a.memory_mb || 0);
          default:
            return (a.pricing?.monthly_price || 0) - (b.pricing?.monthly_price || 0);
        }
      });

      return filtered;
    },

    // 리전 이름 정규화 (Tokyo 2, JP -> Tokyo)
    normalizeRegion(regionName) {
      const name = regionName.toLowerCase();
      if (name.includes('osaka') || name.includes('jp-osa')) return 'Osaka';
      if (name.includes('tokyo')) return 'Tokyo';
      if (name.includes('singapore')) return 'Singapore';
      if (name.includes('seoul')) return 'Seoul';
      return regionName.split(',')[0].trim();
    },

    // 필터 변경 핸들러 (도시 필터 + 정렬 적용)
    onFilterChange() {
      this.filteredInstances = this.applyFilters(this.instances);
    },

    // 정렬 토글 (같은 컬럼 클릭 시 오름/내림 전환)
    toggleSort(column) {
      if (this.sortBy === column) {
        // 같은 컬럼: 방향 토글
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        // 다른 컬럼: 기본 방향 설정
        this.sortBy = column;
        // vcpu, memory는 내림차순이 기본, price는 오름차순이 기본
        this.sortOrder = column === 'price' ? 'asc' : 'desc';
      }
      this.onFilterChange();
    },

    // 도시 필터 + 정렬 적용
    applyFilters(instances) {
      let filtered = [...instances];

      // 도시 필터 (항상 적용)
      // Seoul은 서브탭으로 인스턴스 타입 선택
      filtered = filtered.filter(inst => {
        const regionName = (inst.region?.region_name || '').toLowerCase();
        const regionCode = (inst.region?.region_code || '').toLowerCase();
        const instId = (inst.id || '').toLowerCase();
        const hasGpu = inst.has_gpu || inst.gpu_count > 0;
        switch (this.selectedCity) {
          case 'global':
            // Global: Tokyo 2 + 서브탭(Standard/Dedicated/Premium/HighMem) 필터링, GPU 제외
            if (!regionName.includes('tokyo 2') || hasGpu) return false;
            switch (this.selectedGlobalType) {
              case 'standard': return instId.startsWith('g6-nanode') || instId.startsWith('g6-standard');
              case 'dedicated': return instId.startsWith('g6-dedicated');
              case 'premium': return instId.startsWith('g7-premium');
              case 'highmem': return instId.startsWith('g7-highmem');
              default: return false;
            }
          case 'seoul':
            // 서울은 서브탭(selectedSeoulType)으로 필터링, GPU 제외
            // vhp는 AMD/Intel 중복 → AMD만 표시
            const isSeoul = regionName.includes('seoul');
            if (!isSeoul || !instId.startsWith(this.selectedSeoulType + '-') || hasGpu) return false;
            // vhp: AMD/Intel 중복 방지 → AMD만 표시 (Intel은 레거시)
            if (this.selectedSeoulType === 'vhp' && instId.endsWith('-intel')) return false;
            return true;
          case 'gpu-japan':
            // 일본 GPU (도쿄만, 중복 방지)
            return regionName.includes('tokyo 2') && hasGpu;
          case 'gpu-korea':
            // 한국 GPU
            return regionName.includes('seoul') && hasGpu;
          default: return false;
        }
      });

      // 정렬 (sortOrder 반영, 보조 정렬: 가격)
      const order = this.sortOrder === 'asc' ? 1 : -1;
      filtered.sort((a, b) => {
        let diff = 0;
        switch (this.sortBy) {
          case 'price':
            diff = (a.pricing?.monthly_price || 0) - (b.pricing?.monthly_price || 0);
            break;
          case 'vcpu':
            diff = (a.vcpu || 0) - (b.vcpu || 0);
            // 동일 vcpu시 가격순 정렬 (보조 키)
            if (diff === 0) {
              diff = (a.pricing?.monthly_price || 0) - (b.pricing?.monthly_price || 0);
            }
            break;
          case 'memory':
            diff = (a.memory_mb || 0) - (b.memory_mb || 0);
            // 동일 메모리시 가격순 정렬 (보조 키)
            if (diff === 0) {
              diff = (a.pricing?.monthly_price || 0) - (b.pricing?.monthly_price || 0);
            }
            break;
          default:
            diff = (a.vcpu || 0) - (b.vcpu || 0);
        }
        return diff * order;
      });

      return filtered;
    },

    // 도시별 인스턴스 수 조회
    getInstanceCountByCity(cityId) {
      return this.instances.filter(inst => {
        const regionName = (inst.region?.region_name || '').toLowerCase();
        const hasGpu = inst.has_gpu || inst.gpu_count > 0;
        switch (cityId) {
          case 'global':
            // Global: Tokyo 2 전체 (GPU 제외) - 서브탭 카운트는 별도
            return regionName.includes('tokyo 2') && !hasGpu;
          case 'seoul':
            // 전체 서울 인스턴스 (GPU 제외)
            return regionName.includes('seoul') && !hasGpu;
          case 'gpu-japan':
            // 일본 GPU (Tokyo 2 대표)
            return regionName.includes('tokyo 2') && hasGpu;
          case 'gpu-korea':
            // 한국 GPU
            return regionName.includes('seoul') && hasGpu;
          default: return false;
        }
      }).length;
    },

    // 서울 서브탭별 인스턴스 수 조회
    getSeoulTypeCount(typeId) {
      return this.instances.filter(inst => {
        const regionName = (inst.region?.region_name || '').toLowerCase();
        const instId = (inst.id || '').toLowerCase();
        return regionName.includes('seoul') && instId.startsWith(typeId + '-');
      }).length;
    },

    // 글로벌 서브탭별 인스턴스 수 조회
    getGlobalTypeCount(typeId) {
      return this.instances.filter(inst => {
        const regionName = (inst.region?.region_name || '').toLowerCase();
        const instId = (inst.id || '').toLowerCase();
        const hasGpu = inst.has_gpu || inst.gpu_count > 0;
        if (!regionName.includes('tokyo 2') || hasGpu) return false;
        switch (typeId) {
          case 'standard': return instId.startsWith('g6-nanode') || instId.startsWith('g6-standard');
          case 'dedicated': return instId.startsWith('g6-dedicated');
          case 'premium': return instId.startsWith('g7-premium');
          case 'highmem': return instId.startsWith('g7-highmem');
          default: return false;
        }
      }).length;
    },

    // 강제 새로고침 (캐시 삭제 후 API 호출)
    async forceRefresh() {
      localStorage.removeItem(CACHE_KEY);
      await this.fetchFromApi();
    },

    // 가격 포맷 (USD)
    formatUsd(price) {
      if (price == null) return '-';
      return '$' + price.toFixed(2);
    },

    // 가격 포맷 (KRW) - DB에서 직접 가져온 한화 금액
    formatKrw(krwPrice) {
      if (krwPrice == null) return '-';
      return '₩' + Math.round(krwPrice).toLocaleString('ko-KR');
    },

    // 시간당 가격 포맷 (KRW) - DB에서 직접 가져온 한화 금액
    formatKrwHourly(krwPrice) {
      if (krwPrice == null) return '-';
      return '₩' + Math.round(krwPrice).toLocaleString('ko-KR');
    },

    // 메모리 포맷
    formatMemory(mb) {
      if (mb >= 1024) {
        return (mb / 1024).toFixed(mb % 1024 === 0 ? 0 : 1) + ' GB';
      }
      return mb + ' MB';
    },

    // 스토리지 포맷
    formatStorage(gb) {
      if (gb == null) return '-';
      if (gb >= 1000) {
        return (gb / 1000).toFixed(1) + ' TB';
      }
      return gb + ' GB';
    },

    // 트래픽 포맷
    formatTransfer(tb) {
      if (tb == null) return '-';
      if (tb >= 1) {
        return tb.toFixed(tb % 1 === 0 ? 0 : 1) + ' TB';
      }
      return Math.round(tb * 1024) + ' GB';
    },

    // 프로바이더 색상
    getProviderColor(provider) {
      const colors = {
        'linode': 'bg-green-500/20 text-green-400',
        'vultr': 'bg-blue-500/20 text-blue-400',
        'aws': 'bg-orange-500/20 text-orange-400',
      };
      return colors[provider?.toLowerCase()] || 'bg-slate-500/20 text-slate-400';
    },

    // 리전 플래그 이모지
    getRegionFlag(regionName) {
      const flags = {
        'tokyo': '🇯🇵', 'osaka': '🇯🇵', 'japan': '🇯🇵',
        'singapore': '🇸🇬',
        'hong kong': '🇭🇰',
        'seoul': '🇰🇷', 'korea': '🇰🇷',
        'mumbai': '🇮🇳', 'bangalore': '🇮🇳', 'india': '🇮🇳',
        'sydney': '🇦🇺', 'australia': '🇦🇺',
        'amsterdam': '🇳🇱',
        'frankfurt': '🇩🇪', 'germany': '🇩🇪',
        'london': '🇬🇧', 'uk': '🇬🇧',
        'paris': '🇫🇷', 'france': '🇫🇷',
        'us': '🇺🇸', 'america': '🇺🇸', 'atlanta': '🇺🇸', 'dallas': '🇺🇸',
        'chicago': '🇺🇸', 'miami': '🇺🇸', 'new york': '🇺🇸', 'seattle': '🇺🇸',
        'los angeles': '🇺🇸', 'silicon valley': '🇺🇸'
      };

      const lower = (regionName || '').toLowerCase();
      for (const [key, flag] of Object.entries(flags)) {
        if (lower.includes(key)) return flag;
      }
      return '🌐';
    },

    // 마지막 업데이트 시간 표시
    getLastUpdateText() {
      if (!this.lastUpdate) return '';
      const now = new Date();
      const diff = Math.floor((now - this.lastUpdate) / 1000);
      if (diff < 60) return '방금 전';
      if (diff < 3600) return `${Math.floor(diff / 60)}분 전`;
      return this.lastUpdate.toLocaleTimeString('ko-KR');
    },

    // 인스턴스 선택 상태
    selectedInstance: null,

    // 모달 상태
    showInstanceModal: false,
    selectedInstanceDetail: null,

    // 클립보드 복사 상태
    copiedToClipboard: false,

    // 인스턴스 선택 핸들러
    selectInstance(inst) {
      // 같은 인스턴스 다시 클릭하면 선택 해제 및 모달 닫기
      if (this.selectedInstance?.id === inst.id &&
          this.selectedInstance?.region?.region_code === inst.region?.region_code) {
        this.selectedInstance = null;
        this.showInstanceModal = false;
        this.selectedInstanceDetail = null;
        return;
      }

      this.selectedInstance = inst;
      this.selectedInstanceDetail = inst;
      this.showInstanceModal = true;
    },

    // 모달 닫기
    closeInstanceModal() {
      this.showInstanceModal = false;
    },

    // 인스턴스 스펙 복사
    copyInstanceSpec() {
      const inst = this.selectedInstanceDetail;
      if (!inst) return;

      const spec = `vCPU: ${inst.vcpu}, RAM: ${this.formatMemory(inst.memory_mb)}, Storage: ${this.formatStorage(inst.storage_gb)}, 월 ${this.formatKrw(inst.pricing?.monthly_price_krw)}`;

      navigator.clipboard.writeText(spec).then(() => {
        console.log('[PricingTable] Copied to clipboard:', spec);
        this.copiedToClipboard = true;
        setTimeout(() => { this.copiedToClipboard = false; }, 2000);
      }).catch(err => {
        console.error('[PricingTable] Failed to copy:', err);
      });
    },

    // 텔레그램 링크 가져오기
    getInstanceTelegramLink() {
      if (!this.selectedInstanceDetail) return '#';
      return `https://t.me/AnvilForgeBot?start=order_${encodeURIComponent(this.selectedInstanceDetail.id)}`;
    }
  };
}

/**
 * 탭 전환 (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');
          }
        }
      });
    });
  }
});