<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { ref, onMounted } from 'vue'

// Theme state and available themes
const theme = ref(localStorage.getItem('theme') || 'mocha')
const availableThemes = [
  'mocha',
  'latte',
  'yule-night',
  'yule-day',
  'midsummer-twilight',
  'midsummer-daylight',
  'fireworks-night',
  'parade-day',
  'harvest-twilight',
  'golden-hour',
  'stargazer',
  'daydreamer',
]

// Apply theme
onMounted(() => {
  document.documentElement.setAttribute('data-theme', theme.value)
})

// Change theme function
const changeTheme = (newTheme: string) => {
  theme.value = newTheme
  document.documentElement.setAttribute('data-theme', newTheme)
  localStorage.setItem('theme', newTheme)
}
</script>

<template>
  <div id="app">
    <!-- Header and Navigation -->
    <header>
      <nav class="nav-bar">
        <div class="nav-links">
          <RouterLink to="/">Home</RouterLink>
          <RouterLink to="/servers">Servers</RouterLink>
          <RouterLink to="/projects">Projects</RouterLink>
          <a href="https://foundryvtt.example.com" target="_blank">Foundry VTT</a>
          <a href="https://oekaki.smgames.club" target="_blank">Oekaki</a>
          <a href="https://social.smgames.club/" target="_blank">Social</a>
          <a href="https://madstar.studio" target="_blank">Shop</a>
        </div>
        <!-- Theme Selector -->
        <div class="theme-selector">
          <label for="theme-switcher">Theme:</label>
          <select id="theme-switcher" v-model="theme" @change="changeTheme(theme)">
            <option v-for="t in availableThemes" :key="t" :value="t">{{ t }}</option>
          </select>
        </div>
      </nav>
    </header>

    <!-- Main Content -->
    <main>
      <RouterView />
    </main>
  </div>
</template>
