<template>
  <div class="play-by-play-container">
    <!-- Header -->
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        Play-by-Play
      </h2>
    </div>

    <!-- Tabs -->
    <div class="flex border-b border-gray-200 dark:border-gray-700 mb-4">
      <button
        class="flex-1 py-2 px-4 text-sm font-medium border-b-2 transition-colors"
        :class="activeTab === 'recent'
          ? 'text-primary border-primary'
          : 'text-gray-500 dark:text-gray-400 border-transparent hover:text-gray-700 dark:hover:text-gray-300'"
        @click="activeTab = 'recent'"
      >
        Recent
        <span
          v-if="recentPlays.length > 0"
          class="ml-1.5 px-1.5 py-0.5 text-xs rounded-full"
          :class="activeTab === 'recent'
            ? 'bg-primary/20 text-primary'
            : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400'"
        >
          {{ recentPlays.length }}
        </span>
      </button>
      <button
        class="flex-1 py-2 px-4 text-sm font-medium border-b-2 transition-colors"
        :class="activeTab === 'scoring'
          ? 'text-green-600 border-green-600'
          : 'text-gray-500 dark:text-gray-400 border-transparent hover:text-gray-700 dark:hover:text-gray-300'"
        @click="activeTab = 'scoring'"
      >
        Scoring
        <span
          v-if="scoringPlays.length > 0"
          class="ml-1.5 px-1.5 py-0.5 text-xs rounded-full"
          :class="activeTab === 'scoring'
            ? 'bg-green-100 dark:bg-green-900/30 text-green-600'
            : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400'"
        >
          {{ scoringPlays.length }}
        </span>
      </button>
    </div>

    <!-- Plays Feed -->
    <div
      class="space-y-2 overflow-y-auto"
      :class="scrollable ? 'max-h-96' : ''"
      :style="maxHeight ? `max-height: ${maxHeight}px` : ''"
    >
      <!-- Empty State -->
      <div
        v-if="displayedPlays.length === 0"
        class="text-center py-12 px-4"
      >
        <div class="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
          <svg v-if="activeTab === 'recent'" xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
          </svg>
        </div>
        <p class="text-gray-500 dark:text-gray-400 font-medium">
          {{ activeTab === 'recent' ? 'No plays this half inning' : 'No runs scored yet' }}
        </p>
        <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">
          {{ activeTab === 'recent' ? 'Plays will appear here as they happen' : 'Scoring plays will appear here' }}
        </p>
      </div>

      <!-- Play Items -->
      <TransitionGroup name="play-slide">
        <div
          v-for="play in displayedPlays"
          :key="play.play_number"
          class="play-item group"
        >
          <!-- Play Card -->
          <div
            class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm hover:shadow-md transition-all cursor-pointer border-l-4"
            :class="getPlayBorderColor(play)"
          >
            <!-- Play Header -->
            <div class="flex items-start justify-between mb-2">
              <div class="flex items-center gap-2">
                <!-- Play Icon -->
                <div
                  class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
                  :class="getPlayIconClass(play)"
                >
                  <component :is="getPlayIcon(play)" class="w-4 h-4" />
                </div>

                <!-- Inning Badge -->
                <span class="text-xs font-medium px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-full">
                  {{ formatInning(play) }}
                </span>
              </div>

              <!-- Play Number -->
              <span class="text-xs text-gray-400 font-mono">
                #{{ play.play_number }}
              </span>
            </div>

            <!-- Batter Name (if available) -->
            <p v-if="getBatterName(play)" class="text-xs text-gray-500 dark:text-gray-400 mb-1 font-medium">
              {{ getBatterName(play) }} batting
            </p>

            <!-- Play Description -->
            <p
              class="text-sm text-gray-900 dark:text-gray-100 font-medium leading-relaxed"
              :class="{'line-clamp-2 group-hover:line-clamp-none': compact}"
            >
              {{ play.description }}
            </p>

            <!-- Runner Movements (if any) -->
            <div v-if="hasRunnerMovements(play)" class="mt-2 space-y-0.5">
              <p
                v-for="(movement, idx) in getRunnerAdvancements(play)"
                :key="idx"
                class="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                </svg>
                <span>{{ movement }}</span>
              </p>
            </div>

            <!-- Play Stats (Runs/Outs) -->
            <div class="flex items-center gap-3 mt-3">
              <!-- Runs Scored -->
              <div
                v-if="play.runs_scored > 0"
                class="flex items-center gap-1 text-xs font-semibold text-green-600 dark:text-green-400"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                </svg>
                <span>{{ play.runs_scored }} {{ play.runs_scored === 1 ? 'Run' : 'Runs' }}</span>
              </div>

              <!-- Outs Recorded -->
              <div
                v-if="play.outs_recorded > 0"
                class="flex items-center gap-1 text-xs font-semibold text-red-600 dark:text-red-400"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-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>
                <span>{{ play.outs_recorded }} {{ play.outs_recorded === 1 ? 'Out' : 'Outs' }}</span>
              </div>

              <!-- Outcome Badge -->
              <div class="ml-auto">
                <span
                  class="text-xs px-2 py-0.5 rounded-full font-medium"
                  :class="getOutcomeBadgeClass(play)"
                >
                  {{ formatOutcome(play.outcome) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </TransitionGroup>
    </div>

    <!-- Total play count footer -->
    <div
      v-if="plays && plays.length > 0"
      class="text-center mt-4 pt-3 border-t border-gray-200 dark:border-gray-700"
    >
      <span class="text-xs text-gray-400 dark:text-gray-500">
        {{ plays.length }} total {{ plays.length === 1 ? 'play' : 'plays' }} this game
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PlayResult, RunnerAdvancement } from '~/types/game'
import { h } from 'vue'
import { useGameStore } from '~/store/game'

interface Props {
  plays?: PlayResult[]
  limit?: number
  compact?: boolean
  scrollable?: boolean
  maxHeight?: number
}

const props = withDefaults(defineProps<Props>(), {
  plays: () => [],
  limit: 10,
  compact: false,
  scrollable: true,
  maxHeight: 0
})

// Store for player name lookup and current game state
const gameStore = useGameStore()

// State
type TabType = 'recent' | 'scoring'
const activeTab = ref<TabType>('recent')

// Current game state for filtering recent plays
const currentInning = computed(() => gameStore.currentInning)
const currentHalf = computed(() => gameStore.currentHalf)

// Helper functions for player names
const getPlayerName = (lineupId: number | undefined): string | null => {
  if (!lineupId) return null
  const lineup = gameStore.findPlayerInLineup(lineupId)
  return lineup?.player?.name || null
}

const getBatterName = (play: PlayResult): string | null => {
  return getPlayerName(play.batter_lineup_id)
}

const formatBaseName = (base: number): string => {
  switch (base) {
    case 0: return 'Home'
    case 1: return '1st'
    case 2: return '2nd'
    case 3: return '3rd'
    case 4: return 'Home'
    default: return `${base}B`
  }
}

const formatRunnerAdvancement = (adv: RunnerAdvancement): string => {
  const playerName = getPlayerName(adv.lineup_id)
  const name = playerName || `R${adv.from}`
  const from = formatBaseName(adv.from)
  const to = adv.to === 4 ? 'scores' : formatBaseName(adv.to)

  if (adv.is_out) {
    return `${name} out at ${to}`
  } else if (adv.to === 4) {
    return `${name} ${to}`
  } else {
    return `${name}: ${from} → ${to}`
  }
}

const getRunnerAdvancements = (play: PlayResult): string[] => {
  if (!play.runners_advanced || play.runners_advanced.length === 0) {
    return []
  }
  return play.runners_advanced.map(formatRunnerAdvancement)
}

const hasRunnerMovements = (play: PlayResult): boolean => {
  return play.runners_advanced && play.runners_advanced.length > 0
}

// Computed - Filtered play lists
const recentPlays = computed(() => {
  if (!props.plays || props.plays.length === 0) return []

  // Filter plays from current half inning
  return props.plays.filter(play =>
    play.inning === currentInning.value && play.half === currentHalf.value
  ).sort((a, b) => b.play_number - a.play_number)
})

const scoringPlays = computed(() => {
  if (!props.plays || props.plays.length === 0) return []

  // Filter plays where runs were scored
  return props.plays.filter(play => play.runs_scored > 0)
    .sort((a, b) => b.play_number - a.play_number)
})

const displayedPlays = computed(() => {
  if (activeTab.value === 'recent') {
    return recentPlays.value
  } else {
    return scoringPlays.value
  }
})

// Methods
const formatInning = (play: PlayResult): string => {
  if (!play.inning) return 'Inning ?'
  const half = play.half === 'top' ? 'Top' : play.half === 'bottom' ? 'Bot' : ''
  return half ? `${half} ${play.inning}` : `Inning ${play.inning}`
}

const formatOutcome = (outcome: string): string => {
  // Convert SINGLE_1 -> Single, STRIKEOUT -> K, etc.
  if (outcome.startsWith('SINGLE')) return 'Single'
  if (outcome.startsWith('DOUBLE')) return 'Double'
  if (outcome.startsWith('TRIPLE')) return 'Triple'
  if (outcome.includes('HOMERUN')) return 'Home Run'
  if (outcome.includes('STRIKEOUT')) return 'K'
  if (outcome.includes('WALK')) return 'BB'
  if (outcome.includes('GROUNDOUT')) return 'Groundout'
  if (outcome.includes('FLYOUT')) return 'Flyout'
  if (outcome.includes('LINEOUT')) return 'Lineout'
  return outcome.replace(/_/g, ' ')
}

const getPlayBorderColor = (play: PlayResult): string => {
  if (play.runs_scored > 0) return 'border-green-500'
  if (play.outs_recorded > 0) return 'border-red-500'
  if (play.outcome.includes('SINGLE') || play.outcome.includes('DOUBLE') || play.outcome.includes('TRIPLE') || play.outcome.includes('HOMERUN')) {
    return 'border-blue-500'
  }
  return 'border-gray-300 dark:border-gray-700'
}

const getPlayIconClass = (play: PlayResult): string => {
  if (play.runs_scored > 0) return 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400'
  if (play.outs_recorded > 0) return 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400'
  if (play.outcome.includes('SINGLE') || play.outcome.includes('DOUBLE') || play.outcome.includes('TRIPLE') || play.outcome.includes('HOMERUN')) {
    return 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
  }
  return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
}

const getPlayIcon = (play: PlayResult) => {
  // Return SVG path as component
  if (play.runs_scored > 0) {
    return h('svg', { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
      h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M5 10l7-7m0 0l7 7m-7-7v18' })
    ])
  }
  if (play.outs_recorded > 0) {
    return h('svg', { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
      h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M6 18L18 6M6 6l12 12' })
    ])
  }
  // Default baseball icon
  return h('svg', { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }),
    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z' })
  ])
}

const getOutcomeBadgeClass = (play: PlayResult): string => {
  if (play.outcome.includes('HOMERUN')) return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
  if (play.outcome.includes('SINGLE') || play.outcome.includes('DOUBLE') || play.outcome.includes('TRIPLE')) {
    return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
  }
  if (play.outcome.includes('STRIKEOUT')) return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
  if (play.outcome.includes('WALK')) return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
  return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400'
}
</script>

<style scoped>
/* Play slide-in animation */
.play-slide-enter-active {
  transition: all 0.4s ease-out;
}

.play-slide-leave-active {
  transition: all 0.3s ease-in;
}

.play-slide-enter-from {
  opacity: 0;
  transform: translateY(-20px);
}

.play-slide-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-none {
  display: block;
  -webkit-line-clamp: unset;
}
</style>
