<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import {
  Odometer, Link, Connection, List, Document, Setting, Switch, Tickets,
} from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
import PrismIcon from '@/components/PrismIcon.vue'

const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const auth = useAuthStore()

const navKeys = [
  { path: '/', key: 'nav.dashboard', icon: Odometer },
  { path: '/subscriptions', key: 'nav.subscriptions', icon: Link },
  { path: '/proxies', key: 'nav.proxies', icon: Connection },
  { path: '/outbound', key: 'nav.outbound', icon: Switch },
  { path: '/rules', key: 'nav.rules', icon: List },
  { path: '/traffic-logs', key: 'nav.trafficLogs', icon: Tickets },
  { path: '/logs', key: 'nav.logs', icon: Document },
  { path: '/settings', key: 'nav.settings', icon: Setting },
] as const

const pageTitle = computed(() => {
  const hit = navKeys.find((item) => item.path === route.path)
  return hit ? t(hit.key) : 'Prism'
})

function logout() {
  auth.logout()
  router.push('/login')
}
</script>

<template>
  <div class="layout">
    <aside class="sidebar custom-scrollbar">
      <div class="sidebar-brand">
        <div class="brand-icon">
          <PrismIcon :size="20" />
        </div>
        <span class="brand-name">Prism</span>
      </div>
      <div class="nav-group-label">{{ t('common.management') }}</div>
      <router-link
        v-for="item in navKeys"
        :key="item.path"
        :to="item.path"
        class="nav-item"
        :class="{ active: route.path === item.path }"
      >
        <el-icon :size="16"><component :is="item.icon" /></el-icon>
        {{ t(item.key) }}
      </router-link>
    </aside>
    <div class="main-area">
      <header class="topbar">
        <span class="topbar-title">{{ pageTitle }}</span>
        <el-button text @click="logout">{{ t('common.logout') }}</el-button>
      </header>
      <main class="main-content custom-scrollbar">
        <router-view />
      </main>
    </div>
  </div>
</template>
