<template>
  <div class="page-idle" @click="goToMenu">
    <IdlePlayer @click="goToMenu" />
    <BroadcastOverlay :broadcast="screenStore.currentBroadcast" />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useScreenStore } from '@/stores/screen'
import IdlePlayer from '@/components/IdlePlayer.vue'
import BroadcastOverlay from '@/components/BroadcastOverlay.vue'

const router = useRouter()
const screenStore = useScreenStore()

// 播放方案轮询定时器
const playPlanPollingTimer = ref(null)
const PLAY_PLAN_POLL_INTERVAL = 60000 // 60 秒轮询一次

const goToMenu = () => {
  router.push('/menu')
}

// 停止播放方案轮询
const stopPlayPlanPolling = () => {
  if (playPlanPollingTimer.value) {
    clearInterval(playPlanPollingTimer.value)
    playPlanPollingTimer.value = null
  }
}

// 开始播放方案轮询（待机页每 60 秒重新请求一次播放方案）
const startPlayPlanPolling = () => {
  stopPlayPlanPolling()
  playPlanPollingTimer.value = setInterval(() => {
    console.log('[Idle] 轮询播放方案...')
    screenStore.fetchPlayPlan()
  }, PLAY_PLAN_POLL_INTERVAL)
}

onMounted(() => {
  // 首次加载时请求配置
  screenStore.fetchScreenTheme()
  screenStore.fetchPlayPlan()
  screenStore.fetchRobotStatus()
  // 开始轮询播放方案
  startPlayPlanPolling()
  // 开始播报状态轮询（每 2 秒一次）
  screenStore.startBroadcastPolling()
})

onUnmounted(() => {
  // 组件销毁时停止轮询
  stopPlayPlanPolling()
  // 停止播报状态轮询
  screenStore.stopBroadcastPolling()
})
</script>

<style scoped>
.page-idle {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>
