botfights/frontend/src/pages/BotProfilePage.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter, RouterLink } from 'vue-router'
import { useNostr } from '../composables/useNostr'

const route = useRoute()
const router = useRouter()
const { bot: nostrBot, isLoggedIn, logout } = useNostr()
const botName = route.params.name as string

interface BotStats {
  id: string
  name: string
  avatarSeed: string
  profilePicUrl: string | null
  eloRating: number
  wins: number
  losses: number
  winStreak: number
  bestStreak: number
  tier: number
  tierName: string
  tierColor: string
  winRate: number
  totalFights: number
  rank: number
  totalBots: number
  createdAt: string
  recentFights: {
    id: string
    opponent: string
    result: string
    rounds: number
    arena: string
    date: string
  }[]
}

interface QueueEntry {
  botId: string
  botName: string
  eloRating: number
}

const stats = ref<BotStats | null>(null)
const isLoading = ref(true)
const isJoining = ref(false)
const showChoose = ref(false)
const waitingFighters = ref<QueueEntry[]>([])
let pollHandle: ReturnType<typeof setInterval> | null = null

const isOwner = ref(false)

onMounted(async () => {
  try {
    const res = await fetch(`/api/bots/${encodeURIComponent(botName)}/stats`)
    if (res.ok) stats.value = await res.json()
  } catch { /* */ }
  isLoading.value = false

  // Check ownership
  isOwner.value = isLoggedIn.value && nostrBot.value?.name === botName

  // Poll queue for "choose your fight"
  pollQueue()
  pollHandle = setInterval(pollQueue, 4000)
})

onUnmounted(() => {
  if (pollHandle) clearInterval(pollHandle)
})

async function pollQueue() {
  try {
    const res = await fetch('/api/queue/status')
    if (res.ok) {
      const data = await res.json()
      waitingFighters.value = data.queue || []
    }
  } catch { /* */ }
}

async function instantFight() {
  if (!stats.value || isJoining.value) return
  isJoining.value = true
  try {
    const res = await fetch(`/api/queue/join/${stats.value.id}`, { method: 'POST' })
    if (res.ok) {
      const data = await res.json()
      router.push(`/arena/${data.fightId}`)
    }
  } catch { /* */ }
  isJoining.value = false
}

async function fightSpecific(opponentBotId: string) {
  if (!stats.value || isJoining.value) return
  isJoining.value = true
  try {
    const res = await fetch(`/api/fights/matchmake/${stats.value.id}`, { method: 'POST' })
    if (res.ok) {
      const data = await res.json()
      router.push(`/arena/${data.fightId}`)
    }
  } catch { /* */ }
  isJoining.value = false
}

function handleSignOut() {
  logout()
  router.push('/')
}

const tierClass = (t: number) => `tier-${t}`
</script>

<template>
  <div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-hidden">
    <div class="max-w-lg 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="!stats" class="flex-1 flex items-center justify-center">
        <p class="font-display text-text-muted">Bot not found.</p>
      </div>

      <template v-else>
        <!-- Header -->
        <div class="text-center mb-5">
          <img
            v-if="stats.profilePicUrl"
            :src="stats.profilePicUrl"
            alt=""
            class="w-16 h-16 rounded-full mx-auto mb-2 border-2"
            :style="{ borderColor: stats.tierColor }"
          />
          <p class="font-display text-xs font-bold tracking-[0.2em] mb-1"
             :style="{ color: stats.tierColor }">
            {{ stats.tierName }}
          </p>
          <h2 class="font-display font-black text-3xl sm:text-4xl tracking-wider gradient-text">
            {{ stats.name }}
          </h2>
          <p class="font-mono text-text-muted text-[10px] mt-1">
            #{{ stats.rank }} of {{ stats.totalBots }}
          </p>
        </div>

        <!-- Stats -->
        <div class="grid grid-cols-3 gap-2 mb-4">
          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-black text-xl text-neon-cyan">{{ Math.round(stats.eloRating) }}</p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">ELO</p>
          </div>
          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-black text-xl">
              <span class="text-neon-cyan">{{ stats.wins }}</span>
              <span class="text-text-muted text-sm">-</span>
              <span class="text-neon-pink">{{ stats.losses }}</span>
            </p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">RECORD</p>
          </div>
          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-black text-xl"
               :class="stats.winRate >= 60 ? 'text-neon-cyan' : stats.winRate >= 40 ? 'text-neon-yellow' : 'text-neon-pink'">
              {{ stats.winRate }}%
            </p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">WIN RATE</p>
          </div>
        </div>

        <!-- Streaks row -->
        <div class="flex gap-2 mb-4">
          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-bold text-base"
               :class="stats.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-primary'">
              {{ stats.winStreak > 0 ? `${stats.winStreak}x` : '-' }}
            </p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">STREAK</p>
          </div>
          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-bold text-base text-text-primary">{{ stats.bestStreak }}x</p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">BEST</p>
          </div>
          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-bold text-base text-text-primary">{{ stats.totalFights }}</p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">FIGHTS</p>
          </div>
        </div>

        <!-- Fight actions (only for owner or anyone for now) -->
        <div class="flex gap-2 mb-4">
          <button
            class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
                   font-display font-black text-sm tracking-wider
                   hover:bg-neon-pink/20 transition-all neon-border-pink
                   disabled:opacity-30 disabled:cursor-not-allowed"
            :disabled="isJoining"
            @click="instantFight"
          >
            {{ isJoining ? 'MATCHING...' : 'INSTANT FIGHT' }}
          </button>
          <button
            class="flex-1 py-3 border-2 border-neon-purple/50 text-neon-purple
                   font-display font-bold text-sm tracking-wider
                   hover:bg-neon-purple/10 transition-all"
            @click="showChoose = !showChoose"
          >
            CHOOSE FIGHT
          </button>
        </div>

        <!-- Choose your fight panel -->
        <div v-if="showChoose" class="mb-4 border border-border bg-surface-raised/50 p-3">
          <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
            FIGHTERS WAITING
          </p>
          <div v-if="waitingFighters.length === 0" class="text-center py-3">
            <p class="font-mono text-xs text-text-muted">Nobody waiting. Use Instant Fight instead.</p>
          </div>
          <button
            v-for="fighter in waitingFighters"
            :key="fighter.botId"
            class="w-full flex items-center justify-between px-3 py-2 border border-border
                   hover:border-neon-cyan/30 hover:bg-neon-cyan/5 transition-all mb-1 text-xs
                   disabled:opacity-30"
            :disabled="isJoining || fighter.botId === stats.id"
            @click="fightSpecific(fighter.botId)"
          >
            <span class="font-display font-bold text-text-primary">{{ fighter.botName }}</span>
            <span class="font-mono text-text-muted">{{ Math.round(fighter.eloRating) }} ELO</span>
          </button>
        </div>

        <!-- Recent fights -->
        <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
          RECENT BOUTS
        </p>
        <div class="flex-1 min-h-0 overflow-y-auto space-y-1.5">
          <RouterLink
            v-for="fight in stats.recentFights"
            :key="fight.id"
            :to="`/arena/${fight.id}`"
            class="flex items-center justify-between px-3 py-2 border border-border
                   bg-surface-raised/30 hover:border-neon-pink/30 transition-all text-xs"
          >
            <span class="font-display font-bold w-6"
                  :class="fight.result === 'W' ? 'text-neon-cyan' : fight.result === 'L' ? 'text-neon-pink' : 'text-text-muted'">
              {{ fight.result }}
            </span>
            <span class="font-mono text-text-secondary flex-1 ml-2">vs {{ fight.opponent }}</span>
            <span class="font-mono text-[10px] text-text-muted">R{{ fight.rounds }}</span>
          </RouterLink>
          <div v-if="stats.recentFights.length === 0" class="text-center py-4">
            <p class="font-mono text-text-muted text-xs">No fights yet. Hit Instant Fight!</p>
          </div>
        </div>

        <!-- Sign out (only if owner) -->
        <div v-if="isOwner" class="mt-3 text-center flex-shrink-0">
          <button
            class="font-mono text-[10px] text-text-muted hover:text-ko transition-colors"
            @click="handleSignOut"
          >
            Sign out
          </button>
        </div>
      </template>
    </div>
  </div>
</template>