/**
 * Sidebar Component
 * Reconstructed to match original Xboard UI but with readable logic
 */

const { ref, h } = Vue;

export default {
  name: 'Sidebar',
  props: ['activePath'],
  emits: ['navigate'],
  template: `
    <div class="admin-sidebar" :class="{ 'collapsed': isCollapsed }">
      <div class="logo">
        <img :src="settings.logo" v-if="settings.logo" />
        <span v-else>{{ settings.title }}</span>
      </div>
      
      <div class="menu-container">
        <div v-for="group in menuGroups" :key="group.title" class="menu-group">
          <div class="group-title" @click="toggleGroup(group)">
            <i :class="group.icon"></i>
            <span>{{ group.title }}</span>
            <i class="arrow-icon" :class="group.expanded ? 'expanded' : ''"></i>
          </div>
          
          <div v-show="group.expanded" class="menu-items">
            <div 
              v-for="item in group.items" 
              :key="item.path"
              class="menu-item"
              :class="{ 'active': activePath === item.path }"
              @click="$emit('navigate', item.path)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  setup(props) {
    const settings = window.settings;
    const isCollapsed = ref(false);
    
    const menuGroups = ref([
      {
        title: '仪表盘',
        icon: 'anticon-dashboard',
        expanded: true,
        items: [
          { title: '统计概览', path: '/dashboard' }
        ]
      },
      {
        title: '用户管理',
        icon: 'anticon-user',
        expanded: true,
        items: [
          { title: '用户列表', path: '/user' },
          { title: '实名认证管理', path: '/realname' }
        ]
      },
      {
        title: '服务器管理',
        icon: 'anticon-cloud',
        expanded: true,
        items: [
          { title: '节点列表', path: '/node' }
        ]
      },
      {
        title: '运营管理',
        icon: 'anticon-shopping',
        expanded: false,
        items: [
          { title: '套餐管理', path: '/plan' },
          { title: '订单管理', path: '/order' },
          { title: '优惠券管理', path: '/coupon' }
        ]
      },
      {
        title: '系统管理',
        icon: 'anticon-setting',
        expanded: false,
        items: [
          { title: '系统设置', path: '/settings' }
        ]
      }
    ]);

    const toggleGroup = (group) => {
      group.expanded = !group.expanded;
    };

    return {
      settings,
      isCollapsed,
      menuGroups,
      toggleGroup
    };
  }
};
