<template>
  <aside class="sidebar">
    <div class="logo">
      <img src="/images/backgrounds/logo-admin.svg" alt="Logo" />
    </div>
    <nav class="nav-menu">
      <div class="nav-item" :class="{ active: active === 'dashboard' }" @click="goTo('/admin/dashboard')">
        <AppstoreOutlined />
        <span>{{ $t('nav.dashboard') }}</span>
      </div>
      <div class="nav-item" :class="{ active: active === 'members' }" @click="goTo('/member-management')">
        <UserOutlined />
        <span>{{ $t('nav.members') }}</span>
      </div>
      <div class="nav-item" :class="{ active: active === 'orders' }" @click="goTo('/admin/orders')">
        <ShoppingCartOutlined />
        <span>{{ $t('nav.orders') }}</span>
      </div>
      <div class="nav-item" :class="{ active: active === 'apiManagement' }" @click="goTo('/api-management')">
        <FileOutlined />
        <span>{{ $t('nav.apiManagement') }}</span>
      </div>
      <div class="nav-item" :class="{ active: active === 'tasks' }" @click="goTo('/generate-task-record')">
        <FileOutlined />
        <span>{{ $t('nav.tasks') }}</span>
      </div>
      <div class="nav-item" :class="{ active: active === 'workflowVideos' }" @click="goTo('/admin/workflow-videos')">
        <VideoCameraOutlined />
        <span>{{ $t('nav.workflowVideos') }}</span>
      </div>
      <div class="nav-item" :class="{ active: active === 'errorStats' }" @click="goTo('/admin/error-statistics')">
        <WarningOutlined />
        <span>{{ $t('nav.errorStats') }}</span>
      </div>
      <div class="nav-item" :class="{ active: active === 'settings' }" @click="goTo('/system-settings')">
        <SettingOutlined />
        <span>{{ $t('nav.systemSettings') }}</span>
      </div>
    </nav>
    <div class="sidebar-footer">
      <div class="online-users">
        {{ $t('nav.todayVisitors') }}: <span class="highlight">{{ onlineUsers }}</span>
      </div>
      <div class="system-uptime">
        {{ $t('nav.systemUptime') }}: <span class="highlight">{{ systemUptime }}</span>
      </div>
    </div>
  </aside>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import {
  AppstoreOutlined,
  UserOutlined,
  ShoppingCartOutlined,
  FileOutlined,
  SettingOutlined,
  WarningOutlined,
  VideoCameraOutlined
} from '@ant-design/icons-vue'

defineProps({
  active: {
    type: String,
    required: true
  }
})

const router = useRouter()
const { t } = useI18n()

const onlineUsers = ref('0')
const systemUptime = ref(t('nav.loading'))
let timer = null

const goTo = (path) => {
  router.push(path)
}

const fetchSystemStats = async () => {
  try {
    const response = await fetch('/api/admin/online-stats', {
      headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
    })
    const data = await response.json()
    if (data.success) {
      onlineUsers.value = data.todayVisitors || 0
      systemUptime.value = data.uptime || t('systemSettings.unknown')
    }
  } catch {
    onlineUsers.value = '0'
    systemUptime.value = t('systemSettings.unknown')
  }
}

onMounted(() => {
  fetchSystemStats()
  timer = setInterval(fetchSystemStats, 30000)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
.sidebar {
  width: 240px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) 0;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-6);
  margin-bottom: var(--space-8);
}

.logo img {
  width: 100%;
  height: auto;
  max-width: 180px;
  object-fit: contain;
}

.nav-menu {
  flex: 1;
  padding: 0 var(--space-4);
}

.nav-item {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--primary-glow-light);
  color: var(--primary-500);
}

.nav-item .anticon {
  margin-right: var(--space-3);
  font-size: var(--text-lg);
}

.nav-item span {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  font-size: 12px;
  color: var(--text-tertiary, #64748B);
}

.sidebar-footer .highlight {
  color: #818CF8;
}
</style>
