<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'

import AdminSidebar from '@/components/admin-sidebar/index.vue'
import LanguageChange from '@/components/language-change.vue'
import ToggleTheme from '@/components/toggle-theme.vue'

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

const breadcrumbs = computed(() => {
  const path = router.currentRoute.value.path
  const parts = path.split('/').filter(Boolean)
  const crumbs = [{ title: t('nav.console'), path: '/admin' }]

  const titleMap: Record<string, string> = {
    applications: t('nav.applications'),
    cards: t('nav.cards'),
    users: t('nav.users'),
    devices: t('nav.devices'),
    sessions: t('nav.sessions'),
    announcements: t('nav.announcements'),
    versions: t('nav.versions'),
    'card-types': t('nav.cardTypes'),
    'agent-apps': t('nav.agentApps'),
    agents: t('nav.agents'),
    finance: t('nav.finance'),
    logs: t('nav.logs'),
    tickets: t('nav.tickets'),
    'cloud-constants': t('nav.cloudConstants'),
    'cloud-variables': t('nav.cloudVariables'),
    'cloud-function': t('nav.cloudFunction'),
    'risk-control': t('nav.riskControl'),
    extension: t('nav.extension'),
    profile: t('nav.profile'),
    'system-settings': t('nav.systemSettings'),
    'payment-channels': t('nav.paymentChannels'),
    'email-settings': t('nav.emailSettings'),
    'sms-settings': t('nav.smsSettings'),
    'storage-configs': t('nav.storageConfigs'),
    settings: t('nav.basicSettings'),
    security: t('nav.security'),
    create: t('nav.create'),
    edit: t('nav.edit'),
    recharge: t('nav.recharge'),
    request: t('nav.request'),
    invite: t('nav.invite'),
    records: t('nav.records'),
  }

  let currentPath = '/admin'
  for (let i = 1; i < parts.length; i++) {
    const part = parts[i]
    currentPath += `/${part}`

    if (titleMap[part]) {
      crumbs.push({
        title: titleMap[part],
        path: currentPath,
      })
    }
    else if (!isNaN(Number(part)) && i === parts.length - 1) {
      crumbs.push({
        title: t('nav.detail'),
        path: currentPath,
      })
    }
  }

  return crumbs
})
</script>

<template>
  <UiSidebarProvider>
    <AdminSidebar />
    <UiSidebarInset>
      <header class="flex h-14 shrink-0 items-center gap-2 border-b px-4">
        <UiSidebarTrigger class="-ml-1" />
        <UiSeparator orientation="vertical" class="mr-2 h-4" />
        <UiBreadcrumb>
          <UiBreadcrumbList>
            <template v-for="(crumb, index) in breadcrumbs" :key="crumb.path">
              <UiBreadcrumbItem v-if="index < breadcrumbs.length - 1">
                <UiBreadcrumbLink as-child>
                  <router-link :to="crumb.path">
                    {{ crumb.title }}
                  </router-link>
                </UiBreadcrumbLink>
              </UiBreadcrumbItem>
              <UiBreadcrumbItem v-else>
                <UiBreadcrumbPage>{{ crumb.title }}</UiBreadcrumbPage>
              </UiBreadcrumbItem>
              <UiBreadcrumbSeparator v-if="index < breadcrumbs.length - 1" />
            </template>
          </UiBreadcrumbList>
        </UiBreadcrumb>

        <div class="ml-auto flex items-center gap-2">
          <LanguageChange />
          <ToggleTheme />
        </div>
      </header>

      <main class="flex-1 overflow-auto p-4 md:p-6">
        <router-view />
      </main>
    </UiSidebarInset>
  </UiSidebarProvider>
</template>