<template>
    <div class="container flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header">
                <!-- 검색창 -->
                <div class="container col-6 mt-12 mb-8">
                    <search-bar @update:data="search" />
                </div>
            </div>
            <div class="card-datatable">
                <div class="row mx-6 my-6 justify-content-between g-3 align-items-center">
                    <div class="col-md-6 d-flex flex-column flex-md-row align-items-md-center gap-2 mt-0">
                        <!-- 리스트 갯수 선택 -->
                        <select class="form-select w-25 w-md-100" v-model="selectedSize" @change="handleSizeChange">
                            <option value="10">10개씩</option>
                            <option value="20">20개씩</option>
                            <option value="30">30개씩</option>
                            <option value="50">50개씩</option>
                        </select>

                         <!-- 셀렉트 박스 -->
                         <select class="form-select w-25 w-md-100" v-model="selectedOrder" @change="handleSortChange">
                            <option value="date">최신날짜</option>
                            <option value="views">조회수</option>
                        </select>

                        <!-- 공지 접기 기능 -->
                        <div class="form-check mb-0 ms-2">
                            <input class="form-check-input" type="checkbox" v-model="showNotices" id="hideNotices" />
                            <label class="form-check-label" for="hideNotices">공지 숨기기</label>
                        </div>
                    </div>
                    <div class="col-md-6 d-flex flex-column flex-md-row align-items-md-center justify-content-md-end gap-2">
                        <!-- 새 글쓰기 -->
                        <router-link to="/board/write" class="ms-2">
                            <WriteButton class="btn add-new btn-primary"/>
                        </router-link>
                    </div>
                </div>
                <!-- 게시판 -->
                <div class="table-responsive">
                    <table class="datatables-users table border-top dataTable dtr-column">
                        <thead>
                            <tr>
                                <th style="width: 11%;" class="text-center fw-bold">번호</th>
                                <th style="width: 45%;" class="text-center fw-bold">제목</th>
                                <th style="width: 10%;" class="text-center fw-bold">작성자</th>
                                <th style="width: 15%;" class="text-center fw-bold">작성일</th>
                                <th style="width: 9%;" class="text-center fw-bold">조회수</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 공지사항 -->
                            <template v-if="pagination.currentPage === 1 && !showNotices">
                                <tr v-for="(notice, index) in noticeList"
                                    :key="'notice-' + index"
                                    class="bg-label-gray fw-bold"
                                    @click="goDetail(notice.id)">
                                    <td class="text-center">공지</td>
                                    <td>
                                        📌 {{ notice.title }}
                                        <i v-if="notice.img" class="bi bi-image me-1"></i>
                                        <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
                                        <span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
                                    </td>
                                    <td class="text-center">{{ notice.author }}</td>
                                    <td class="text-center">{{ notice.date }}</td>
                                    <td class="text-center">{{ notice.views }}</td>
                                </tr>
                            </template>
                            <!-- 일반 게시물 -->
                            <tr v-for="(post, index) in generalList"
                                :key="'post-' + index"
                                class="invert-bg-white"
                                @click="goDetail(post.realId)">
                                <td class="text-center">{{ post.id }}</td>
                                <td>
                                    {{ post.title }}
                                    <i v-if="post.img" class="bi bi-image me-1"></i>
                                    <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
                                    <span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
                                </td>
                                <td class="text-center">{{ post.author }}</td>
                                <td class="text-center">{{ post.date }}</td>
                                <td class="text-center">{{ post.views }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <!-- 페이지네이션 -->
                <div class="row g-3">
                    <div class="mt-8">
                        <Pagination
                            v-if="pagination.pages"
                            v-bind="pagination"
                            @update:currentPage="handlePageChange"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from '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';
import dayjs from 'dayjs';
import isToday from 'dayjs/plugin/isToday';
import isYesterday from 'dayjs/plugin/isYesterday';
import 'bootstrap-icons/font/bootstrap-icons.css';


dayjs.extend(isToday);
dayjs.extend(isYesterday);

// 데이터 초기화
const generalList = ref([]);
const noticeList = ref([]);
const searchText = ref('');
const selectedOrder = ref('date');
const selectedSize = ref(10);
const showNotices = ref(false);

const pagination = ref({
    currentPage: 1,
    pages: 1,
    prePage: 0,
    nextPage: 1,
    isFirstPage: true,
    isLastPage: false,
    hasPreviousPage: false,
    hasNextPage: false,
    navigatePages: 10,
    navigatepageNums: [1],
    navigateFirstPage: 1,
    navigateLastPage: 1
});

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

// 날짜 포맷 변환 함수 (오늘이면 HH:mm, 아니면 YYYY-MM-DD)
const formatDate = (dateString) => {
    const date = dayjs(dateString);
    return date.isToday() ? date.format('HH:mm') : date.format('YYYY-MM-DD');
};

// 새로 올라온 게시물 여부 판단 (오늘 또는 어제 작성된 경우)
const isNewPost = (dateString) => {
    const date = dayjs(dateString);
    return date.isToday() || date.isYesterday();
};

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

// 정렬 변경 핸들러
const handleSortChange = () => {
    fetchGeneralPosts(1);
};

// 리스트 개수 변경 핸들러
const handleSizeChange = () => {
    fetchGeneralPosts(1);
};

// 일반 게시물 데이터 로드
const fetchGeneralPosts = async (page = 1) => {
    try {
        const { data } = await axios.get("board/general", {
            params: {
                page,
                size: selectedSize.value,
                orderBy: selectedOrder.value,
                searchKeyword: searchText.value
            }
        });

        if (data?.data) {
            console.log(data)
            const totalPosts = data.data.total; // 전체 게시물 개수 받아오기

            console.log('📌 API 응답 데이터:', data.data);

            generalList.value = data.data.list.map((post, index) => ({
                realId: post.id,
                id: totalPosts - ((page - 1) * selectedSize.value) - index,
                title: post.title,
                author: post.author || '익명',
                date: formatDate(post.date), // 날짜 변환 적용
                views: post.cnt || 0,
                hasAttachment: post.hasAttachment || false,
                img: post.firstImageUrl || null
            }));

            pagination.value = {
                ...pagination.value,
                currentPage: data.data.pageNum,
                pages: data.data.pages,
                prePage: data.data.prePage,
                nextPage: data.data.nextPage,
                isFirstPage: data.data.isFirstPage,
                isLastPage: data.data.isLastPage,
                hasPreviousPage: data.data.hasPreviousPage,
                hasNextPage: data.data.hasNextPage,
                navigatePages: data.data.navigatePages,
                navigatepageNums: data.data.navigatepageNums,
                navigateFirstPage: data.data.navigateFirstPage,
                navigateLastPage: data.data.navigateLastPage
            };
        }
    } catch (error) {
        console.error("데이터 오류:", error);
    }
};

// 공지사항 데이터 로드
const fetchNoticePosts = async () => {
    try {
        const { data } = await axios.get("board/notices", {
            params: { searchKeyword: searchText.value }
        });

        if (data?.data) {
            noticeList.value = data.data.map(post => ({
                id: post.id,
                title: post.title,
                author: post.author || '관리자',
                date: formatDate(post.date),
                views: post.cnt || 0,
                hasAttachment: post.hasAttachment || false,
                img: post.firstImageUrl || null
            }));
        }
    } catch (error) {
        console.error("데이터 오류:", error);
    }
};

// 페이지 변경
const handlePageChange = (page) => {
    if (page !== pagination.value.currentPage) {
        fetchGeneralPosts(page);
    }
};

// 데이터 로드
onMounted(() => {
    fetchNoticePosts();
    fetchGeneralPosts();
});
</script>

<style scoped>
    @media (max-width: 768px) {
        .w-md-100 {
            width: 100% !important;
        }
    }
</style>
