<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useDisplayStore } from './stores/display';

const router = useRouter();
const route = useRoute();
const displayStore = useDisplayStore();
const isFullscreen = ref(false);

// Mode to route mapping
const modeRoutes: Record<string, string> = {
  'idle': '/',
  'voting': '/screen/voting',
  'draw': '/screen/draw',
  'results': '/screen/results',
};

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    isFullscreen.value = true;
  } else {
    document.exitFullscreen();
    isFullscreen.value = false;
  }
}

// Handle mode change from director console
function handleModeChange(event: Event) {
  const { mode } = (event as CustomEvent).detail;
  const targetRoute = modeRoutes[mode];
  
  // Only navigate if we're on a screen route (not admin routes)
  if (targetRoute && !route.path.startsWith('/admin')) {
    console.log('[App] Navigating to:', targetRoute);
    router.push(targetRoute);
  }
}

onMounted(() => {
  displayStore.connect();

  // Listen for fullscreen changes
  document.addEventListener('fullscreenchange', () => {
    isFullscreen.value = !!document.fullscreenElement;
  });

  // Listen for mode changes from director console
  window.addEventListener('screen:mode_change', handleModeChange);
});

onUnmounted(() => {
  displayStore.disconnect();
  window.removeEventListener('screen:mode_change', handleModeChange);
});
</script>

<template>
  <div class="screen-app" @dblclick="toggleFullscreen">
    <router-view />

    <!-- Fullscreen hint -->
    <div v-if="!isFullscreen" class="fullscreen-hint">
      双击进入全屏模式
    </div>

    <!-- Connection status -->
    <div class="connection-indicator" :class="displayStore.connectionStatus">
      <span class="dot"></span>
      <span class="text">{{ displayStore.connectionStatus === 'connected' ? '已连接' : '连接中...' }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.screen-app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #0a0a0a;
  position: relative;
}

.fullscreen-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  pointer-events: none;
  animation: fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

.connection-indicator {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  color: white;

  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4d4f;
  }

  &.connected .dot {
    background: #52c41a;
  }

  &.connecting .dot {
    background: #faad14;
    animation: pulse 1s infinite;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
</style>
