<!--
 * @Date: 2025-04-07
 * @Description: 学习详情页面
-->
<template>
    <div class="study-detail-page bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen pb-20">
        <div v-if="course" class="flex flex-col h-screen">
            <!-- 固定区域：视频播放和标签页 -->
            <div class="fixed top-0 left-0 right-0 z-10 top-wrapper">
                <!-- 视频播放区域 -->
                <div v-if="course.course_type === 'video'" class="w-full bg-black relative">
                    <!-- 视频封面和播放按钮 -->
                    <div v-if="!isPlaying" class="relative w-full" style="aspect-ratio: 16/9;">
                        <img :src="courseFile.cover" :alt="course.title" class="w-full h-full object-cover" />
                        <div class="absolute inset-0 flex items-center justify-center cursor-pointer"
                            @click="startPlay">
                            <div
                                class="w-24 h-24 rounded-full bg-black/50 flex items-center justify-center hover:bg-black/70 transition-colors">
                                <font-awesome-icon icon="circle-play" class="text-5xl text-white"
                                    style="font-size: 3rem;" />
                            </div>
                        </div>
                    </div>
                    <!-- 视频播放器 -->
                    <VideoPlayer v-show="isPlaying" ref="videoPlayerRef" :video-url="courseFile.url" :autoplay="false"
                        @onPlay="handleVideoPlay" @onPause="handleVideoPause" />
                </div>
                <div v-if="course.course_type === 'audio'" class="w-full relative" style="border-bottom: 1px solid #F3F4F6;">
                    <!-- 音频播放器 -->
                    <AudioPlayer :songs="audioList" />
                </div>
                <!-- 标签页区域 -->
                <div class="px-4 py-3 bg-white">
                    <van-tabs v-model:active="activeTab" sticky animated swipeable shrink @change="handleTabChange">
                        <van-tab title="介绍" name="intro">
                        </van-tab>
                        <van-tab :title-style="{ 'min-width': '50%' }" name="comments">
                            <template #title>评论({{ commentCount }})</template>
                        </van-tab>
                    </van-tabs>
                </div>
            </div>

            <!-- 滚动区域：介绍和评论内容 -->
            <div class="overflow-y-auto flex-1"
                :style="{ paddingTop: topWrapperHeight, height: 'calc(100vh - ' + topWrapperHeight + ')' }">
                <div id="intro" class="py-4 px-4">
                    <h1 class="text-lg font-bold mb-2">{{ course.title }}</h1>
                    <div class="text-gray-500 text-sm flex items-center gap-2">
                        <span>开课时间 {{ dayjs(course.schedule_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
                        <!-- <span class="text-gray-300">|</span> -->
                        <!-- <span>没有字段{{ course.studyCount || 0 }}次学习</span> -->
                    </div>
                </div>

                <div class="h-2 bg-gray-100"></div>

                <div id="comment" class="py-4 px-4 space-y-4" :style="{ paddingBottom: bottomWrapperHeight }">
                    <div class="flex justify-between items-center mb-4">
                        <div class="text-gray-900 font-medium text-sm">评论 ({{ commentCount }})</div>
                        <div class="text-gray-500 cursor-pointer text-sm" @click="showCommentPopup = true">查看更多</div>
                    </div>
                    <!-- 显示几条评论 -->
                    <div v-for="comment in commentList" :key="comment.id"
                        class="border-b border-gray-100 last:border-b-0 py-4">
                        <div class="flex">
                            <img :src="comment.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'" class="w-10 h-10 rounded-full flex-shrink-0"
                                style="margin-right: 0.5rem;" />
                            <div class="flex-1 ml-3">
                                <div class="flex justify-between items-center mb-1">
                                    <span class="font-medium text-gray-900">{{ comment.name }}</span>
                                    <div class="flex items-center space-x-1">
                                        <span class="text-sm text-gray-500">{{ comment.like_count }}</span> &nbsp;
                                        <van-icon :name="comment.is_like ? 'like' : 'like-o'"
                                            :class="{ 'text-red-500': comment.is_like, 'text-gray-400': !comment.is_like }"
                                            @click="toggleLike(comment)" class="text-lg cursor-pointer" />
                                    </div>
                                </div>
                                <p class="text-gray-700 text-sm mb-1">{{ comment.note }}</p>
                                <div class="text-gray-400 text-xs">{{ formatDate(comment.updated_time) }}</div>
                            </div>
                        </div>
                    </div>
                    <van-popup v-model:show="showCommentPopup" position="bottom" round closeable safe-area-inset-bottom
                        style="height: 80%">
                        <div class="flex flex-col h-full">
                            <!-- 固定头部 -->
                            <div class="flex-none px-4 py-3 border-b bg-white sticky top-0 z-10">
                                <div class="text-lg font-medium">全部评论 ({{ commentCount }})</div>
                            </div>

                            <!-- 可滚动的评论列表 -->
                            <div class="flex-1 overflow-y-auto">
                                <van-list
                                    v-model:loading="popupLoading"
                                    :finished="popupFinished"
                                    finished-text="没有更多评论了"
                                    @load="onPopupLoad"
                                    class="px-4 py-2 pb-16"
                                >
                                    <div v-for="comment in popupCommentList" :key="comment.id"
                                        class="border-b border-gray-100 last:border-b-0 py-4">
                                        <div class="flex">
                                            <img :src="comment.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'" class="w-10 h-10 rounded-full flex-shrink-0"
                                            style="margin-right: 0.5rem;" />
                                            <div class="flex-1 ml-3">
                                                <div class="flex justify-between items-center mb-1">
                                                    <span class="font-medium text-gray-900">{{ comment.name }}</span>
                                                    <div class="flex items-center space-x-1">
                                                        <span class="text-sm text-gray-500">{{ comment.like_count }}</span>
                                                        &nbsp;
                                                        <van-icon :name="comment.is_like ? 'like' : 'like-o'"
                                                            :class="{ 'text-red-500': comment.is_like, 'text-gray-400': !comment.is_like }"
                                                            @click="toggleLike(comment)"
                                                            class="text-lg cursor-pointer" />
                                                    </div>
                                                </div>
                                                <p class="text-gray-700 text-sm mb-1">{{ comment.note }}</p>
                                                <div class="text-gray-400 text-xs">{{ formatDate(comment.updated_time) }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </van-list>
                            </div>

                            <!-- 固定底部输入框 -->
                            <div class="flex-none border-t px-4 py-2 bg-white fixed bottom-0 left-0 right-0 z-10">
                                <div class="flex items-center space-x-2">
                                    <van-field v-model="popupComment" rows="1" autosize type="textarea"
                                        placeholder="请输入评论" class="flex-1 bg-gray-100 rounded-lg" />
                                    <van-button type="primary" size="small" @click="submitPopupComment">发送</van-button>
                                </div>
                            </div>
                        </div>
                    </van-popup>
                </div>
            </div>

            <!-- 底部操作栏 -->
            <div
                class="fixed bottom-0 left-0 right-0 bg-white border-t px-4 py-2 flex items-center space-x-4 bottom-wrapper">
                <div class="flex-none flex flex-col items-center gap-1 cursor-pointer active:opacity-80"
                    @click="showCatalog = true">
                    <van-icon name="bars" class="text-lg text-gray-600" />
                    <span class="text-xs text-gray-600">课程目录</span>
                </div>
                <div class="flex-grow flex-1 min-w-0">
                    <van-field v-model="newComment" rows="1" autosize type="textarea" placeholder="请输入留言"
                        class="bg-gray-100 rounded-lg !p-0">
                        <template #input>
                            <textarea v-model="newComment" rows="1" placeholder="请输入留言"
                                class="w-full h-full bg-transparent outline-none resize-none" />
                        </template>
                    </van-field>
                </div>
                <van-button type="primary" size="small" @click="submitComment">发送</van-button>
            </div>
        </div>

        <!-- 课程目录弹出层 -->
        <van-popup v-model:show="showCatalog" position="bottom" round closeable safe-area-inset-bottom
            style="height: 80%">
            <div class="flex flex-col h-full">
                <!-- 固定头部 -->
                <div class="flex-none px-4 py-3 border-b bg-white sticky top-0 z-10">
                    <div class="text-lg font-medium">课程目录</div>
                </div>

                <!-- 可滚动的目录列表 -->
                <div class="flex-1 overflow-y-auto px-4 py-2">
                    <div v-if="course_lessons.length" class="space-y-4">
                        <div v-for="(lesson, index) in course_lessons" :key="index"
                            @click="handleLessonClick(lesson)"
                            class="bg-white p-4 cursor-pointer hover:bg-gray-50 transition-colors border-b border-gray-200 relative">
                            <div v-if="lesson.progress > 0 && lesson.progress < 100"
                                class="absolute top-2 right-2 px-2 py-1 bg-green-100 text-green-600 text-xs rounded">
                                上次看到</div>
                            <div class="text-black text-base font-medium mb-2">{{ lesson.title }}</div>
                            <div class="flex items-center text-sm text-gray-500">
                                <span>{{ course_type_maps[lesson.course_type] }}</span>
                                <span v-if="course_type_maps[lesson.course_type]" class="mx-2">|</span>
                                <span>开课时间: {{ dayjs(lesson.schedule_time).format('YYYY-MM-DD') }}</span>
                                <span class="mx-2">|</span>
                                <span>课程时长: {{ lesson.duration }} 分钟</span>
                            </div>
                        </div>
                    </div>
                    <van-empty v-else description="暂无目录" />
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useTitle } from '@vueuse/core';
import VideoPlayer from '@/components/ui/VideoPlayer.vue';
import AudioPlayer from '@/components/ui/AudioPlayer.vue';
import dayjs from 'dayjs';
import { formatDate } from '@/utils/tools'

// 导入接口
import { getScheduleCourseAPI, getGroupCommentListAPI, addGroupCommentAPI, addGroupCommentLikeAPI, delGroupCommentLikeAPI, getCourseDetailAPI } from '@/api/course';

const route = useRoute();
const router = useRouter();
const course = ref(null);

const activeTab = ref('intro');
const newComment = ref('');
const showCatalog = ref(false);
const isPlaying = ref(false);
const videoPlayerRef = ref(null);
const showCommentPopup = ref(false);
const popupComment = ref('');

// 课程目录相关
const course_lessons = ref([]);
const course_type_maps = ref({
    video: '视频',
    audio: '音频',
    image: '图片',
    file: '文件',
});

// 开始播放视频
const startPlay = async () => {
    isPlaying.value = true;
    await nextTick();
    if (videoPlayerRef.value) {
        videoPlayerRef.value.play();
    }
};

// 处理视频播放状态
const handleVideoPlay = () => {
    isPlaying.value = true;
};

const handleVideoPause = () => {
    // 保持视频播放器可见，只在初始状态显示封面
};

// 评论列表分页参数
const popupCommentList = ref([]);
const popupLoading = ref(false);
const popupFinished = ref(false);
const popupLimit = ref(5);
const popupPage = ref(0);

// 测试音频数据
// const audioList = ref([
//     {
//         id: 1,
//         title: '示例音频 1',
//         artist: '演唱者 1',
//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
//         url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
//     },
//     {
//         id: 2,
//         title: '示例音频 2',
//         artist: '演唱者 2',
//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
//         url: 'https://img.tukuppt.com/newpreview_music/08/99/00/5c88d4a8d1f5745026.mp3'
//     },
//     {
//         id: 3,
//         title: '示例音频 3',
//         artist: '演唱者 3',
//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
//         url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
//     },
//     {
//         id: 4,
//         title: '示例音频 4',
//         artist: '演唱者 4',
//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
//         url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
//     },
//     {
//         id: 5,
//         title: '示例音频 5',
//         artist: '演唱者 5',
//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
//         url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
//     },
//     {
//         id: 6,
//         title: '示例音频 6',
//         artist: '演唱者 6',
//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
//         url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
//     },
//     {
//         id: 7,
//         title: '示例音频 7',
//         artist: '演唱者 7',
//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
//         url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
//     },
//     {
//         id: 8,
//         title: '示例音频 8',
//         artist: '演唱者 8',
//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
//         url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
//     },
// ]);
const audioList = ref([]);

// 设置页面标题
useTitle('学习详情');

const topWrapperHeight = ref(0);
const bottomWrapperHeight = ref(0);

// 标记是否由tab切换触发的滚动
const isTabScrolling = ref(false);

const handleScroll = () => {
    // 如果是由tab切换触发的滚动，不处理
    if (isTabScrolling.value) return;

    const introElement = document.getElementById('intro');
    const commentElement = document.getElementById('comment');
    if (!introElement || !commentElement) return;

    const scrollTop = window.scrollY;
    const commentOffset = commentElement.offsetTop - parseInt(topWrapperHeight.value);

    // 根据滚动位置更新activeTab
    if (scrollTop >= commentOffset) {
        activeTab.value = 'comments';
    } else {
        activeTab.value = 'intro';
    }
};

const commentCount = ref(0);
const commentList = ref([]);
const courseFile = ref({});

// 处理课程切换
const handleLessonClick = async (lesson) => {
    showCatalog.value = false; // 关闭目录弹窗
    isPlaying.value = false; // 重置播放状态

    // 更新URL地址，不触发页面重新加载
    router.replace({ params: { id: lesson.id } });

    // 重新获取课程数据
    const { code, data } = await getScheduleCourseAPI({ i: lesson.id });
    if (code) {
        course.value = data;
        courseFile.value = data.file;

        // 音频列表处理
        if (data.course_type === 'audio') {
            audioList.value = [data.file];
        }

        // 获取评论列表
        const comment = await getGroupCommentListAPI({ group_id: data.group_id, schedule_id: data.id });
        if (comment.code) {
            commentList.value = comment.data.comment_list;
            commentCount.value = comment.data.comment_count;
        }
    }
};

onMounted(async () => {
    // 延迟设置topWrapper和bottomWrapper的高度
    setTimeout(() => {
        nextTick(() => {
            const topWrapper = document.querySelector('.top-wrapper');
            const bottomWrapper = document.querySelector('.bottom-wrapper');
            if (topWrapper) {
                topWrapperHeight.value = topWrapper.clientHeight + 'px';
            }
            if (bottomWrapper) {
                bottomWrapperHeight.value = bottomWrapper.clientHeight + 'px';
            }

            // 添加滚动监听
            window.addEventListener('scroll', handleScroll);
        })
    }, 500);

    const courseId = route.params.id;
    if (courseId) {
        const { code, data } = await getScheduleCourseAPI({ i: courseId });
        if (code) {
            course.value = data;
            courseFile.value = data.file;
            // 音频列表处理
            if (data.course_type === 'audio') {
                audioList.value = [data.file];
            }

            // 获取评论列表
            const comment = await getGroupCommentListAPI({ group_id: course.value.group_id, schedule_id: course.value.id });
            if (comment.code) {
                commentList.value = comment.data.comment_list;
                commentCount.value = comment.data.comment_count;
            }

            // 获取课程目录
            const detail = await getCourseDetailAPI({ i: course.value.group_id });
            if (detail.code) {
                course_lessons.value = detail.data.schedule || [];
            }
        }

    }
})

// 提交评论
// 切换点赞状态
const toggleLike = async (comment) => {
    try {
        if (!comment.is_like) {
            const { code } = await addGroupCommentLikeAPI({ i: comment.id });
            if (code) {
                comment.is_like = true;
                comment.like_count += 1;
            }
        } else {
            const { code } = await delGroupCommentLikeAPI({ i: comment.id });
            if (code) {
                comment.is_like = false;
                comment.like_count -= 1;
            }
        }
    } catch (error) {
        console.error('点赞操作失败:', error);
    }
};

// 发送按钮，提交评论
const submitComment = async () => {
    if (!newComment.value.trim()) return;

    try {
        const { code, data } = await addGroupCommentAPI({
            group_id: course.value.group_id,
            schedule_id: course.value.id,
            note: newComment.value
        });

        if (code) {
            // 刷新评论列表
            const comment = await getGroupCommentListAPI({
                group_id: course.value.group_id,
                schedule_id: course.value.id,
            });
            if (comment.code) {
                commentList.value = comment.data.comment_list;
                commentCount.value = comment.data.comment_count;
            }
            newComment.value = '';
        }
    } catch (error) {
        console.error('提交评论失败:', error);
    }
};

// 处理标签页切换
const handleTabChange = (name) => {
    // 先更新activeTab值
    activeTab.value = name;

    // 设置标记，表示这是由tab切换触发的滚动
    isTabScrolling.value = true;

    // 然后执行滚动操作
    nextTick(() => {
        const element = document.getElementById(name === 'intro' ? 'intro' : 'comment');
        if (element) {
            const topOffset = element.offsetTop - parseInt(topWrapperHeight.value);
            window.scrollTo({
                top: topOffset,
                behavior: 'smooth'
            });

            // 滚动动画结束后重置标记
            setTimeout(() => {
                isTabScrolling.value = false;
            }, 500); // 假设滚动动画持续500ms
        } else {
            isTabScrolling.value = false;
        }
    });
};


// 加载更多弹框评论
const onPopupLoad = async () => {
    const nextPage = popupPage.value;
    try {
        const res = await getGroupCommentListAPI({
            group_id: course.value.group_id,
            schedule_id: course.value.id,
            limit: popupLimit.value,
            page: nextPage
        });
        if (res.code) {
            // 使用Set进行去重处理
            const newComments = res.data.comment_list;
            const existingIds = new Set(popupCommentList.value.map(comment => comment.id));
            const uniqueNewComments = newComments.filter(comment => !existingIds.has(comment.id));
            popupCommentList.value = [...popupCommentList.value, ...uniqueNewComments];
            popupFinished.value = res.data.comment_list.length < popupLimit.value;
            popupPage.value = nextPage + 1;
        }
    } catch (error) {
        console.error('加载评论失败:', error);
    }
    popupLoading.value = false;
};

// 在组件卸载时移除滚动监听
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});

// 提交弹窗中的评论
const submitPopupComment = async () => {
    if (!popupComment.value.trim()) return;

    try {
        const { code, data } = await addGroupCommentAPI({
            group_id: course.value.group_id,
            schedule_id: course.value.id,
            note: popupComment.value
        });

        if (code) {
            // 重置弹框评论列表并重新加载
            popupCommentList.value = [];
            popupPage.value = 0;
            popupFinished.value = false;
            await onPopupLoad();

            // 更新评论数量和清空输入
            commentCount.value = data.comment_count;
            // 更新弹框标题中的评论总数
            const comment = await getGroupCommentListAPI({
                group_id: course.value.group_id,
                schedule_id: course.value.id
            });
            if (comment.code) {
                commentList.value = comment.data.comment_list;
                commentCount.value = comment.data.comment_count;
            }
            popupComment.value = '';
        }
    } catch (error) {
        console.error('提交评论失败:', error);
    }
};
// 监听弹窗显示状态变化
watch(showCommentPopup, async (newVal) => {
    if (newVal) {
        // 打开弹窗时重置状态
        popupCommentList.value = [];
        popupPage.value = 0;
        popupFinished.value = false;
        popupLoading.value = true;

        // 获取最新的评论总数
        const comment = await getGroupCommentListAPI({
            group_id: course.value.group_id,
            schedule_id: course.value.id
        });
        if (comment.code) {
            commentList.value = comment.data.comment_list;
            commentCount.value = comment.data.comment_count;
        }

        // 加载第一页数据
        onPopupLoad();
    }
});
</script>

<style lang="less" scoped>
:deep(.van-cell.van-field) {
    background-color: rgb(244, 244, 244);
}
</style>