<template>
  <q-layout view="hHh lpR fFf" class="tech-surface">
    <q-page-container>
      <router-view v-slot="{ Component }">
        <transition name="tech-slide" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </q-page-container>

    <!-- Floating tab island -->
    <!--
      Design note: fixed bottom, 16px side margins, pill radius, backdrop-blur
      surface. Sits on top of content — content reserves room via `.tg-page`
      padding (96px). Three tabs instead of four: Diagnostic moves into "Plus"
      as a list item since it's a once-a-day tool, not primary.
    -->
    <nav class="tg-tab-island">
      <router-link to="/j" class="tg-tab" :class="{ 'is-active': isActive('tasks') }" exact>
        <span class="material-icons tg-tab-icon">assignment</span>
        <span class="tg-tab-label">Tâches</span>
      </router-link>
      <router-link to="/j/scan" class="tg-tab" :class="{ 'is-active': isActive('scan') }">
        <span class="material-icons tg-tab-icon">qr_code_scanner</span>
        <span class="tg-tab-label">Scanner</span>
      </router-link>
      <router-link to="/j/more" class="tg-tab" :class="{ 'is-active': isActive('more') }">
        <span class="material-icons tg-tab-icon">more_horiz</span>
        <span class="tg-tab-label">Plus</span>
      </router-link>
    </nav>
  </q-layout>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// Match routes to tab ids. Sub-routes (e.g. /j/job/ABC) stay on "tasks".
function isActive (tab) {
  const p = route.path
  if (tab === 'scan') return p.startsWith('/j/scan')
  if (tab === 'more') return p.startsWith('/j/more') || p.startsWith('/j/diagnostic')
  if (tab === 'tasks') return p === '/j' || p.startsWith('/j/job')
  return false
}
</script>

<style lang="scss" scoped>
// Layout tokens already live in tech.scss; this file keeps only structural
// overrides specific to the layout shell.
:deep(.q-page-container) {
  padding-bottom: 0 !important;  // our pages handle their own via .tg-page
}
</style>
