<template>
  <div class="page-shell dashboard-page">
    <div class="dashboard-grid">
      <div class="soft-stat">
        <n-statistic label="可见菜单" :value="visibleMenuTotal" />
      </div>
      <div class="soft-stat">
        <n-statistic label="可访问页面" :value="visiblePageTotal" />
      </div>
      <div class="soft-stat">
        <n-statistic label="权限数量" :value="authStore.permissions.length" />
      </div>
      <div class="soft-stat">
        <n-statistic label="当前状态" :value="currentStatus" />
      </div>
      <div class="soft-stat">
        <n-statistic label="已打开页签" :value="authStore.tabs.length" />
      </div>
    </div>
    <div class="menu-shortcut-grid">
      <button
        v-for="menu in shortcutMenus"
        :key="menu.id"
        class="soft-stat menu-shortcut"
        type="button"
        @click="openMenu(menu)"
      >
        <span class="shortcut-icon">
          <n-icon :size="22">
            <component :is="resolveIcon(menu.icon)" />
          </n-icon>
        </span>
        <span class="shortcut-content">
          <span class="shortcut-title">{{ menu.title }}</span>
        </span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, type Component } from 'vue'
import { NIcon } from 'naive-ui'
import * as LucideIcons from 'lucide-vue-next'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { statusLabel } from '@/utils/display'
import type { MenuNode } from '@/types/auth'

const authStore = useAuthStore()
const router = useRouter()

function flattenMenus(nodes: MenuNode[]): MenuNode[] {
  return nodes.flatMap((item) => [item, ...flattenMenus(item.children ?? [])])
}

function resolveIcon(icon?: string | null) {
  return (
    (icon ? (LucideIcons[icon as keyof typeof LucideIcons] as unknown as Component | undefined) : undefined) ??
    LucideIcons.PanelRightOpen
  )
}

function openMenu(menu: MenuNode) {
  if (menu.path) {
    router.push(menu.path)
  }
}

const visibleMenus = computed(() => flattenMenus(authStore.menus).filter((item) => item.visible))
const visibleMenuTotal = computed(() => visibleMenus.value.length)
const visiblePageTotal = computed(
  () => visibleMenus.value.filter((item) => item.type === 'MENU' && item.path).length
)
const shortcutMenus = computed(() =>
  visibleMenus.value.filter((item) => item.type === 'MENU' && Boolean(item.path))
)
const currentStatus = computed(() => statusLabel(authStore.user?.status))
</script>

<style scoped>
.dashboard-page {
  overflow: auto;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.menu-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.menu-shortcut {
  width: 100%;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #111827;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.menu-shortcut:hover {
  border-color: #94a3b8;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.menu-shortcut:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.shortcut-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #2563eb;
  background: var(--app-primary-soft);
}

.shortcut-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.shortcut-title {
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
