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

<template>
  <div>
    <div class="mb-8 flex items-center justify-between">
      <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 gap-3">
        <button
          @click="handleQuickCreate"
          :disabled="isCreatingQuickGame"
          class="px-6 py-3 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition disabled:cursor-not-allowed"
        >
          {{ isCreatingQuickGame ? 'Creating...' : 'Quick Start Demo' }}
        </button>
        <NuxtLink
          to="/games/create"
          class="px-6 py-3 bg-primary hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl 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>
          </div>
          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <span class="text-gray-600">Away</span>
              <span class="font-bold">Team {{ game.away_team_id }}</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-600">Home</span>
              <span class="font-bold">Team {{ game.home_team_id }}</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">
              Completed
            </span>
          </div>
          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <span class="text-gray-600">Away</span>
              <span class="font-bold">Team {{ game.away_team_id }}</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-600">Home</span>
              <span class="font-bold">Team {{ game.home_team_id }}</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
const games = ref<any[]>([])
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
  }
}

// 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') || []
})

// Fetch games using useAsyncData (works on both SSR and client)
const { pending, error: fetchError, refresh } = await useAsyncData(
  'games-list',
  async () => {
    const headers: Record<string, string> = {}
    if (import.meta.server) {
      const event = useRequestEvent()
      const cookieHeader = event?.node.req.headers.cookie
      if (cookieHeader) {
        headers['Cookie'] = cookieHeader
      }
    }

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

    games.value = response
    return response
  },
  {
    server: true,  // Fetch on server
    lazy: false,   // Block rendering until done
  }
)

// 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>