<template>
    <v-container v-show="gamehiding === false" class="player_video_div">
        <div v-if="currentQuestion" style="width: 100%; height: 100%;">
            
            <!-- VIDEO PLAYER -->
            <div v-show="currentQuestion.Type === 'video'" style="width: 100%; height: 100%;">
                <video ref="videoPlayer" class="video-js player_video" controls preload="auto">
                </video>
            </div>

            <!-- PICTURE DISPLAY -->
            <div v-if="currentQuestion.Type === 'picture'" style="width: 100%; height: 100%;">
                <v-img 
                    :src="getMediaUrl(currentQuestion.MediaUrl)" 
                    :key="currentQuestion.QuestionId"
                    class="player_video"
                ></v-img>
            </div>

            <!-- AUDIO PLAYER -->
             <div v-if="currentQuestion.Type === 'audio'" class="audio-container player_video">
                 <div class="audio-visualizer">
                    <v-icon size="150" color="white" class="mb-4">mdi-music-circle</v-icon>
                    <span class="text-h2 white--text">ÉCOUTEZ</span>
                 </div>
                 <audio ref="audioPlayer" :src="getMediaUrl(currentQuestion.MediaUrl)" class="custom-audio"></audio>
             </div>

        </div>
    </v-container>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
import quizStore from '@/store/quizStore';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import { subscribeToTopic, publishMessage } from '@/services/mqttService';

// Store Access
const currentQuestion = quizStore.getters.currentQuestion;

// Video Player Refs
const videoPlayer = ref(null);
let vjsPlayer = null;

// Audio Player Refs
const audioPlayer = ref(null);

let gamehiding = ref(true);

// Methods
function getMediaUrl(relativePath) {
    if (!relativePath) return '';
    const cleanPath = relativePath.startsWith('/') ? relativePath.substring(1) : relativePath;
    const url = new URL(`../quizz/vulture-session-2026-01/${cleanPath}`, import.meta.url).href;
    console.log('GameMedia: Resolved URL:', { relativePath, url });
    return url;
}

function initVideoPlayer() {
    if (vjsPlayer) return; // Already init
    if (!videoPlayer.value) return; // DOM not ready

    console.log('GameMedia: Initializing VideoJS');
    vjsPlayer = videojs(videoPlayer.value, {
        autoplay: false,
        controls: false,
        preload: 'auto',
        fluid: true,
        loop: false,
        volume: 0,
    }, () => {
        console.log('GameMedia: VideoJS Ready');
        // If current question is video, load it
        if (currentQuestion.value && currentQuestion.value.Type === 'video') {
             updateVideoSource();
        }
        
        // Auto-hide when video ends
        vjsPlayer.on('ended', () => {
            console.log('GameMedia: Video ended, hiding');
            gamehiding.value = true;
            publishMessage('/display/control', 'hide');
        });
    });
}

function updateVideoSource() {
    if (!vjsPlayer || !currentQuestion.value) return;
    
    const url = getMediaUrl(currentQuestion.value.MediaUrl);
    console.log('GameMedia: Loading Video Source', url);
    vjsPlayer.src({ type: 'video/mp4', src: url });
    
    // AutoPlay is managed by MQTT 'play' command now
    // if (currentQuestion.value.Settings?.AutoPlay) {
    //      vjsPlayer.play().catch(e => console.log('Autoplay blocked', e));
    // }
}

// Watchers
watch(currentQuestion, async (newVal, oldVal) => {
    console.log('GameMedia: Question Changed', newVal);
    
    // Stop all media first
    if (vjsPlayer) {
        vjsPlayer.pause();
    }
    if (audioPlayer.value) {
        audioPlayer.value.pause();
    }
    
    // Ensure hidden on question change until played
    gamehiding.value = true;
    publishMessage('/display/control', 'hide');
    if (!newVal) return;

    await nextTick(); // Wait for DOM updates (v-if)

    if (newVal.Type === 'video') {
         if (!vjsPlayer) {
             initVideoPlayer();
         } else {
             updateVideoSource();
         }
    } else if (newVal.Type === 'audio') {
        // Audio loading (no autoplay)
         setTimeout(() => {
             if(audioPlayer.value){
                  console.log('GameMedia: Loading Audio');
                  audioPlayer.value.load();
                  
                  // Auto-hide when audio ends
                  audioPlayer.value.onended = () => {
                      console.log('GameMedia: Audio ended, hiding');
                      gamehiding.value = true;
                      publishMessage('/display/control', 'hide');
                  };
             }
         }, 100);
    }
    // For 'picture' type, nothing to do, video/audio are already paused
}, { immediate: true });

// Lifecycle
onMounted(async () => {
    await nextTick();
    if (currentQuestion.value?.Type === 'video') {
        initVideoPlayer();
    }

    subscribeToTopic('#', (topic, message) => {
        handleMessage(topic, message);
    });
});

const handleMessage = (topic, message) => {
    console.log('GameMedia: Received', topic, message);
    if (topic === "/display/control") {
        switch (message) {
            case "play":
                gamehiding.value = false;
                console.log("▶️ GameMedia: Play");
                // Only play the media relevant to this question type
                if (currentQuestion.value?.Type === 'video' && vjsPlayer) {
                    vjsPlayer.play().catch(e => console.error("Error playing video:", e));
                }
                if (currentQuestion.value?.Type === 'audio' && audioPlayer.value) {
                    audioPlayer.value.play().catch(e => console.error("Error playing audio:", e));
                }
                if (currentQuestion.value?.Type === 'picture') {
                    // Start timer if PlayTime is configured
                    const playTime = currentQuestion.value.Settings?.PlayTime;
                    if (playTime && playTime > 0) {
                        quizStore.actions.startTimer(playTime);
                    }
                }
                break;
            case "pause":
                gamehiding.value = true;
                console.log("⏸️ GameMedia: Pause");
                quizStore.actions.stopTimer();
                if (vjsPlayer) {
                    vjsPlayer.pause();
                }
                if (audioPlayer.value) {
                    audioPlayer.value.pause();
                }
                break;
             case "hide":
                console.log("🛑 GameMedia: Hide");
                gamehiding.value = true;
                quizStore.actions.stopTimer();
                break;
        }
    }
    // Check for buzzer status if we want to auto-hide on buzz (like HidingOverlay)
    // The user asked to replicate VideoPlayer, which only had /display/control in the provided snippet.
    // But if "mesmes événéments" implies behavior of the system...
    // I'll stick to VideoPlayer replication first.
    if (topic === 'vulture/buzzer/status') {
         try {
             const data = JSON.parse(message);
             if (data.status === 'blocked') {
                 console.log("GameMedia: Buzzer Blocked -> Hiding");
                 gamehiding.value = true;
                 if (vjsPlayer) vjsPlayer.pause();
                 if (audioPlayer.value) audioPlayer.value.pause();
             }
         } catch (e) { console.error('JSON Error', e); }
    }
};

onBeforeUnmount(() => {
    if (vjsPlayer) {
        vjsPlayer.dispose();
    }
});
</script>

<style>
.player_video_div {
    margin-top: 40px;
    width: calc(100vw - 20%);
    height: calc(100vh - 20%);
    border-radius: 20px !important;
  }
  .player_video {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 25px !important;
  }
  .vjs-tech{
    border-radius: 25px;
  }
  
  /* Additional styles for Audio/Custom elements to fit the theme */
  .audio-container {
      display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: linear-gradient(45deg, #1a1a1a, #2c3e50);
  }
  .audio-visualizer {
        display: flex;
        flex-direction: column;
        align-items: center;
        animation: pulse 2s infinite;
    }
    .text-h2 {
        font-family: 'Bahnschrift', sans-serif !important;
    }
    .custom-audio {
        margin-top: 30px;
        width: 80%;
    }
    @keyframes pulse {
        0% { transform: scale(1); opacity: 0.8; }
        50% { transform: scale(1.05); opacity: 1; }
        100% { transform: scale(1); opacity: 0.8; }
    }
</style>
