<template>
    <div class="container-xxl flex-grow-1 container-p-y">
        <!-- 상단 바: 검색창, 정렬 셀렉트 박스, 새 글쓰기 버튼 -->
        <div class="row mb-4">
            <!-- 검색창 -->
            <div class="col">
                <search-bar @update:data="search" />
            </div>
        </div>

        <div class="row">
            <!-- 정렬 셀렉트 박스 -->
            <div class="col-md-3 mb-4">
                <select class="form-select">
                    <option selected>정렬 기준 선택</option>
                    <option value="1">조회수</option>
                    <option value="2">날짜</option>
                </select>
            </div>
            
            <!-- 새 글쓰기 버튼 -->
            <div class="col-auto ms-auto mb-4">
                <router-link to="/board/write">
                    <WriteButton />
                </router-link>
            </div>
        </div>

        <!-- 게시물 리스트 -->
        <div class="row g-3">
            <board-card :posts="paginatedList" @click="goDetail" />
        </div>

        <!-- 페이지네이션 -->
        <div class="row g-3">

            <div class="mt-8">
                <pagination 
                    :current-page="currentPage" 
                    :total-pages="totalPages" 
                    @update:page="changePage" 
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import BoardCard from '@/components/list/BoardCardList.vue';
import Pagination from '@c/pagination/Pagination.vue';
import SearchBar from '@c/search/SearchBar.vue';
import router from '@/router';
import WriteButton from '@c/button/WriteBtn.vue';
import axios from '@api';

// 데이터 초기화
const list = ref([]);
const searchText = ref('');

// 상세 페이지 이동
const goDetail = (id) => {
    router.push({ name: 'BoardDetail', params: { id } });
};

// 검색 처리
const search = (e) => {
    searchText.value = e.trim();
};

// 검색 결과 필터링
const filteredList = computed(() =>
    list.value.filter((item) =>
        item.title.toLowerCase().includes(searchText.value.toLowerCase())
    )
);

// 페이지네이션 상태
const currentPage = ref(1); // 현재 페이지 번호
const itemsPerPage = 5; // 한 페이지에 표시할 아이템 수

// 현재 페이지 데이터 계산
const paginatedList = computed(() => {
    const start = (currentPage.value - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    return filteredList.value.slice(start, end);
});

// 총 페이지 수 계산
const totalPages = computed(() => {
    return Math.ceil(filteredList.value.length / itemsPerPage);
});

// 페이지 변경 함수
const changePage = (page) => {
    if (page >= 1 && page <= totalPages.value) {
        currentPage.value = page;
    }
};

// 게시물 데이터 로드
const fetchPosts = async () => {
    const response = await axios.get("board/general");

    if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
        list.value = response.data.data.list.map((post, index) => ({
            ...post,
            id: post.id || index,
            img: post.img || null,
            likes: post.likes || 0,
            comments: post.comments || 0,
        }));
    } else {
        console.error("데이터 오류:", response.data);
    }
};

// 데이터 로드
onMounted(() => {
    fetchPosts();
});

</script>

<style>
/* 필요에 따라 스타일 추가 */
</style>
