<script setup lang="ts">
/**
 * 前台功能入口：2 列 art-card，图标+标题居中，无英文 key。
 */
import { ref } from 'vue'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import AppFloatingTabbar from '@/components/layout/AppFloatingTabbar.vue'
import AppPageShell from '@/components/layout/AppPageShell.vue'
import { usePublicSettings } from '@/composables/usePublicSettings'
import { useTheme } from '@/composables/useTheme'
import type { MenuItem } from '@/config/menus'

const { load, getExploreMenus } = usePublicSettings()
const { apply } = useTheme()
const menus = ref<MenuItem[]>([])

/** 刷新功能入口菜单 */
async function loadMenus() {
  apply()
  await load()
  menus.value = getExploreMenus()
}

onShow(loadMenus)

onPullDownRefresh(async () => {
  try {
    await loadMenus()
  }
  finally {
    uni.stopPullDownRefresh()
  }
})

const open = (item: MenuItem) => {
  uni.navigateTo({ url: item.path })
}
</script>

<template>
  <AppPageShell with-tab-pad>
    <AppNavbar title="功能入口" />
    <view class="page-pad animate-reveal">
      <view class="hero-eyebrow">Navigate</view>
      <view class="section-title" style="margin-bottom: 40rpx;">探索花园</view>
      <view class="grid">
        <view
          v-for="item in menus"
          :key="item.key"
          class="art-card art-card-press item"
          @click="open(item)"
        >
          <wd-icon :name="item.icon || 'apps'" size="32px" color="rgb(212,179,131)" />
          <text class="title">{{ item.title }}</text>
        </view>
      </view>
      <wd-empty v-if="!menus.length" description="暂无可见频道" />
    </view>
    <AppFloatingTabbar />
  </AppPageShell>
</template>

<style scoped lang="scss">
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx;
}
.item {
  padding: 40rpx 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  min-height: 220rpx;
  text-align: center;
}
.title {
  font-size: 34rpx;
  color: rgb(var(--art-text));
  font-family: 'Playfair Display', serif;
  font-style: italic;
}
</style>
