<template>
  <nav class="bookaro-dashboard-nav" :aria-label="i18n.dashboard_navigation_label">
    <div class="bookaro-dashboard-nav__inner">
      <button
        v-for="item in visibleItems"
        :key="item.key"
        type="button"
        class="bookaro-dashboard-nav__item"
        :class="{ 'is-active': item.key === activeKey }"
        :aria-current="item.key === activeKey ? 'page' : null"
        @click="$emit('select', item.key)"
      >
        <span class="bookaro-dashboard-nav__icon" aria-hidden="true">
          <svg
            v-if="item.icon === 'bookings'"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.8"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M8 6h13M8 12h13M8 18h13" />
            <circle cx="4" cy="6" r="1.5" />
            <circle cx="4" cy="12" r="1.5" />
            <circle cx="4" cy="18" r="1.5" />
          </svg>
          <svg
            v-else-if="item.icon === 'calendar'"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.8"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M8 3v4M16 3v4M3 11h18" />
            <rect x="3" y="7" width="18" height="14" rx="2" />
          </svg>
          <svg
            v-else-if="item.icon === 'services'"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.8"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M4 10l8-6 8 6-8 6-8-6z" />
            <path d="M4 14l8 6 8-6" />
          </svg>
          <svg
            v-else-if="item.icon === 'settings'"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.8"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="12" cy="12" r="3" />
            <path d="M19.4 15a1 1 0 0 0 .2 1.1l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1 1 0 0 0-1.1-.2 1 1 0 0 0-.6.9V20a2 2 0 1 1-4 0v-.2a1 1 0 0 0-.6-.9 1 1 0 0 0-1.1.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1 1 0 0 0 .2-1.1 1 1 0 0 0-.9-.6H4a2 2 0 1 1 0-4h.2a1 1 0 0 0 .9-.6 1 1 0 0 0-.2-1.1l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1 1 0 0 0 1.1.2 1 1 0 0 0 .6-.9V4a2 2 0 1 1 4 0v.2a1 1 0 0 0 .6.9 1 1 0 0 0 1.1-.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1 1 0 0 0-.2 1.1 1 1 0 0 0 .9.6H20a2 2 0 1 1 0 4h-.2a1 1 0 0 0-.9.6z" />
          </svg>
        </span>
        <span class="bookaro-dashboard-nav__label">{{ item.label }}</span>
        <span
          v-if="showBadge(item)"
          class="bookaro-dashboard-nav__badge"
          :aria-label="badgeLabel(item)"
          :title="badgeLabel(item)"
        >
          {{ item.count }}
        </span>
      </button>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'DashboardNav',
  props: {
    items: { type: Array, default: () => [] },
    activeKey: { type: String, default: '' }
  },
  computed: {
    i18n() {
      return this.$root?.i18n || window.BookaroData?.i18n || {};
    },
    visibleItems() {
      return (this.items || []).filter(item => !item.hidden);
    }
  },
  methods: {
    showBadge(item) {
      return Number.isFinite(Number(item?.count)) && Number(item.count) > 0;
    },
    badgeLabel(item) {
      const count = Number(item?.count || 0);
      if (!item?.countLabel) {
        return String(count);
      }
      return `${count} ${item.countLabel}`;
    }
  }
};
</script>
