<script setup lang="ts">
import { computed } from 'vue'
import { logout } from '@/game/auth'
import { store } from '@/game/store'

const user = computed(() => store.auth.user)
const loggedIn = computed(() => !!user.value && user.value.id !== 'guest')
const isAdmin = computed(() => Boolean(user.value?.admin))

function openResearch(): void {
  store.auth.showResearch = true
}
function openStats(): void {
  store.auth.showStats = true
}
function openAuth(): void {
  store.auth.showAuth = true
}
function openAdmin(): void {
  window.location.href = '/admin'
}
async function doLogout(): Promise<void> {
  await logout()
}
</script>

<template>
  <div class="profile-bar">
    <div class="crystals" :title="user?.stats ? `${user.stats.totalKills} Abschüsse · ${user.stats.gamesPlayed} Spiele` : ''">
      💎 {{ user?.crystals ?? 0 }}
    </div>
    <template v-if="loggedIn">
      <span class="name" :title="user?.username">👤 {{ user?.displayName }}</span>
      <button class="chip stats" @click="openStats">📊 Statistik</button>
      <button class="chip research" @click="openResearch">🧪 Forschung</button>
      <button v-if="isAdmin" class="chip admin" title="Admin-Dashboard öffnen" @click="openAdmin">🛡️ Admin</button>
      <button class="chip" @click="doLogout">Abmelden</button>
    </template>
    <template v-else>
      <span class="name">👤 Gast</span>
      <button class="chip stats" @click="openStats">📊 Statistik</button>
      <button class="chip research" @click="openResearch">🧪 Forschung</button>
      <button class="chip login" @click="openAuth">Anmelden</button>
    </template>
  </div>
</template>

<style scoped>
.profile-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 6px 10px;
}
.crystals {
  font-weight: 800;
  color: #7fd8ff;
  font-size: 14px;
}
.name {
  color: var(--text-dim);
  font-size: 13px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip {
  background: var(--panel-inset);
  border: 1px solid var(--panel-border);
  color: var(--text);
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
}

/* Phones: chips wrap into compact rows instead of overflowing */
@media (max-width: 560px) {
  .profile-bar {
    gap: 5px;
    padding: 5px 8px;
  }
  .crystals {
    font-size: 13px;
  }
  .name {
    font-size: 11.5px;
    max-width: 92px;
  }
  .chip {
    font-size: 11px;
    padding: 4px 8px;
  }
}
.chip:hover {
  border-color: var(--accent);
}
.chip.research {
  border-color: #3d6f9e;
}
.chip.stats {
  border-color: #6e5a9e;
}
.chip.admin {
  border-color: #9e503d;
  color: #ffb0a0;
}
.chip.login {
  border-color: #3f8f37;
  color: #b8e6b0;
}
</style>
