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

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'

const { t } = useI18n()

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

const siteSettings = reactive({
  name: t('nav.adminDashboard'),
  logo: '',
})

const teams = reactive([
  {
    name: t('nav.adminDashboard'),
    logo: Code,
  },
])

function loadSystemSettings() {
  const storedSettings = localStorage.getItem('systemSettings')
  if (storedSettings) {
    try {
      const parsed = JSON.parse(storedSettings)
      if (parsed.site_name) {
        siteSettings.name = parsed.site_name
        teams[0].name = parsed.site_name
      }
      if (parsed.site_logo) {
        siteSettings.logo = parsed.site_logo
        teams[0].logo = parsed.site_logo
      }
    }
    catch (e) {
      console.error('Failed to parse systemSettings from localStorage', e)
    }
  }
}

function handleSettingsChange(event: CustomEvent) {
  const settings = event.detail
  if (settings.site_name) {
    siteSettings.name = settings.site_name
    teams[0].name = settings.site_name
  }
  if (settings.site_logo) {
    siteSettings.logo = settings.site_logo
    teams[0].logo = settings.site_logo
  }
}

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)
    }
  }

  loadSystemSettings()
  window.addEventListener('system-settings-changed', handleSettingsChange as EventListener)
})

onUnmounted(() => {
  window.removeEventListener('system-settings-changed', handleSettingsChange as EventListener)
})

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: Share2,
      },
    ],
  },
  {
    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>
