<template>
  <div class="bg-gradient-to-r from-primary to-blue-600 text-white shadow-lg">
    <div class="container mx-auto px-3 py-4">
      <!-- Mobile Layout (default) -->
      <div class="lg:hidden">
        <!-- Score Display - Large and Clear -->
        <div class="flex items-center justify-between mb-3">
          <!-- Away Team -->
          <div class="flex-1 text-center">
            <div class="text-xs font-medium text-blue-100 mb-1">AWAY</div>
            <div class="text-4xl font-bold tabular-nums">{{ awayScore }}</div>
          </div>

          <!-- Inning Indicator -->
          <div class="flex-1 text-center px-2">
            <div class="bg-white/20 backdrop-blur rounded-lg px-3 py-2">
              <div class="text-xs font-medium text-blue-100">INNING</div>
              <div class="text-2xl font-bold">{{ inning }}</div>
              <div class="text-xs font-medium">
                <span
                  class="px-2 py-0.5 rounded-full text-xs font-bold"
                  :class="half === 'top' ? 'bg-blue-200 text-blue-900' : 'bg-yellow-400 text-yellow-900'"
                >
                  {{ half === 'top' ? '▲ TOP' : '▼ BOT' }}
                </span>
              </div>
            </div>
          </div>

          <!-- Home Team -->
          <div class="flex-1 text-center">
            <div class="text-xs font-medium text-blue-100 mb-1">HOME</div>
            <div class="text-4xl font-bold tabular-nums">{{ homeScore }}</div>
          </div>
        </div>

        <!-- Game Situation - Compact -->
        <div class="flex items-center justify-between gap-2 text-sm">
          <!-- Count -->
          <div class="flex-1 bg-white/10 backdrop-blur rounded-lg px-3 py-2 text-center">
            <span class="font-medium text-blue-100">Count</span>
            <div class="font-bold tabular-nums mt-0.5">
              <span class="text-green-300">{{ balls }}</span>-<span class="text-red-300">{{ strikes }}</span>
            </div>
          </div>

          <!-- Outs -->
          <div class="flex-1 bg-white/10 backdrop-blur rounded-lg px-3 py-2 text-center">
            <span class="font-medium text-blue-100">Outs</span>
            <div class="flex items-center justify-center gap-1 mt-1">
              <div
                v-for="i in 3"
                :key="i"
                class="w-3 h-3 rounded-full transition-all"
                :class="i <= outs ? 'bg-red-400 shadow-lg shadow-red-500/50' : 'bg-white/30'"
              />
            </div>
          </div>

          <!-- Runners (Mini Diamond) -->
          <div class="flex-1 bg-white/10 backdrop-blur rounded-lg px-3 py-2">
            <div class="font-medium text-blue-100 text-center mb-1">Runners</div>
            <div class="flex items-center justify-center">
              <div class="relative w-12 h-12">
                <!-- Diamond Shape -->
                <div class="absolute inset-0 rotate-45">
                  <div class="w-full h-full border border-white/40"></div>

                  <!-- 2nd Base (Top) -->
                  <div
                    class="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 rounded-full transition-all"
                    :class="runners.second ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
                  />

                  <!-- 3rd Base (Left) -->
                  <div
                    class="absolute top-1/2 -left-1.5 -translate-y-1/2 w-3 h-3 rounded-full transition-all"
                    :class="runners.third ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
                  />

                  <!-- 1st Base (Right) -->
                  <div
                    class="absolute top-1/2 -right-1.5 -translate-y-1/2 w-3 h-3 rounded-full transition-all"
                    :class="runners.first ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
                  />

                  <!-- Home Plate (Bottom) -->
                  <div class="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-white rounded-sm transform rotate-45" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Desktop Layout (lg and up) -->
      <div class="hidden lg:flex items-center justify-between">
        <!-- Left: Away Team Score -->
        <div class="flex items-center gap-4">
          <div class="text-center min-w-[100px]">
            <div class="text-sm font-medium text-blue-100">AWAY</div>
            <div class="text-5xl font-bold tabular-nums">{{ awayScore }}</div>
          </div>
        </div>

        <!-- Center: Game Situation -->
        <div class="flex items-center gap-6">
          <!-- Inning -->
          <div class="bg-white/20 backdrop-blur rounded-lg px-6 py-3 text-center min-w-[120px]">
            <div class="text-sm font-medium text-blue-100">INNING</div>
            <div class="text-3xl font-bold">{{ inning }}</div>
            <div class="mt-1">
              <span
                class="px-3 py-1 rounded-full text-sm font-bold"
                :class="half === 'top' ? 'bg-blue-200 text-blue-900' : 'bg-yellow-400 text-yellow-900'"
              >
                {{ half === 'top' ? '▲ TOP' : '▼ BOTTOM' }}
              </span>
            </div>
          </div>

          <!-- Count and Outs -->
          <div class="space-y-2">
            <div class="bg-white/10 backdrop-blur rounded-lg px-4 py-2 text-center">
              <span class="text-sm font-medium text-blue-100">Count: </span>
              <span class="text-xl font-bold tabular-nums">
                <span class="text-green-300">{{ balls }}</span>-<span class="text-red-300">{{ strikes }}</span>
              </span>
            </div>
            <div class="bg-white/10 backdrop-blur rounded-lg px-4 py-2 flex items-center justify-center gap-2">
              <span class="text-sm font-medium text-blue-100">Outs:</span>
              <div class="flex gap-1.5">
                <div
                  v-for="i in 3"
                  :key="i"
                  class="w-4 h-4 rounded-full transition-all"
                  :class="i <= outs ? 'bg-red-400 shadow-lg shadow-red-500/50' : 'bg-white/30'"
                />
              </div>
            </div>
          </div>

          <!-- Runners Diamond (Larger) -->
          <div class="bg-white/10 backdrop-blur rounded-lg px-4 py-3">
            <div class="text-sm font-medium text-blue-100 text-center mb-2">RUNNERS</div>
            <div class="flex items-center justify-center">
              <div class="relative w-16 h-16">
                <!-- Diamond Shape -->
                <div class="absolute inset-0 rotate-45">
                  <div class="w-full h-full border-2 border-white/40"></div>

                  <!-- 2nd Base -->
                  <div
                    class="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full transition-all"
                    :class="runners.second ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50 animate-pulse' : 'bg-white/20'"
                  />

                  <!-- 3rd Base -->
                  <div
                    class="absolute top-1/2 -left-2 -translate-y-1/2 w-4 h-4 rounded-full transition-all"
                    :class="runners.third ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50 animate-pulse' : 'bg-white/20'"
                  />

                  <!-- 1st Base -->
                  <div
                    class="absolute top-1/2 -right-2 -translate-y-1/2 w-4 h-4 rounded-full transition-all"
                    :class="runners.first ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50 animate-pulse' : 'bg-white/20'"
                  />

                  <!-- Home Plate -->
                  <div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-white rounded-sm transform rotate-45" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Right: Home Team Score -->
        <div class="flex items-center gap-4">
          <div class="text-center min-w-[100px]">
            <div class="text-sm font-medium text-blue-100">HOME</div>
            <div class="text-5xl font-bold tabular-nums">{{ homeScore }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { InningHalf } from '~/types/game'

interface Props {
  homeScore?: number
  awayScore?: number
  inning?: number
  half?: InningHalf
  balls?: number
  strikes?: number
  outs?: number
  runners?: {
    first: boolean
    second: boolean
    third: boolean
  }
}

const props = withDefaults(defineProps<Props>(), {
  homeScore: 0,
  awayScore: 0,
  inning: 1,
  half: 'top',
  balls: 0,
  strikes: 0,
  outs: 0,
  runners: () => ({ first: false, second: false, third: false })
})
</script>

<style scoped>
/* Ensure tabular numbers for consistent score display */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Pulse animation for runners */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}
</style>
