<template>
  <div :class="{ 'retro-mode': isRetroMode }" class="app-root">
    <header class="app-header">
      <RouterLink to="/" class="app-logo">Teletype Games</RouterLink>

      <!-- Desktop Navigation -->
      <nav class="nav-desktop">
        <RouterLink to="/" class="nav-link"><i class="fa-solid fa-house nav-icon"></i>{{ t('nav.home') }}</RouterLink>
        <RouterLink to="/catalog" class="nav-link"><i class="fa-solid fa-gamepad nav-icon"></i>{{ t('nav.catalog') }}</RouterLink>
        <RouterLink to="/blog" class="nav-link"><i class="fa-solid fa-newspaper nav-icon"></i>{{ t('nav.blog') }}</RouterLink>
        <RouterLink to="/howtos" class="nav-link"><i class="fa-solid fa-lightbulb nav-icon"></i>{{ t('nav.howtos') }}</RouterLink>
        <RouterLink to="/engines" class="nav-link"><i class="fa-solid fa-cubes nav-icon"></i>{{ t('nav.engines') }}</RouterLink>
        <RouterLink to="/code" class="nav-link"><i class="fa-solid fa-code nav-icon"></i>{{ t('nav.code') }}</RouterLink>
        <RouterLink to="/team" class="nav-link"><i class="fa-solid fa-users nav-icon"></i>{{ t('nav.team') }}</RouterLink>
        <RouterLink to="/contact" class="nav-link"><i class="fa-solid fa-envelope nav-icon"></i>{{ t('nav.contact') }}</RouterLink>
        <a v-if="isAdmin" href="/admin" class="nav-link-admin"><i class="fa-solid fa-wrench nav-icon"></i>Admin</a>

        <div class="locale-switcher">
          <i class="fa-solid fa-globe text-gray-500 text-xs"></i>
          <button :class="locale === 'en' ? 'text-white' : 'text-gray-400 hover:text-white'" class="locale-btn" @click="switchLocale('en')">EN</button>
          <span class="locale-separator">|</span>
          <button :class="locale === 'hu' ? 'text-white' : 'text-gray-400 hover:text-white'" class="locale-btn" @click="switchLocale('hu')">HU</button>
        </div>
      </nav>

      <!-- Hamburger Button (Mobile only) -->
      <button class="hamburger-btn" @click="toggleMenu">
        <i class="fa-solid fa-bars text-xl"></i>
      </button>

      <!-- Mobile Navigation -->
      <nav v-show="menuOpen" class="nav-mobile">
        <RouterLink to="/" class="nav-mobile-link"><i class="fa-solid fa-house nav-icon"></i>{{ t('nav.home') }}</RouterLink>
        <RouterLink to="/catalog" class="nav-mobile-link"><i class="fa-solid fa-gamepad nav-icon"></i>{{ t('nav.catalog') }}</RouterLink>
        <RouterLink to="/blog" class="nav-mobile-link"><i class="fa-solid fa-newspaper nav-icon"></i>{{ t('nav.blog') }}</RouterLink>
        <RouterLink to="/howtos" class="nav-mobile-link"><i class="fa-solid fa-lightbulb nav-icon"></i>{{ t('nav.howtos') }}</RouterLink>
        <RouterLink to="/engines" class="nav-mobile-link"><i class="fa-solid fa-cubes nav-icon"></i>{{ t('nav.engines') }}</RouterLink>
        <RouterLink to="/code" class="nav-mobile-link"><i class="fa-solid fa-code nav-icon"></i>{{ t('nav.code') }}</RouterLink>
        <RouterLink to="/team" class="nav-mobile-link"><i class="fa-solid fa-users nav-icon"></i>{{ t('nav.team') }}</RouterLink>
        <RouterLink to="/contact" class="nav-mobile-link"><i class="fa-solid fa-envelope nav-icon"></i>{{ t('nav.contact') }}</RouterLink>
        <a v-if="isAdmin" href="/admin" class="nav-mobile-link"><i class="fa-solid fa-wrench nav-icon"></i>Admin</a>
        <div class="locale-switcher-mobile">
          <button :class="locale === 'en' ? 'text-white' : 'text-gray-400'" class="locale-btn-mobile" @click="switchLocale('en')">EN</button>
          <span class="locale-separator">|</span>
          <button :class="locale === 'hu' ? 'text-white' : 'text-gray-400'" class="locale-btn-mobile" @click="switchLocale('hu')">HU</button>
        </div>
      </nav>
    </header>

    <main>
      <slot />
    </main>

    <div class="retro-toggle-bar">
      <div class="retro-toggle-content">
        <button class="retro-toggle-btn" @click="toggleRetroMode">
          <i class="fa-solid fa-desktop"></i> {{ isRetroMode ? t('nav.exitRetro') : t('nav.retro') }}
        </button>
        <div class="rss-links">
          <a href="/api/rss/blog" target="_blank" class="rss-link" title="Blog RSS">
            <i class="fa-solid fa-rss"></i> Blog
          </a>
          <span class="locale-separator">|</span>
          <a href="/api/rss/releases" target="_blank" class="rss-link" title="Releases RSS">
            <i class="fa-solid fa-rss"></i> Releases
          </a>
          <span class="locale-separator">|</span>
          <a href="/api/rss/howtos" target="_blank" class="rss-link" title="HowTos RSS">
            <i class="fa-solid fa-rss"></i> HowTos
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { RouterLink, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useUiStore } from '../stores/ui.store'
import { getCookie } from '../lib/cookie'

const { t, locale } = useI18n()

const ui = useUiStore()
const { isRetroMode, menuOpen } = storeToRefs(ui)
const { toggleMenu, toggleRetroMode } = ui
const route = useRoute()
const isAdmin = computed(() => !!getCookie('is_admin'))

watch(() => route.path, () => {
  ui.closeMenu()
})

function switchLocale(lang: string) {
  locale.value = lang
  localStorage.setItem('locale', lang)
}
</script>

<style scoped>
.app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-root > main {
  flex: 1;
}
.app-header {
  @apply bg-gray-800 text-white p-4 flex justify-between items-center relative;
}
.app-logo {
  @apply text-xl font-bold;
}
.nav-desktop {
  @apply hidden lg:flex items-center space-x-1;
}
.nav-link {
  @apply px-2.5 py-2 text-sm hover:text-purple-300 transition-colors duration-200 whitespace-nowrap;
}
.nav-link-admin {
  @apply px-2.5 py-2 text-sm hover:text-yellow-300 transition-colors duration-200 whitespace-nowrap;
}
.locale-switcher {
  @apply flex items-center gap-1 text-sm font-bold ml-2 border-l border-gray-600 pl-4;
}
.locale-btn {
  @apply transition-colors px-1;
}
.locale-separator {
  @apply text-gray-600;
}
/* Az ikonok viszik a legtöbb helyet a sok menüpont mellett — desktopon csak
   extra széles kijelzőn jelennek meg, a mobil menüben mindig. */
.nav-desktop .nav-icon {
  @apply hidden xl:inline-block;
}
.nav-icon {
  @apply mr-1.5 text-xs opacity-70;
}
.hamburger-btn {
  @apply lg:hidden p-2 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md;
}
.nav-mobile {
  @apply lg:hidden absolute top-full left-0 w-full bg-gray-800 flex flex-col items-center py-4 space-y-2 z-50;
}
.nav-mobile-link {
  @apply block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200;
}
.locale-switcher-mobile {
  @apply flex items-center gap-2 pt-2 border-t border-gray-700 w-full justify-center text-sm font-bold;
}
.locale-btn-mobile {
  @apply transition-colors px-2 py-1;
}
.retro-toggle-content {
  @apply flex items-center justify-center gap-4;
}
.rss-links {
  @apply flex items-center gap-2 text-xs text-gray-400;
}
.rss-link {
  @apply hover:text-orange-400 transition-colors;
}
</style>
