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

<template>
  <div class="max-w-2xl mx-auto">
    <div class="mb-8">
      <h1 class="text-3xl font-bold text-gray-900 mb-2">Create New Game</h1>
      <p class="text-gray-600">
        Set up a new game to play with friends
      </p>
    </div>

    <!-- Create Game Form -->
    <form @submit.prevent="handleCreateGame" class="bg-white rounded-lg shadow-md p-8">
      <!-- Game Name -->
      <div class="mb-6">
        <label for="gameName" class="block text-sm font-medium text-gray-700 mb-2">
          Game Name
        </label>
        <input
          id="gameName"
          v-model="formData.name"
          type="text"
          required
          placeholder="Enter a name for this game"
          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition"
        />
      </div>

      <!-- Home Team -->
      <div class="mb-6">
        <label for="homeTeam" class="block text-sm font-medium text-gray-700 mb-2">
          Home Team
        </label>
        <select
          id="homeTeam"
          v-model="formData.homeTeamId"
          required
          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition"
        >
          <option value="" disabled>Select home team</option>
          <option
            v-for="team in authStore.userTeams"
            :key="team.id"
            :value="team.id"
          >
            {{ team.name }} ({{ team.abbreviation }})
          </option>
        </select>
      </div>

      <!-- Away Team -->
      <div class="mb-6">
        <label for="awayTeam" class="block text-sm font-medium text-gray-700 mb-2">
          Away Team
        </label>
        <select
          id="awayTeam"
          v-model="formData.awayTeamId"
          required
          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition"
        >
          <option value="" disabled>Select away team</option>
          <option
            v-for="team in authStore.userTeams"
            :key="team.id"
            :value="team.id"
            :disabled="team.id === formData.homeTeamId"
          >
            {{ team.name }} ({{ team.abbreviation }})
          </option>
        </select>
      </div>

      <!-- Game Mode -->
      <div class="mb-6">
        <label class="block text-sm font-medium text-gray-700 mb-2">
          Game Mode
        </label>
        <div class="space-y-3">
          <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
            <input
              v-model="formData.isAiOpponent"
              type="radio"
              :value="false"
              name="gameMode"
              class="mr-3 text-primary focus:ring-primary"
            />
            <div>
              <div class="font-medium text-gray-900">Human vs Human</div>
              <div class="text-sm text-gray-600">Play against another player</div>
            </div>
          </label>
          <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
            <input
              v-model="formData.isAiOpponent"
              type="radio"
              :value="true"
              name="gameMode"
              class="mr-3 text-primary focus:ring-primary"
            />
            <div>
              <div class="font-medium text-gray-900">Human vs AI</div>
              <div class="text-sm text-gray-600">Play against the computer</div>
            </div>
          </label>
        </div>
      </div>

      <!-- Error Message -->
      <div
        v-if="error"
        class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800 text-sm"
      >
        {{ error }}
      </div>

      <!-- Actions -->
      <div class="flex items-center justify-between">
        <NuxtLink
          to="/games"
          class="px-6 py-3 text-gray-700 hover:text-gray-900 font-medium transition"
        >
          Cancel
        </NuxtLink>
        <button
          type="submit"
          :disabled="isLoading"
          class="px-6 py-3 bg-primary hover:bg-blue-700 disabled:bg-gray-400 text-white font-semibold rounded-lg transition disabled:cursor-not-allowed"
        >
          {{ isLoading ? 'Creating...' : 'Create Game' }}
        </button>
      </div>
    </form>

    <!-- Info Box -->
    <div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-6">
      <h3 class="font-bold text-blue-900 mb-2">Coming in Phase F6</h3>
      <p class="text-blue-800 text-sm">
        This is a placeholder form. Full game creation with team selection, lineup management,
        and game settings will be implemented in Phase F6 (Game Management).
      </p>
    </div>
  </div>
</template>

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

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

const authStore = useAuthStore()
const router = useRouter()

const isLoading = ref(false)
const error = ref<string | null>(null)

const formData = ref({
  name: '',
  homeTeamId: '',
  awayTeamId: '',
  isAiOpponent: false,
})

const handleCreateGame = async () => {
  try {
    isLoading.value = true
    error.value = null

    // Validate form
    if (!formData.value.name || !formData.value.homeTeamId || !formData.value.awayTeamId) {
      error.value = 'Please fill in all required fields'
      return
    }

    if (formData.value.homeTeamId === formData.value.awayTeamId) {
      error.value = 'Home and away teams must be different'
      return
    }

    // TODO Phase F6: Call API to create game
    // const response = await $fetch('/api/games', {
    //   method: 'POST',
    //   body: formData.value
    // })

    // For now, just show a placeholder success message
    alert('Game creation will be implemented in Phase F6')

    // Redirect to games list
    // router.push(`/games/${response.game_id}`)
    router.push('/games')
  } catch (err: any) {
    error.value = err.message || 'Failed to create game'
    console.error('Create game error:', err)
  } finally {
    isLoading.value = false
  }
}
</script>

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