<template>
  <boxes />
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useUiStore } from '~/store/ui'
import { useDataStore } from '~/store/data'
import { usePlayerStore } from '~/store/player'

// Configuration du layout
definePageMeta({
  layout: 'default'
})

const uiStore = useUiStore()
const dataStore = useDataStore()
const playerStore = usePlayerStore()
const route = useRoute()

onMounted(async () => {
  await dataStore.loadData()
  const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
  const id = Number(idParam)
  if (!Number.isNaN(id)) {
    const track = dataStore.tracks.find((t) => t.id === id)
    if (track) {
      // Open the box containing this track without changing global UI flow/animations
      uiStore.selectBox(track.boxId)
      playerStore.loadTrack(track)
    }
  }
})
</script>
