<template>
  <div class="breadcrumbs text-sm">
    <ul>
      <li v-for="(crumb, index) in breadcrumbs" :key="index">
        <NuxtLink v-if="crumb.to" :to="crumb.to">{{ crumb.label }}</NuxtLink>
        <span v-else>{{ crumb.label }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const localePath = useLocalePath()
const { t } = useI18n()

const breadcrumbs = computed(() => {
  const path = route.path
  const crumbs: Array<{ label: string; to?: string }> = []

  // Always start with Cabinet
  crumbs.push({ label: t('breadcrumbs.cabinet'), to: localePath('/clientarea') })

  // Parse path segments after /clientarea
  const segments = path.replace(/^\/[a-z]{2}\//, '/').replace('/clientarea', '').split('/').filter(Boolean)

  const pathMap: Record<string, string> = {
    orders: t('breadcrumbs.orders'),
    addresses: t('breadcrumbs.addresses'),
    profile: t('breadcrumbs.profile'),
    team: t('breadcrumbs.team'),
    kyc: t('breadcrumbs.kyc'),
    offers: t('breadcrumbs.offers'),
    new: t('breadcrumbs.new'),
    russia: t('breadcrumbs.russia'),
    ai: t('breadcrumbs.ai'),
    goods: t('breadcrumbs.goods'),
    locations: t('breadcrumbs.locations'),
    request: t('breadcrumbs.request'),
    'company-switch': t('breadcrumbs.companySwitch'),
    'debug-tokens': t('breadcrumbs.tokens'),
  }

  let currentPath = '/clientarea'
  for (let i = 0; i < segments.length; i++) {
    const segment = segments[i]
    currentPath += `/${segment}`
    const isLast = i === segments.length - 1

    // Check if segment is UUID or ID
    const isId = /^[0-9a-f-]{36}$/.test(segment) || /^\d+$/.test(segment)

    const label = isId ? `#${segment.slice(0, 8)}...` : (pathMap[segment] || segment)

    crumbs.push({
      label,
      to: isLast ? undefined : localePath(currentPath)
    })
  }

  return crumbs
})
</script>
