<template>
  <div class="media-page" style="background: var(--nav-bg);">
    <nav class="subtabs" style="display:flex; gap:0; border-bottom: 1px solid var(--nav-bg-alt); background: var(--nav-surface); padding: 0 1rem;">
      <button
        :class="['subtab-btn', { active: tab === 'visuel' }]"
        @click="tab = 'visuel'"
      >
        🌳 RAG visuel
      </button>
      <button
        :class="['subtab-btn', { active: tab === 'backend' }]"
        @click="tab = 'backend'"
      >
        ⚙ LightRAG backend
      </button>
      <button
        :class="['subtab-btn', { active: tab === 'projets' }]"
        @click="tab = 'projets'"
      >
        📚 Projets
      </button>
    </nav>

    <MediaTabVisuel v-if="tab === 'visuel'" />
    <MediaTabBackend v-else-if="tab === 'backend'" />
    <MediaTabProjets v-else-if="tab === 'projets'" />
  </div>
</template>

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

const tab = ref<'visuel' | 'backend' | 'projets'>(
  (['visuel', 'backend', 'projets'].includes(route.query.tab as string)
    ? route.query.tab as 'visuel' | 'backend' | 'projets'
    : 'visuel')
)

watch(tab, (newTab) => {
  router.replace({ query: { ...route.query, tab: newTab } })
})

useHead({ title: 'AEP - Media' })
</script>

<style scoped>
.media-page { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.subtabs { display: flex; gap: 0; flex-shrink: 0; }
.subtab-btn {
  padding: 10px 18px;
  font-size: 0.85rem;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--nav-text-muted);
  transition: color 0.15s, border-color 0.15s;
}
.subtab-btn:hover { color: var(--nav-text); }
.subtab-btn.active { color: var(--nav-primary-solid); border-bottom-color: var(--nav-primary-solid); font-weight: 600; }
</style>
