<template>
    <div class="w_100 h_100 layout sterech gap30">
        <div class="left-zone" style="background-color: #d5dce7;">
            <div class="layout center space-between">
                <img src="../../../resources/img/content/feedback.svg" alt="">
                <div>
                    <p class="feedback-title">Feedback</p>
                    <select name="sort" id="sort" class="form-select sm" style="border: none;min-width: 140px;"> 
                        <option value="">최근순</option>
                        <option value="">최근순</option>
                    </select>
                </div>
            </div>
            <div class="feedback-list">
                <div v-for="feedback in feedbackList" :key="feedback.id" class="feedback-item" :class="{ unread: feedback.status === 'unread' }">
                    <div  class="feedback-card">
                        <h4>
                            <img src="../../../resources/img/content/ico_confirmed.svg" alt="" v-if="feedback.status === 'confirmed'" style="vertical-align: middle;">
                            <img src="../../../resources/img/content/ico_unconfirmed.svg" alt="" v-else style="vertical-align: middle;">
                            <span>{{ feedback.project }}</span>
                        </h4>
                        <div class="feedback-message">
                            <p>{{ feedback.message }}</p>
                        </div>
                        <div class="meta">
                            <span><img src="../../../resources/img/content/ico_clock.svg" alt="" style="vertical-align: middle;"> {{ feedback.time }}</span> | <span><img src="../../../resources/img/content/ico_feeduser.svg" alt="" style="vertical-align: middle;"> {{ feedback.user }}</span>
                        </div>
                    </div>
                    <div class="btn-group" v-if="feedback.status === 'unread'">
                        <button class="btn sm purple" @click="markAsRead(feedback.id)">확인</button>
                        <!-- <button class="btn sm black" @click="replyTo(feedback)">회신</button> -->
                        <button class="btn sm black" @click="loadFeedbackChatList(feedback.chatRoomId, feedback)">회신</button>
                    </div>
                    <div class="btn-group" v-else>
                        <!-- <button class="btn sm primary" @click="replyTo(feedback)">확인됨</button> -->
                        <button class="btn sm primary" @click="loadFeedbackChatList(feedback.chatRoomId, feedback)">확인됨</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-zone feedback-detail-zone">
            <div class="summary">
                <p><span>일주일 간 총 피드백 수 </span> <strong>{{ feedbackSummary.total }}건</strong></p>|
                <p><span class="unread">미확인</span> <strong>{{ feedbackSummary.unread }}건</strong></p> |
                <p><span class="read">확인</span> <strong>{{ feedbackSummary.read }}건</strong></p>
            </div>
            <div class="feedback-detail" v-if="selectedFeedback">
                <div class="top-zone">
                    <h3 class="project-name">{{ selectedFeedback.project }}</h3><span style="font-weight: 700;"> feedback message</span>
                </div>
                <ul >
                    <li v-for="chat in feedbackChatList" :key="chat.id">
                        <div class="layout center space-between">
                            <strong><img src="../../../resources/img/content/ico_feeduser.svg" alt="" style="vertical-align: middle;"> {{ chat.user }}</strong> 
                           <div class="right-content">
                             <p>{{ chat.content }}</p>
                           </div>
                        </div>
                       <p style="text-align: right;">  <span>{{ chat.date }} </span><span><img src="../../../resources/img/content/ico_clock.svg" alt="" style="vertical-align: middle;"> {{ chat.time }}</span></p>
                    </li>
                </ul>
                <div style="position: relative;">
                    <input type="text" class="form-control sm" v-model="replyText" placeholder="피드백 회신 내용을 작성하세요."></input>
                    <button class="send-btn" @click="submitReply"><img src="../../../resources/img/content/ico_send.svg" alt="" style="vertical-align: middle;"></button>
                </div>
            </div>
            <div class="feedback-detail first-view" v-else>
                <img src="../../../resources/img/content/unfeedback.svg" alt="">
                <p>피드백이 선택되지 않았습니다.</p>
                <p>피드백을 선택하면 상세내용을 확인할 수 있습니다.</p>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { checkFeedbackProc, findAllChatMsgsProc, findAllFeedbacksProc } from '../../../resources/api/feedback';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/ko'; // 한국어 locale 불러오기

dayjs.extend(relativeTime);
dayjs.locale('ko');

export default {
    data() {
        return {
            feedbackList: [
                // {
                //     id: 1,
                //     project: '프로젝트 C',
                //     message: '“크기를 두 배 증가시켜 주세요..”',
                //     time: '5분 전',
                //     user: '김철수님',
                //     status: 'unread' // 'unread' | 'read' | 'confirmed'
                // },
                // {
                //     id: 2,
                //     project: '프로젝트 B',
                //     message: '“플라스틱 재질을 다음과 같이..”',
                //     time: '30분 전',
                //     user: '이영희님',
                //     status: 'unread'
                // },
                // {
                //     id: 3,
                //     project: '프로젝트 B',
                //     message: '“좀 더 밝은 색으로 바꿔주세요..”',
                //     time: '어제',
                //     user: '김철수님',
                //     status: 'confirmed'
                // }
            ],
            feedbackSummary: {
                total: 3,
                unread: 2,
                read: 1
            },
            selectedFeedback: null,     // 회신용
            replyingFeedbackId: null,   // 회신 폼 표시용
            feedbackChatList: [
                // {
                //     id: 1,
                //     name: '홍길동',
                //     content: '교육 내용이 이해하기 쉬웠습니다.',
                //     date: '2025-06-24',
                //     time: '14:30',
                //     status: '미확인'
                // },
                // {
                //     id: 2,
                //     name: '김영희',
                //     content: '실습 예제가 더 많았으면 좋겠습니다.',
                //     date: '2025-06-23',
                //     time: '10:15',
                //     status: '확인'
                // },
                // {
                //     id: 3,
                //     name: '박철수',
                //     content: '강사님 설명이 친절해서 좋았습니다.',
                //     date: '2025-06-22',
                //     time: '16:45',
                //     status: '회신완료'
                // },
                // {
                //     id: 4,
                //     name: '이민정',
                //     content: '온라인 자료 접근이 어려웠어요.',
                //     date: '2025-06-21',
                //     time: '09:05',
                //     status: '미확인'
                // },
                // {
                //     id: 5,
                //     name: '최현우',
                //     content: '교육 시간이 너무 짧은 것 같아요.',
                //     date: '2025-06-20',
                //     time: '13:20',
                //     status: '확인'
                // }
                ],

            replyText: '',

        };
    },
    methods: {
        // async markAsRead(id) {
        //     // 서버에 상태값 전달
        //     try {
        //     await axios.post(`/api/feedback/${id}/checkFeedback.json`);
        //     const item = this.feedbackList.find(f => f.id === id);
        //     if (item) item.status = 'read';
        //     } catch (err) {
        //     console.error('확인 처리 실패:', err);
        //     }
        // },
        async submitReply() {
            if (!this.replyText.trim()) return;
            try {
            await axios.post(`/api/feedback/${this.replyingFeedbackId}/reply`, {
                reply: this.replyText
            });
            alert('회신이 전송되었습니다.');
            this.replyText = '';
            this.selectedFeedback = null;
            this.replyingFeedbackId = null;
            } catch (err) {
            console.error('회신 실패:', err);
            }
        },

        replyTo(feedback) {
            this.selectedFeedback = feedback;
            this.replyingFeedbackId = feedback.id;
        },
        loadFeedbacks() {
            findAllFeedbacksProc({
                memberId: this.getMemId
            })
                .then(response => {
                    const feedbackList = response.data.result;

                    this.feedbackList = feedbackList.map(feedback => ({
                        id: feedback.feedbackId,
                        projectGroupId: feedback.projectGroupId,
                        project: feedback.projectName,
                        message: `"${feedback.feedbackContent}"`,
                        time: dayjs(feedback.createdAt).fromNow(),
                        user: feedback.memberName + '님',
                        chatRoomId: feedback.chatRoomId,
                        status: feedback.isChecked === 'Y' ? 'read' : 'unread' // 'unread' | 'read' | 'confirmed'
                    }));
                })
                .catch(error => {console.error('피드백 목록 조회 실패: ', error);})
        },
        markAsRead(feedbackId) {
            const data = {
                memberId : this.getMemId
            };
            checkFeedbackProc(feedbackId, data)
                .then(response => {
                    this.loadFeedbacks();
                    console.log('피드백 확인 완료');
                })
                .catch(error => {
                    console.error('피드백 확인 실패: ', error);
                })
        },
        loadFeedbackChatList(chatRoomId, feedback) {
            const data = {
                memberId : this.getMemId
            };

            findAllChatMsgsProc(chatRoomId, data)
                .then(response => {
                    const chatList = response.data.result;

                    this.feedbackChatList = chatList.map(chat => ({
                        id: chat.chatMsgId,
                        user: chat.senderName,
                        content: chat.msgContent,
                        time: dayjs(chat.createdAt).fromNow()
                    }));

                    this.replyTo(feedback);
                })
                .catch(error => {
                    console.error('채팅 조회 실패: ', error);
                })
        },
    },
    watch: {},
    computed: {
    ...mapGetters([
      'getMemId',
      'getMemNm',
      'getMemLoginId'
    ])
    },
    components: {},
    created() {},
    mounted() {
        this.loadFeedbacks();
    },
    beforeUnmount() {},
};

</script>