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

const CREATOR_PUBKEY = 'da5e0c1b646bdb13c2300f805b0ca3e5afe5b052c594ce78bac8978d21c3fa39'

interface Stats {
  uptime: number
  rssBytes: number
  heapUsed: number
  heapTotal: number
  dbSizeBytes: number
  activeFights: number
  activeSSE: number
  totalBots: number
  totalFights: number
  totalSatsMoved: number
}

interface Bot {
  id: string
  name: string
  eloRating: number
  wins: number
  losses: number
  tier: number
  isActive: boolean
  archetype: string
  botType: string
  consecutiveErrors: number
  lastFightAt: string | null
  createdAt: string
}

interface Fight {
  id: string
  botAId: string
  botBId: string
  arena: string
  status: string
  winnerId: string | null
  botAHp: number
  botBHp: number
  totalRounds: number
  mode: string
  potSats: number
  createdAt: string
}

const { pubkey } = useNostr()
const router = useRouter()

const isAuthorized = computed(() => pubkey.value === CREATOR_PUBKEY)
const stats = ref<Stats | null>(null)
const bots = ref<Bot[]>([])
const fights = ref<Fight[]>([])
const tab = ref<'stats' | 'bots' | 'fights'>('stats')
const isLoading = ref(true)
let refreshTimer: ReturnType<typeof setInterval> | null = null

function headers(): Record<string, string> {
  return { 'x-pubkey': pubkey.value || '' }
}

async function fetchStats() {
  try {
    const res = await fetch('/api/admin/stats', { headers: headers() })
    if (res.ok) stats.value = await res.json()
  } catch {}
}

async function fetchBots() {
  try {
    const res = await fetch('/api/admin/bots', { headers: headers() })
    if (res.ok) {
      const data = await res.json()
      bots.value = data.bots
    }
  } catch {}
}

async function fetchFights() {
  try {
    const res = await fetch('/api/admin/fights?limit=50', { headers: headers() })
    if (res.ok) {
      const data = await res.json()
      fights.value = data.fights
    }
  } catch {}
}

async function toggleBot(bot: Bot) {
  const action = bot.isActive ? 'deactivate' : 'activate'
  await fetch(`/api/admin/bots/${bot.id}/${action}`, { method: 'POST', headers: headers() })
  bot.isActive = !bot.isActive
}

async function resetElo(bot: Bot) {
  await fetch(`/api/admin/bots/${bot.id}/reset-elo`, { method: 'POST', headers: headers() })
  bot.eloRating = 1200
  bot.tier = 0
}

function fmtBytes(b: number): string {
  if (b < 1024) return b + 'B'
  if (b < 1024 * 1024) return (b / 1024).toFixed(1) + 'KB'
  return (b / (1024 * 1024)).toFixed(1) + 'MB'
}

function fmtUptime(s: number): string {
  const h = Math.floor(s / 3600)
  const m = Math.floor((s % 3600) / 60)
  return h > 0 ? `${h}h ${m}m` : `${m}m`
}

function botName(id: string): string {
  return bots.value.find(b => b.id === id)?.name || id.slice(0, 8)
}

onMounted(async () => {
  if (!isAuthorized.value) {
    router.replace('/')
    return
  }
  await Promise.all([fetchStats(), fetchBots(), fetchFights()])
  isLoading.value = false
  refreshTimer = setInterval(fetchStats, 15_000)
})

onUnmounted(() => {
  if (refreshTimer) clearInterval(refreshTimer)
})
</script>

<template>
  <div class="min-h-screen bg-background text-text-primary p-4 max-w-5xl mx-auto">
    <h1 class="font-display text-2xl text-neon-yellow mb-4 tracking-wider">ADMIN</h1>

    <div v-if="!isAuthorized" class="text-red-500 font-pixel">ACCESS DENIED</div>

    <div v-else-if="isLoading" class="text-text-muted font-pixel text-sm">Loading...</div>

    <template v-else>
      <!-- Tabs -->
      <div class="flex gap-2 mb-4 border-b border-border pb-2">
        <button
          v-for="t in (['stats', 'bots', 'fights'] as const)"
          :key="t"
          class="px-4 py-1.5 font-pixel text-xs tracking-wider border transition-all"
          :class="tab === t
            ? 'border-neon-yellow text-neon-yellow bg-neon-yellow/10'
            : 'border-border/50 text-text-muted hover:text-neon-yellow hover:border-neon-yellow/50'"
          @click="tab = t"
        >
          {{ t.toUpperCase() }}
        </button>
      </div>

      <!-- Stats tab -->
      <div v-if="tab === 'stats' && stats" class="grid grid-cols-2 sm:grid-cols-3 gap-3">
        <div v-for="(val, key) in {
          'Uptime': fmtUptime(stats.uptime),
          'RSS': fmtBytes(stats.rssBytes),
          'Heap': fmtBytes(stats.heapUsed) + ' / ' + fmtBytes(stats.heapTotal),
          'DB Size': fmtBytes(stats.dbSizeBytes),
          'Active Fights': stats.activeFights,
          'SSE Streams': stats.activeSSE,
          'Total Bots': stats.totalBots,
          'Total Fights': stats.totalFights,
          'Sats Moved': stats.totalSatsMoved.toLocaleString(),
        }" :key="key"
          class="border border-border/50 p-3 bg-surface-raised/30"
        >
          <div class="text-text-muted font-pixel text-[9px] tracking-wider mb-1">{{ key }}</div>
          <div class="font-mono text-sm text-neon-cyan">{{ val }}</div>
        </div>
      </div>

      <!-- Bots tab -->
      <div v-if="tab === 'bots'" class="space-y-1">
        <div class="text-text-muted font-pixel text-[9px] tracking-wider mb-2">{{ bots.length }} BOTS</div>
        <div
          v-for="bot in bots"
          :key="bot.id"
          class="flex items-center justify-between border border-border/30 px-3 py-2 bg-surface-raised/20 text-sm"
        >
          <div class="flex items-center gap-3 min-w-0">
            <span class="font-pixel text-xs w-6 text-center"
              :class="bot.isActive ? 'text-green-400' : 'text-red-400'">
              {{ bot.isActive ? 'ON' : 'OFF' }}
            </span>
            <span class="font-display truncate" :class="bot.archetype === 'the_creator' ? 'text-neon-yellow' : 'text-text-primary'">
              {{ bot.name }}
            </span>
            <span class="text-text-muted font-mono text-xs">{{ Math.round(bot.eloRating) }}</span>
            <span class="text-text-muted font-mono text-[10px]">{{ bot.wins }}W {{ bot.losses }}L</span>
            <span v-if="bot.consecutiveErrors > 0" class="text-red-400 font-mono text-[10px]">{{ bot.consecutiveErrors }}err</span>
          </div>
          <div class="flex items-center gap-1.5 flex-shrink-0">
            <button
              class="px-2 py-0.5 border text-[9px] font-pixel tracking-wider transition-all"
              :class="bot.isActive
                ? 'border-red-400/50 text-red-400 hover:bg-red-400/10'
                : 'border-green-400/50 text-green-400 hover:bg-green-400/10'"
              @click="toggleBot(bot)"
            >
              {{ bot.isActive ? 'DEACTIVATE' : 'ACTIVATE' }}
            </button>
            <button
              class="px-2 py-0.5 border border-neon-cyan/50 text-neon-cyan text-[9px] font-pixel tracking-wider hover:bg-neon-cyan/10 transition-all"
              @click="resetElo(bot)"
            >
              RESET ELO
            </button>
          </div>
        </div>
      </div>

      <!-- Fights tab -->
      <div v-if="tab === 'fights'" class="space-y-1">
        <div class="text-text-muted font-pixel text-[9px] tracking-wider mb-2">RECENT {{ fights.length }} FIGHTS</div>
        <div
          v-for="fight in fights"
          :key="fight.id"
          class="flex items-center justify-between border border-border/30 px-3 py-2 bg-surface-raised/20 text-xs"
        >
          <div class="flex items-center gap-2 min-w-0">
            <span class="font-pixel text-[9px] w-14 text-center"
              :class="{ 'text-green-400': fight.status === 'finished', 'text-neon-yellow': fight.status === 'live', 'text-text-muted': fight.status === 'scheduled' }">
              {{ fight.status.toUpperCase() }}
            </span>
            <span class="font-display truncate">
              <span :class="fight.winnerId === fight.botAId ? 'text-neon-cyan' : 'text-text-muted'">{{ botName(fight.botAId) }}</span>
              <span class="text-text-muted mx-1">vs</span>
              <span :class="fight.winnerId === fight.botBId ? 'text-neon-pink' : 'text-text-muted'">{{ botName(fight.botBId) }}</span>
            </span>
          </div>
          <div class="flex items-center gap-2 flex-shrink-0 text-text-muted font-mono">
            <span>R{{ fight.totalRounds }}</span>
            <span>{{ fight.arena }}</span>
            <span v-if="fight.potSats > 0" class="text-neon-yellow">{{ fight.potSats }}sat</span>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
