<template>

    <div class="main">
        <div class="myplan">
            <div class="title-box flex justify-between mb40">
                <p class="title">오늘 공부할 내용을 확인해봅시다.</p>
            </div>
            <div class="wrap" style="border-radius: 0; min-height: 197px;">
                <p class="title1" v-if="!schedules || schedules.length === 0"> 오늘 학습할 내용이 없습니다.</p>

                <div class="flex-column" style="gap: 20px;" v-else v-for="(schedule, index) in schedules" :key="index">
                    <div class="flex justify-between align-center" style="gap: 70px;">
                        <div><img src="../../../resources/img/img217_22s.png" alt=""></div>
                        <div class="wrap cs-pt planBox" :class="{ 'cs-pt-clicked': isClicked }" style="width: 100%;">
                            <div class="text-lf flex justify-between align-center">
                                <div>
                                    <p class="title2" s>grade 3</p>
                                    <div class="flex align-center mb10" style="gap: 10px; margin-top: 1.5em;">
                                        <p class="title2"><em class="gray-bd">{{ schedule.schdl_unit }}교시</em></p>
                                        <p class="title1">{{ schedule.schedule_time }}</p>
                                    </div>
                                    <div class="title-box mb10">
                                        <span class="title">{{ schedule.unit_nm }}</span>
                                    </div>
                                    <p class="title2">{{ schedule.book_nm }}</p>
                                    <!-- <p class="title2">wirte a</p> -->
                                </div>
                                <button v-if="schedule.finish == 'T'" type="button" title="바로가기" class="yellow-btn"
                                    @click="goToPage('Dashboard', schedule.schdl_id)">
                                    학습완료
                                </button>
                                <button v-else type="button" title="바로가기" class="yellow-btn"
                                    @click="goToPage('Dashboard', schedule.schdl_id)">
                                    바로가기
                                </button>
                                <div><img src="../../../resources/img/img214_19s.png" alt=""
                                        style="height: 130px; width: 100px; "></div>
                                <button type="button" class="popup-close-btn"
                                    @click="deleteSchedule(schedule.schdl_id)">
                                    <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="yellow-box mt30">
                <div class="title-box flex justify-between align-center">
                    <div>
                        <p class="title">오늘 공부를 계획해봅시다.</p>
                        <p class="title1 mt20"> 스스로 학습 일정을 바꿔볼까요?</p>
                    </div>
                    <button type="button" title="바로가기" class="yellow-btn" @click="goToPage2('MyPlan2')">
                        바로가기
                    </button>
                </div>
            </div>
            <div class="wrap mt30">
                <p class="title1 mb20"> AI 맞춤형 학습 코스는 어떨까요?</p>
                <div class="imgGroup flex justify-between">
                    <div class="text-lf aiClick" @click="goToPage2('AIDashboard')">
                        <img src="../../../resources/img/img215_22s.png" alt="">
                        <p class="title2 mt10">추천 학습 단원</p>
                    </div>
                    <div class="text-lf aiClick" @click="goToPage2('AIDashboard')">
                        <img src="../../../resources/img/img215_22s.png" alt="">
                        <p class="title2 mt10">추천 학습 단원</p>
                    </div>
                    <div class="text-lf aiClick" @click="goToPage2('AIDashboard')">
                        <img src="../../../resources/img/img215_22s.png" alt="">
                        <p class="title2 mt10">추천 학습 단원</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import axios from "axios";
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiWindowClose } from '@mdi/js';
import { mapActions } from "vuex";
import { mapGetters } from 'vuex';


export default {
    data() {
        return {
            mdiMagnify: mdiMagnify,
            mdiWindowClose: mdiWindowClose,
            showModal: false,
            searchOpen: false,
            schedules: [],
            stdId: "2",
            timeList: [
                { label: "1교시", time: "08:00 ~ 09:00", value: "1" },
                { label: "2교시", time: "09:00 ~ 10:00", value: "2" },
                { label: "3교시", time: "10:00 ~ 11:00", value: "3" },
                { label: "4교시", time: "11:00 ~ 12:00", value: "4" },
                { label: "5교시", time: "13:00 ~ 14:00", value: "5" },
                { label: "6교시", time: "14:00 ~ 15:00", value: "6" },
            ],
        }
    },
    methods: {

        ...mapActions(['updateSchdlId', 'updateBookId', 'updateUnitId']),

        goToPage(page, scheduleId) {
        const startScheduleIndex = this.schedules.findIndex(schedule => schedule.schdl_id === scheduleId);

        if (startScheduleIndex === -1) {
            console.error("해당 스케줄을 찾을 수 없습니다.");
            return;
        }

        const updates = [];
        const currentSchedule = this.schedules[startScheduleIndex];
        if (currentSchedule.finish === null || currentSchedule.finish === "T") {
            updates.push(
                axios.post("/schedule/scheduleUpdate.json", { scheduleId: currentSchedule.schdl_id, finish: "F" }, {
                    headers: {
                        "Content-Type": "application/json; charset=UTF-8",
                    }
                })
            );
        }

        for (let i = startScheduleIndex + 1; i < this.schedules.length; i++) {
            const nextSchedule = this.schedules[i];
            if (nextSchedule.finish === "T") {
                updates.push(
                    axios.post("/schedule/scheduleUpdate.json", { scheduleId: nextSchedule.schdl_id, finish: "F" }, {
                        headers: {
                            "Content-Type": "application/json; charset=UTF-8",
                        }
                    })
                );
            }
        }

        Promise.all(updates)
            .then(() => {
                const schedule = this.schedules[startScheduleIndex];
                // this.$router.push({ 
                //     name: page,
                //     query: {
                //         schdl_id: schedule.schdl_id,
                //         book_id: schedule.book_id,
                //         unit_id: schedule.unit_id
                //     }
                // });
                // 상태 업데이트가 완료된 후 라우팅
                Promise.all([
                    this.updateSchdlId(schedule.schdl_id),
                    this.updateBookId(schedule.book_id),
                    this.updateUnitId(schedule.unit_id)
                ]).then(() => {
                    console.log("Book ID:", this.getBookId);
                    console.log("Unit ID:", this.getUnitId);

                    this.$router.push({ name: page });
                }).catch(error => {
                    console.error("상태 업데이트 중 오류 발생:", error);
                });
            })
            .catch(error => {
                console.error("Error updating schedules:", error);
                alert("학습 계획을 업데이트하는 중 오류가 발생했습니다.");
            });
        },
        goToPage2(page) {
            this.$router.push({ name: page });
        },
        showConfirm(type) {
            let message = '';
            if (type === 'cancel') {
                message = '삭제하시겠습니까?';
            } else if (type === 'reset') {
                message = '초기화하시겠습니까?';
            } else if (type === 'save') {
                message = '등록하시겠습니까?';
            }

            if (confirm(message)) {
                this.goBack();
            }
        },
        closeModal() {
            this.showModal = false;
        },
        buttonSearch() {
            this.searchOpen = true;
        },
        closeBtn() {
            this.searchOpen = false;

        }, fetchSchedules() {
            axios.post("/schedule/selectSchedule.json", { stdId: this.stdId }, {
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                }
            })
                .then(response => {
                    this.schedules = response.data.map(schedule => {
                        const matchingTime = this.timeList.find(time => time.value === schedule.schdl_unit);
                        return {
                            ...schedule,
                            schedule_time: matchingTime ? matchingTime.time : "시간 정보 없음"
                        };
                    });
                    console.log(this.schedules);
                })
                .catch(error => {
                    console.error("fetchUnits - error:", error);
                    alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
                });
        }, deleteSchedule(scheduleId) {
            axios.post("/schedule/scheduleDelete.json", { scheduleId: scheduleId }, {
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                }
            })
                .then(response => {
                    alert("학습일정이 삭제되었습니다.")
                    window.location.reload();
                })
                .catch(error => {
                    console.error("fetchUnits - error:", error);
                    alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
                });
        }
    },
    watch: {

    },
    computed: {
        ...mapGetters(['getBookId', 'getUnitId'])
    },
    components: {
        SvgIcon
    },
    mounted() {
        console.log('Main2 mounted');
        this.fetchSchedules();
    }
}
</script>
<style>
.planBox {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px, rgba(0, 0, 0, 0.096) 0px 6px 6px;
    border: none;
    margin: 0px 0px 20px;
}

.aiClick {
    cursor: pointer;
}
</style>