<template>
  <div id="app">
    <HomeScreen 
      v-if="currentScreen === 'home'" 
      @join-game="onJoinGame" 
      @show-settings="showSettings = true" 
    />
    <GameScreen 
      v-else-if="currentScreen === 'game'" 
      :game-client="gameClient" 
    />
    
    <!-- Settings Modal -->
    <SettingsModal 
      v-if="showSettings" 
      @close="showSettings = false" 
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const currentScreen = ref<'home' | 'game'>('home')
const gameClient = ref<any>(null)
const showSettings = ref(false)

const onJoinGame = (client: any) => {
  gameClient.value = client
  currentScreen.value = 'game'
  console.log('Transitioning to game screen')
  
  // Handle admin kick notification
  client.onAdminKicked((data: any) => {
    // Show alert message
    alert(`🚫 ${data.message}`)
    
    // Return to home screen
    currentScreen.value = 'home'
    gameClient.value = null
    
    console.log('Player kicked by admin, returned to home screen')
  })

  // Handle round change notification
  client.onRoundChanged((data: any) => {
    // Show alert message
    alert(`🎯 ${data.message}`)
    
    console.log('Round changed by admin:', data)
  })
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f5f5f5;
}

#app {
  min-height: 100vh;
}
</style>