<template>
  <div class="task-sub-nav">
    <nav class="sub-tabs">
      <button
        :class="{ active: activeTab === 'chores' }"
        @click="$router.push({ name: 'ChoreView' })"
      >
        Chores
      </button>
      <button
        :class="{ active: activeTab === 'kindness' }"
        @click="$router.push({ name: 'KindnessView' })"
      >
        Kindness Acts
      </button>
      <button
        :class="{ active: activeTab === 'penalties' }"
        @click="$router.push({ name: 'PenaltyView' })"
      >
        Penalties
      </button>
    </nav>
    <div class="sub-content">
      <router-view :key="$route.fullPath" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const activeTab = computed(() => {
  const name = String(route.name)
  if (name.startsWith('Kindness') || name === 'CreateKindness' || name === 'EditKindness')
    return 'kindness'
  if (name.startsWith('Penalty') || name === 'CreatePenalty' || name === 'EditPenalty')
    return 'penalties'
  return 'chores'
})
</script>

<style scoped>
.task-sub-nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.sub-tabs {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.sub-tabs button {
  padding: 0.4rem 1.2rem;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--btn-secondary);
  color: var(--btn-secondary-text);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s;
}

.sub-tabs button.active {
  background: var(--btn-primary);
  color: #fff;
  border-color: var(--btn-primary);
}

.sub-tabs button:hover:not(.active) {
  background: var(--btn-secondary-hover);
}

.sub-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
</style>
