<script setup>
import { ref, onMounted, computed, inject, onUnmounted, watch } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useSocketStore } from '@/stores/socket'
import { Coins, Trophy, Frown } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import GameBoard from '@/components/game/GameBoard.vue'
import axios from 'axios'
import { toast } from 'vue-sonner'

const API_BASE_URL = inject('apiBaseURL')
const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const wsStore = useSocketStore()

// --- FIX: Flag to prevent double cancellation ---
const isCancelling = ref(false)

const matchState = ref({
  id: route.params.id,
  wager: 0,
  myMarks: 0,
  oppMarks: 0,
  currentGameId: null,
  player1: null,
  player2: null,
  status: 'Pending'
})

const timeLeft = ref(20)
const timerInterval = ref(null)
const showSurrenderModal = ref(false)
const showTrickResult = ref(false)
const lastTrickWinner = ref(null)
const showRoundModal = ref(false)
const roundData = ref({ winnerId: null, marksAdded: 0, myPoints: 0, oppPoints: 0, reason: '' })

const myUserId = computed(() => authStore.currentUser?.id)
const amIHost = computed(() => matchState.value.player1?.id === myUserId.value)
const isPending = computed(() => !matchState.value.player2 || matchState.value.player2.id <= 1)
const matchOver = computed(() => matchState.value.myMarks >= 4 || matchState.value.oppMarks >= 4)
const iWonMatch = computed(() => matchState.value.myMarks > matchState.value.oppMarks)
const isMyTurn = computed(() => String(wsStore.gameState?.currentTurn) === String(myUserId.value))
const currentTurnLabel = computed(() => isMyTurn.value ? 'player' : 'opponent')

const myDisplayName = computed(() => amIHost.value ? matchState.value.player1?.nickname : matchState.value.player2?.nickname)
const opponentDisplayName = computed(() => amIHost.value ? matchState.value.player2?.nickname : matchState.value.player1?.nickname)

const opponentHand = computed(() => {
  const count = wsStore.gameState?.opponent?.cardCount || 0
  return Array.from({ length: count }, (_, i) => ({ id: `opp-${i}`, suit: 'back', rank: 0 }))
})

// Timer
watch(() => wsStore.gameState?.currentTurn, () => { startTimer() }, { deep: true })
const startTimer = () => {
    if (timerInterval.value) clearInterval(timerInterval.value);
    timeLeft.value = 20;
    if(!wsStore.gameState) return;
    timerInterval.value = setInterval(() => {
        if(timeLeft.value > 0) timeLeft.value--;
        else clearInterval(timerInterval.value);
    }, 1000);
}

const handlePlayCard = (card) => {
  if (wsStore.socket) wsStore.socket.emit('game:play-card', { matchId: matchState.value.id, cardId: card.id })
}

const openSurrenderModal = () => { showSurrenderModal.value = true }
const confirmSurrenderRound = () => {
   showSurrenderModal.value = false;
   if (wsStore.socket) wsStore.socket.emit('game:surrender', { matchId: matchState.value.id });
}
const confirmSurrenderMatch = () => {
   showSurrenderModal.value = false;
   if (wsStore.socket) wsStore.socket.emit('match:surrender', { matchId: matchState.value.id });
}
const closeRoundModal = () => { showRoundModal.value = false; }

const updateLocalState = (data) => {
  if (!data) return
  if (data.player1) matchState.value.player1 = data.player1
  if (data.player2) matchState.value.player2 = data.player2
  if (data.stake) matchState.value.wager = data.stake
  matchState.value.status = data.status

  if (data.marks) {
    const myId = authStore.currentUser?.id;
    const oppId = amIHost.value ? matchState.value.player2?.id : matchState.value.player1?.id;
    matchState.value.myMarks = data.marks[myId] || 0;
    matchState.value.oppMarks = data.marks[oppId] || 0;
  }

  if (data.game) {
    matchState.value.currentGameId = data.game.id;
    wsStore.gameState = data.game;
  } else if (data.status === 'Playing') {
    matchState.value.currentGameId = null;
    wsStore.gameState = null;
  }
}

// --- FIX: Cancel Match with Flag ---
const cancelMatch = async () => {
  if (isCancelling.value) return;
  isCancelling.value = true;

  try {
    await axios.delete(`${API_BASE_URL}/matches/${matchState.value.id}`)
    router.push({ name: 'home' })
  } catch (e) {
    // Ignore 404s if we just deleted it
    if (e.response && e.response.status === 404) {
       router.push({ name: 'home' })
    } else {
       isCancelling.value = false; // Reset if legitimate error
       alert(e.message)
    }
  }
}
const leaveMatch = () => router.push({ name: 'home' })

const handleBeforeUnload = (e) => {
  if (matchState.value.status === 'Playing' && !matchOver.value) {
    const msg = "If you leave now, you will lose the match and your wager.";
    e.returnValue = msg;
    return msg;
  }
}

// --- FIX: Router Guard checks Flag ---
onBeforeRouteLeave((to, from, next) => {
  // If we already clicked cancel, just let it go
  if (isCancelling.value) {
    return next();
  }

  if (matchState.value.status === 'Playing' && !matchOver.value) {
    if (confirm("⚠️ WARNING: Leaving now triggers an automatic match surrender (Loss).\n\nAre you sure?")) {
      if(wsStore.socket) wsStore.socket.emit('match:surrender', { matchId: matchState.value.id });
      next();
    } else {
      next(false);
    }
  } else if (isPending.value && amIHost.value) {
     if(confirm("Cancel this lobby?")) {
        // Mark as cancelling so we don't trigger double requests if cancelMatch is weird
        isCancelling.value = true;
        cancelMatch().then(() => next());
     } else {
        next(false);
     }
  } else {
    next();
  }
})

onMounted(async () => {
  window.addEventListener('beforeunload', handleBeforeUnload)
  try {
    const res = await axios.get(`${API_BASE_URL}/matches/${matchState.value.id}`)
    const d = res.data.data || res.data
    matchState.value.player1 = d.player1
    matchState.value.player2 = d.player2
    matchState.value.wager = d.stake
  } catch (e) { }

  wsStore.connect()
  if (wsStore.socket) {
    wsStore.socket.emit('match:enter', { matchId: matchState.value.id })
    wsStore.socket.on('match:update', updateLocalState)
    wsStore.socket.on('match:new-round', (data) => {
      updateLocalState(data);
      toast.info("New round started!");
    })
    wsStore.socket.on('match:ended', updateLocalState)
    wsStore.socket.on('game:update', (state) => { wsStore.gameState = state })
    wsStore.socket.on('game:trick-end', (result) => {
        lastTrickWinner.value = result.winnerId;
        showTrickResult.value = true;
        setTimeout(() => { showTrickResult.value = false }, 2000);
    });
    wsStore.socket.on('match:round-ended', (data) => {
        const myPoints = data.winnerId == myUserId.value ? (data.winnerId == matchState.value.player1.id ? data.p1Points : data.p2Points) : (data.winnerId == matchState.value.player1.id ? data.p2Points : data.p1Points);
        const oppPoints = data.winnerId != myUserId.value ? (data.winnerId == matchState.value.player1.id ? data.p1Points : data.p2Points) : (data.winnerId == matchState.value.player1.id ? data.p2Points : data.p1Points);

        roundData.value = {
            winnerId: data.winnerId,
            marksAdded: data.marksAdded,
            myPoints: myPoints,
            oppPoints: oppPoints,
            reason: data.reason
        };
        showRoundModal.value = true;
    });
  }
})

onUnmounted(() => {
  window.removeEventListener('beforeunload', handleBeforeUnload)
  if (wsStore.socket) {
    wsStore.socket.off('match:update')
    wsStore.socket.off('match:new-round')
    wsStore.socket.off('game:trick-end')
    wsStore.socket.off('match:round-ended')
  }
  wsStore.disconnect()
})
</script>

<template>
  <div class="relative min-h-screen bg-green-900 text-white overflow-hidden">
    <div class="fixed top-0 left-0 right-0 z-40 bg-green-950/90 backdrop-blur border-b border-green-800 p-2 shadow-xl">
      <div class="max-w-4xl mx-auto flex items-center justify-between">
        <div class="flex flex-col items-start">
          <div class="flex items-center gap-2">
            <span class="font-bold text-lg text-white drop-shadow-md">{{ myDisplayName }}</span>
            <span v-if="matchState.wager > 0" class="flex items-center text-xs text-yellow-300 bg-yellow-900/50 px-2 rounded border border-yellow-700/50">
              <Coins class="w-3 h-3 mr-1" /> {{ matchState.wager }}
            </span>
          </div>
          <div class="flex gap-1 mt-1">
            <div v-for="i in 4" :key="i" class="w-3 h-3 rounded-full border border-green-400 bg-green-900"
              :class="{ '!bg-green-400 shadow-[0_0_10px_rgba(74,222,128,0.5)]': matchState.myMarks >= i }"></div>
          </div>
        </div>
        <div class="flex flex-col items-center">
          <span class="text-[10px] uppercase tracking-widest text-green-400 font-bold">Match #{{ matchState.id }}</span>
          <span class="text-2xl font-black font-mono text-white drop-shadow-md">{{ matchState.myMarks }} - {{ matchState.oppMarks }}</span>
        </div>
        <div class="flex flex-col items-end">
          <span class="font-bold text-lg text-white drop-shadow-md">{{ opponentDisplayName }}</span>
          <div class="flex gap-1 mt-1">
            <div v-for="i in 4" :key="i" class="w-3 h-3 rounded-full border border-red-400 bg-green-900"
              :class="{ '!bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.5)]': matchState.oppMarks >= i }"></div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="wsStore.gameState && !matchOver" class="absolute top-24 right-4 z-50">
      <button @click="openSurrenderModal" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg shadow-lg border-2 border-red-800 transition-all hover:scale-105 flex items-center gap-2 text-sm cursor-pointer">
        <span>🏳️</span> Surrender
      </button>
    </div>

    <div v-if="wsStore.gameState && !matchOver && isMyTurn" class="absolute top-24 left-1/2 -translate-x-1/2 z-50">
      <div class="bg-gray-800 px-6 py-2 rounded-lg border-2 shadow-xl transition-colors duration-300" :class="timeLeft <= 5 ? 'border-red-500 bg-red-900/20' : 'border-gray-700'">
        <div class="flex items-center gap-3">
           <svg class="w-5 h-5" :class="timeLeft <= 5 ? 'text-red-500 animate-bounce' : 'text-white'" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="12" cy="12" r="10" stroke-width="2" />
            <polyline points="12 6 12 12 16 14" stroke-width="2" />
          </svg>
          <span :class="['text-2xl font-mono font-bold', timeLeft <= 5 ? 'text-red-500' : 'text-white']">{{ timeLeft }}</span>
        </div>
      </div>
    </div>

    <div class="pt-20 h-screen">
      <GameBoard
        v-if="wsStore.gameState && !matchOver"
        :game-id="matchState.currentGameId"
        @play-card="handlePlayCard"
        :trump-card="wsStore.gameState?.trumpCard"
        :cards-remaining="wsStore.gameState?.deckCount"
        :player-hand="wsStore.gameState?.hand"
        :opponent-hand="opponentHand"
        :player-score="wsStore.gameState?.points"
        :opponent-score="wsStore.gameState?.opponent?.points"
        :current-turn="currentTurnLabel"
        :current-trick="wsStore.gameState?.table"
        :is-my-turn="isMyTurn"
        :player-name="myDisplayName"
        :opponent-name="opponentDisplayName"
      />
      <div v-else-if="isPending" class="flex h-full items-center justify-center flex-col gap-6">
        <div class="text-center p-8 bg-green-800/60 rounded-2xl border border-green-600 shadow-2xl backdrop-blur-md max-w-sm w-full mx-4">
          <div class="relative mx-auto mb-6 h-16 w-16">
             <div class="absolute inset-0 rounded-full border-4 border-green-700/50"></div>
             <div class="absolute inset-0 rounded-full border-4 border-t-white border-r-transparent border-b-transparent border-l-transparent animate-spin"></div>
          </div>
          <h2 class="text-2xl font-bold mb-2 text-white">Waiting for Opponent</h2>
          <button v-if="amIHost" @click="cancelMatch" class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded shadow mt-4">Cancel Match</button>
        </div>
      </div>
      <div v-else-if="!matchOver && !wsStore.gameState" class="flex h-full items-center justify-center flex-col gap-4">
        <div class="text-3xl font-bold animate-pulse text-white drop-shadow">Preparing next round...</div>
      </div>
      <div v-if="matchOver" class="absolute inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-md">
        <div class="text-center space-y-6 p-8 bg-green-900 border-2 border-green-500 rounded-2xl shadow-2xl max-w-md w-full">
          <Trophy v-if="iWonMatch" class="w-24 h-24 text-yellow-400 mx-auto animate-bounce" />
          <Frown v-else class="w-24 h-24 text-green-300 mx-auto opacity-75" />
          <h1 class="text-5xl font-black uppercase mb-2" :class="iWonMatch ? 'text-yellow-400' : 'text-gray-300'">{{ iWonMatch ? 'Victory!' : 'Defeat' }}</h1>
          <p class="text-green-100 text-lg">Marks: <span class="font-bold">{{ matchState.myMarks }} - {{ matchState.oppMarks }}</span></p>
          <Button @click="leaveMatch" class="w-full py-6 text-lg bg-purple-600 hover:bg-purple-700">Return to Lobby</Button>
        </div>
      </div>
    </div>

    <div v-if="showRoundModal" class="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-md">
      <div class="bg-gray-800 p-8 rounded-2xl border-2 border-yellow-500/50 shadow-2xl max-w-md w-full text-center relative overflow-hidden">
         <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-transparent via-yellow-500 to-transparent"></div>
         <h2 class="text-3xl font-black text-white mb-2 uppercase">Round Over</h2>
         <p class="text-gray-400 mb-6 uppercase text-xs tracking-widest">{{ roundData.reason === 'surrender' ? 'Opponent Surrendered' : 'Points Limit Reached' }}</p>

         <div class="flex justify-between items-center bg-black/30 p-4 rounded-lg mb-6">
            <div class="text-left">
                <p class="text-xs text-gray-500 uppercase">You</p>
                <p class="text-2xl font-bold text-white">{{ roundData.myPoints }} pts</p>
            </div>
            <div class="text-xl font-bold text-yellow-500">VS</div>
            <div class="text-right">
                <p class="text-xs text-gray-500 uppercase">Opponent</p>
                <p class="text-2xl font-bold text-white">{{ roundData.oppPoints }} pts</p>
            </div>
         </div>

         <div class="mb-8">
            <p class="text-lg text-white" v-if="roundData.winnerId == myUserId">
                You won <span class="text-yellow-400 font-bold">+{{ roundData.marksAdded }} marks</span>!
            </p>
            <p class="text-lg text-white" v-else>
                Opponent won <span class="text-red-400 font-bold">+{{ roundData.marksAdded }} marks</span>.
            </p>
         </div>

         <button @click="closeRoundModal" class="w-full py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-xl shadow-lg transition-transform hover:scale-105">
            Ready for Next Round
         </button>
      </div>
    </div>

    <div v-if="showSurrenderModal" class="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm">
      <div class="bg-gray-800 p-6 rounded-lg border border-gray-600 shadow-2xl max-w-sm w-full text-center">
        <h3 class="text-xl font-bold text-white mb-6">Surrender Options</h3>
        <div class="space-y-3">
          <button @click="confirmSurrenderRound" class="w-full px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded text-white font-bold border border-gray-500 flex justify-between items-center group">
            <span>Surrender Round</span>
            <span class="text-xs bg-black/40 px-2 py-1 rounded text-gray-300 group-hover:bg-red-500 group-hover:text-white">-2 Marks</span>
          </button>
          <button @click="confirmSurrenderMatch" class="w-full px-4 py-3 bg-red-900/50 hover:bg-red-600 rounded text-red-200 hover:text-white font-bold border border-red-800 flex justify-between items-center group">
            <span>Surrender Match</span>
            <span class="text-xs bg-black/40 px-2 py-1 rounded text-red-300 group-hover:bg-red-800 group-hover:text-white">Defeat</span>
          </button>
        </div>
        <button @click="showSurrenderModal = false" class="mt-6 text-gray-400 hover:text-white text-sm underline">Cancel</button>
      </div>
    </div>

    <Transition enter-active-class="transition-all duration-300 ease-out" enter-from-class="opacity-0 scale-50" enter-to-class="opacity-100 scale-100" leave-active-class="transition-all duration-200 ease-in" leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-75">
      <div v-if="showTrickResult" class="fixed top-1/3 left-1/2 -translate-x-1/2 z-[70] pointer-events-none">
        <div class="bg-black/70 backdrop-blur-md px-8 py-4 rounded-2xl border border-white/10 shadow-2xl text-center">
           <p class="text-sm uppercase tracking-widest text-gray-300 font-bold mb-1">Trick Winner</p>
           <h2 class="text-3xl font-black" :class="lastTrickWinner === myUserId ? 'text-green-400' : 'text-red-400'">{{ lastTrickWinner === myUserId ? 'YOU' : 'OPPONENT' }}</h2>
        </div>
      </div>
    </Transition>
  </div>
</template>
