/**
 * Main App Entry
 * Initializes Vue instance and manages routing
 */

import Sidebar from './components/Sidebar.js';
import Header from './components/Header.js';
import Dashboard from './views/Dashboard.js';
import UserManagement from './views/UserManagement.js';
import RealNameManagement from './views/RealNameManagement.js';
import NodeManagement from './views/NodeManagement.js';
import PlanManagement from './views/PlanManagement.js';
import Settings from './views/Settings.js';
import OrderManagement from './views/OrderManagement.js';
import CouponManagement from './views/CouponManagement.js';

// Shallow components for pages not yet reconstructed
const Placeholder = { 
  template: '<div class="placeholder">页面重构中...</div>' 
};

const { createApp, ref, computed } = Vue;

const App = {
  components: {
    Sidebar,
    Header,
    Dashboard,
    UserManagement,
    RealNameManagement,
    NodeManagement,
    PlanManagement,
    Settings,
    OrderManagement,
    CouponManagement,
    Placeholder
  },
  setup() {
    const currentPath = ref(window.location.hash.replace('#', '') || '/dashboard');
    
    const pageTitleMap = {
      '/dashboard': '统计概览',
      '/user': '用户管理',
      '/realname': '实名认证管理',
      '/node': '节点列表',
      '/plan': '套餐管理',
      '/settings': '系统设置',
      '/order': '订单管理',
      '/coupon': '优惠券管理'
    };

    const currentTitle = computed(() => pageTitleMap[currentPath.value] || '管理后台');

    const handleNavigate = (path) => {
      currentPath.value = path;
      window.location.hash = path;
    };

    // Simple hash change listener
    window.addEventListener('hashchange', () => {
      currentPath.value = window.location.hash.replace('#', '') || '/dashboard';
    });

    return {
      currentPath,
      currentTitle,
      handleNavigate
    };
  },
  template: `
    <div class="admin-layout">
      <Sidebar :activePath="currentPath" @navigate="handleNavigate" />
      <div class="main-content">
        <Header :title="currentTitle" />
        <main class="view-container">
          <Dashboard v-if="currentPath === '/dashboard'" />
          <UserManagement v-else-if="currentPath === '/user'" />
          <RealNameManagement v-else-if="currentPath === '/realname'" />
          <NodeManagement v-else-if="currentPath === '/node'" />
          <PlanManagement v-else-if="currentPath === '/plan'" />
          <Settings v-else-if="currentPath === '/settings'" />
          <OrderManagement v-else-if="currentPath === '/order'" />
          <CouponManagement v-else-if="currentPath === '/coupon'" />
          <Placeholder v-else />
        </main>
      </div>
    </div>
  `
};

createApp(App).mount('#root');
