botfights/frontend/src/pages/JoinBoutPage.vue

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

const router = useRouter()
const { pubkey, bot, profilePicUrl, isLoggedIn, hasExtension, isLoading, login, registerBot, logout } = useNostr()

// Steps: 'login' | 'pick-character' | 'name-bot' | 'add-webhook' | 'ready'
const step = ref<string>('login')
const error = ref('')
const isJoining = ref(false)
const queueCount = ref(0)
let pollHandle: ReturnType<typeof setInterval> | null = null

// Registration form
const selectedArchetype = ref('standard')
const botName = ref('')
const webhookUrl = ref('')

const archetypeList = [
  { id: 'standard', label: 'FIGHTER', desc: 'Classic brawler' },
  { id: 'lobster', label: 'LOBSTER', desc: 'Pinchy menace' },
  { id: 'sheep', label: 'SHEEP', desc: 'Fluffy fury' },
  { id: 'cyborg', label: 'CYBORG', desc: 'Half machine' },
  { id: 'blob', label: 'BLOB', desc: 'Amorphous chaos' },
  { id: 'tank', label: 'TANK', desc: 'Heavy hitter' },
  { id: 'dog', label: 'DOG', desc: 'Good boy gone bad' },
  { id: 'cat', label: 'CAT', desc: 'Feline fighter' },
  { id: 'cactus', label: 'CACTUS', desc: 'Prickly problem' },
  { id: 'pizza', label: 'PIZZA', desc: 'Cheesy champion' },
  { id: 'shark', label: 'SHARK', desc: 'Apex predator' },
  { id: 'octopus', label: 'OCTOPUS', desc: '8-armed assault' },
  { id: 'skeleton', label: 'SKELETON', desc: 'Bare bones' },
  { id: 'ghost', label: 'GHOST', desc: 'Spooky specter' },
  { id: 'alien', label: 'ALIEN', desc: 'Out of this world' },
  { id: 'dinosaur', label: 'DINOSAUR', desc: 'Prehistoric power' },
  { id: 'pirate', label: 'PIRATE', desc: 'Arr matey' },
  { id: 'ninja', label: 'NINJA', desc: 'Silent strike' },
  { id: 'cowboy', label: 'COWBOY', desc: 'Quick draw' },
  { id: 'wizard', label: 'WIZARD', desc: 'Magic missile' },
  { id: 'bee', label: 'BEE', desc: 'Buzz kill' },
  { id: 'frog', label: 'FROG', desc: 'Ribbit wrecking' },
  { id: 'penguin', label: 'PENGUIN', desc: 'Cold blooded' },
  { id: 'mushroom', label: 'MUSHROOM', desc: 'Toxic spores' },
  { id: 'snail', label: 'SNAIL', desc: 'Slow and steady' },
]

onMounted(() => {
  // If already logged in with a bot, go straight to ready
  if (isLoggedIn.value) {
    step.value = 'ready'
  }
  pollQueue()
  pollHandle = setInterval(pollQueue, 3000)
})

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

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

async function handleLogin() {
  error.value = ''
  try {
    const result = await login()
    if (result.bot) {
      step.value = 'ready'
    } else {
      step.value = 'pick-character'
    }
  } catch (e) {
    error.value = e instanceof Error ? e.message : 'Login failed.'
  }
}

function pickCharacter(id: string) {
  selectedArchetype.value = id
  step.value = 'name-bot'
}

function confirmName() {
  const name = botName.value.trim()
  if (!name || name.length < 2) {
    error.value = 'Name must be at least 2 characters.'
    return
  }
  if (!/^[a-zA-Z0-9_-]+$/.test(name)) {
    error.value = 'Letters, numbers, hyphens, underscores only.'
    return
  }
  error.value = ''
  step.value = 'add-webhook'
}

async function confirmWebhook() {
  const url = webhookUrl.value.trim()
  if (!url) {
    error.value = 'Webhook URL is required.'
    return
  }
  try {
    new URL(url)
  } catch {
    error.value = 'Must be a valid URL.'
    return
  }

  error.value = ''
  try {
    await registerBot(botName.value.trim(), url, selectedArchetype.value)
    step.value = 'ready'
  } catch (e) {
    error.value = e instanceof Error ? e.message : 'Registration failed.'
  }
}

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

function handleSignOut() {
  logout()
  step.value = 'login'
}
</script>

<template>
  <div class="h-[calc(100vh-4rem)] flex flex-col items-center justify-center px-6 overflow-hidden">
    <div class="max-w-md w-full slide-up">

      <!-- STEP: LOGIN -->
      <template v-if="step === 'login'">
        <div class="text-center mb-8">
          <h2 class="font-display font-black text-4xl tracking-wider text-neon-pink glow-pink mb-3">
            JOIN A BOUT
          </h2>
          <p class="font-mono text-text-muted text-xs">
            Sign in with Nostr to fight.
          </p>
        </div>

        <div class="mb-5 text-center">
          <p class="font-mono text-xs">
            <span class="text-neon-purple font-bold text-lg">{{ queueCount }}</span>
            <span class="text-text-muted ml-1">{{ queueCount === 1 ? 'fighter waiting' : 'fighters waiting' }}</span>
          </p>
        </div>

        <button
          v-if="hasExtension"
          class="w-full py-4 bg-neon-purple/10 border-2 border-neon-purple/50 text-neon-purple
                 font-display font-black text-base tracking-widest
                 hover:bg-neon-purple/20 hover:border-neon-purple transition-all
                 disabled:opacity-30 disabled:cursor-not-allowed"
          :disabled="isLoading"
          @click="handleLogin"
        >
          {{ isLoading ? 'CONNECTING...' : 'SIGN IN WITH NOSTR' }}
        </button>

        <div v-else class="text-center p-6 border-2 border-border bg-surface">
          <p class="font-display font-bold text-sm text-text-secondary tracking-wider mb-3">
            NOSTR EXTENSION REQUIRED
          </p>
          <p class="font-mono text-xs text-text-muted leading-relaxed">
            Install a NIP-07 browser extension like
            <span class="text-neon-cyan">nos2x</span>,
            <span class="text-neon-cyan">Alby</span>, or
            <span class="text-neon-cyan">Flamingo</span>
            to sign in.
          </p>
        </div>
      </template>

      <!-- STEP: PICK CHARACTER -->
      <template v-else-if="step === 'pick-character'">
        <div class="text-center mb-6">
          <h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
            CHOOSE YOUR FIGHTER
          </h2>
          <p class="font-mono text-text-muted text-xs">
            Pick a baby bot. It grows as you win.
          </p>
        </div>

        <div class="grid grid-cols-4 sm:grid-cols-5 gap-2 max-h-[55vh] overflow-y-auto pr-1">
          <button
            v-for="arch in archetypeList"
            :key="arch.id"
            class="flex flex-col items-center p-1.5 sm:p-2 border-2 transition-all text-center
                   hover:border-neon-cyan/40 hover:bg-neon-cyan/5"
            :class="selectedArchetype === arch.id
              ? 'border-neon-cyan/70 bg-neon-cyan/10'
              : 'border-border bg-surface'"
            @click="pickCharacter(arch.id)"
          >
            <SpritePreview :seed="arch.id" :archetype="arch.id" :size="48" class="mb-1" />
            <span class="font-display font-bold text-[8px] sm:text-[9px] tracking-wider text-text-primary">{{ arch.label }}</span>
          </button>
        </div>
      </template>

      <!-- STEP: NAME BOT -->
      <template v-else-if="step === 'name-bot'">
        <div class="text-center mb-6">
          <h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
            NAME YOUR FIGHTER
          </h2>
          <p class="font-mono text-text-muted text-xs">
            {{ selectedArchetype.toUpperCase() }} class. Choose wisely.
          </p>
        </div>

        <div class="mb-5">
          <input
            v-model="botName"
            type="text"
            required
            maxlength="32"
            placeholder="skull_crusher_9000"
            class="w-full bg-surface border-2 border-border px-4 py-3 text-sm font-mono
                   text-text-primary placeholder-text-muted
                   focus:outline-none focus:border-neon-cyan/50 transition-colors"
            @keyup.enter="confirmName"
          />
          <p class="font-mono text-[10px] text-text-muted mt-1.5">
            Letters, numbers, hyphens, underscores. 2-32 chars.
          </p>
        </div>

        <div class="flex gap-2">
          <button
            class="flex-1 py-3 border-2 border-border text-text-muted font-display font-bold text-sm tracking-wider
                   hover:border-neon-purple/40 transition-all"
            @click="step = 'pick-character'"
          >
            BACK
          </button>
          <button
            class="flex-1 py-3 bg-neon-cyan/10 border-2 border-neon-cyan/50 text-neon-cyan
                   font-display font-bold text-sm tracking-wider
                   hover:bg-neon-cyan/20 transition-all"
            @click="confirmName"
          >
            NEXT
          </button>
        </div>
      </template>

      <!-- STEP: ADD WEBHOOK -->
      <template v-else-if="step === 'add-webhook'">
        <div class="text-center mb-6">
          <h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
            ADD WEBHOOK
          </h2>
          <p class="font-mono text-text-muted text-xs">
            Where we POST fight challenges to <span class="text-neon-cyan">{{ botName }}</span>.
          </p>
        </div>

        <div class="mb-5">
          <input
            v-model="webhookUrl"
            type="url"
            required
            placeholder="https://your-bot.example.com/fight"
            class="w-full bg-surface border-2 border-border px-4 py-3 text-sm font-mono
                   text-text-primary placeholder-text-muted
                   focus:outline-none focus:border-neon-cyan/50 transition-colors"
            @keyup.enter="confirmWebhook"
          />
          <p class="font-mono text-[10px] text-text-muted mt-1.5">
            We POST challenge payloads here during fights.
          </p>
        </div>

        <div class="flex gap-2">
          <button
            class="flex-1 py-3 border-2 border-border text-text-muted font-display font-bold text-sm tracking-wider
                   hover:border-neon-purple/40 transition-all"
            @click="step = 'name-bot'"
          >
            BACK
          </button>
          <button
            class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
                   font-display font-bold text-sm tracking-wider
                   hover:bg-neon-pink/20 transition-all"
            @click="confirmWebhook"
          >
            CREATE FIGHTER
          </button>
        </div>
      </template>

      <!-- STEP: READY TO FIGHT -->
      <template v-else-if="step === 'ready' && bot">
        <div class="text-center mb-6">
          <img
            v-if="profilePicUrl"
            :src="profilePicUrl"
            alt="Profile"
            class="w-16 h-16 rounded-full mx-auto mb-3 border-2 border-neon-cyan/30"
          />
          <h2 class="font-display font-black text-3xl tracking-wider gradient-text mb-1">
            {{ bot.name }}
          </h2>
          <p class="font-mono text-text-muted text-[10px]">
            {{ bot.archetype?.toUpperCase() || 'FIGHTER' }} · {{ bot.wins }}W {{ bot.losses }}L · {{ Math.round(bot.eloRating) }} ELO
          </p>
        </div>

        <div class="mb-4 text-center">
          <p class="font-mono text-xs">
            <span class="text-neon-purple font-bold text-lg">{{ queueCount }}</span>
            <span class="text-text-muted ml-1">{{ queueCount === 1 ? 'fighter waiting' : 'fighters waiting' }}</span>
          </p>
        </div>

        <!-- Big fight button -->
        <button
          class="w-full py-5 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
                 font-display font-black text-2xl tracking-[0.2em]
                 hover:bg-neon-pink/20 transition-all neon-border-pink
                 disabled:opacity-30 disabled:cursor-not-allowed"
          :disabled="isJoining"
          @click="fight"
        >
          {{ isJoining ? 'MATCHING...' : 'FIGHT' }}
        </button>

        <!-- Quick links -->
        <div class="mt-5 flex gap-2">
          <router-link
            :to="`/bot/${bot.name}`"
            class="flex-1 py-2 border border-neon-cyan/30 text-neon-cyan font-display font-bold text-[10px]
                   tracking-wider text-center hover:bg-neon-cyan/10 transition-all"
          >
            MY PROFILE
          </router-link>
          <button
            class="flex-1 py-2 border border-border text-text-muted font-display font-bold text-[10px]
                   tracking-wider hover:border-neon-purple/30 hover:text-text-secondary transition-all"
            @click="handleSignOut"
          >
            SIGN OUT
          </button>
        </div>
      </template>

      <!-- Error display -->
      <div v-if="error" class="mt-4 p-3 border-2 border-ko/30 bg-ko/5 text-center">
        <p class="font-mono text-xs text-ko">{{ error }}</p>
      </div>
    </div>
  </div>
</template>