<template>
    <div class="post-card shadow-md">
        <!-- 头部信息 -->
        <div class="post-header">
            <van-row>
                <van-col span="4">
                    <van-image round width="2.5rem" height="2.5rem"
                        :src="getOptimizedUrl(post.user.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg')"
                        fit="cover" />
                </van-col>
                <van-col span="17">
                    <div class="user-info">
                        <div class="username">
                            {{ post.user.name }}
                            <!-- 补卡标记 -->
                            <span v-if="post.user.is_makeup"
                                class="MakeupTag inline-flex items-center ml-2 px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-600 border border-green-300">补打卡</span>
                            <slot name="header-tags"></slot>
                        </div>
                        <div class="post-time">{{ post.user.time }}</div>
                    </div>
                </van-col>
                <van-col span="3">
                    <div v-if="post.is_my" class="post-menu">
                        <slot name="menu">
                            <!-- 默认菜单项，或留空供父组件填充 -->
                            <van-icon name="edit" @click="emit('edit', post)" class="mr-2" color="#4caf50" />
                            <van-icon name="delete-o" @click="emit('delete', post)" color="#f44336" />
                        </slot>
                    </div>
                    <slot name="header-right" v-else></slot>
                </van-col>
            </van-row>
        </div>

        <!-- 内容区域 -->
        <div class="post-content">
            <slot name="content-top"></slot>
            <PostCountModel :post-data="post" />
            <div class="post-text-wrapper relative">
                <div ref="textRef" class="post-text" :class="{ 'line-clamp-5': !isExpanded }">
                    {{ post.content }}
                </div>
                <div v-if="showExpandBtn" class="expand-btn text-blue-500 text-sm mt-1 cursor-pointer"
                    @click.stop="toggleExpand">
                    {{ isExpanded ? '收起' : '全文' }}
                </div>
            </div>

            <!-- 媒体内容 -->
            <div class="post-media mt-2">
                <!-- 多附件Tab模式 -->
                <div v-if="mediaTabs.length > 1" class="media-tabs">
                    <van-tabs v-model:active="activeTab" shrink animated swipeable color="#4caf50">
                        <van-tab v-for="tab in mediaTabs" :key="tab.name" :title="tab.label" :name="tab.name">
                            <div class="pt-2">
                                <!-- 图片内容 -->
                                <template v-if="tab.name === 'image'">
                                    <div class="post-images">
                                        <div class="post-image-item" v-for="(image, index) in post.images" :key="index">
                                            <van-image width="100%" height="100%" fit="cover"
                                                :src="getOptimizedUrl(image)" radius="5"
                                                @click="openImagePreview(index)" />
                                        </div>
                                    </div>
                                </template>

                                <!-- 视频内容 -->
                                <template v-if="tab.name === 'video'">
                                    <div v-for="(v, idx) in post.videoList" :key="idx">
                                        <!-- 封面图 -->
                                        <div v-if="v.video && !v.isPlaying"
                                            class="relative w-full rounded-lg overflow-hidden"
                                            style="aspect-ratio: 16/9; margin-bottom: 1rem;">
                                            <img :src="getOptimizedUrl(v.videoCover || 'https://cdn.ipadbiz.cn/mlaj/images/cover_video_2.png')"
                                                :alt="post.content" class="w-full h-full object-contain" />
                                            <div class="absolute inset-0 flex items-center justify-center cursor-pointer bg-black/20"
                                                @click="startPlay(v)">
                                                <div
                                                    class="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center hover:bg-black/70 transition-colors">
                                                    <van-icon name="play-circle-o" class="text-white" size="40" />
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 视频播放器 -->
                                        <VideoPlayer v-if="v.video && v.isPlaying" :video-url="v.video"
                                            :video-id="v.id || `video-${post.id}-${idx}`"
                                            :use-native-on-ios="false" class="post-video rounded-lg overflow-hidden"
                                            :ref="(el) => setVideoRef(el, v.id)"
                                            @onPlay="(player) => handleVideoPlay(player, v)"
                                            @onPause="handleVideoPause" />
                                    </div>
                                </template>

                                <!-- 音频内容 -->
                                <template v-if="tab.name === 'audio'">
                                    <AudioPlayer v-if="post.audio && post.audio.length" :songs="post.audio"
                                        class="post-audio" :id="post.id" :ref="(el) => setAudioRef(el, post.id)"
                                        @play="handleAudioPlay" />
                                </template>
                            </div>
                        </van-tab>
                    </van-tabs>
                </div>

                <!-- 单一附件模式 (保持原有布局) -->
                <div v-else>
                    <!-- 图片列表 -->
                    <div v-if="post.images && post.images.length" class="post-images">
                        <div class="post-image-item" v-for="(image, index) in post.images" :key="index">
                            <van-image width="100%" height="100%" fit="cover" :src="getOptimizedUrl(image)" radius="5"
                                @click="openImagePreview(index)" />
                        </div>
                    </div>

                    <!-- 视频列表 -->
                    <div v-if="post.videoList && post.videoList.length">
                        <div v-for="(v, idx) in post.videoList" :key="idx">
                            <!-- 封面图 -->
                            <div v-if="v.video && !v.isPlaying" class="relative w-full rounded-lg overflow-hidden"
                                style="aspect-ratio: 16/9; margin-bottom: 1rem;">
                                <img :src="getOptimizedUrl(v.videoCover || 'https://cdn.ipadbiz.cn/mlaj/images/cover_video_2.png')"
                                    :alt="post.content" class="w-full h-full object-contain" />
                                <div class="absolute inset-0 flex items-center justify-center cursor-pointer bg-black/20"
                                    @click="startPlay(v)">
                                    <div
                                        class="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center hover:bg-black/70 transition-colors">
                                        <van-icon name="play-circle-o" class="text-white" size="40" />
                                    </div>
                                </div>
                            </div>
                            <!-- 视频播放器 -->
                            <VideoPlayer v-if="v.video && v.isPlaying" :video-url="v.video"
                                :video-id="v.id || `video-${post.id}-${idx}`" :use-native-on-ios="false"
                                class="post-video rounded-lg overflow-hidden" :ref="(el) => setVideoRef(el, v.id)"
                                @onPlay="(player) => handleVideoPlay(player, v)" @onPause="handleVideoPause" />
                        </div>
                    </div>

                    <!-- 音频播放器 -->
                    <AudioPlayer v-if="post.audio && post.audio.length" :songs="post.audio" class="post-audio"
                        :id="post.id" :ref="(el) => setAudioRef(el, post.id)" @play="handleAudioPlay" />
                </div>

                <van-image-preview v-if="post.images && post.images.length" v-model:show="showLocalImagePreview"
                    :images="post.images" :start-position="localStartPosition" :show-index="true" />
            </div>
        </div>

        <!-- 底部操作栏 -->
        <div class="post-footer flex items-center justify-between">
            <!-- 左侧：点赞 -->
            <div class="flex items-center">
                <van-icon @click="emit('like', post)" name="good-job" class="like-icon"
                    :color="post.is_liked ? 'red' : ''" />
                <span class="like-count ml-1">{{ post.likes }}</span>
            </div>
            <!-- 右侧：自定义操作 -->
            <div class="flex items-center">
                <slot name="footer-right"></slot>
            </div>
        </div>
    </div>
</template>

<script setup>
/**
 * CheckinCard 打卡卡片组件
 * @description 展示用户打卡内容的卡片，支持文本折叠、多媒体（图片/视频/音频）展示、点赞及自定义操作。
 *
 * @example
 * <template>
 *   <CheckinCard
 *     :post="postData"
 *     :use-cdn-optimization="true"
 *     @like="handleLike"
 *     @edit="handleEdit"
 *     @delete="handleDelete"
 *   />
 * </template>
 *
 * // Example data setup
 * const postData = {
 *   id: 1,
 *   user: { name: 'User', avatar: 'url', time: '2023-01-01' },
 *   content: 'Post content...',
 *   images: ['img1.jpg'],
 *   videoList: [{ video: 'vid1.mp4', videoCover: 'cover.jpg' }],
 *   audio: [],
 *   likes: 10,
 *   is_liked: false,
 *   is_my: true
 * }
 * const handleLike = (post) => console.log('like', post)
 */
import { ref, computed, watchEffect, onMounted, nextTick, watch } from 'vue'
import PostCountModel from "@/components/count/postCountModel.vue";
import VideoPlayer from "@/components/media/VideoPlayer.vue";
import AudioPlayer from "@/components/media/AudioPlayer.vue";

const props = defineProps({
    /**
     * 帖子数据对象
     * @property {number|string} id - 帖子ID
     * @property {Object} user - 用户信息
     * @property {string} content - 帖子内容
     * @property {Array} images - 图片列表
     * @property {Array} videoList - 视频列表
     * @property {Array} audio - 音频列表
     * @property {number} likes - 点赞数
     * @property {boolean} is_liked - 是否已点赞
     * @property {boolean} is_my - 是否是自己的帖子
     */
    post: { type: Object, required: true },
    /** 是否使用 CDN 优化链接 */
    useCdnOptimization: { type: Boolean, default: false }
})

const emit = defineEmits(['like', 'edit', 'delete', 'video-play', 'audio-play'])

// 文本折叠逻辑
const isExpanded = ref(false)
const showExpandBtn = ref(false)
const textRef = ref(null)

/**
 * @description 切换文本展开/收起状态
 */
const toggleExpand = () => {
    isExpanded.value = !isExpanded.value
}

/**
 * @description 检查文本是否溢出
 */
const checkTextOverflow = () => {
    if (textRef.value) {
        // 如果滚动高度大于客户区高度，说明有溢出（因为设置了 line-clamp）
        showExpandBtn.value = textRef.value.scrollHeight > textRef.value.clientHeight
    }
}

onMounted(() => {
    nextTick(() => {
        checkTextOverflow()
    })
})

watch(() => props.post.content, () => {
    isExpanded.value = false // Reset expansion on content change
    nextTick(() => {
        checkTextOverflow()
    })
})

// 多媒体Tab逻辑
const activeTab = ref('')
const mediaTabs = computed(() => {
    const tabs = []
    if (props.post.images && props.post.images.length) tabs.push({ label: '图片', name: 'image' })
    if (props.post.videoList && props.post.videoList.length) tabs.push({ label: '视频', name: 'video' })
    if (props.post.audio && props.post.audio.length) tabs.push({ label: '音频', name: 'audio' })
    return tabs
})

watchEffect(() => {
    if (mediaTabs.value.length > 0 && !activeTab.value) {
        activeTab.value = mediaTabs.value[0].name
    }
})

// 图片预览状态
const showLocalImagePreview = ref(false)
const localStartPosition = ref(0)

/**
 * @description 打开图片预览
 * @param {number} index 图片索引
 */
const openImagePreview = (index) => {
    localStartPosition.value = index
    showLocalImagePreview.value = true
}

// 媒体引用
const videoRefs = ref(new Map())
const audioRefs = ref(new Map())

/**
 * @description 设置视频引用
 * @param {HTMLElement} el 元素
 * @param {string|number} id 视频ID
 */
const setVideoRef = (el, id) => {
    if (el) {
        videoRefs.value.set(id, el)
    } else {
        videoRefs.value.delete(id)
    }
}

/**
 * @description 设置音频引用
 * @param {HTMLElement} el 元素
 * @param {string|number} id 音频ID
 */
const setAudioRef = (el, id) => {
    if (el) {
        audioRefs.value.set(id, el)
    } else {
        audioRefs.value.delete(id)
    }
}

// CDN 链接优化
/**
 * @description 获取优化后的 CDN 链接
 * @param {string} url 原始链接
 * @returns {string} 优化后的链接
 */
const getOptimizedUrl = (url) => {
    if (!props.useCdnOptimization) return url
    if (url.includes('?')) return url
    return `${url}?imageMogr2/thumbnail/200x/strip/quality/70`
}

// 视频播放逻辑
/**
 * @description 开始播放视频
 * @param {Object} v 视频对象
 */
const startPlay = (v) => {
    // 暂停当前卡片中的其他视频
    props.post.videoList.forEach(item => {
        if (item.id !== v.id) item.isPlaying = false
    })
    v.isPlaying = true
}

/**
 * @description 处理视频播放事件
 * @param {Object} player 播放器实例
 * @param {Object} v 视频对象
 */
const handleVideoPlay = (player, v) => {
    // 停止本地音频
    stopLocalAudio()
    // 通知父组件停止其他卡片的播放
    emit('video-play', { post: props.post, player, videoId: v.id })
}

/**
 * @description 处理视频暂停事件
 */
const handleVideoPause = () => {
    // 暂无操作
}

// 音频播放逻辑
/**
 * @description 处理音频播放事件
 * @param {Object} player 播放器实例
 */
const handleAudioPlay = (player) => {
    // 停止本地视频
    stopLocalVideos()
    // 通知父组件
    emit('audio-play', { post: props.post, player })
}

/**
 * @description 停止当前卡片内的所有视频
 */
const stopLocalVideos = () => {
    videoRefs.value.forEach(player => {
        if (player && typeof player.pause === 'function') {
            player.pause()
        }
    })
    props.post.videoList.forEach(v => v.isPlaying = false)
}

/**
 * @description 停止当前卡片内的所有音频
 */
const stopLocalAudio = () => {
    audioRefs.value.forEach(player => {
        if (player && typeof player.pause === 'function') {
            player.pause()
        }
    })
    // 同时也需要暂停 AudioPlayer 组件实例
}

// 暴露方法给父组件
defineExpose({
    stopAllMedia: () => {
        stopLocalVideos()
        stopLocalAudio()
    },
    // 暴露 post id 以便父组件查找
    id: props.post.id
})
</script>

<style lang="less" scoped>
.line-clamp-5 {
    display: -webkit-box;
    --webkit-box-orient: vertical;
    --webkit-line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-card {
    background: #fff;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;

    .post-header {
        margin-bottom: 0.5rem;

        .user-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 2.5rem;
            margin-left: 0.5rem;

            .username {
                font-weight: bold;
                font-size: 0.95rem;
                display: flex;
                align-items: center;
            }

            .post-time {
                font-size: 0.75rem;
                color: #999;
            }
        }

        .post-menu {
            display: flex;
            justify-content: flex-end;
            font-size: 1.2rem;
            color: #999;
        }
    }

    .post-content {
        .post-text {
            color: #666;
            margin-bottom: 1rem;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .post-media {
            .post-images {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;

                .post-image-item {
                    width: calc((100% - 1rem) / 3);
                    aspect-ratio: 1 / 1;
                    border-radius: 6px;
                    overflow: hidden;
                }
            }

            .post-video {
                margin: 1rem 0;
                width: 100%;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }

            .post-audio {
                margin: 1rem 0;
            }
        }
    }

    .post-footer {
        margin-top: 1rem;
        color: #666;

        .like-icon {
            margin-right: 0.25rem;
        }

        .like-count {
            font-size: 0.9rem;
        }
    }
}
</style>