<script lang="ts" setup>
import { Boxes, Code, CreditCard, DollarSign, FileLock, Gauge, GitBranch, HardDrive, Hash, Key, KeyRound, Mail, Megaphone, MessageSquare, Monitor, Network, Plug, ScrollText, Settings, Shield, Smartphone, Users, Variable } from 'lucide-vue-next'
import { computed, onMounted, reactive, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { usePreferredDark } from '@vueuse/core'

import NavTeam from '@/components/app-sidebar/nav-team.vue'
import TeamSwitcher from '@/components/app-sidebar/team-switcher.vue'
import NavFooter from '@/components/admin-sidebar/nav-footer.vue'
import { useSiteSettings } from '@/composables/use-site-settings'

const { t } = useI18n()
const { siteSettings, getLogo } = useSiteSettings()
const isDark = usePreferredDark()

const user = reactive({
  name: t('nav.admin'),
  email: 'admin@example.com',
  avatar: '',
  role: 'admin',
})

const teams = reactive([
  {
    name: '',
    logo: '' as any,
  },
])

// 计算当前 logo
const currentLogo = computed(() => {
  if (siteSettings.logoLight || siteSettings.logoDark || siteSettings.siteLogo) {
    return getLogo(isDark.value)
  }
  return Code // 默认图标
})

// 监听系统设置变化
watch(() => siteSettings.siteName, (newName) => {
  if (newName) {
    teams[0].name = newName
  } else {
    teams[0].name = t('nav.adminDashboard')
  }
}, { immediate: true })

// 监听 logo 变化
watch(currentLogo, (newLogo) => {
  teams[0].logo = newLogo
}, { immediate: true })

onMounted(() => {
  const storedUser = localStorage.getItem('user')
  if (storedUser) {
    try {
      const parsedUser = JSON.parse(storedUser)
      user.name = parsedUser.username || user.name
      user.email = parsedUser.email || user.email
      user.avatar = parsedUser.avatar || user.avatar
      user.role = parsedUser.role || user.role
    }
    catch (e) {
      console.error('Failed to parse user from localStorage', e)
    }
  }
})

const navMain = computed(() => [
  {
    title: t('nav.mainFeatures'),
    items: [
      {
        title: t('nav.console'),
        url: '/admin',
        icon: Gauge,
      },
      {
        title: t('nav.applications'),
        url: '/admin/applications',
        icon: Boxes,
      },
      {
        title: t('nav.cardTypes'),
        url: '/admin/card-types',
        icon: Hash,
      },
      {
        title: t('nav.cards'),
        url: '/admin/cards',
        icon: Key,
      },
      {
        title: t('nav.announcements'),
        url: '/admin/announcements',
        icon: Megaphone,
      },
      {
        title: t('nav.versions'),
        url: '/admin/versions',
        icon: GitBranch,
      },
      {
        title: t('nav.users'),
        url: '/admin/users',
        icon: Users,
      },
      {
        title: t('nav.devices'),
        url: '/admin/devices',
        icon: Smartphone,
      },
      {
        title: t('nav.sessions'),
        url: '/admin/sessions',
        icon: Monitor,
      },
      {
        title: t('nav.agents'),
        url: '/admin/agents',
        icon: Network,
      },
      {
        title: t('nav.agentApps'),
        url: '/admin/agent-apps',
        icon: KeyRound,
      },
    ],
  },
  {
    title: t('nav.businessManagement'),
    items: [
      {
        title: t('nav.finance'),
        url: '/admin/finance',
        icon: DollarSign,
      },
      {
        title: t('nav.logs'),
        url: '/admin/logs',
        icon: ScrollText,
      },
      {
        title: t('nav.tickets'),
        url: '/admin/tickets',
        icon: MessageSquare,
      },
    ],
  },
  {
    title: t('nav.advancedFeatures'),
    items: [
      {
        title: t('nav.cloudConstants'),
        url: '/admin/cloud-constants',
        icon: FileLock,
      },
      {
        title: t('nav.cloudVariables'),
        url: '/admin/cloud-variables',
        icon: Variable,
      },
      {
        title: t('nav.cloudFunction'),
        url: '/admin/cloud-function',
        icon: Code,
      },
      {
        title: t('nav.riskControl'),
        url: '/admin/risk-control',
        icon: Shield,
      },
      {
        title: t('nav.extension'),
        url: '/admin/extension',
        icon: Plug,
      },
    ],
  },
  {
    title: t('nav.systemManagement'),
    items: [
      {
        title: t('nav.systemSettings'),
        url: '/admin/system-settings',
        icon: Settings,
      },
      {
        title: t('nav.paymentChannels'),
        url: '/admin/payment-channels',
        icon: CreditCard,
      },
      {
        title: t('nav.emailSettings'),
        url: '/admin/email-settings',
        icon: Mail,
      },
      {
        title: t('nav.smsSettings'),
        url: '/admin/sms-settings',
        icon: Smartphone,
      },
      {
        title: t('nav.storageConfigs'),
        url: '/admin/storage-configs',
        icon: HardDrive,
      },
    ],
  },
])
</script>

<template>
  <UiSidebar collapsible="icon" class="z-50">
    <UiSidebarHeader>
      <TeamSwitcher :teams="teams" />
    </UiSidebarHeader>

    <UiSidebarContent>
      <NavTeam :nav-main="navMain" />
    </UiSidebarContent>

    <UiSidebarFooter>
      <NavFooter :user="user" />
    </UiSidebarFooter>

    <UiSidebarRail />
  </UiSidebar>
</template>
