<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import Sidebar from './components/Sidebar.vue'

const route = useRoute()
const sidebarCollapsed = ref(false)
const currentChapterId = computed(() => {
  if (route.name === 'Chapter') return route.params.id
  return null
})

function toggleSidebar() {
  sidebarCollapsed.value = !sidebarCollapsed.value
}
</script>

<template>
  <div class="app-layout">
    <Sidebar
      :collapsed="sidebarCollapsed"
      :currentId="currentChapterId"
      @toggle="toggleSidebar"
    />
    <main class="main-content">
      <router-view />
    </main>
    <button class="back-to-top" @click="scrollToTop" v-show="showBackToTop">↑</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBackToTop: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.showBackToTop = window.scrollY > 300
    },
    scrollToTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
}
</script>
