<template>
  <div>
    <boxes />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
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 route = useRoute()

onMounted(async () => {
  await dataStore.loadData()
  const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
  if (typeof idParam === 'string' && idParam.length > 0) {
    uiStore.selectBox(idParam)
    
    // Lire automatiquement la box si on est sur la page d'une box
    const box = dataStore.boxes.find(b => b.id === idParam)
    if (box) {
      const player = usePlayerStore()
      player.playBox(box).catch(console.error)
    }
  }
})
</script>
