<template>
  <div class="min-h-screen bg-gradient-to-br from-green-700 via-green-800 to-green-900 p-8">
    <div class="max-w-6xl mx-auto">
      <!-- Title -->
      <h1 class="text-white text-3xl font-bold mb-8 text-center">
        All Animations Test Page
      </h1>

      <!-- Control Panel -->
      <div class="bg-gray-900/80 rounded-lg p-6 mb-8">
        <h2 class="text-white text-xl font-semibold mb-4">Controls</h2>

        <!-- Score Animation Tests -->
        <div class="mb-6">
          <h3 class="text-emerald-400 font-semibold mb-3">Score Count-Up Animation</h3>
          <div class="flex flex-wrap gap-3">
            <button
              @click="increasePlayerScore"
              class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors"
            >
              +10 Player Score
            </button>
            <button
              @click="increaseOpponentScore"
              class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors"
            >
              +10 Opponent Score
            </button>
            <button
              @click="resetScores"
              class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors"
            >
              Reset Scores
            </button>
          </div>
        </div>

        <!-- Turn Transition Tests -->
        <div class="mb-6">
          <h3 class="text-blue-400 font-semibold mb-3">Turn Transition Animation</h3>
          <div class="flex flex-wrap gap-3">
            <button
              @click="toggleTurn"
              class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
            >
              Switch Turn
            </button>
            <button
              @click="currentTurn = 'player'"
              class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-medium transition-colors"
            >
              Your Turn
            </button>
            <button
              @click="currentTurn = 'opponent'"
              class="px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg font-medium transition-colors"
            >
              Bot's Turn
            </button>
          </div>
        </div>

        <!-- Trump Reveal Tests -->
        <div class="mb-6">
          <h3 class="text-amber-400 font-semibold mb-3">Trump Reveal Animation</h3>
          <div class="flex flex-wrap gap-3">
            <button
              @click="triggerTrumpReveal"
              class="px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-lg font-medium transition-colors"
            >
              Reveal Trump
            </button>
          </div>
        </div>

        <!-- Game Over Tests -->
        <div class="mb-6">
          <h3 class="text-purple-400 font-semibold mb-3">Game Over Screen</h3>
          <div class="flex flex-wrap gap-3">
            <button
              @click="showGameOverPlayerWin"
              class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-medium transition-colors"
            >
              Player Wins
            </button>
            <button
              @click="showGameOverOpponentWin"
              class="px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg font-medium transition-colors"
            >
              Opponent Wins
            </button>
            <button
              @click="showGameOverDraw"
              class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors"
            >
              Draw
            </button>
          </div>
        </div>

        <!-- Full Sequence -->
        <div>
          <h3 class="text-pink-400 font-semibold mb-3">Complete Sequence</h3>
          <div class="flex flex-wrap gap-3">
            <button
              @click="runFullSequence"
              :disabled="isRunningSequence"
              class="px-4 py-2 bg-pink-600 hover:bg-pink-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors"
            >
              Run Full Animation Sequence
            </button>
          </div>
        </div>
      </div>

      <!-- Game Board Preview -->
      <div class="grid grid-rows-[auto_1fr] gap-8">
        <!-- Score Display -->
        <div class="flex justify-center">
          <ScoreDisplay
            :player-score="playerScore"
            :opponent-score="opponentScore"
            :current-turn="currentTurn"
            :round-number="1"
          />
        </div>

        <!-- Deck Area (with trump) -->
        <div class="flex justify-center">
          <div class="bg-gray-800/30 rounded-lg p-6">
            <h3 class="text-white text-sm font-semibold mb-4 text-center">Trump Card</h3>
            <DeckArea
              :trump-card="trumpCard"
              :cards-remaining="cardsRemaining"
              :is-empty="false"
              :reveal-trump="revealTrump"
            />
          </div>
        </div>
      </div>

      <!-- Instructions -->
      <div class="bg-gray-900/80 rounded-lg p-6 mt-8 text-gray-300">
        <h3 class="text-white font-semibold mb-2">Instructions:</h3>
        <ul class="list-disc list-inside space-y-1 text-sm">
          <li>
            <strong>Score Count-Up:</strong> Click "+10" buttons to see scores animate smoothly
            from old to new value
          </li>
          <li>
            <strong>Turn Transition:</strong> Switch turns to see the indicator pulse and glow with
            color change
          </li>
          <li>
            <strong>Trump Reveal:</strong> Triggers a 3-second pulse/glow animation on the trump
            card with label
          </li>
          <li>
            <strong>Game Over:</strong> Shows victory/defeat modal with score count-up and confetti
            (on win)
          </li>
          <li>
            <strong>Full Sequence:</strong> Runs all animations in order: trump reveal → turn
            changes → score updates → game over
          </li>
        </ul>
      </div>
    </div>

    <!-- Game Over Modal -->
    <GameOver
      :is-visible="gameOverVisible"
      :winner="gameOverWinner"
      :player-score="playerScore"
      :opponent-score="opponentScore"
      :stats="gameOverStats"
      @close="gameOverVisible = false"
      @play-again="handlePlayAgain"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ScoreDisplay from '@/components/game/ScoreDisplay.vue'
import DeckArea from '@/components/game/DeckArea.vue'
import GameOver from '@/components/game/GameOver.vue'

// Game state
const playerScore = ref(23)
const opponentScore = ref(15)
const currentTurn = ref('player')
const cardsRemaining = ref(30)
const revealTrump = ref(false)
const isRunningSequence = ref(false)

// Trump card
const trumpCard = ref({ suit: 'o', rank: 7 })

// Game Over state
const gameOverVisible = ref(false)
const gameOverWinner = ref('player')
const gameOverStats = ref({
  playerTricks: 8,
  opponentTricks: 6,
})

// Score manipulation
const increasePlayerScore = () => {
  playerScore.value += 10
}

const increaseOpponentScore = () => {
  opponentScore.value += 10
}

const resetScores = () => {
  playerScore.value = 0
  opponentScore.value = 0
}

// Turn control
const toggleTurn = () => {
  currentTurn.value = currentTurn.value === 'player' ? 'opponent' : 'player'
}

// Trump reveal
const triggerTrumpReveal = () => {
  revealTrump.value = true
  setTimeout(() => {
    revealTrump.value = false
  }, 100)
}

// Game Over screens
const showGameOverPlayerWin = () => {
  playerScore.value = 67
  opponentScore.value = 53
  gameOverWinner.value = 'player'
  gameOverStats.value = {
    playerTricks: 11,
    opponentTricks: 9,
  }
  gameOverVisible.value = true
}

const showGameOverOpponentWin = () => {
  playerScore.value = 45
  opponentScore.value = 75
  gameOverWinner.value = 'opponent'
  gameOverStats.value = {
    playerTricks: 7,
    opponentTricks: 13,
  }
  gameOverVisible.value = true
}

const showGameOverDraw = () => {
  playerScore.value = 60
  opponentScore.value = 60
  gameOverWinner.value = 'draw'
  gameOverStats.value = {
    playerTricks: 10,
    opponentTricks: 10,
  }
  gameOverVisible.value = true
}

const handlePlayAgain = () => {
  gameOverVisible.value = false
  resetScores()
  currentTurn.value = 'player'
  cardsRemaining.value = 40
}

// Full animation sequence
const runFullSequence = async () => {
  if (isRunningSequence.value) return
  isRunningSequence.value = true

  // Reset everything
  resetScores()
  currentTurn.value = 'player'
  gameOverVisible.value = false
  await new Promise((resolve) => setTimeout(resolve, 500))

  // 1. Trump Reveal
  console.log('1. Trump Reveal')
  triggerTrumpReveal()
  await new Promise((resolve) => setTimeout(resolve, 3500))

  // 2. First turn
  console.log('2. Player turn')
  currentTurn.value = 'player'
  await new Promise((resolve) => setTimeout(resolve, 1500))

  // 3. Player scores
  console.log('3. Player scores')
  playerScore.value = 11
  await new Promise((resolve) => setTimeout(resolve, 2000))

  // 4. Switch turn
  console.log('4. Switch to opponent turn')
  currentTurn.value = 'opponent'
  await new Promise((resolve) => setTimeout(resolve, 1500))

  // 5. Opponent scores
  console.log('5. Opponent scores')
  opponentScore.value = 10
  await new Promise((resolve) => setTimeout(resolve, 2000))

  // 6. Back to player
  console.log('6. Back to player')
  currentTurn.value = 'player'
  await new Promise((resolve) => setTimeout(resolve, 1000))

  // 7. More scoring
  console.log('7. More scoring')
  playerScore.value = 23
  await new Promise((resolve) => setTimeout(resolve, 1500))
  opponentScore.value = 19
  await new Promise((resolve) => setTimeout(resolve, 1500))
  playerScore.value = 34
  await new Promise((resolve) => setTimeout(resolve, 1500))

  // 8. Final scores and game over
  console.log('8. Game over')
  playerScore.value = 67
  opponentScore.value = 53
  await new Promise((resolve) => setTimeout(resolve, 2000))

  // Show game over
  gameOverWinner.value = 'player'
  gameOverStats.value = {
    playerTricks: 11,
    opponentTricks: 9,
  }
  gameOverVisible.value = true

  isRunningSequence.value = false
}
</script>
