<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Sticky ScoreBoard Header -->
    <div class="sticky top-0 z-20">
      <ScoreBoard
        :home-score="5"
        :away-score="3"
        :inning="7"
        :half="'bottom'"
        :outs="2"
        :runners="{ first: true, second: false, third: true }"
      />
    </div>

    <!-- Demo Header -->
    <div class="container mx-auto px-4 py-6">
      <div class="bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-200 dark:border-blue-700 rounded-xl p-6 mb-6">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
          🎨 Phase F2 Component Demo
        </h1>
        <p class="text-gray-600 dark:text-gray-400">
          Preview of all game display components with sample data. Scroll down to see everything!
        </p>
        <div class="mt-4 flex flex-wrap gap-3">
          <button
            class="px-4 py-2 bg-primary hover:bg-blue-700 text-white rounded-lg font-semibold transition"
            @click="toggleMockData"
          >
            🔄 Change Data
          </button>
          <button
            class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold transition"
            @click="addMockPlay"
          >
            ➕ Add Play
          </button>
          <button
            class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-semibold transition"
            @click="testToast"
          >
            🧪 Test Toast
          </button>
          <button
            class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-semibold transition lg:hidden"
            @click="showDesktopView = !showDesktopView"
          >
            {{ showDesktopView ? '📱 Mobile View' : '💻 Desktop View' }}
          </button>
          <NuxtLink
            to="/"
            class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-semibold transition"
          >
            ← Back Home
          </NuxtLink>
        </div>
      </div>

      <!-- UNIFIED LAYOUT (works on all screen sizes) -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left/Main Column: Game State -->
        <div class="lg:col-span-2 space-y-6">
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
            <span class="lg:hidden">📱 Mobile Layout</span>
            <span class="hidden lg:inline">💻 Desktop Layout</span>
          </h2>

          <!-- Current Situation -->
          <CurrentSituation
            v-if="mockBatter && mockPitcher"
            :current-batter="mockBatter"
            :current-pitcher="mockPitcher"
          />

          <!-- Game Board -->
          <div class="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 shadow-lg">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">⚾ Baseball Diamond</h3>
            <GameBoard
              v-if="mockBatter && mockPitcher"
              :runners="mockRunners"
              :current-batter="mockBatter"
              :current-pitcher="mockPitcher"
            />
          </div>

          <!-- Action Panel -->
          <div class="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 shadow-lg">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">⚡ Game Actions</h3>
            <div class="flex flex-col lg:flex-row flex-wrap gap-3 lg:gap-4">
              <button
                class="px-6 py-3 bg-primary hover:bg-blue-700 text-white rounded-lg font-semibold transition shadow-md hover:shadow-lg"
                @click="showToast('Dice rolled! 🎲')"
              >
                🎲 Roll Dice
              </button>
              <button
                class="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold transition"
                @click="showToast('Defense set! 🛡️')"
              >
                🛡️ Set Defense
              </button>
              <button
                class="px-6 py-3 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg font-semibold transition"
                @click="showToast('Offense set! ⚔️')"
              >
                ⚔️ Set Offense
              </button>
            </div>
          </div>
        </div>

        <!-- Right Column: Play-by-Play (Desktop) / Below (Mobile) -->
        <div class="lg:col-span-1">
          <div class="bg-white dark:bg-gray-800 rounded-xl p-4 lg:p-6 shadow-lg lg:sticky lg:top-24">
            <PlayByPlay
              v-if="mockPlays.length > 0"
              :plays="mockPlays"
              :scrollable="true"
              :max-height="600"
              :show-filters="true"
            />
          </div>
        </div>
      </div>

      <!-- Component Info Cards -->
      <div class="mt-12">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">📊 Components Built</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md border-l-4 border-blue-500">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">ScoreBoard</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">265 lines • Sticky header with live game state</p>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md border-l-4 border-green-500">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">GameBoard</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">240 lines • Baseball diamond visualization</p>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md border-l-4 border-red-500">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">CurrentSituation</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">205 lines • Pitcher vs Batter cards</p>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md border-l-4 border-yellow-500">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">PlayByPlay</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">280 lines • Animated play feed</p>
          </div>
        </div>
      </div>

      <!-- Debug Info -->
      <div class="mt-6 bg-gray-800 text-white rounded-lg p-4 font-mono text-xs">
        <div><strong>Screen Width:</strong> {{ screenWidth }}px ({{ screenSize }})</div>
        <div><strong>Mobile View Active:</strong> {{ screenWidth < 1024 }}</div>
        <div><strong>Components Loaded:</strong> ✅ All 4</div>
        <div><strong>Mock Data Loaded:</strong> ✅ Batter: {{ mockBatter?.player.name }}, Pitcher: {{ mockPitcher?.player.name }}</div>
        <div class="mt-2 pt-2 border-t border-gray-600">
          <strong>Toast Debug:</strong>
          <span :class="toastMessage ? 'text-green-400' : 'text-red-400'">
            {{ toastMessage ? `Active: "${toastMessage}"` : 'Inactive (no message)' }}
          </span>
        </div>
      </div>

      <!-- Footer with Demo Links -->
      <div class="mt-12 border-t border-gray-200 dark:border-gray-700 pt-8">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">
            📚 Other Demo Pages
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <NuxtLink
              to="/demo-decisions"
              class="p-4 rounded-lg border-2 border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 transition-colors"
            >
              <div class="text-2xl mb-2">⚔️</div>
              <div class="font-semibold text-gray-900 dark:text-white">Decisions Demo</div>
              <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                Decision input components
              </div>
            </NuxtLink>
            <NuxtLink
              to="/demo-gameplay"
              class="p-4 rounded-lg border-2 border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 transition-colors"
            >
              <div class="text-2xl mb-2">🎲</div>
              <div class="font-semibold text-gray-900 dark:text-white">Gameplay Demo</div>
              <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                Dice rolling & manual outcomes
              </div>
            </NuxtLink>
            <NuxtLink
              to="/demo-substitutions"
              class="p-4 rounded-lg border-2 border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 transition-colors"
            >
              <div class="text-2xl mb-2">🔄</div>
              <div class="font-semibold text-gray-900 dark:text-white">Substitutions Demo</div>
              <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                Player substitution workflow
              </div>
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>

    <!-- Toast Notification - CENTER (Known working position) -->
    <!-- TODO: Bottom positioning has a glitch - see PHASE_F2_COMPLETE.md Known Issues -->
    <div
      v-if="toastMessage"
      class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-blue-600 to-blue-700 text-white px-10 py-5 rounded-2xl shadow-2xl border-3 border-blue-300"
      style="z-index: 9999;"
    >
      <div class="flex items-center gap-4">
        <div class="w-10 h-10 bg-white/30 rounded-full flex items-center justify-center animate-pulse">
          <span class="text-2xl">✓</span>
        </div>
        <span class="font-bold text-xl">{{ toastMessage }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScoreBoard from '~/components/Game/ScoreBoard.vue'
import GameBoard from '~/components/Game/GameBoard.vue'
import CurrentSituation from '~/components/Game/CurrentSituation.vue'
import PlayByPlay from '~/components/Game/PlayByPlay.vue'
import type { LineupPlayerState, PlayResult } from '~/types/game'

// Reactive screen width
const screenWidth = ref(0)
const showDesktopView = ref(false)

const screenSize = computed(() => {
  if (screenWidth.value < 640) return 'xs'
  if (screenWidth.value < 768) return 'sm'
  if (screenWidth.value < 1024) return 'md'
  if (screenWidth.value < 1280) return 'lg'
  return 'xl'
})

// Update screen width on resize
onMounted(() => {
  screenWidth.value = window.innerWidth
  window.addEventListener('resize', () => {
    screenWidth.value = window.innerWidth
  })
})

// Mock data
const mockBatter = ref<LineupPlayerState>({
  lineup_id: 1,
  player: {
    id: 101,
    name: 'Mike Trout',
    image: '',
    team: 'Los Angeles Angels',
    manager: 'Phil Nevin'
  },
  position: 'CF',
  batting_order: 3,
  is_starter: true,
  is_active: true
})

const mockPitcher = ref<LineupPlayerState>({
  lineup_id: 2,
  player: {
    id: 102,
    name: 'Clayton Kershaw',
    image: '',
    team: 'Los Angeles Dodgers',
    manager: 'Dave Roberts'
  },
  position: 'SP',
  batting_order: null,
  is_starter: true,
  is_active: true
})

const mockRunners = ref({
  first: true,
  second: false,
  third: true
})

const mockPlays = ref<PlayResult[]>([
  {
    play_number: 45,
    outcome: 'SINGLE_1',
    description: 'Mike Trout singles to center field',
    runs_scored: 1,
    outs_recorded: 0,
    inning: 7,
    new_state: {}
  },
  {
    play_number: 44,
    outcome: 'STRIKEOUT',
    description: 'Shohei Ohtani strikes out swinging',
    runs_scored: 0,
    outs_recorded: 1,
    inning: 7,
    new_state: {}
  },
  {
    play_number: 43,
    outcome: 'WALK',
    description: 'Aaron Judge walks',
    runs_scored: 0,
    outs_recorded: 0,
    inning: 7,
    new_state: {}
  },
  {
    play_number: 42,
    outcome: 'HOMERUN',
    description: 'Giancarlo Stanton crushes a 2-run homer to left field',
    runs_scored: 2,
    outs_recorded: 0,
    inning: 6,
    new_state: {}
  },
  {
    play_number: 41,
    outcome: 'DOUBLE_2',
    description: 'Mookie Betts doubles down the line',
    runs_scored: 0,
    outs_recorded: 0,
    inning: 6,
    new_state: {}
  }
])

const toastMessage = ref('')

// Methods
const toggleMockData = () => {
  // Toggle between different players
  if (mockBatter.value.player.name === 'Mike Trout') {
    mockBatter.value = {
      ...mockBatter.value,
      player: {
        id: 103,
        name: 'Shohei Ohtani',
        image: '',
        team: 'Los Angeles Angels',
        manager: 'Phil Nevin'
      },
      position: 'DH',
      batting_order: 4
    }
    mockPitcher.value = {
      ...mockPitcher.value,
      player: {
        id: 104,
        name: 'Gerrit Cole',
        image: '',
        team: 'New York Yankees',
        manager: 'Aaron Boone'
      }
    }
  } else {
    mockBatter.value = {
      ...mockBatter.value,
      player: {
        id: 101,
        name: 'Mike Trout',
        image: '',
        team: 'Los Angeles Angels',
        manager: 'Phil Nevin'
      },
      position: 'CF',
      batting_order: 3
    }
    mockPitcher.value = {
      ...mockPitcher.value,
      player: {
        id: 102,
        name: 'Clayton Kershaw',
        image: '',
        team: 'Los Angeles Dodgers',
        manager: 'Dave Roberts'
      }
    }
  }

  // Toggle runners
  mockRunners.value = {
    first: !mockRunners.value.first,
    second: !mockRunners.value.second,
    third: !mockRunners.value.third
  }

  showToast('Mock data updated! 🔄')
}

const addMockPlay = () => {
  const outcomes = ['SINGLE_1', 'DOUBLE_2', 'TRIPLE', 'HOMERUN', 'STRIKEOUT', 'GROUNDOUT', 'FLYOUT', 'WALK']
  const players = ['Mike Trout', 'Shohei Ohtani', 'Aaron Judge', 'Mookie Betts', 'Ronald Acuña Jr.']
  const randomOutcome = outcomes[Math.floor(Math.random() * outcomes.length)]
  const randomPlayer = players[Math.floor(Math.random() * players.length)]

  const newPlay: PlayResult = {
    play_number: mockPlays.value[0].play_number + 1,
    outcome: randomOutcome,
    description: `${randomPlayer} - ${randomOutcome.toLowerCase().replace(/_/g, ' ')}`,
    runs_scored: randomOutcome.includes('HOMERUN') ? 1 : 0,
    outs_recorded: randomOutcome.includes('OUT') ? 1 : 0,
    inning: 7,
    new_state: {}
  }

  mockPlays.value.unshift(newPlay)
  showToast('New play added! ⚾')
}

const showToast = (message: string) => {
  console.log('[Toast] Showing message:', message)
  toastMessage.value = message
  setTimeout(() => {
    console.log('[Toast] Hiding message')
    toastMessage.value = ''
  }, 3000)
}

const testToast = () => {
  console.log('[Toast Test] Button clicked!')
  console.log('[Toast Test] Current toastMessage value:', toastMessage.value)
  showToast('🧪 TEST TOAST - If you see this, it works!')
  console.log('[Toast Test] After showToast, toastMessage value:', toastMessage.value)
}
</script>

<style scoped>
/* Toast animation - Slide up from bottom with bounce */
.toast-enter-active {
  animation: slideUpBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast-leave-active {
  animation: slideDown 0.3s ease-in;
}

@keyframes slideUpBounce {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slideDown {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

/* Button press effect */
button:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}
</style>
