<template>
  <div class="side-content side-menu">
    <div class="myinfo simple">
      <!-- 사용자 정보 -->
      <div class="name-box">
        <div class="img-area">
          <div>
            <img src="/client/resources/img/photo_icon.png" alt="">
            <p class="name">OOO과장</p>
          </div>
          <div class="info">
            <p>솔루션 개발팀</p>
            <i class="fa-bars"></i>
            <p>팀장</p>
          </div>
        </div>
      </div>
      <template v-for="section in visibleMenuSections" :key="section.key">
        <!-- 일반 드롭다운 메뉴 -->
        <details v-for="menu in section.menus" :key="menu.name" class="menu-box" :open="isMenuOpen(menu.name)">
          <summary @click.prevent="toggleMenu(menu.name)">
            <p>{{ menu.title }}</p>
            <div class="icon">
              <img src="/client/resources/img/topmenuicon.png" alt="">
            </div>
          </summary>
          <ul>
            <li v-for="item in menu.items" :key="item.name">
              <router-link :to="{ name: item.name }" exact-active-class="active-link" v-slot="{ isExactActive }">
                <p>{{ item.title }}</p>
                <div class="icon" v-if="isExactActive">
                  <img src="/client/resources/img/menuicon.png" alt="">
                </div>
              </router-link>
            </li>
          </ul>
        </details>
        <!-- 시스템 관리 -->
        <ul v-if="section.key === 'system'" class="menu-box danil">
          <router-link v-for="item in section.items" :key="item.name" :to="{ name: item.name }" exact-active-class="active-link">
            <li>
              <p>{{ item.title }}</p>
              <div class="icon">
                <img src="/client/resources/img/menuicon.png" alt="">
              </div>
            </li>
          </router-link>
        </ul>
      </template>
    </div>
  </div>
</template>
<script>
// 메뉴 구성 데이터 (외부로 분리 가능)
const MENU_CONFIG = {
  sanctn: {
    path: '/sanctn-management',
    menus: [{
      name: 'sanctn',
      title: '결재',
      items: [
        { name: 'MyApprovalRequestListPage', title: '결재 요청' },
        { name: 'PendingApprovalListPage', title: '승인 대기 목록' }
      ]
    }]
  },
  attendance: {
    path: '/attendance-management',
    menus: [
      {
        name: 'attendance',
        title: '근태현황',
        items: [
          { name: 'myAttendance', title: '나의 근태현황' },
          { name: 'buseoAttendance', title: '부서별 근태현황' }
        ]
      },
      {
        name: 'hyuga',
        title: '휴가',
        items: [
          { name: 'hyugaStatue', title: '휴가 현황' },
          { name: 'hyugaInsert', title: '휴가 신청' }
        ]
      },
      {
        name: 'chuljang',
        title: '출장',
        items: [
          { name: 'ChuljangStatue', title: '출장 현황' },
          { name: 'ChuljangInsert', title: '출장 신청' }
        ]
      }
    ]
  },
  task: {
    path: '/task-management',
    menus: [{
      name: 'project',
      title: '프로젝트',
      items: [
        { name: 'projectStatue', title: '프로젝트 현황' },
        { name: 'projectInsert', title: '프로젝트 등록' },
        { name: 'projectTuib', title: '투입현황' }
      ]
    }]
  },
  financial: {
    path: '/financial-management',
    menus: [
      {
        name: 'salary',
        title: '급여관리',
        items: [
          { name: 'salaryList', title: '급여명세서' },
          { name: 'employeeSalaryList', title: '직원별 급여명세서' },
          { name: 'employeeSalaryInsert', title: '급여명세서 등록' }
        ]
      },
      {
        name: 'expense',
        title: '지출관리',
        items: [
          { name: 'ChuljangCostList', title: '출장비 현황' },
          { name: '', title: '출장비 설정' },
          { name: 'MeetingCostList', title: '회의비 지출현황' }
        ]
      }
    ]
  },
  asset: {
    path: '/asset-management',
    menus: [
      {
        name: 'vhcle',
        title: '법인차량',
        items: [
          { name: 'VhcleList', title: '사용현황' },
          { name: 'VhcleInfoManagement', title: '차량정보 관리' }
        ]
      },
      {
        name: 'card',
        title: '법인카드',
        items: [
          { name: 'CardList', title: '사용현황' },
          { name: 'CardInfoManagement', title: '카드정보 관리' }
        ]
      }
    ]
  },
  hr: {
    path: '/hr-management',
    menus: [
      {
        name: 'hr',
        title: '직원',
        items: [
          { name: 'hrSearch', title: '직원검색' },
          { name: 'hrManagement', title: '직원관리' }
        ]
      },
      {
        name: 'dept',
        title: '부서',
        items: [
          { name: 'buseoManagement', title: '부서관리' }
        ]
      }
    ]
  },
  system: {
    path: '/system-management',
    items: [
      { name: 'AuthorManagementPage', title: '사용자권한관리' },
      { name: 'MenuAuthorManagementPage', title: '접근제어관리' },
      { name: 'CodeManagementListPage', title: '공통코드관리' }
    ]
  }
}

export default {
  name: 'SideMenu',

  data: () => ({
    openMenus: new Set()
  }),

  computed: {
    currentPath() {
      return this.$route.path.toLowerCase()
    },

    currentRouteName() {
      return this.$route.name?.toLowerCase() || ''
    },

    // 현재 페이지에 맞는 메뉴 섹션만 반환
    visibleMenuSections() {
      return Object.entries(MENU_CONFIG)
        .filter(([_, config]) => this.currentPath.includes(config.path))
        .map(([key, config]) => ({ key, ...config }))
    }
  },

  methods: {
    isMenuOpen(menuName) {
      return this.openMenus.has(menuName) || this.isCurrentMenuActive(menuName)
    },

    isCurrentMenuActive(menuName) {
      const routeChecks = {
        approval: () => this.currentRouteName.includes('approval'),
        attendance: () => ['attendance', 'myattendance', 'buseoattendance'].some(name =>
          this.currentRouteName.includes(name)),
        hyuga: () => this.currentRouteName.includes('hyuga'),
        chuljang: () => this.currentRouteName.includes('chuljang'),
        project: () => this.currentRouteName.includes('project'),
        salary: () => this.currentRouteName.includes('salary'),
        expense: () => ['cost', 'meeting'].some(name => this.currentRouteName.includes(name)),
        vhcle: () => this.currentRouteName.includes('vhcle'),
        card: () => this.currentRouteName.includes('card'),
        hr: () => this.currentRouteName.includes('hr'),
        dept: () => this.currentRouteName.includes('buseo')
      }

      return routeChecks[menuName]?.() || false
    },

    toggleMenu(menuName) {
      if (this.openMenus.has(menuName)) {
        this.openMenus.delete(menuName)
      } else {
        this.openMenus.clear()
        this.openMenus.add(menuName)
      }
    },

    updateMenuState() {
      this.openMenus.clear()
      const activeMenus = Object.keys(MENU_CONFIG).filter(menuName => this.isCurrentMenuActive(menuName))
      activeMenus.forEach(menu => this.openMenus.add(menu))
    }
  },

  watch: {
    $route: {
      handler: 'updateMenuState',
      immediate: true
    }
  }
}
</script>