strat-gameplay-webapp/frontend-sba/pages/games/index.vue

<template>
  <div class="bg-white rounded-xl shadow-md border border-gray-200 p-6">
    <!-- Page Header -->
    <div class="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
      <div>
        <h1 class="text-3xl font-bold text-gray-900 mb-2">My Games</h1>
        <p class="text-gray-600">
          View and manage your active and completed games
        </p>
      </div>
      <div class="flex flex-wrap gap-3">
        <button
          @click="handleQuickCreate"
          :disabled="isCreatingQuickGame"
          class="px-5 py-2.5 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white font-medium rounded-lg shadow hover:shadow-md transition disabled:cursor-not-allowed"
        >
          {{ isCreatingQuickGame ? 'Creating...' : 'Quick Start Demo' }}
        </button>
        <NuxtLink
          to="/games/create"
          class="px-5 py-2.5 bg-primary hover:bg-blue-700 text-white font-medium rounded-lg shadow hover:shadow-md transition"
        >
          Create New Game
        </NuxtLink>
      </div>
    </div>

    <!-- Tabs -->
    <div class="mb-6 border-b border-gray-200">
      <nav class="flex space-x-8">
        <button
          :class="[
            'py-4 px-1 border-b-2 font-medium text-sm transition',
            activeTab === 'active'
              ? 'border-primary text-primary'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
          @click="activeTab = 'active'"
        >
          Active Games
        </button>
        <button
          :class="[
            'py-4 px-1 border-b-2 font-medium text-sm transition',
            activeTab === 'completed'
              ? 'border-primary text-primary'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
          @click="activeTab = 'completed'"
        >
          Completed
        </button>
      </nav>
    </div>

    <!-- Loading State -->
    <div v-if="loading" class="bg-white rounded-lg shadow-md p-12 text-center">
      <div class="w-16 h-16 mx-auto mb-4 border-4 border-primary border-t-transparent rounded-full animate-spin"/>
      <p class="text-gray-900 font-semibold">Loading games...</p>
    </div>

    <!-- Error State -->
    <div v-else-if="error" class="bg-red-50 border border-red-200 rounded-lg p-6">
      <p class="text-red-800 font-semibold">Failed to load games</p>
      <p class="text-red-600 text-sm mt-2">{{ error }}</p>
      <button
        class="mt-4 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
        @click="refresh"
      >
        Retry
      </button>
    </div>

    <!-- Games List -->
    <div v-else-if="activeTab === 'active'">
      <!-- Games List -->
      <div v-if="activeGames.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <NuxtLink
          v-for="game in activeGames"
          :key="game.game_id"
          :to="`/games/${game.game_id}`"
          class="bg-white rounded-lg shadow-md hover:shadow-xl transition p-6"
        >
          <div class="flex justify-between items-start mb-4">
            <span
              :class="[
                'px-3 py-1 rounded-full text-sm font-semibold',
                game.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
              ]"
            >
              {{ game.status === 'active' ? 'In Progress' : 'Pending Lineups' }}
            </span>
            <!-- Inning indicator for active games -->
            <span v-if="game.status === 'active' && game.inning" class="text-sm text-gray-500">
              {{ game.half === 'top' ? 'Top' : 'Bot' }} {{ game.inning }}
            </span>
          </div>
          <!-- Score display -->
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <span class="text-xs text-gray-400 w-8">Away</span>
                <span class="font-semibold">{{ game.away_team_name || game.away_team_abbrev || `Team ${game.away_team_id}` }}</span>
              </div>
              <span class="text-xl font-bold tabular-nums">{{ game.away_score }}</span>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <span class="text-xs text-gray-400 w-8">Home</span>
                <span class="font-semibold">{{ game.home_team_name || game.home_team_abbrev || `Team ${game.home_team_id}` }}</span>
              </div>
              <span class="text-xl font-bold tabular-nums">{{ game.home_score }}</span>
            </div>
          </div>
        </NuxtLink>
      </div>

      <!-- Empty State -->
      <div v-else class="bg-white rounded-lg shadow-md p-12 text-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-16 w-16 mx-auto text-gray-400 mb-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
          />
        </svg>
        <h3 class="text-xl font-bold text-gray-900 mb-2">
          No Active Games
        </h3>
        <p class="text-gray-600 mb-6">
          You don't have any active games right now. Create a new game to get started!
        </p>
        <NuxtLink
          to="/games/create"
          class="inline-block px-6 py-3 bg-primary hover:bg-blue-700 text-white font-semibold rounded-lg transition"
        >
          Create Your First Game
        </NuxtLink>
      </div>
    </div>

    <div v-else-if="activeTab === 'completed'">
      <!-- Completed Games List -->
      <div v-if="completedGames.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <NuxtLink
          v-for="game in completedGames"
          :key="game.game_id"
          :to="`/games/${game.game_id}`"
          class="bg-white rounded-lg shadow-md hover:shadow-xl transition p-6"
        >
          <div class="flex justify-between items-start mb-4">
            <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gray-100 text-gray-800">
              Final
            </span>
          </div>
          <!-- Score display -->
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <span class="text-xs text-gray-400 w-8">Away</span>
                <span class="font-semibold">{{ game.away_team_name || game.away_team_abbrev || `Team ${game.away_team_id}` }}</span>
              </div>
              <span class="text-xl font-bold tabular-nums">{{ game.away_score }}</span>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <span class="text-xs text-gray-400 w-8">Home</span>
                <span class="font-semibold">{{ game.home_team_name || game.home_team_abbrev || `Team ${game.home_team_id}` }}</span>
              </div>
              <span class="text-xl font-bold tabular-nums">{{ game.home_score }}</span>
            </div>
          </div>
        </NuxtLink>
      </div>

      <!-- Empty State -->
      <div v-else class="bg-white rounded-lg shadow-md p-12 text-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-16 w-16 mx-auto text-gray-400 mb-4"
          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>
        <h3 class="text-xl font-bold text-gray-900 mb-2">
          No Completed Games
        </h3>
        <p class="text-gray-600">
          You haven't completed any games yet.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '~/store/auth'

definePageMeta({
  middleware: ['auth'], // Require authentication
})

const activeTab = ref<'active' | 'completed'>('active')
const config = useRuntimeConfig()
const authStore = useAuthStore()
const router = useRouter()

// Games data - loading/error managed separately, games comes from useAsyncData
const loading = ref(true)
const error = ref<string | null>(null)
const isCreatingQuickGame = ref(false)

// Quick-create a demo game with pre-configured lineups
async function handleQuickCreate() {
  try {
    isCreatingQuickGame.value = true
    error.value = null

    console.log('[Games Page] Quick-creating demo game...')

    const response = await $fetch<{ game_id: string; message: string; status: string }>(
      `${config.public.apiUrl}/api/games/quick-create`,
      {
        method: 'POST',
        credentials: 'include', // Send HttpOnly cookies
      }
    )

    console.log('[Games Page] Quick-create response:', response)

    // Redirect to game page
    router.push(`/games/${response.game_id}`)
  } catch (err: any) {
    console.error('[Games Page] Quick-create failed:', err)
    error.value = err.data?.detail || err.message || 'Failed to create demo game'
  } finally {
    isCreatingQuickGame.value = false
  }
}

// Fetch games - uses internal URL for SSR, public URL for client
const apiUrl = useApiUrl()
const { data: games, pending, error: fetchError, refresh } = await useAsyncData(
  'games-list',
  async () => {
    const headers: Record<string, string> = {}

    // Forward cookies for SSR requests
    if (import.meta.server) {
      const event = useRequestEvent()
      const cookieHeader = event?.node.req.headers.cookie
      if (cookieHeader) {
        headers['Cookie'] = cookieHeader
      }
    }

    const response = await $fetch<any[]>(`${apiUrl}/api/games/`, {
      credentials: 'include',
      headers,
    })

    return response
  },
  {
    server: true,  // SSR enabled - uses internal Docker URL
    lazy: false,   // Block rendering until done
    default: () => [] as any[],  // Prevent null during hydration
  }
)

// Filter games by status
const activeGames = computed(() => {
  return games.value?.filter(g => g.status === 'active' || g.status === 'pending') || []
})

const completedGames = computed(() => {
  return games.value?.filter(g => g.status === 'completed' || g.status === 'final') || []
})

// Re-fetch on client if data is stale (handles post-OAuth client-side navigation)
onMounted(async () => {
  // Only re-fetch if we have no games but are authenticated
  // This handles the case where client-side navigation doesn't trigger SSR
  if ((!games.value || games.value.length === 0) && authStore.isAuthenticated) {
    console.log('[Games Page] No games on mount, re-fetching...')
    await refresh()
  }
})

// Sync loading state with pending
watch(pending, (isPending) => {
  loading.value = isPending
}, { immediate: true })

// Sync error state
watch(fetchError, (err) => {
  if (err) {
    error.value = err.message || 'Failed to load games'
  }
}, { immediate: true })
</script>

<style scoped>
/* Additional component styles if needed */
</style>