strat-gameplay-webapp/frontend-sba/components/Decisions/OffensiveApproach.vue

<template>
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
        <span class="text-2xl">⚔️</span>
        Offensive Approach
      </h3>
      <span
        v-if="!isActive"
        class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-200 text-gray-600"
      >
        Opponent's Turn
      </span>
    </div>

    <!-- Form -->
    <form @submit.prevent="handleSubmit" class="space-y-6">
      <!-- Batting Approach -->
      <div>
        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
          Batting Approach
        </label>
        <div class="grid grid-cols-1 gap-3">
          <button
            v-for="option in approachOptions"
            :key="option.value"
            type="button"
            :disabled="!isActive"
            :class="getApproachButtonClasses(option.value)"
            @click="selectApproach(option.value)"
          >
            <div class="flex items-start gap-3">
              <span class="text-2xl flex-shrink-0">{{ option.icon }}</span>
              <div class="flex-1 text-left">
                <div class="font-semibold text-base">{{ option.label }}</div>
                <div class="text-sm opacity-90 mt-0.5">{{ option.description }}</div>
              </div>
              <div v-if="localDecision.approach === option.value" class="flex-shrink-0">
                <span class="text-xl">✓</span>
              </div>
            </div>
          </button>
        </div>
      </div>

      <!-- Special Tactics -->
      <div>
        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
          Special Tactics
        </label>
        <div class="space-y-3">
          <!-- Hit and Run -->
          <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
            <ToggleSwitch
              v-model="localDecision.hit_and_run"
              label="Hit and Run"
              :disabled="!isActive || !canUseHitAndRun"
              size="md"
            />
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 ml-14">
              Runner(s) take off as pitcher delivers; batter must make contact
            </p>
          </div>

          <!-- Bunt Attempt -->
          <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
            <ToggleSwitch
              v-model="localDecision.bunt_attempt"
              label="Bunt Attempt"
              :disabled="!isActive"
              size="md"
            />
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 ml-14">
              Attempt to bunt for a hit or sacrifice
            </p>
          </div>
        </div>
      </div>

      <!-- Current Strategy Summary -->
      <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 rounded-lg p-4">
        <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
          Current Strategy
        </h4>
        <div class="space-y-1 text-xs">
          <div>
            <span class="font-medium text-gray-600 dark:text-gray-400">Approach:</span>
            <span class="ml-1 text-gray-900 dark:text-white">{{ currentApproachLabel }}</span>
          </div>
          <div v-if="localDecision.hit_and_run || localDecision.bunt_attempt">
            <span class="font-medium text-gray-600 dark:text-gray-400">Tactics:</span>
            <span class="ml-1 text-gray-900 dark:text-white">
              {{ activeTactics }}
            </span>
          </div>
        </div>
      </div>

      <!-- Submit Button -->
      <ActionButton
        type="submit"
        variant="success"
        size="lg"
        :disabled="!isActive || !hasChanges"
        :loading="submitting"
        full-width
      >
        {{ submitButtonText }}
      </ActionButton>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { OffensiveDecision } from '~/types/game'
import ToggleSwitch from '~/components/UI/ToggleSwitch.vue'
import ActionButton from '~/components/UI/ActionButton.vue'

interface ApproachOption {
  value: OffensiveDecision['approach']
  label: string
  icon: string
  description: string
}

interface Props {
  gameId: string
  isActive: boolean
  currentDecision?: Omit<OffensiveDecision, 'steal_attempts'>
  hasRunnersOnBase?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  isActive: false,
  hasRunnersOnBase: false,
})

const emit = defineEmits<{
  submit: [decision: Omit<OffensiveDecision, 'steal_attempts'>]
}>()

// Local state
const submitting = ref(false)
const localDecision = ref<Omit<OffensiveDecision, 'steal_attempts'>>({
  approach: props.currentDecision?.approach || 'normal',
  hit_and_run: props.currentDecision?.hit_and_run || false,
  bunt_attempt: props.currentDecision?.bunt_attempt || false,
})

// Approach options
const approachOptions: ApproachOption[] = [
  {
    value: 'normal',
    label: 'Normal',
    icon: '⚾',
    description: 'Balanced approach, no specific tendencies',
  },
  {
    value: 'contact',
    label: 'Contact',
    icon: '🎯',
    description: 'Focus on making contact, avoid strikeouts',
  },
  {
    value: 'power',
    label: 'Power',
    icon: '💪',
    description: 'Swing for extra bases, higher strikeout risk',
  },
  {
    value: 'patient',
    label: 'Patient',
    icon: '🧘',
    description: 'Work the count, draw walks, wait for your pitch',
  },
]

// Computed
const canUseHitAndRun = computed(() => {
  return props.hasRunnersOnBase
})

const currentApproachLabel = computed(() => {
  const option = approachOptions.find(opt => opt.value === localDecision.value.approach)
  return option?.label || 'Normal'
})

const activeTactics = computed(() => {
  const tactics: string[] = []
  if (localDecision.value.hit_and_run) tactics.push('Hit & Run')
  if (localDecision.value.bunt_attempt) tactics.push('Bunt')
  return tactics.join(', ') || 'None'
})

const hasChanges = computed(() => {
  if (!props.currentDecision) return true
  return (
    localDecision.value.approach !== props.currentDecision.approach ||
    localDecision.value.hit_and_run !== props.currentDecision.hit_and_run ||
    localDecision.value.bunt_attempt !== props.currentDecision.bunt_attempt
  )
})

const submitButtonText = computed(() => {
  if (!props.isActive) return 'Wait for Your Turn'
  if (!hasChanges.value) return 'No Changes'
  return 'Submit Offensive Strategy'
})

// Methods
const selectApproach = (approach: OffensiveDecision['approach']) => {
  if (!props.isActive) return
  localDecision.value.approach = approach
}

const getApproachButtonClasses = (approach: OffensiveDecision['approach']) => {
  const isSelected = localDecision.value.approach === approach
  const base = 'w-full p-4 rounded-lg border-2 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed'

  if (isSelected) {
    return `${base} bg-gradient-to-r from-blue-600 to-blue-700 text-white border-blue-700 shadow-lg`
  } else {
    return `${base} bg-white dark:bg-gray-700 text-gray-900 dark:text-white border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400`
  }
}

const handleSubmit = async () => {
  if (!props.isActive || !hasChanges.value) return

  submitting.value = true
  try {
    emit('submit', { ...localDecision.value })
  } finally {
    submitting.value = false
  }
}

// Watch for prop changes
watch(() => props.currentDecision, (newDecision) => {
  if (newDecision) {
    localDecision.value = { ...newDecision }
  }
}, { deep: true })

// Disable hit and run if no runners
watch(() => props.hasRunnersOnBase, (hasRunners) => {
  if (!hasRunners) {
    localDecision.value.hit_and_run = false
  }
})
</script>