<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';

const props = defineProps({ realm: { type: Object, required: true } });
const ping = ref(props.realm.ping ?? 38);
const isOnline = computed(() => props.realm.online !== false);
const players = computed(() => typeof props.realm.players === 'number' ? props.realm.players.toLocaleString('ru-RU') : '-');
const factions = computed(() => props.realm.factions || { alliance: 50, horde: 50 });
let timer;

onMounted(() => {
    if (!isOnline.value) return;
    timer = window.setInterval(() => {
        ping.value = Math.max(20, Math.min(80, ping.value + Math.round((Math.random() - 0.5) * 6)));
    }, 2200);
});

onBeforeUnmount(() => window.clearInterval(timer));
</script>

<template>
    <div class="wrap realm reveal">
        <div class="realm-panel">
            <div class="realm-status"><span class="orb"></span><span class="label">{{ isOnline ? 'Онлайн' : 'Оффлайн' }}</span></div>
            <div class="realm-name">{{ realm.name || "Elune's Grace" }}<small>{{ realm.mode || 'PvE · x1 rate · RU' }}</small></div>
            <div class="realm-stat"><span class="k">Игроков</span><span class="v">{{ players }}</span></div>
            <div class="realm-stat"><span class="k">Аптайм</span><span class="v small">{{ realm.uptime || '99.94%' }}</span></div>
            <div class="realm-stat"><span class="k">Пинг</span><span class="v small">{{ isOnline ? `${ping} ms` : '-' }}</span></div>
            <div class="realm-stat"><span class="k">Фракции</span><span class="v small">{{ factions.alliance }} / {{ factions.horde }}</span></div>
        </div>
    </div>
</template>
