<template>
    <!-- 뒤로가기 -->
    <button
        @click="goBack"
        :disabled="!canGoBack"
        :class="{ 'shifted': showButton }"
        class="back-btn rounded-pill btn-icon btn-secondary position-fixed shadow z-5 border-0">
        <i class='bx bx-chevron-left'></i>
    </button>

    <!-- 맨 위로 -->
    <button
        @click="scrollToTop"
        class="scroll-top-btn rounded-pill btn-icon btn-primary position-fixed shadow z-5 border-0"
        :class="{ 'visible': showButton, 'hidden': !showButton }"
    >
        <i class='bx bx-chevron-up'></i>
    </button>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

const showButton = ref(false);
const canGoBack = ref(false);
const route = useRoute();
const router = useRouter();
const loginPage = "/login"; // 로그인 페이지 경로

// 스크롤 이벤트 핸들러
const handleScroll = () => {
    showButton.value = window.scrollY > 200;
};

// 최상단으로 스크롤 이동
const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
};

// 뒤로 가기 처리
const goBack = () => {
    if (canGoBack.value) {
        router.back();
    }
};

// 뒤로 가기 가능 여부 확인 함수
const updateCanGoBack = () => {
    const historyBack = router.options.history.state.back;
    const previousPage = document.referrer;

    canGoBack.value = !!historyBack && historyBack !== loginPage && !previousPage.includes(loginPage);
};

// 마운트 시 한 번 실행
onMounted(() => {
    window.addEventListener("scroll", handleScroll);
    updateCanGoBack();
});

// 라우트가 변경될 때마다 `canGoBack` 업데이트
watch(route, () => {
    updateCanGoBack();
});

// 언마운트 시 이벤트 제거
onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll);
});

</script>
