<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { useGameStore } from '@/stores/game'

const route = useRoute()
const router = useRouter()
const gameStore = useGameStore()

const matchId = route.params.id as string | undefined

onMounted(() => {
  if (!matchId) {
    // No match ID - redirect to campaign
    router.push('/campaign')
    return
  }

  // TODO: Connect to game via WebSocket (Phase F4)
  if (import.meta.env.DEV) {
    console.log('Joining match:', matchId)
  }
})

onUnmounted(() => {
  gameStore.clearGame()
})
</script>

<template>
  <div class="h-screen bg-surface-dark flex items-center justify-center">
    <div
      v-if="!gameStore.gameState"
      class="text-center"
    >
      <div class="animate-pulse mb-4">
        <div class="w-16 h-16 mx-auto bg-primary rounded-full" />
      </div>
      <p class="text-gray-400">
        Connecting to match...
      </p>
    </div>

    <div
      v-else
      class="w-full h-full"
    >
      <!-- Phaser game canvas will mount here in Phase F4 -->
      <p class="text-center text-gray-400 pt-8">
        Match UI coming in Phase F4
      </p>
    </div>
  </div>
</template>
