<template>
  <div class="bg-gray-50 dark:bg-gray-900">
    <!-- Main Game Container -->
    <div class="container mx-auto px-4 py-6 lg:py-8">
      <!-- Connection Error Banner (Permanently Failed) -->
      <div
        v-if="permanentlyFailed"
        class="mb-4 bg-red-50 border-l-4 border-red-500 p-4 rounded-lg"
      >
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="ml-3">
              <p class="text-sm font-medium text-red-800">
                Connection Failed
              </p>
              <p class="text-sm text-red-700 mt-1">
                Unable to connect to the game server after multiple attempts. Please check your internet connection and try again.
              </p>
            </div>
          </div>
          <button
            @click="manualRetry"
            class="ml-4 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition flex-shrink-0"
          >
            Try Again
          </button>
        </div>
      </div>

      <!-- Connection Status Banner (Reconnecting) -->
      <div
        v-else-if="!isConnected"
        class="mb-4 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-lg"
      >
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-yellow-400 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
              </svg>
            </div>
            <div class="ml-3">
              <p class="text-sm text-yellow-700">
                {{ connectionStatus === 'connecting' ? 'Connecting to game server...' : 'Disconnected from server. Attempting to reconnect...' }}
              </p>
            </div>
          </div>
          <button
            @click="forceReconnect"
            class="ml-4 px-3 py-1 text-sm font-medium text-yellow-700 bg-yellow-100 hover:bg-yellow-200 rounded-md transition"
          >
            Retry
          </button>
        </div>
      </div>

      <!-- Mobile Layout (Stacked) -->
      <div class="lg:hidden space-y-6">
        <!-- Current Situation -->
        <CurrentSituation
          :current-batter="gameState?.current_batter"
          :current-pitcher="gameState?.current_pitcher"
          :active-card="activeCard"
          :batter-team-abbrev="batterTeamAbbrev"
          :pitcher-team-abbrev="pitcherTeamAbbrev"
        />

        <!-- Runners on Base (with expandable cards) -->
        <RunnersOnBase
          :runners="runnersData"
          :fielding-lineup="fieldingLineup"
          :batting-team-color="battingTeamColor"
          :fielding-team-color="fieldingTeamColor"
          :batting-team-abbrev="batterTeamAbbrev"
          :fielding-team-abbrev="pitcherTeamAbbrev"
        />

        <!-- Decision Panel (Phase F3) -->
        <DecisionPanel
          v-if="showDecisions"
          :game-id="gameId"
          :current-team="currentTeam"
          :is-my-turn="isMyTurn"
          :phase="decisionPhase"
          :runners="runnersData"
          :current-defensive-setup="pendingDefensiveSetup ?? undefined"
          :current-offensive-decision="pendingOffensiveDecision ?? undefined"
          :current-steal-attempts="pendingStealAttempts"
          :decision-history="decisionHistory"
          @defensive-submit="handleDefensiveSubmit"
          @offensive-submit="handleOffensiveSubmit"
          @steal-attempts-submit="handleStealAttemptsSubmit"
        />

        <!-- Gameplay Panel (Phase F4) -->
        <GameplayPanel
          v-if="showGameplay"
          :game-id="gameId"
          :is-my-turn="isMyTurn"
          :can-roll-dice="canRollDice"
          :pending-roll="pendingRoll"
          :last-play-result="lastPlayResult"
          :can-submit-outcome="canSubmitOutcome"
          :outs="gameState?.outs ?? 0"
          :has-runners="!!(gameState?.on_first || gameState?.on_second || gameState?.on_third)"
          :dice-color="diceColor"
          @roll-dice="handleRollDice"
          @submit-outcome="handleSubmitOutcome"
          @dismiss-result="handleDismissResult"
        />

        <!-- Play-by-Play Feed (below gameplay on mobile) -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
          <PlayByPlay
            :plays="playHistory"
            :limit="5"
            :compact="true"
          />
        </div>
      </div>

      <!-- Desktop Layout (Grid) -->
      <div class="hidden lg:grid lg:grid-cols-3 gap-6">
        <!-- Left Column: Game State -->
        <div class="lg:col-span-2 space-y-6">
          <!-- Current Situation -->
          <CurrentSituation
            :current-batter="gameState?.current_batter"
            :current-pitcher="gameState?.current_pitcher"
            :active-card="activeCard"
            :batter-team-abbrev="batterTeamAbbrev"
            :pitcher-team-abbrev="pitcherTeamAbbrev"
          />

          <!-- Runners on Base (with expandable cards) -->
          <RunnersOnBase
            :runners="runnersData"
            :fielding-lineup="fieldingLineup"
            :batting-team-color="battingTeamColor"
            :fielding-team-color="fieldingTeamColor"
            :batting-team-abbrev="batterTeamAbbrev"
            :fielding-team-abbrev="pitcherTeamAbbrev"
          />

          <!-- Decision Panel (Phase F3) -->
          <DecisionPanel
            v-if="showDecisions"
            :game-id="gameId"
            :current-team="currentTeam"
            :is-my-turn="isMyTurn"
            :phase="decisionPhase"
            :runners="runnersData"
            :current-defensive-setup="pendingDefensiveSetup ?? undefined"
            :current-offensive-decision="pendingOffensiveDecision ?? undefined"
            :current-steal-attempts="pendingStealAttempts"
            :decision-history="decisionHistory"
            @defensive-submit="handleDefensiveSubmit"
            @offensive-submit="handleOffensiveSubmit"
            @steal-attempts-submit="handleStealAttemptsSubmit"
          />

          <!-- Gameplay Panel (Phase F4) -->
          <GameplayPanel
            v-if="showGameplay"
            :game-id="gameId"
            :is-my-turn="isMyTurn"
            :can-roll-dice="canRollDice"
            :pending-roll="pendingRoll"
            :last-play-result="lastPlayResult"
            :can-submit-outcome="canSubmitOutcome"
            :outs="gameState?.outs ?? 0"
            :has-runners="!!(gameState?.on_first || gameState?.on_second || gameState?.on_third)"
            :dice-color="diceColor"
            @roll-dice="handleRollDice"
            @submit-outcome="handleSubmitOutcome"
            @dismiss-result="handleDismissResult"
          />
        </div>

        <!-- Right Column: Play-by-Play -->
        <div class="lg:col-span-1">
          <div
            class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg sticky top-36"
          >
            <PlayByPlay
              :plays="playHistory"
              :scrollable="true"
              :max-height="600"
              :show-filters="true"
            />
          </div>
        </div>
      </div>

      <!-- Loading State -->
      <div
        v-if="isLoading"
        class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
      >
        <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-2xl text-center max-w-sm mx-4">
          <!-- Show spinner only if actively connecting -->
          <div v-if="isConnecting" class="w-16 h-16 mx-auto mb-4 border-4 border-primary border-t-transparent rounded-full animate-spin"/>

          <!-- Show error state if not connecting -->
          <div v-else class="w-16 h-16 mx-auto mb-4 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>

          <p class="text-gray-900 dark:text-white font-semibold">
            {{ isConnecting ? 'Connecting to game...' : permanentlyFailed ? 'Connection Failed' : 'Reconnecting...' }}
          </p>
          <p v-if="permanentlyFailed" class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Unable to reach server after multiple attempts
          </p>

          <!-- Status info -->
          <div class="mt-4 p-3 bg-gray-100 dark:bg-gray-700 rounded-lg text-left">
            <div class="flex items-center gap-2 text-sm">
              <span :class="authStore.isAuthenticated ? 'text-green-600' : authStore.isLoading ? 'text-yellow-600' : 'text-red-600'">●</span>
              <span class="text-gray-700 dark:text-gray-300">Auth: {{ authStore.isAuthenticated ? 'OK' : authStore.isLoading ? 'Checking...' : 'Failed' }}</span>
            </div>
            <div class="flex items-center gap-2 text-sm mt-1">
              <span :class="isConnected ? 'text-green-600' : isConnecting ? 'text-yellow-600' : permanentlyFailed ? 'text-red-600' : 'text-orange-500'">●</span>
              <span class="text-gray-700 dark:text-gray-300">WebSocket: {{ isConnected ? 'Connected' : isConnecting ? 'Connecting...' : permanentlyFailed ? 'Failed' : 'Reconnecting...' }}</span>
            </div>
            <p v-if="connectionError" class="text-xs text-red-600 mt-2">{{ connectionError }}</p>
            <!-- Debug info -->
            <div class="mt-2 text-xs text-gray-500 border-t pt-2">
              <p>WS URL: {{ wsDebugUrl }}</p>
              <p>Socket exists: {{ socketExists }}</p>
              <p class="mt-1 font-mono text-[10px] max-h-24 overflow-y-auto">{{ debugLog }}</p>
            </div>
          </div>

          <!-- Action buttons -->
          <div class="mt-4 flex flex-col gap-2">
            <button
              @click="permanentlyFailed ? manualRetry() : forceReconnect()"
              :class="permanentlyFailed ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'"
              class="w-full px-4 py-2 text-sm font-medium text-white rounded-lg transition"
            >
              {{ permanentlyFailed ? 'Try Again' : 'Retry Connection' }}
            </button>
            <button
              v-if="!authStore.isAuthenticated"
              @click="navigateTo('/auth/login?return_url=' + encodeURIComponent(currentPath))"
              class="w-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 rounded-lg transition"
            >
              Re-Login
            </button>
            <button
              @click="isLoading = false"
              class="w-full px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
            >
              Dismiss (view page anyway)
            </button>
          </div>
        </div>
      </div>

      <!-- Game Not Started State -->
      <div
        v-if="gameState && gameState.status === 'pending'"
        class="mt-6 bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-200 dark:border-blue-700 rounded-xl p-8 text-center"
      >
        <div class="w-20 h-20 mx-auto mb-4 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Game Starting Soon</h3>
        <p class="text-gray-600 dark:text-gray-400">
          Waiting for all players to join. The game will begin once everyone is ready.
        </p>
      </div>

      <!-- Game Ended State -->
      <div
        v-if="gameState && gameState.status === 'completed'"
        class="mt-6 bg-green-50 dark:bg-green-900/20 border-2 border-green-200 dark:border-green-700 rounded-xl p-8 text-center"
      >
        <div class="w-20 h-20 mx-auto mb-4 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Game Complete!</h3>
        <p class="text-xl text-gray-700 dark:text-gray-300 mb-4">
          Final Score: {{ gameState.away_score }} - {{ gameState.home_score }}
        </p>
        <button
          class="px-6 py-3 bg-primary hover:bg-blue-700 text-white rounded-lg font-semibold transition shadow-md"
          @click="navigateTo('/')"
        >
          Back to Games
        </button>
      </div>
    </div>

    <!-- Floating Action Button - Undo -->
    <div class="fixed bottom-6 right-6 z-40">
      <button
        v-if="canUndo"
        class="w-14 h-14 bg-amber-500 hover:bg-amber-600 text-white rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-110"
        aria-label="Undo Last Play"
        title="Undo Last Play"
        @click="handleUndoLastPlay"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGameStore } from '~/store/game'
import { useAuthStore } from '~/store/auth'
import { useUiStore } from '~/store/ui'
import { useWebSocket } from '~/composables/useWebSocket'
import { useGameActions } from '~/composables/useGameActions'
import CurrentSituation from '~/components/Game/CurrentSituation.vue'
import RunnersOnBase from '~/components/Game/RunnersOnBase.vue'
import PlayByPlay from '~/components/Game/PlayByPlay.vue'
import DecisionPanel from '~/components/Decisions/DecisionPanel.vue'
import GameplayPanel from '~/components/Gameplay/GameplayPanel.vue'
import type { DefensiveDecision, OffensiveDecision, PlayOutcome } from '~/types/game'

// Props
const props = defineProps<{
  gameId: string
}>()

const route = useRoute()
const gameStore = useGameStore()
const authStore = useAuthStore()
const uiStore = useUiStore()

// Current path for login redirect
const currentPath = computed(() => route.fullPath)

// WebSocket connection
const { socket, isConnected, isConnecting, connectionError, permanentlyFailed, connect, forceReconnect, manualRetry } = useWebSocket()

// Debug info for troubleshooting Safari WebSocket issues
const config = useRuntimeConfig()
const wsDebugUrl = computed(() => config.public.wsUrl || 'not set')
const socketExists = computed(() => socket.value ? 'yes' : 'no')
const debugLog = ref('Loading...')

// Pass the gameId prop to useGameActions
const actions = useGameActions(props.gameId)

// Destructure undoLastPlay for the undo button
const { undoLastPlay } = actions

// Game state from store
const gameState = computed(() => {
  const state = gameStore.gameState
  if (state) {
    const batterInfo = state.current_batter
      ? `lineup_id=${state.current_batter.lineup_id}, batting_order=${state.current_batter.batting_order}`
      : 'None'
    console.log('[GamePlay] gameState computed - current_batter:', batterInfo)
  }
  return state
})
const playHistory = computed(() => gameStore.playHistory)
const canRollDice = computed(() => gameStore.canRollDice)
const canSubmitOutcome = computed(() => gameStore.canSubmitOutcome)
const pendingDefensiveSetup = computed(() => gameStore.pendingDefensiveSetup)
const pendingOffensiveDecision = computed(() => gameStore.pendingOffensiveDecision)
const pendingStealAttempts = computed(() => gameStore.pendingStealAttempts)
const decisionHistory = computed(() => gameStore.decisionHistory)
const needsDefensiveDecision = computed(() => gameStore.needsDefensiveDecision)
const needsOffensiveDecision = computed(() => gameStore.needsOffensiveDecision)
const basesEmpty = computed(() => gameStore.basesEmpty)
const pendingRoll = computed(() => gameStore.pendingRoll)
const lastPlayResult = computed(() => gameStore.lastPlayResult)
const currentDecisionPrompt = computed(() => gameStore.currentDecisionPrompt)

// Home team's dice color for the dice display
const diceColor = computed(() => gameState.value?.home_team_dice_color ?? 'cc0000')

// Active card for highlighting based on dice roll (d6_one: 1-3 = batter, 4-6 = pitcher)
const activeCard = computed<'batter' | 'pitcher' | null>(() => {
  if (!pendingRoll.value) return null
  return pendingRoll.value.d6_one <= 3 ? 'batter' : 'pitcher'
})

// Team abbreviations for batter and pitcher cards
// Top of inning: away bats, home fields
// Bottom of inning: home bats, away fields
const batterTeamAbbrev = computed(() => {
  if (!gameState.value) return ''
  return gameState.value.half === 'top'
    ? gameState.value.away_team_abbrev ?? ''
    : gameState.value.home_team_abbrev ?? ''
})

const pitcherTeamAbbrev = computed(() => {
  if (!gameState.value) return ''
  return gameState.value.half === 'top'
    ? gameState.value.home_team_abbrev ?? ''
    : gameState.value.away_team_abbrev ?? ''
})

// Team colors for runner/catcher matchup display
const battingTeamColor = computed(() => {
  if (!gameState.value) return '#3b82f6'
  // Use home team dice color when home team is batting, otherwise use a default blue
  return gameState.value.half === 'bottom'
    ? `#${gameState.value.home_team_dice_color}`
    : '#3b82f6'
})

const fieldingTeamColor = computed(() => {
  if (!gameState.value) return '#10b981'
  // Use home team dice color when home team is fielding, otherwise use a default green
  return gameState.value.half === 'top'
    ? `#${gameState.value.home_team_dice_color}`
    : '#10b981'
})

// Local UI state
const isLoading = ref(true)
const connectionStatus = ref<'connecting' | 'connected' | 'disconnected'>('connecting')

// Determine which team the user controls
// For demo/testing: user controls whichever team needs to act
const myTeamId = computed(() => {
  if (!gameState.value) return null

  // Return the team that currently needs to make a decision
  if (gameState.value.half === 'top') {
    // Top: away bats, home fields
    return gameState.value.decision_phase === 'awaiting_defensive'
      ? gameState.value.home_team_id
      : gameState.value.away_team_id
  } else {
    // Bottom: home bats, away fields
    return gameState.value.decision_phase === 'awaiting_defensive'
      ? gameState.value.away_team_id
      : gameState.value.home_team_id
  }
})

// Computed helpers
const runnersState = computed(() => {
  if (!gameState.value) {
    return { first: false, second: false, third: false }
  }

  return {
    first: gameState.value.on_first !== null,
    second: gameState.value.on_second !== null,
    third: gameState.value.on_third !== null
  }
})

const runnersData = computed(() => {
  return {
    first: gameState.value?.on_first ?? null,
    second: gameState.value?.on_second ?? null,
    third: gameState.value?.on_third ?? null,
  }
})

// Get active fielding lineup for GameBoard
const fieldingLineup = computed(() => {
  if (!gameState.value) return []

  // Top of inning: home team fields; Bottom: away team fields
  const fieldingTeamId = gameState.value.half === 'top'
    ? gameState.value.home_team_id
    : gameState.value.away_team_id

  const lineup = fieldingTeamId === gameState.value.home_team_id
    ? gameStore.homeLineup
    : gameStore.awayLineup

  // Return only active players
  return lineup.filter(p => p.is_active)
})

const currentTeam = computed(() => {
  return gameState.value?.half === 'top' ? 'away' : 'home'
})

// Determine if it's the current user's turn to act
const isMyTurn = computed(() => {
  if (!myTeamId.value || !gameState.value) return false

  // During decision phases, check which team needs to decide
  if (needsDefensiveDecision.value) {
    // Fielding team makes defensive decisions
    const fieldingTeamId = gameState.value.half === 'top'
      ? gameState.value.home_team_id
      : gameState.value.away_team_id
    return myTeamId.value === fieldingTeamId
  }

  if (needsOffensiveDecision.value) {
    // Batting team makes offensive decisions
    const battingTeamId = gameState.value.half === 'top'
      ? gameState.value.away_team_id
      : gameState.value.home_team_id
    return myTeamId.value === battingTeamId
  }

  // During resolution phase (dice rolling, outcome submission),
  // the BATTING team has control (they read their card)
  const battingTeamId = gameState.value.half === 'top'
    ? gameState.value.away_team_id
    : gameState.value.home_team_id
  return myTeamId.value === battingTeamId
})

const decisionPhase = computed(() => {
  if (needsDefensiveDecision.value) return 'defensive'
  if (needsOffensiveDecision.value) return 'offensive'
  return 'idle'
})

// Phase F6: Conditional panel rendering
const showDecisions = computed(() => {
  // Don't show decision panels if there's a result pending dismissal
  if (lastPlayResult.value) {
    return false
  }

  const result = gameState.value?.status === 'active' &&
         isMyTurn.value &&
         (needsDefensiveDecision.value || needsOffensiveDecision.value)

  // Debug logging
  console.log('[GamePlay] Panel visibility check:', {
    gameStatus: gameState.value?.status,
    isMyTurn: isMyTurn.value,
    needsDefensiveDecision: needsDefensiveDecision.value,
    needsOffensiveDecision: needsOffensiveDecision.value,
    decision_phase: gameState.value?.decision_phase,
    showDecisions: result,
    currentDecisionPrompt: currentDecisionPrompt.value,
    hasLastPlayResult: !!lastPlayResult.value
  })

  return result
})

const showGameplay = computed(() => {
  // Show gameplay panel if there's a result to display OR if we're in the resolution phase
  if (lastPlayResult.value) {
    return true
  }

  return gameState.value?.status === 'active' &&
         isMyTurn.value &&
         !needsDefensiveDecision.value &&
         !needsOffensiveDecision.value
})

const canUndo = computed(() => {
  // Can only undo if game is active and there are plays to undo
  return gameState.value?.status === 'active' && (gameState.value?.play_count ?? 0) > 0
})

// Methods - Gameplay (Phase F4)
const handleRollDice = async () => {
  console.log('[GamePlay] Rolling dice')
  try {
    await actions.rollDice()
    // The dice_rolled event will update pendingRoll via WebSocket
  } catch (error) {
    console.error('[GamePlay] Failed to roll dice:', error)
  }
}

const handleSubmitOutcome = async (data: { outcome: PlayOutcome; hitLocation?: string }) => {
  console.log('[GamePlay] Submitting outcome:', data)
  try {
    await actions.submitManualOutcome(
      data.outcome,
      data.hitLocation
    )
    // Pending roll will be cleared by backend after successful submission
  } catch (error) {
    console.error('[GamePlay] Failed to submit outcome:', error)
  }
}

const handleDismissResult = () => {
  console.log('[GamePlay] Dismissing result')
  gameStore.clearLastPlayResult()
}

const handleDefensiveSubmit = async (decision: DefensiveDecision) => {
  console.log('[GamePlay] Submitting defensive decision:', decision)
  try {
    await actions.submitDefensiveDecision(decision)
    gameStore.setPendingDefensiveSetup(decision)
    gameStore.addDecisionToHistory('Defensive', `${decision.infield_depth} infield, ${decision.outfield_depth} outfield`)
  } catch (error) {
    console.error('[GamePlay] Failed to submit defensive decision:', error)
  }
}

const handleOffensiveSubmit = async (decision: Omit<OffensiveDecision, 'steal_attempts'>) => {
  console.log('[GamePlay] Submitting offensive decision:', decision)
  try {
    // Combine with steal attempts
    const fullDecision: OffensiveDecision = {
      ...decision,
      steal_attempts: pendingStealAttempts.value,
    }
    await actions.submitOffensiveDecision(fullDecision)
    gameStore.setPendingOffensiveDecision(decision)
    const actionLabels: Record<string, string> = {
      swing_away: 'Swing Away',
      steal: 'Steal',
      check_jump: 'Check Jump',
      hit_and_run: 'Hit & Run',
      sac_bunt: 'Sac Bunt',
      squeeze_bunt: 'Squeeze Bunt',
    }
    gameStore.addDecisionToHistory('Offensive', actionLabels[decision.action] || decision.action)
  } catch (error) {
    console.error('[GamePlay] Failed to submit offensive decision:', error)
  }
}

const handleStealAttemptsSubmit = (attempts: number[]) => {
  console.log('[GamePlay] Updating steal attempts:', attempts)
  gameStore.setPendingStealAttempts(attempts)
}

// Undo handler
const handleUndoLastPlay = () => {
  console.log('[GamePlay] Undoing last play')
  undoLastPlay(1)
}

// Lifecycle
onMounted(async () => {
  // Debug logging for Safari troubleshooting
  debugLog.value = `Mounted at ${new Date().toLocaleTimeString()}\n`
  debugLog.value += `isConnected: ${isConnected.value}, isConnecting: ${isConnecting.value}\n`

  // Try to connect WebSocket immediately - cookies will be sent automatically
  // Backend will authenticate via cookies and reject if invalid
  if (!isConnected.value && !isConnecting.value) {
    debugLog.value += 'Calling connect()...\n'
    connect()
    debugLog.value += 'connect() called\n'
  } else {
    debugLog.value += 'Skipped connect (already connected/connecting)\n'
  }

  // Also check auth store (for display purposes)
  authStore.checkAuth()

  // Wait for connection, then join game
  watch(isConnected, async (connected) => {
    if (connected) {
      connectionStatus.value = 'connected'
      console.log('[GamePlay] Connected - Joining game as player')

      // Join game room
      await actions.joinGame('player')

      // Request current game state
      await actions.requestGameState()

      isLoading.value = false
    } else {
      connectionStatus.value = 'disconnected'
    }
  }, { immediate: true })

  // Timeout fallback - if not connected after 5 seconds, stop loading
  setTimeout(() => {
    if (isLoading.value) {
      console.error('[GamePlay] Connection timeout - stopping loading state')
      isLoading.value = false
      connectionStatus.value = 'disconnected'
    }
  }, 5000)
})

// Watch for game state to load lineups
watch(gameState, (state, oldState) => {
  if (state && state.home_team_id && state.away_team_id) {
    const oldBatter = oldState?.current_batter
    const newBatter = state?.current_batter
    const oldBatterInfo = oldBatter
      ? `lineup_id=${oldBatter.lineup_id}, batting_order=${oldBatter.batting_order}`
      : 'None'
    const newBatterInfo = newBatter
      ? `lineup_id=${newBatter.lineup_id}, batting_order=${newBatter.batting_order}`
      : 'None'
    console.log('[GamePlay] gameState watch - current_batter:', oldBatterInfo, '->', newBatterInfo)
    // Request lineup data for both teams to populate player names
    console.log('[GamePlay] Game state received - requesting lineups for teams:', state.home_team_id, state.away_team_id)
    actions.getLineup(state.home_team_id)
    actions.getLineup(state.away_team_id)
  }
}, { immediate: true })

// Quality of Life: Auto-submit default decisions when bases are empty
watch([needsDefensiveDecision, needsOffensiveDecision, basesEmpty], ([defensive, offensive, empty]) => {
  // Only auto-submit if it's the player's turn and bases are empty
  if (!isMyTurn.value || !empty) return

  // Auto-submit defensive decision with defaults
  if (defensive && !pendingDefensiveSetup.value) {
    const defaultDefense: DefensiveDecision = {
      infield_depth: 'normal',
      outfield_depth: 'normal',
      hold_runners: []
    }
    console.log('[GamePlay] Bases empty - auto-submitting default defensive decision')
    uiStore.showInfo('Bases empty - auto-submitting default defensive setup', 2000)
    handleDefensiveSubmit(defaultDefense)
  }

  // Auto-submit offensive decision with swing away
  if (offensive && !pendingOffensiveDecision.value) {
    const defaultOffense = {
      action: 'swing_away' as const
    }
    console.log('[GamePlay] Bases empty - auto-submitting default offensive decision')
    uiStore.showInfo('Bases empty - auto-submitting swing away', 2000)
    handleOffensiveSubmit(defaultOffense)
  }
})

onUnmounted(() => {
  console.log('[GamePlay] Unmounted - Leaving game')

  // Leave game room
  actions.leaveGame()

  // Reset game store
  gameStore.resetGame()
})

// Watch for connection errors
watch(connectionError, (error) => {
  if (error) {
    console.error('[GamePlay] Connection error:', error)
  }
})
</script>

<style scoped>
/* Additional styling if needed */
</style>
