<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useCasesStore } from '@/stores/cases'

const route = useRoute()
const { locale, t } = useI18n()
const casesStore = useCasesStore()

const menuOpen = ref(false)

const siteTitle = computed(() =>
  locale.value === 'zh' ? '南西工作室' : 'Nancy Studio'
)

const showWorksNav = computed(() => {
  return route.path.startsWith('/works')
})

watch(() => route.path, () => {
  menuOpen.value = false
})

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

<template>
  <div class="app">
    <!-- Mobile Header (hidden on desktop) -->
    <div class="mobile-header">
      <div class="mobile-header-inner">
        <router-link to="/" class="mobile-logo">{{ siteTitle }}</router-link>
        <button class="mobile-menu-toggle" @click="menuOpen = !menuOpen">
          {{ menuOpen ? t('common.close') : t('common.menu') }}
        </button>
      </div>
    </div>

    <!-- Mobile Overlay Menu -->
    <div class="mobile-overlay" :class="{ active: menuOpen }">
      <button class="mobile-overlay-close" @click="menuOpen = false">{{ t('common.close') }}</button>
      <nav class="mobile-overlay-nav">
        <router-link to="/works" @click="menuOpen = false">{{ t('nav.works') }}</router-link>
        <router-link to="/about" @click="menuOpen = false">{{ t('nav.about') }}</router-link>
        <router-link to="/contact" @click="menuOpen = false">{{ t('nav.contact') }}</router-link>
      </nav>
      <div class="mobile-overlay-lang">
        <a href="#" :class="{ active: locale === 'zh' }" @click.prevent="setLocale('zh')">中文</a>
        <a href="#" :class="{ active: locale === 'en' }" @click.prevent="setLocale('en')">EN</a>
      </div>
    </div>

    <!-- Desktop Sidebar -->
    <aside class="app-sidebar">
      <div class="sidebar-logo"><router-link to="/">{{ siteTitle }}</router-link></div>
      <nav class="sidebar-nav">
        <div class="sidebar-nav-column">
          <router-link to="/works">{{ t('nav.works') }}</router-link>
          <router-link to="/about">{{ t('nav.about') }}</router-link>
          <router-link to="/contact">{{ t('nav.contact') }}</router-link>
        </div>
      </nav>

      <!-- Sub navigation - shown on works pages -->
      <div class="sidebar-subnav" v-if="showWorksNav && casesStore.cases.length > 0">
        <router-link
          v-for="c in casesStore.cases"
          :key="c.slug"
          :to="`/works/${c.slug}`"
        >
          {{ c.title }}
        </router-link>
      </div>

      <!-- Language switch -->
      <div class="sidebar-lang">
        <a href="#" :class="{ active: locale === 'zh' }" @click.prevent="setLocale('zh')">中文</a>
        <a href="#" :class="{ active: locale === 'en' }" @click.prevent="setLocale('en')">EN</a>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="app-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>

    <!-- Footer -->
    <footer class="app-footer">
      <p>&copy; {{ new Date().getFullYear() }} {{ siteTitle }}</p>
    </footer>
  </div>
</template>
