botfights/frontend/src/pages/BotProfilePage.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, RouterLink } from 'vue-router'

interface Bot {
  id: string
  name: string
  avatarSeed: string
  eloRating: number
  wins: number
  losses: number
  winStreak: number
  bestStreak: number
  tier: number
  isActive: boolean
  createdAt: string
}

interface Fight {
  id: string
  botA: { name: string } | null
  botB: { name: string } | null
  winner: { name: string } | null
  arenaInfo: { name: string } | null
  totalRounds: number
  status: string
}

const route = useRoute()
const botName = route.params.name as string
const bot = ref<Bot | null>(null)
const fights = ref<Fight[]>([])
const isLoading = ref(true)

onMounted(async () => {
  try {
    const [botRes, fightsRes] = await Promise.all([
      fetch(`/api/bots/${botName}`),
      fetch('/api/fights'),
    ])
    if (botRes.ok) bot.value = await botRes.json()
    if (fightsRes.ok) {
      const allFights = await fightsRes.json()
      fights.value = allFights.filter((f: Fight) =>
        f.botA?.name === botName || f.botB?.name === botName
      )
    }
  } catch { /* */ }
  isLoading.value = false
})

const tierName = (t: number) => ['UNRANKED', 'ROOKIE', 'RISING', 'CONTENDER', 'CHAMPION', 'LEGEND'][t] || '???'
const tierClass = (t: number) => `tier-${t}`
const winRate = (b: Bot) => {
  const total = b.wins + b.losses
  return total > 0 ? Math.round((b.wins / total) * 100) : 0
}
</script>

<template>
  <div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-hidden">
    <div class="max-w-3xl mx-auto w-full flex flex-col flex-1 min-h-0">

      <div v-if="isLoading" class="flex-1 flex items-center justify-center">
        <p class="font-display text-text-muted animate-pulse">LOADING...</p>
      </div>

      <div v-else-if="!bot" class="flex-1 flex items-center justify-center">
        <p class="font-display text-text-muted">Bot not found.</p>
      </div>

      <template v-else>
        <!-- Bot header -->
        <div class="mb-6 text-center">
          <p class="font-display text-[10px] font-bold tracking-[0.2em] mb-2"
             :class="tierClass(bot.tier)">
            {{ tierName(bot.tier) }}
          </p>
          <h2 class="font-display font-black text-3xl sm:text-5xl tracking-wider gradient-text mb-2">
            {{ bot.name }}
          </h2>
          <p class="font-mono text-text-muted text-xs">
            Fighting since {{ new Date(bot.createdAt).toLocaleDateString() }}
          </p>
        </div>

        <!-- Tale of the Tape -->
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
          <div class="border border-border rounded-lg bg-surface-raised/50 p-3 text-center neon-border-cyan">
            <p class="font-display font-black text-2xl text-neon-cyan">{{ Math.round(bot.eloRating) }}</p>
            <p class="font-display text-[9px] text-text-muted tracking-wider mt-1">ELO</p>
          </div>
          <div class="border border-border rounded-lg bg-surface-raised/50 p-3 text-center">
            <p class="font-display font-black text-2xl text-text-primary">
              <span class="text-neon-cyan">{{ bot.wins }}</span>
              <span class="text-text-muted text-lg mx-1">-</span>
              <span class="text-neon-pink">{{ bot.losses }}</span>
            </p>
            <p class="font-display text-[9px] text-text-muted tracking-wider mt-1">RECORD</p>
          </div>
          <div class="border border-border rounded-lg bg-surface-raised/50 p-3 text-center">
            <p class="font-display font-black text-2xl"
               :class="winRate(bot) >= 60 ? 'text-neon-cyan' : winRate(bot) >= 40 ? 'text-neon-yellow' : 'text-neon-pink'">
              {{ winRate(bot) }}%
            </p>
            <p class="font-display text-[9px] text-text-muted tracking-wider mt-1">WIN RATE</p>
          </div>
          <div class="border border-border rounded-lg bg-surface-raised/50 p-3 text-center"
               :class="bot.winStreak >= 3 ? 'neon-border-pink' : ''">
            <p class="font-display font-black text-2xl"
               :class="bot.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-primary'">
              {{ bot.bestStreak }}
            </p>
            <p class="font-display text-[9px] text-text-muted tracking-wider mt-1">BEST STREAK</p>
          </div>
        </div>

        <!-- Fight history -->
        <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-3">
          FIGHT HISTORY
        </p>
        <div class="flex-1 min-h-0 overflow-y-auto space-y-2">
          <RouterLink
            v-for="fight in fights"
            :key="fight.id"
            :to="`/arena/${fight.id}`"
            class="flex items-center justify-between px-4 py-2.5 border border-border rounded-lg
                   bg-surface-raised/30 hover:border-neon-pink/30 transition-all text-sm"
          >
            <span class="font-display font-bold text-xs tracking-wide">
              <span :class="fight.winner?.name === botName ? 'text-neon-cyan' : 'text-neon-pink'">
                {{ fight.winner?.name === botName ? 'W' : 'L' }}
              </span>
            </span>
            <span class="font-mono text-text-secondary text-xs">
              vs {{ fight.botA?.name === botName ? fight.botB?.name : fight.botA?.name }}
            </span>
            <span class="font-mono text-[10px] text-text-muted">
              R{{ fight.totalRounds }} &middot; {{ fight.arenaInfo?.name }}
            </span>
          </RouterLink>
          <div v-if="fights.length === 0" class="text-center py-8">
            <p class="font-display text-text-muted text-xs">No fights yet.</p>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>