<template>
  <div class="game-board-container">
    <!-- Baseball Diamond Visualization -->
    <div class="relative w-full max-w-md mx-auto aspect-square">
      <!-- Field Background (Green) -->
      <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-700 rounded-lg overflow-hidden">
        <!-- Infield Dirt (Diamond Shape) -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="relative w-3/4 h-3/4">
            <div class="absolute inset-0 rotate-45 bg-gradient-to-br from-amber-700 to-amber-800 rounded-lg opacity-80"/>
          </div>
        </div>

        <!-- Base Paths (White Lines) -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100">
          <!-- 1st to 2nd base line -->
          <line x1="72" y1="50" x2="50" y2="28" stroke="white" stroke-width="0.3" opacity="0.6" />
          <!-- 2nd to 3rd base line -->
          <line x1="50" y1="28" x2="28" y2="50" stroke="white" stroke-width="0.3" opacity="0.6" />
          <!-- 3rd to home line -->
          <line x1="28" y1="50" x2="50" y2="72" stroke="white" stroke-width="0.3" opacity="0.6" />
          <!-- Home to 1st line -->
          <line x1="50" y1="72" x2="72" y2="50" stroke="white" stroke-width="0.3" opacity="0.6" />
        </svg>

        <!-- Pitcher's Mound -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
          <div class="w-10 h-10 bg-amber-700 rounded-full border-2 border-amber-600 shadow-lg flex items-center justify-center">
            <div class="w-6 h-6 bg-white/20 rounded-full"/>
          </div>
        </div>

        <!-- Current Pitcher (on mound) -->
        <button
          v-if="currentPitcher"
          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mt-12 cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 rounded-lg"
          @click="openPlayerCard('pitcher')"
        >
          <div class="text-center">
            <div class="w-8 h-8 mx-auto bg-blue-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center text-white text-xs font-bold">
              P
            </div>
            <div class="mt-1 text-xs font-semibold text-white bg-black/30 backdrop-blur px-2 py-0.5 rounded-full whitespace-nowrap">
              {{ getPitcherName }}
            </div>
          </div>
        </button>

        <!-- Home Plate -->
        <div class="absolute bottom-[14%] left-1/2 -translate-x-1/2">
          <div class="relative">
            <!-- Home Plate (Pentagon Shape) -->
            <div class="w-8 h-8 bg-white rotate-45 shadow-xl border-2 border-gray-200"/>

            <!-- Current Batter -->
            <button
              v-if="currentBatter"
              class="absolute -bottom-14 left-1/2 -translate-x-1/2 w-32 cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 rounded-lg"
              @click="openPlayerCard('batter')"
            >
              <div class="text-center">
                <div class="w-8 h-8 mx-auto bg-red-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center text-white text-xs font-bold mb-1">
                  B
                </div>
                <div class="text-xs font-semibold text-white bg-black/40 backdrop-blur px-2 py-1 rounded-lg">
                  {{ getBatterName }}
                </div>
                <div class="text-[10px] text-white/80 mt-0.5">
                  Batting {{ currentBatter.batting_order }}
                </div>
              </div>
            </button>
          </div>
        </div>

        <!-- 1st Base -->
        <div class="absolute top-1/2 right-[14%] -translate-y-1/2">
          <div
            class="w-10 h-10 rotate-45 shadow-xl transition-all duration-300"
            :class="runners.first ? 'bg-yellow-400 border-2 border-yellow-300 animate-pulse-subtle' : 'bg-white/90 border-2 border-gray-200'"
          >
            <!-- Runner on 1st -->
            <div
              v-if="runners.first"
              class="absolute -top-8 left-1/2 -translate-x-1/2 -rotate-45"
            >
              <div class="w-6 h-6 bg-yellow-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center">
                <span class="text-white text-[10px] font-bold">1</span>
              </div>
            </div>
          </div>
          <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] font-bold text-white/60 whitespace-nowrap">
            1ST
          </div>
        </div>

        <!-- 2nd Base -->
        <div class="absolute top-[14%] left-1/2 -translate-x-1/2">
          <div
            class="w-10 h-10 rotate-45 shadow-xl transition-all duration-300"
            :class="runners.second ? 'bg-yellow-400 border-2 border-yellow-300 animate-pulse-subtle' : 'bg-white/90 border-2 border-gray-200'"
          >
            <!-- Runner on 2nd -->
            <div
              v-if="runners.second"
              class="absolute -top-8 left-1/2 -translate-x-1/2 -rotate-45"
            >
              <div class="w-6 h-6 bg-yellow-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center">
                <span class="text-white text-[10px] font-bold">2</span>
              </div>
            </div>
          </div>
          <div class="absolute -top-6 left-1/2 -translate-x-1/2 text-[10px] font-bold text-white/60 whitespace-nowrap">
            2ND
          </div>
        </div>

        <!-- 3rd Base -->
        <div class="absolute top-1/2 left-[14%] -translate-y-1/2">
          <div
            class="w-10 h-10 rotate-45 shadow-xl transition-all duration-300"
            :class="runners.third ? 'bg-yellow-400 border-2 border-yellow-300 animate-pulse-subtle' : 'bg-white/90 border-2 border-gray-200'"
          >
            <!-- Runner on 3rd -->
            <div
              v-if="runners.third"
              class="absolute -top-8 left-1/2 -translate-x-1/2 -rotate-45"
            >
              <div class="w-6 h-6 bg-yellow-500 rounded-full border-2 border-white shadow-lg flex items-center justify-center">
                <span class="text-white text-[10px] font-bold">3</span>
              </div>
            </div>
          </div>
          <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] font-bold text-white/60 whitespace-nowrap">
            3RD
          </div>
        </div>

        <!-- Outfield Grass Pattern (Subtle) -->
        <div class="absolute inset-0 opacity-10 pointer-events-none">
          <div class="absolute inset-0" style="background: repeating-linear-gradient(90deg, transparent 0px, transparent 20px, rgba(0,0,0,0.05) 20px, rgba(0,0,0,0.05) 40px)"/>
        </div>

        <!-- Expanded View: All 9 Fielder Positions -->
        <template v-if="isExpanded">
          <!-- Catcher (behind home) -->
          <button
            class="absolute bottom-[6%] left-1/2 -translate-x-1/2 fielder-button"
            :class="{ 'fielder-active': getFielderInfo('C').exists }"
            :title="getFielderInfo('C').name || 'Catcher'"
            @click="openFielderCard('C')"
          >
            <span class="fielder-label">{{ getFielderInfo('C').initials }}</span>
          </button>

          <!-- First Baseman -->
          <button
            class="absolute top-[45%] right-[20%] fielder-button"
            :class="{ 'fielder-active': getFielderInfo('1B').exists }"
            :title="getFielderInfo('1B').name || 'First Base'"
            @click="openFielderCard('1B')"
          >
            <span class="fielder-label">{{ getFielderInfo('1B').initials }}</span>
          </button>

          <!-- Second Baseman -->
          <button
            class="absolute top-[35%] right-[35%] fielder-button"
            :class="{ 'fielder-active': getFielderInfo('2B').exists }"
            :title="getFielderInfo('2B').name || 'Second Base'"
            @click="openFielderCard('2B')"
          >
            <span class="fielder-label">{{ getFielderInfo('2B').initials }}</span>
          </button>

          <!-- Shortstop -->
          <button
            class="absolute top-[35%] left-[35%] fielder-button"
            :class="{ 'fielder-active': getFielderInfo('SS').exists }"
            :title="getFielderInfo('SS').name || 'Shortstop'"
            @click="openFielderCard('SS')"
          >
            <span class="fielder-label">{{ getFielderInfo('SS').initials }}</span>
          </button>

          <!-- Third Baseman -->
          <button
            class="absolute top-[45%] left-[20%] fielder-button"
            :class="{ 'fielder-active': getFielderInfo('3B').exists }"
            :title="getFielderInfo('3B').name || 'Third Base'"
            @click="openFielderCard('3B')"
          >
            <span class="fielder-label">{{ getFielderInfo('3B').initials }}</span>
          </button>

          <!-- Left Fielder -->
          <button
            class="absolute top-[15%] left-[15%] fielder-button fielder-outfield"
            :class="{ 'fielder-active': getFielderInfo('LF').exists }"
            :title="getFielderInfo('LF').name || 'Left Field'"
            @click="openFielderCard('LF')"
          >
            <span class="fielder-label">{{ getFielderInfo('LF').initials }}</span>
          </button>

          <!-- Center Fielder -->
          <button
            class="absolute top-[8%] left-1/2 -translate-x-1/2 fielder-button fielder-outfield"
            :class="{ 'fielder-active': getFielderInfo('CF').exists }"
            :title="getFielderInfo('CF').name || 'Center Field'"
            @click="openFielderCard('CF')"
          >
            <span class="fielder-label">{{ getFielderInfo('CF').initials }}</span>
          </button>

          <!-- Right Fielder -->
          <button
            class="absolute top-[15%] right-[15%] fielder-button fielder-outfield"
            :class="{ 'fielder-active': getFielderInfo('RF').exists }"
            :title="getFielderInfo('RF').name || 'Right Field'"
            @click="openFielderCard('RF')"
          >
            <span class="fielder-label">{{ getFielderInfo('RF').initials }}</span>
          </button>
        </template>

        <!-- Expand/Collapse Button -->
        <button
          class="absolute bottom-2 right-2 w-8 h-8 bg-white/90 hover:bg-white rounded-full shadow-lg flex items-center justify-center text-gray-700 transition-all hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-400"
          @click="toggleExpanded"
          :title="isExpanded ? 'Collapse field view' : 'Expand to see all fielders'"
        >
          <svg v-if="!isExpanded" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
          </svg>
          <svg v-else class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Player Card Modal -->
    <PlayerCardModal
      :is-open="isPlayerCardOpen"
      :player="selectedPlayerData"
      :position="selectedPlayerPosition"
      :show-substitute-button="false"
      @close="closePlayerCard"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import type { LineupPlayerState } from '~/types/game'
import type { Lineup } from '~/types/player'
import { useGameStore } from '~/store/game'
import PlayerCardModal from '~/components/Player/PlayerCardModal.vue'

interface Props {
  runners?: {
    first: boolean
    second: boolean
    third: boolean
  }
  currentBatter?: LineupPlayerState | null
  currentPitcher?: LineupPlayerState | null
  fieldingLineup?: Lineup[]
}

const props = withDefaults(defineProps<Props>(), {
  runners: () => ({ first: false, second: false, third: false }),
  currentBatter: null,
  currentPitcher: null,
  fieldingLineup: () => []
})

const gameStore = useGameStore()

// UI State
const isExpanded = ref(false)
const isPlayerCardOpen = ref(false)
const selectedPlayerData = ref<{
  id: number
  name: string
  image: string
  headshot?: string
} | null>(null)
const selectedPlayerPosition = ref('')

// Resolve player data from lineup using lineup_id
const batterPlayer = computed(() => {
  if (!props.currentBatter) return null
  const lineupEntry = gameStore.findPlayerInLineup(props.currentBatter.lineup_id)
  return lineupEntry?.player ?? null
})

const pitcherPlayer = computed(() => {
  if (!props.currentPitcher) return null
  const lineupEntry = gameStore.findPlayerInLineup(props.currentPitcher.lineup_id)
  return lineupEntry?.player ?? null
})

// Helper to get player name with fallback
const getBatterName = computed(() => batterPlayer.value?.name ?? `Player #${props.currentBatter?.lineup_id}`)
const getPitcherName = computed(() => pitcherPlayer.value?.name ?? `Player #${props.currentPitcher?.lineup_id}`)

// Toggle expanded view
function toggleExpanded() {
  isExpanded.value = !isExpanded.value
}

// Open player card modal
function openPlayerCard(type: 'batter' | 'pitcher') {
  const player = type === 'batter' ? batterPlayer.value : pitcherPlayer.value
  const state = type === 'batter' ? props.currentBatter : props.currentPitcher

  if (!player) return

  selectedPlayerData.value = {
    id: player.id,
    name: player.name,
    image: player.image || '',
    headshot: player.headshot || undefined
  }
  selectedPlayerPosition.value = state?.position || (type === 'pitcher' ? 'P' : '')
  isPlayerCardOpen.value = true
}

function closePlayerCard() {
  isPlayerCardOpen.value = false
  selectedPlayerData.value = null
}

// Get fielder by position from lineup
function getFielderByPosition(position: string): Lineup | null {
  return props.fieldingLineup.find(p => p.position === position) || null
}

// Open fielder card modal
function openFielderCard(position: string) {
  const fielder = getFielderByPosition(position)
  if (!fielder) return

  selectedPlayerData.value = {
    id: fielder.player.id,
    name: fielder.player.name,
    image: fielder.player.image || '',
    headshot: fielder.player.headshot || undefined
  }
  selectedPlayerPosition.value = position
  isPlayerCardOpen.value = true
}

// Get fielder display info (name initials and whether they exist)
function getFielderInfo(position: string): { initials: string; name: string; exists: boolean } {
  const fielder = getFielderByPosition(position)
  if (!fielder) {
    return { initials: position, name: '', exists: false }
  }
  const nameParts = fielder.player.name.split(' ')
  const initials = nameParts.length >= 2
    ? `${nameParts[0][0]}${nameParts[nameParts.length - 1][0]}`
    : nameParts[0].substring(0, 2)
  return { initials: initials.toUpperCase(), name: fielder.player.name, exists: true }
}
</script>

<style scoped>
/* Subtle pulse for runners on base */
@keyframes pulse-subtle {
  0%, 100% {
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.05) rotate(45deg);
    opacity: 0.9;
  }
}

.animate-pulse-subtle {
  animation: pulse-subtle 2s ease-in-out infinite;
}

/* Fielder buttons in expanded view */
.fielder-button {
  @apply w-7 h-7 rounded-full border-2 border-white shadow-lg;
  @apply flex items-center justify-center;
  @apply bg-gray-500 text-white;
  @apply cursor-pointer transition-all duration-200;
  @apply hover:scale-110 hover:bg-gray-600;
  @apply focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-1;
}

.fielder-button.fielder-active {
  @apply bg-blue-600 hover:bg-blue-700;
}

.fielder-button.fielder-outfield {
  @apply bg-green-600;
}

.fielder-button.fielder-outfield.fielder-active {
  @apply bg-emerald-600 hover:bg-emerald-700;
}

.fielder-label {
  @apply text-[9px] font-bold leading-none;
}

</style>
