<script setup lang="ts">
const localePath = useLocalePath()
const route = useRoute()
const router = useRouter()

const scrollTargets: Record<string, string> = {
    'index': 'top',
    'blog': '#scroll-blog',
    'contact': '#scroll-contact',
    'art': '#scroll-art'
}

const currentPath = computed(() => route.path)

function handleClick(targetKey: string, e: MouseEvent) {
    if (e.ctrlKey || e.metaKey || e.altKey || e.button !== 0) return
   const isHome = currentPath.value === localePath('index')
    if (!isHome) return
      e.preventDefault()
      const targetId = scrollTargets[targetKey] || 'top'
      if (targetId === 'top') {
        window.scrollTo({ top: 0, behavior: 'smooth' })
        } else {
            const el = document.querySelector(targetId)
            if (el) {
                el.scrollIntoView({ behavior: 'smooth', block: 'start' })
            } else {
                const hash = targetId.substring(1)
                router.replace({ hash })
            }
        }
}
</script>

<template>
    <div class="tui-tabs">
        <a :href="localePath('index')" class="tui-tab" @click="handleClick('index', $event)">
            <span class="tab-sep" v-if="false">│</span>
            <span class="tab-label">/</span>
        </a>
        <a :href="localePath('blog')" class="tui-tab" @click="handleClick('blog', $event)">
            <span class="tab-sep">│</span>
            <span class="tab-label">/{{ $t('header.links.blog') }}</span>
        </a>
        <a :href="localePath('contact')" class="tui-tab" @click="handleClick('contact', $event)">
            <span class="tab-sep">│</span>
            <span class="tab-label">/{{ $t('header.links.contact') }}</span>
        </a>
        <a :href="localePath('art')" class="tui-tab" @click="handleClick('art', $event)">
            <span class="tab-sep">│</span>
            <span class="tab-label">/{{ $t('header.links.art') }}</span>
        </a>
    </div>
</template>

<style lang="scss" scoped>

.tui-tabs {
  display: inline-flex;
  background-color: var(--color-background-fore);
  border: 1px solid var(--color-border-color);
  box-shadow: inset 2px -2px 0px 0px rgba(0,0,0,0.2);
}

.tui-tab {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 4px 12px;
    font-family: 'Hurmit', monospace;
    font-size: 0.85rem;
    color: var(--color-text);
    text-shadow: none;
    transition: all 0.1s steps(2, end);
    border-right: 1px solid var(--color-border-color);
    
    &:last-child {
        border-right: none;
    }
    
    .tab-sep {
        color: var(--color-text);
        opacity: 0.3;
        margin-right: 8px;
        font-size: 0.75rem;
    }

    &:hover {
        background-color: var(--color-hover);
        text-shadow: none;
    }
}

.tui-tab.router-link-exact-active {
    color: var(--color-background-fore);
    background-color: var(--color-link);
    text-shadow: 0 0 8px rgba(255,255,255,0.3);
    
    .tab-sep {
        color: var(--color-background-fore);
        opacity: 0.6;
    }
}

.disabled {
    color: #aaaaaa77;
}

@media screen and (max-width: 900px) {
  .tui-tab {
      padding: 3px 8px;
      font-size: 0.75rem;
      
      .tab-sep {
          margin-right: 4px;
      }
  }
}

@media screen and (max-width: 600px) {
  .tui-tab {
      padding: 3px 5px;
      font-size: 0.7rem;
      
      .tab-sep {
          margin-right: 3px;
      }
  }
}

</style>
