<script setup lang="ts">
import { computed } from 'vue';
import { RouterLink, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const route = useRoute();

const isWalletSection = computed(
  () => route.path.startsWith('/wallet') || route.path === '/profile/cashbacks',
);

const hubTitleKey = computed(() => (isWalletSection.value ? 'nav.my_wallet' : 'nav.bet_history'));

const menuItems = computed(() => {
  if (isWalletSection.value) {
    return [
      {
        path: '/wallet',
        labelKey: 'nav.my_wallet',
        match: (p: string) =>
          p === '/wallet' ||
          p === '/wallet/detail' ||
          p === '/wallet/recharge' ||
          p.startsWith('/wallet/transactions'),
      },
      {
        path: '/wallet/recharge/history',
        labelKey: 'wallet.recharge_history',
        match: (p: string) => p.startsWith('/wallet/recharge/history'),
      },
      {
        path: '/wallet/cashbacks',
        labelKey: 'wallet.cashbacks_tab',
        match: (p: string) => p === '/wallet/cashbacks' || p === '/profile/cashbacks',
      },
    ];
  }

  return [
    {
      path: '/bets',
      labelKey: 'nav.bet_history',
      match: (p: string) => p === '/bets' || p.startsWith('/bets/'),
    },
  ];
});
</script>

<template>
  <nav class="account-side-nav">
    <div class="hub-nav-title">{{ t(hubTitleKey) }}</div>
    <RouterLink
      v-for="item in menuItems"
      :key="item.path"
      :to="item.path"
      class="nav-item hover-bg"
      :class="{ active: item.match(route.path) }"
    >
      <span class="dot"></span>
      <span class="label">{{ t(item.labelKey) || item.path }}</span>
    </RouterLink>
  </nav>
</template>

<style scoped>
.account-side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
}

.hub-nav-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s;
  position: relative;
}

.nav-item:hover {
  color: var(--primary);
}

.nav-item.active {
  color: var(--primary-light);
  background: rgba(0, 102, 204, 0.08);
}

.nav-item.active .dot {
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bg-hover);
  transition: all 0.2s;
}

.label {
  line-height: 1;
}
</style>
