corrosion-admin-panel/frontend/src/views/admin/PlayersView.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useServerStore } from '@/stores/server'
import { useApi } from '@/composables/useApi'
import { useToastStore } from '@/stores/toast'
import { Users, Search, Ban, LogOut, Shield, RefreshCw } from 'lucide-vue-next'

const server = useServerStore()
const api = useApi()
const toast = useToastStore()

interface Player {
  steam_id: string
  display_name: string
  is_online: boolean
  ping_ms: number | null
  connected_at: string | null
  playtime_seconds: number
  is_admin: boolean
  is_banned: boolean
}

const players = ref<Player[]>([])
const isLoading = ref(false)
const searchQuery = ref('')
const filterStatus = ref<'all' | 'online' | 'offline'>('all')

const filteredPlayers = computed(() => {
  let result = players.value

  if (filterStatus.value === 'online') {
    result = result.filter(p => p.is_online)
  } else if (filterStatus.value === 'offline') {
    result = result.filter(p => !p.is_online)
  }

  if (searchQuery.value.trim()) {
    const q = searchQuery.value.toLowerCase()
    result = result.filter(p =>
      p.display_name.toLowerCase().includes(q) ||
      p.steam_id.includes(q)
    )
  }

  return result.sort((a, b) => {
    if (a.is_online !== b.is_online) return a.is_online ? -1 : 1
    return a.display_name.localeCompare(b.display_name)
  })
})

const onlineCount = computed(() => players.value.filter(p => p.is_online).length)

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

function formatConnectedTime(iso: string | null): string {
  if (!iso) return '\u2014'
  const diff = Date.now() - new Date(iso).getTime()
  const m = Math.floor(diff / 60000)
  const h = Math.floor(m / 60)
  if (h > 0) return `${h}h ${m % 60}m`
  return `${m}m`
}

async function fetchPlayers() {
  isLoading.value = true
  try {
    const data = await api.get<{ players: Player[] }>('/players')
    players.value = data.players
  } catch {
    toast.error('Failed to load player list')
  } finally {
    isLoading.value = false
  }
}

async function kickPlayer(steamId: string, name: string) {
  if (!confirm(`Kick ${name}?`)) return
  try {
    await server.sendCommand(`kick ${steamId}`)
    toast.success(`Kick command sent for ${name}`)
    await fetchPlayers()
  } catch {
    toast.error(`Failed to kick ${name}`)
  }
}

async function banPlayer(steamId: string, name: string) {
  if (!confirm(`Ban ${name}? This will also kick them.`)) return
  try {
    await server.sendCommand(`ban ${steamId}`)
    toast.success(`Ban command sent for ${name}`)
    await fetchPlayers()
  } catch {
    toast.error(`Failed to ban ${name}`)
  }
}

onMounted(() => {
  fetchPlayers()
})
</script>

<template>
  <div class="p-6 space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <Users class="w-5 h-5 text-oxide-500" />
        <div>
          <h1 class="text-2xl font-bold text-neutral-100">Player Management</h1>
          <p class="text-sm text-neutral-500 mt-0.5">
            {{ onlineCount }} online / {{ players.length }} total
          </p>
        </div>
      </div>
      <button
        @click="fetchPlayers"
        :disabled="isLoading"
        class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 rounded-lg transition-colors"
      >
        <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
        Refresh
      </button>
    </div>

    <!-- Filters -->
    <div class="flex items-center gap-4">
      <div class="relative flex-1 max-w-sm">
        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
        <input
          v-model="searchQuery"
          type="text"
          placeholder="Search by name or Steam ID..."
          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
        />
      </div>
      <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
        <button
          v-for="opt in (['all', 'online', 'offline'] as const)"
          :key="opt"
          @click="filterStatus = opt"
          class="px-3 py-2 text-sm font-medium transition-colors capitalize"
          :class="filterStatus === opt
            ? 'bg-oxide-500/15 text-oxide-400'
            : 'text-neutral-400 hover:text-neutral-200'"
        >
          {{ opt }}
        </button>
      </div>
    </div>

    <!-- Player table -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
      <table class="w-full">
        <thead>
          <tr class="border-b border-neutral-800 text-left">
            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Player</th>
            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Steam ID</th>
            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Session</th>
            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Playtime</th>
            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Ping</th>
            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider text-right">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-neutral-800">
          <tr v-if="filteredPlayers.length === 0">
            <td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">
              <template v-if="isLoading">Loading players...</template>
              <template v-else-if="searchQuery">No players matching "{{ searchQuery }}"</template>
              <template v-else>No players found. Server may be offline or API not connected.</template>
            </td>
          </tr>
          <tr
            v-for="player in filteredPlayers"
            :key="player.steam_id"
            class="hover:bg-neutral-800/50 transition-colors"
          >
            <td class="px-4 py-3">
              <div class="flex items-center gap-2">
                <span class="text-sm font-medium text-neutral-100">{{ player.display_name }}</span>
                <Shield v-if="player.is_admin" class="w-3.5 h-3.5 text-oxide-400" title="Admin" />
              </div>
            </td>
            <td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ player.steam_id }}</td>
            <td class="px-4 py-3">
              <span
                class="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full"
                :class="player.is_online
                  ? 'bg-green-500/10 text-green-400'
                  : player.is_banned
                    ? 'bg-red-500/10 text-red-400'
                    : 'bg-neutral-700/50 text-neutral-400'"
              >
                <span
                  class="h-1.5 w-1.5 rounded-full"
                  :class="player.is_online ? 'bg-green-500' : player.is_banned ? 'bg-red-500' : 'bg-neutral-500'"
                />
                {{ player.is_banned ? 'Banned' : player.is_online ? 'Online' : 'Offline' }}
              </span>
            </td>
            <td class="px-4 py-3 text-sm text-neutral-400">
              {{ player.is_online ? formatConnectedTime(player.connected_at) : '\u2014' }}
            </td>
            <td class="px-4 py-3 text-sm text-neutral-400">{{ formatPlaytime(player.playtime_seconds) }}</td>
            <td class="px-4 py-3 text-sm text-neutral-400">
              {{ player.is_online && player.ping_ms ? `${player.ping_ms}ms` : '\u2014' }}
            </td>
            <td class="px-4 py-3 text-right">
              <div class="flex items-center justify-end gap-1" v-if="player.is_online">
                <button
                  @click="kickPlayer(player.steam_id, player.display_name)"
                  class="p-1.5 text-neutral-500 hover:text-yellow-400 rounded transition-colors"
                  title="Kick"
                >
                  <LogOut class="w-4 h-4" />
                </button>
                <button
                  @click="banPlayer(player.steam_id, player.display_name)"
                  class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
                  title="Ban"
                >
                  <Ban class="w-4 h-4" />
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>