<template>
  <nav
    class="fixed inset-x-0 bottom-0 z-40 flex border-t border-zinc-800 bg-zinc-950/95 backdrop-blur md:hidden"
    style="padding-bottom: env(safe-area-inset-bottom)"
  >
    <NavItem
      v-for="item in primary"
      :key="item.key"
      :to="item.to"
      :icon="item.icon"
      :label="item.label"
      :badge="item.badge"
      :active="isActive(item.match)"
      orientation="col"
      class="flex-1"
    />
    <button
      type="button"
      class="flex flex-1 flex-col items-center gap-0.5 py-2 text-zinc-500 transition-colors hover:text-zinc-300 focus-visible:outline-none"
      :class="moreActive ? 'text-emerald-400' : ''"
      @click="showMore = true"
    >
      <Menu :size="20" :stroke-width="1.75" />
      <span class="text-[10px]">{{ t('nav.more') }}</span>
    </button>
    <MoreSheet v-if="showMore" @close="showMore = false" />
  </nav>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Menu } from '@lucide/vue';
import { useNav } from '../../composables/useNav';
import NavItem from './NavItem.vue';
import MoreSheet from './MoreSheet.vue';

const { t } = useI18n();
const { primary, secondary, isActive } = useNav();
const showMore = ref(false);
// « More » est actif quand la route courante appartient aux items secondaires (Réglages/Aide).
const moreActive = computed(() => secondary.value.some((i) => isActive(i.match)));
</script>
