<script setup>
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { arrowSvg, moonMark, navLinks } from './symbols';

const props = defineProps({
    auth: { type: Object, required: true },
    playUrl: { type: String, required: true },
    realm: { type: Object, required: true },
});

const scrolled = ref(false);
const open = ref(false);
const cabinetHref = computed(() => props.auth.authenticated ? props.auth.cabinet_url : (props.auth.login_url || '/login'));

const close = () => {
    open.value = false;
};

const onScroll = () => {
    scrolled.value = window.scrollY > 40;
};

onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }));
onBeforeUnmount(() => {
    document.body.style.overflow = '';
    window.removeEventListener('scroll', onScroll);
});

watch(open, (value) => {
    document.body.style.overflow = value ? 'hidden' : '';
});
</script>

<template>
    <nav :class="['nav', { scrolled }]">
        <div class="wrap nav-inner">
            <a href="#" class="nav-logo" @click="close">
                <span class="nav-logo-mark" style="color: var(--moon)" v-html="moonMark(32)"></span>
                <span>MoonWell</span>
            </a>

            <div class="nav-links nav-links-desktop">
                <a v-for="link in navLinks" :key="link.href" :href="link.href">{{ link.label }}</a>
                <a v-if="auth.is_admin" :href="auth.admin_url">Админка</a>
                <a :href="cabinetHref" class="nav-cta">
                    {{ auth.authenticated ? 'Личный кабинет' : 'Войти в кабинет' }}
                    <span style="color: var(--moon)" v-html="arrowSvg"></span>
                </a>
                <a :href="playUrl" class="nav-cta">Играть <span style="color: var(--moon)" v-html="arrowSvg"></span></a>
            </div>

            <button :class="['nav-burger', { 'is-open': open }]" :aria-label="open ? 'Закрыть меню' : 'Открыть меню'" :aria-expanded="open" @click="open = !open">
                <span></span><span></span><span></span>
            </button>
        </div>

        <div :class="['nav-drawer-backdrop', { 'is-open': open }]" aria-hidden="true" @click="close"></div>
        <aside :class="['nav-drawer', { 'is-open': open }]" :aria-hidden="!open">
            <div class="nav-drawer-head"><span class="eyebrow">Навигация</span></div>
            <div class="nav-drawer-links">
                <a v-for="(link, index) in navLinks" :key="link.href" :href="link.href" :style="{ transitionDelay: `${60 + index * 40}ms` }" @click="close">
                    <span class="num">{{ String(index + 1).padStart(2, '0') }}</span>
                    <span class="lbl">{{ link.label }}</span>
                    <span class="arr" v-html="arrowSvg"></span>
                </a>
                <a :href="cabinetHref" @click="close">
                    <span class="num">05</span>
                    <span class="lbl">{{ auth.authenticated ? 'Личный кабинет' : 'Войти в кабинет' }}</span>
                    <span class="arr" v-html="arrowSvg"></span>
                </a>
                <a v-if="auth.is_admin" :href="auth.admin_url" @click="close">
                    <span class="num">06</span>
                    <span class="lbl">Админка</span>
                    <span class="arr" v-html="arrowSvg"></span>
                </a>
            </div>
            <a :href="playUrl" class="btn btn-primary nav-drawer-cta" @click="close">Играть <span v-html="arrowSvg"></span></a>
            <div class="nav-drawer-foot">
                <span class="eyebrow" style="color: var(--text-mute)">moonwell · {{ realm.client_version || '3.3.5a' }}</span>
            </div>
        </aside>
    </nav>
</template>
