<template>
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col">
                <div class="card">
                    <!-- 프로필 헤더 -->
                    <div class="card-header">
                        <div class="pb-5 border-bottom">
                            <BoardProfile
                                :boardId="currentBoardId"
                                :profileName="displayName"
                                :unknown="unknown"
                                :profileImg="profileImg"
                                :views="views"
                                :nickname="nickname"
                                :commentNum="commentNum"
                                :date="formattedBoardDate"
                                :isLike="false"
                                :isAuthor="isAuthor"
                                @editClick="editClick"
                                @deleteClick="deleteClick"
                            />

                            <!-- 비밀번호 입력창 (익명일 경우) -->
                            <div v-if="isPassword && unknown" class="mt-3 w-px-200 ms-auto">
                                <div class="input-group">
                                    <input
                                        type="password"
                                        class="form-control"
                                        autocomplete="new-password"
                                        v-model="password"
                                        placeholder="비밀번호 입력"
                                        maxlength="8"
                                        @input="
                                            password = password.replace(/\s/g, '');
                                            inputCheck();
                                        "
                                    />
                                    <button class="btn btn-primary" @click="submitPassword">확인</button>
                                </div>
                                <span v-if="boardPasswordAlert" class="invalid-feedback d-block text-start">{{ boardPasswordAlert }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- 게시글 내용 -->
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
                            <!-- 제목 섹션 -->
                            <div class="me-1">
                                <h5 class="mb-4">{{ boardTitle }}</h5>
                            </div>

                            <!-- 첨부파일 다운로드 버튼 -->
                            <div v-if="attachments.length" class="btn-group">
                                <button
                                    type="button"
                                    class="btn btn-label-secondary dropdown-toggle"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false"
                                >
                                    <i class="fa-solid fa-download me-2"></i>
                                    첨부파일 ({{ attachments.length }}개)
                                </button>
                                <ul class="dropdown-menu" style="z-index: 1004">
                                    <li v-for="(attachment, index) in attachments" :key="index">
                                        <a class="dropdown-item" href="#" @click.prevent="downloadFile(attachment)">
                                            {{ attachment.originalName }}.{{ attachment.extension }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- HTML 콘텐츠 렌더링 -->
                        <div
                            class="board-content text-body mw-100 overflow-hidden text-break"
                            style="line-height: 1.6"
                            v-html="$common.contentToHtml(boardContent)"
                        ></div>

                        <!-- 좋아요 버튼 -->
                        <div class="row justify-content-center my-10">
                            <BoardRecommendBtn
                                :bigBtn="true"
                                :boardId="currentBoardId"
                                :commentId="null"
                                :likeCount="likes"
                                :dislikeCount="dislikes"
                                :likeClicked="likeClicked"
                                :dislikeClicked="dislikeClicked"
                                @updateReaction="handleUpdateReaction"
                            />
                        </div>
                        <div>
                            <!-- 댓글 입력 영역 -->
                            <BoardCommentArea
                                :profileName="profileName"
                                :unknown="unknown"
                                :commentAlert="commentAlert"
                                :passwordAlert="passwordAlert"
                                :maxLength="500"
                                @submitComment="handleCommentSubmit"
                            />
                        </div>
                    </div>

                    <!-- 댓글 목록 -->
                    <div class="card-footer">
                        <BoardCommentList
                            :unknown="unknown"
                            :comments="commentsWithAuthStatus"
                            :isCommentPassword="isCommentPassword"
                            :isEditTextarea="isEditTextarea"
                            :isDeleted="isDeleted"
                            :passwordCommentAlert="passwordCommentAlert"
                            :currentPasswordCommentId="currentPasswordCommentId"
                            :password="password"
                            :editCommentAlert="editCommentAlert"
                            @editClick="editComment"
                            @deleteClick="deleteComment"
                            @updateReaction="handleCommentReaction"
                            @submitComment="handleCommentReply"
                            @submitPassword="submitCommentPassword"
                            @commentDeleted="handleCommentDeleted"
                            @cancelEdit="handleCancelEdit"
                            @submitEdit="handleSubmitEdit"
                            @update:password="updatePassword"
                            @inputDetector="inputDetector"
                        />
                        <Pagination v-if="pagination.pages" v-bind="pagination" @update:currentPage="handlePageChange" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import BoardCommentArea from '@c/board/BoardCommentArea.vue';
    import BoardProfile from '@c/board/BoardProfile.vue';
    import BoardCommentList from '@c/board/BoardCommentList.vue';
    import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
    import Pagination from '@c/pagination/Pagination.vue';
    import { ref, onMounted, computed, inject } from 'vue';
    import { useRoute, useRouter } from 'vue-router';
    import { useUserInfoStore } from '@/stores/useUserInfoStore';
    import { useToastStore } from '@s/toastStore';
    import { useBoardAccessStore } from '@s/useBoardAccessStore';
    import axios from '@api';

    const $common = inject('common');
    // 게시물 데이터 상태
    const profileName = ref('');
    const boardTitle = ref('제목 없음');
    const boardContent = ref('');
    const nickname = ref('');
    const date = ref('');
    const views = ref(0);
    const likes = ref(0);
    const dislikes = ref(0);
    const likeClicked = ref(false);
    const dislikeClicked = ref(false);
    const commentNum = ref(0);
    const attachment = ref(false);
    const comments = ref([]);
    const profileImg = ref('');

    const route = useRoute();
    const router = useRouter();
    const userStore = useUserInfoStore();
    const toastStore = useToastStore();
    const accessStore = useBoardAccessStore();

    const currentBoardId = ref(Number(route.params.id));
    const unknown = computed(() => profileName.value === '익명');
    const currentUserId = computed(() => userStore?.user?.id); // 현재 로그인한 사용자 id
    const authorId = ref(''); // 작성자 id
    const editCommentAlert = ref({}); //댓글, 대댓글 오류 메세지 객체

    const displayName = computed(() => {
        return nickname.value && unknown.value ? nickname.value : profileName.value;
    });

    const isAuthor = computed(() => currentUserId.value === authorId.value);
    const commentsWithAuthStatus = computed(() => {
        const updatedComments = comments.value.map(comment => ({
            ...comment,
            isCommentAuthor: comment.authorId === currentUserId.value,
            children: comment.children.map(reply => ({
                ...reply,
                isCommentAuthor: reply.authorId === currentUserId.value,
            })),
        }));
        return updatedComments;
    });

    const attachments = ref([]);
    // 첨부파일 다운로드 URL 생성
    const downloadFile = async attachment => {
        try {
            const response = await axios.get(`board/download`, {
                params: { path: attachment.path },
                responseType: 'blob',
            });

            // Blob에서 파일 다운로드 링크 생성
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', attachment.originalName + '.' + attachment.extension);
            document.body.appendChild(link);
            link.click();
            link.remove();
            window.URL.revokeObjectURL(url);
        } catch (error) {
            alert('파일 다운로드 중 오류가 발생했습니다.');
        }
    };

    const password = ref('');
    const passwordAlert = ref('');
    const passwordCommentAlert = ref('');
    const isPassword = ref(false);
    const isCommentPassword = ref(false);
    const currentPasswordCommentId = ref(null);
    const lastClickedButton = ref('');
    const lastCommentClickedButton = ref('');
    const isEditTextarea = ref(false);
    const isDeleted = ref(true);
    const commentAlert = ref('');
    const boardPasswordAlert = ref('');

    const updatePassword = newPassword => {
        password.value = newPassword;
    };

    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 inputCheck = () => {
        passwordAlert.value = '';
    };

    // 게시물 상세 데이터 불러오기
    const fetchBoardDetails = async () => {
        const { data } = await axios.get(`board/${currentBoardId.value}`);
        if (data?.data) {
            const boardData = data.data;
            profileName.value = boardData.author || '익명';
            authorId.value = boardData.authorId;
            boardTitle.value = boardData.title || '제목 없음';
            boardContent.value = boardData.content || '';
            profileImg.value = boardData.profileImg || '';
            date.value = boardData.date || '';
            nickname.value = boardData.nickname || '';
            views.value = boardData.cnt || 0;
            likes.value = boardData.likeCount || 0;
            dislikes.value = boardData.dislikeCount || 0;
            attachment.value = boardData.hasAttachment || null;
            commentNum.value = boardData.commentCount || 0;
            attachments.value = boardData.attachments || [];
        } else {
            toastStore.onToast(data.message, 'e');
            router.back();
        }
    };

    // 좋아요, 싫어요
    const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
        await axios.post(`/board/${boardId}/${commentId}/reaction`, {
            LOCBRDSEQ: boardId, // 게시글 id
            LOCCMTSEQ: commentId, //댓글 id
            LOCGOBGOD: isLike ? 'T' : 'F',
            LOCGOBBAD: isDislike ? 'T' : 'F',
        });

        const response = await axios.get(`board/${boardId}`);
        const updatedData = response.data.data;

        likes.value = updatedData.likeCount;
        dislikes.value = updatedData.dislikeCount;

        likeClicked.value = isLike;
        dislikeClicked.value = isDislike;
    };

    // 대댓글 좋아요
    const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
        if (!commentId) return; // 댓글 ID가 없으면 실행 안 함

        const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
            LOCBRDSEQ: boardId, // 게시글 ID
            LOCCMTSEQ: commentId, // 댓글 ID
            LOCGOBGOD: isLike ? 'T' : 'F',
            LOCGOBBAD: isDislike ? 'T' : 'F',
        });

        fetchComments(pagination.value.currentPage);
    };

    // 댓글 목록 조회
    const fetchComments = async (page = 1) => {
        // 댓글
        const response = await axios.get(`board/${currentBoardId.value}/comments`, {
            params: {
                LOCBRDSEQ: currentBoardId.value,
                page,
            },
        });
        const commentsList = response.data.data.list
            .map(comment => ({
                commentId: comment.LOCCMTSEQ, // 댓글 ID
                boardId: comment.LOCBRDSEQ,
                parentId: comment.LOCCMTPNT, // 부모 ID
                author: comment.author || '익명',
                authorId: comment.authorId,
                content: comment.LOCCMTRPY,
                likeCount: comment.likeCount || 0,
                dislikeCount: comment.dislikeCount || 0,
                profileImg: comment.profileImg || '',
                nickname: comment.LOCCMTNIC || '',
                likeClicked: comment.likeClicked || false,
                dislikeClicked: comment.dislikeClicked || false,
                createdAtRaw: comment.LOCCMTRDT, // 작성일
                // createdAt: formattedDate(comment.LOCCMTRDT), // 작성일(노출용)
                // createdAtRaw: new Date(comment.LOCCMTUDT), // 수정순
                createdAt:
                    formattedDate(comment.LOCCMTUDT) +
                    (comment.content === '삭제된 댓글입니다' && comment.LOCCMTUDT !== comment.LOCCMTRDT ? ' (수정됨)' : ''), // 수정일(노출용)
                children: [], // 대댓글을 담을 배열
                updateAtRaw: comment.LOCCMTUDT,
            }))
            .sort((a, b) => b.createdAtRaw - a.createdAtRaw);

        for (const comment of commentsList) {
            if (!comment.commentId) continue;

            const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
                params: { LOCCMTPNT: comment.commentId },
            });

            if (replyResponse.data.data) {
                comment.children = replyResponse.data.data
                    .map(reply => ({
                        author: reply.author || '익명',
                        authorId: reply.authorId,
                        profileImg: reply.profileImg || '',
                        commentId: reply.LOCCMTSEQ,
                        boardId: reply.LOCBRDSEQ,
                        parentId: reply.LOCCMTPNT, // 부모 댓글 ID
                        content: reply.LOCCMTRPY || '내용 없음',
                        createdAtRaw: reply.LOCCMTRDT,
                        nickname: reply.LOCCMTNIC || '',
                        // createdAt: formattedDate(reply.LOCCMTRDT),
                        //createdAtRaw: new Date(reply.LOCCMTUDT),
                        createdAt: formattedDate(reply.LOCCMTUDT) + (reply.LOCCMTUDT !== reply.LOCCMTRDT ? ' (수정됨)' : ''),
                        likeCount: reply.likeCount || 0,
                        dislikeCount: reply.dislikeCount || 0,
                        likeClicked: false,
                        dislikeClicked: false,
                    }))
                    .sort((a, b) => b.createdAtRaw - a.createdAtRaw);
            } else {
                comment.children = []; // 대댓글이 없으면 빈 배열로 초기화
            }
        }
        commentsList;
        // 최종적으로 댓글 목록 업데이트
        comments.value = commentsList;

        pagination.value = {
            ...pagination.value,
            currentPage: response.data.data.pageNum, // 현재 페이지 번호
            pages: response.data.data.pages, // 전체 페이지 수
            prePage: response.data.data.prePage, // 이전 페이지
            nextPage: response.data.data.nextPage, // 다음 페이지
            isFirstPage: response.data.data.isFirstPage, // 첫 페이지 여부
            isLastPage: response.data.data.isLastPage, // 마지막 페이지 여부
            hasPreviousPage: response.data.data.hasPreviousPage, // 이전 페이지 존재 여부
            hasNextPage: response.data.data.hasNextPage, // 다음 페이지 존재 여부
            navigatePages: response.data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지
            navigatepageNums: response.data.data.navigatepageNums, // 실제 페이지 번호 목록
            navigateFirstPage: response.data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호
            navigateLastPage: response.data.data.navigateLastPage, // 페이지네이션에서 마지막 페이지 번호
        };
    };

    // 댓글 작성
    const handleCommentSubmit = async data => {
        closeAllEditTextareas();
        closeAllPasswordAreas();
        togglePassword('close');
        if (!data) {
            return;
        }

        const { comment, password, isCheck } = data;

        if (!comment || comment.trim() === '') {
            commentAlert.value = '댓글을 입력해주세요.';
            return;
        } else {
            commentAlert.value = '';
        }

        if (unknown.value && isCheck && (!password || password.trim() === '')) {
            passwordAlert.value = '비밀번호를 입력해야 합니다.';
            return;
        }

        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
            LOCBRDSEQ: currentBoardId.value,
            LOCCMTRPY: comment,
            LOCCMTPWD: isCheck ? password : '',
            LOCCMTPNT: 1,
            LOCCMTNIC: data.isCheck ? data.nickname : null,
            LOCBRDTYP: isCheck ? '300102' : null,
        });

        if (response.status === 200) {
            passwordAlert.value = '';
            commentAlert.value = '';
            await fetchComments();
        } else {
            alert('댓글 작성을 실패했습니다.');
        }
    };

    // 대댓글 추가
    const handleCommentReply = async reply => {
        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
            LOCBRDSEQ: currentBoardId.value,
            LOCCMTRPY: reply.comment,
            LOCCMTPWD: reply.password || null,
            LOCCMTPNT: reply.parentId,
            LOCCMTNIC: reply.isCheck ? reply.nickname : null,
            LOCBRDTYP: reply.isCheck ? '300102' : null,
        });

        if (response.status === 200) {
            fetchComments(pagination.value.currentPage);
        }
    };

    // 댓글, 대댓글 오류 메세지 초기화
    const inputDetector = () => {
        editCommentAlert.value = {};
    };

    // 게시글 수정 버튼 클릭
    const editClick = unknown => {
        const isUnknown = unknown?.unknown ?? false;

        if (isUnknown) {
            togglePassword('edit');
        } else {
            router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
        }
    };

    // 게시글 삭제 버튼 클릭
    const deleteClick = unknown => {
        const isUnknown = unknown?.unknown ?? false;

        if (isUnknown) {
            togglePassword('delete');
        } else {
            deletePost();
        }
    };

    const findCommentById = (commentId, commentsList) => {
        for (const comment of commentsList) {
            if (comment.commentId === commentId) {
                return comment; // 부모 댓글일 경우
            }
            if (comment.children && comment.children.length) {
                const found = findCommentById(commentId, comment.children);
                if (found) return found; // 대댓글일 경우
            }
        }
        return null;
    };

    // 댓글 수정 클릭 시 이벤트(대댓글 포함)
    const editComment = comment => {
        password.value = '';
        passwordCommentAlert.value = '';
        //currentPasswordCommentId.value = null;
        isPassword.value = false; // 상단 프로필 비밀번호

        const targetComment = findCommentById(comment.commentId, comments.value);
        if (!targetComment) {
            return;
        }

        const isMyComment = comment.authorId === currentUserId.value;
        const isAnonymous = comment.author === '익명';
        if (isMyComment) {
            if (targetComment.isEditTextarea) {
                // 수정창이 열려 있는 상태에서 다시 수정 버튼을 누르면 초기화

                targetComment.isEditTextarea = false;

                currentPasswordCommentId.value = comment.commentId;
            } else {
                // 다른 모든 댓글의 수정창 닫기
                closeAllEditTextareas();
                currentPasswordCommentId.value = null;
                // 현재 댓글만 수정 모드 활성화
                targetComment.isEditTextarea = true;
            }
        } else if (isAnonymous) {
            if (currentPasswordCommentId.value === comment.commentId) {
                // 이미 비밀번호 입력 중이면 유지
                toggleCommentPassword(comment, 'edit');
                return;
            } else {
                // 다른 모든 댓글의 수정창 닫기
                closeAllEditTextareas();

                // 비밀번호 입력
                targetComment.isEditTextarea = false;
                toggleCommentPassword(comment, 'edit');
            }
        } else {
            toastStore.onToast('수정에 실패하였습니다.', 'e');
        }
    };

    // 모든 댓글의 수정 창 닫기
    const closeAllEditTextareas = () => {
        comments.value.forEach(comment => {
            comment.isEditTextarea = false;
            comment.children.forEach(reply => {
                reply.isEditTextarea = false;
            });
        });
    };

    // 모든 댓글의 비밀번호 창 닫기
    const closeAllPasswordAreas = () => {
        currentPasswordCommentId.value = null; // 비밀번호 창 닫기
        password.value = '';
        passwordCommentAlert.value = '';
    };

    // 댓글 삭제 버튼 클릭
    const deleteComment = async comment => {
        const isMyComment = comment.authorId === currentUserId.value;

        if (unknown.value && !isMyComment) {
            if (comment.isEditTextarea) {
                comment.isEditTextarea = false;
                comment.isCommentPassword = true;
                toggleCommentPassword(comment, 'delete');
            } else {
                toggleCommentPassword(comment, 'delete');
            }
        } else {
            deleteReplyComment(comment);
        }
    };

    // 익명 댓글 비밀번호 창 토글
    const toggleCommentPassword = (comment, button) => {
        if (lastCommentClickedButton.value === button && currentPasswordCommentId.value === comment.commentId) {
            currentPasswordCommentId.value = null; // 비밀번호 창 닫기
            password.value = '';
            passwordCommentAlert.value = '';
        } else {
            currentPasswordCommentId.value = comment.commentId; // 비밀번호 창 열기
            password.value = '';
            passwordCommentAlert.value = '';
        }

        lastCommentClickedButton.value = button;
    };

    // 게시글 비밀번호 토글
    const togglePassword = button => {
        // close: 게시글 비밀번호 란을 초기화 한다.
        boardPasswordAlert.value = '';
        if (button === 'close') {
            isPassword.value = false;
            boardPasswordAlert.value = '';
            password.value = '';
            return;
        }
        closeAllPasswordAreas();
        if (lastClickedButton.value === button) {
            isPassword.value = !isPassword.value;
            boardPasswordAlert.value = '';
        } else {
            isPassword.value = true;
        }

        lastClickedButton.value = button;
    };

    // 게시글 비밀번호 제출
    const submitPassword = async () => {
        if (!password.value.trim()) {
            boardPasswordAlert.value = '비밀번호를 입력해주세요.';
            return;
        }

        try {
            const { data } = await axios.post(`board/${currentBoardId.value}/password`, {
                LOCBRDPWD: password.value,
                LOCBRDSEQ: currentBoardId.value,
            });

            if (data.code === 200 && data.data === true) {
                accessStore.setBoardPassword(password.value);
                boardPasswordAlert.value = '';
                isPassword.value = false;

                if (lastClickedButton.value === 'edit') {
                    router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
                    return;
                } else if (lastClickedButton.value === 'delete') {
                    await deletePost();
                }
                accessStore.$reset();
                lastClickedButton.value = null;
            } else {
                boardPasswordAlert.value = '비밀번호가 일치하지 않습니다.';
            }
        } catch (error) {
            if (error.response && error.response.status === 401) boardPasswordAlert.value = '비밀번호가 일치하지 않습니다.';
        }
    };

    // 댓글 (비밀번호 확인 후)
    const submitCommentPassword = async (comment, password) => {
        if (!password) {
            passwordCommentAlert.value = '비밀번호를 입력해주세요.';
            return;
        }

        const targetComment = findCommentById(comment.commentId, comments.value);

        try {
            const response = await axios.post(`board/comment/${comment.commentId}/password`, {
                LOCCMTPWD: password,
                LOCCMTSEQ: comment.commentId,
            });

            if (response.data.code === 200 && response.data.data === true) {
                passwordCommentAlert.value = '';
                comment.isCommentPassword = false;

                // 수정
                if (lastCommentClickedButton.value === 'edit') {
                    if (targetComment) {
                        closeAllEditTextareas(); // 다른 모든 댓글의 수정 창 닫기
                        targetComment.isEditTextarea = true;
                        passwordCommentAlert.value = '';
                        currentPasswordCommentId.value = null;
                    } else {
                        toastStore.onToast('수정 취소를 실패하였습니다.', 'e');
                    }
                    //삭제
                } else if (lastCommentClickedButton.value === 'delete') {
                    passwordCommentAlert.value = '';

                    deleteReplyComment(comment);
                }
                lastCommentClickedButton.value = null;
            } else {
                passwordCommentAlert.value = '비밀번호가 일치하지 않습니다.';
            }
        } catch (error) {
            passwordCommentAlert.value = '비밀번호가 일치하지 않습니다';
        }
    };

    // 게시글 삭제
    const deletePost = async () => {
        if (confirm('정말 삭제하시겠습니까?')) {
            try {
                const response = await axios.delete(`board/${currentBoardId.value}`, {
                    data: { LOCBRDSEQ: currentBoardId.value },
                });

                if (response.data.code === 200) {
                    toastStore.onToast('게시물이 삭제되었습니다.');
                    router.push({ name: 'BoardList' });
                } else {
                    //alert('삭제 실패: ' + response.data.message);
                    toastStore.onToast('삭제 실패: ' + response.data.message, 'e');
                }
            } catch (error) {
                if (error.response) {
                    const errMsg = `삭제 실패: ${error.response.data.message || '서버 오류'}`;
                    toastStore.onToast(errMsg, 'e');
                } else {
                    toastStore.onToast('네트워크 오류가 발생했습니다. 다시 시도해주세요.', 'e');
                }
            }
        }
    };

    // 댓글 삭제 (대댓글 포함)
    const deleteReplyComment = async comment => {
        if (!confirm('정말 이 댓글을 삭제하시겠습니까?')) return;

        const targetComment = findCommentById(comment.commentId, comments.value);
        try {
            const response = await axios.delete(`board/comment/${comment.commentId}`, {
                params: { LOCCMTSEQ: comment.commentId, LOCCMTPNT: comment.parentId },
            });

            if (response.data.code === 200) {
                await fetchComments(pagination.value.currentPage);
                closeAllPasswordAreas();

                if (targetComment) {
                    // 댓글 내용만 "삭제된 댓글입니다."로 변경하고, 구조는 유지
                    targetComment.content = '댓글이 삭제되었습니다.';
                    targetComment.author = '알 수 없음'; // 익명 처리
                    targetComment.isDeleted = true; // 삭제 상태를 추가
                }
            } else {
                toastStore.onToast('댓글 삭제에 실패했습니다.', 'e');
            }
        } catch (error) {
            toastStore.onToast('댓글 삭제 중 오류가 발생했습니다.', 'e');
        }
    };

    // 댓글 수정
    const handleSubmitEdit = async (comment, editedContent) => {
        if (!checkValidation(comment, editedContent)) return; //빈값 확인
        togglePassword();

        const response = await axios.put(`board/comment/${comment.commentId}`, {
            LOCCMTSEQ: comment.commentId,
            LOCCMTRPY: editedContent.trim(),
        });

        if (response.status === 200) {
            togglePassword('close');
            fetchComments(pagination.value.currentPage);
            return;
            // const targetComment = findCommentById(comment.commentId, comments.value);

            // if (targetComment) {
            //     targetComment.content = editedContent.trim(); // 댓글 내용 업데이트
            //     targetComment.isEditTextarea = false; // 수정 모드 닫기
            //     togglePassword('close');
            // }
        } else {
            toastStore.onToast('댓글 수정을 실패하였습니다', 'e');
        }
    };

    // 유효성 체크하여 해당 댓글, 대댓글에 오류메세지 전달.
    const checkValidation = (comment, content) => {
        if (!$common.isNotEmpty(content)) {
            editCommentAlert.value[comment.commentId] = '내용을 입력하세요';
            return false;
        }
        return true;
    };

    // 댓글 수정 취소 (대댓글 포함)
    const handleCancelEdit = comment => {
        const targetComment = findCommentById(comment.commentId, comments.value);

        if (targetComment) {
            targetComment.isEditTextarea = false;
        } else {
            toastStore.onToast('수정 취소를 실패했습니다.', 'e');
        }
    };

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

    // 댓글 삭제 (대댓글 포함)
    const handleCommentDeleted = deletedCommentId => {
        // 댓글 삭제
        const parentIndex = comments.value.findIndex(comment => comment.commentId === deletedCommentId);

        if (parentIndex !== -1) {
            comments.value.splice(parentIndex, 1);
            return;
        }

        // 대댓글 삭제
        for (let parent of comments.value) {
            const childIndex = parent.children.findIndex(child => child.commentId === deletedCommentId);
            if (childIndex !== -1) {
                parent.children.splice(childIndex, 1);
                return;
            }
        }
    };

    // 날짜
    const formattedDate = dateString => {
        if (!dateString) return '날짜 없음';
        const dateObj = new Date(dateString);
        return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
    };

    const formattedBoardDate = computed(() => formattedDate(date.value));

    // 컴포넌트 마운트 시 데이터 로드
    onMounted(() => {
        fetchBoardDetails();
        fetchComments();
    });
</script>
