<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 ml-2 inline-flex items-center rounded-full border border-green-300 bg-green-50 px-2 py-0.5 text-xs font-medium text-green-600"
                >补打卡</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 mt-1 cursor-pointer text-sm text-blue-500"
          @click.stop="toggleExpand"
        >
          {{ isExpanded ? '收起' : '全文' }}
        </div>
      </div>

      <div v-if="hasFeedbackList" class="feedback-list mt-4 space-y-3">
        <div v-for="feedback in post.feedback_list" :key="feedback.id" class="feedback-item">
          <div
            v-if="feedback.time"
            class="feedback-time mb-2 flex items-center text-xs text-gray-500"
          >
            <van-icon name="calendar-o" size="14" color="#10b981" class="mr-1" />
            <span>{{ feedback.time }}</span>
          </div>

          <div v-if="feedback.note" class="feedback-note mb-2 flex items-start">
            <van-icon name="chat-o" size="14" color="#3b82f6" class="mr-2 mt-0.5" />
            <div class="text-sm leading-6 text-gray-700">{{ feedback.note }}</div>
          </div>

          <div v-if="feedback.score > 0" class="feedback-score flex items-center">
            <van-icon name="star-o" size="14" color="#f59e0b" class="mr-2" />
            <span class="mr-2 text-xs text-gray-500">评分</span>
            <van-rate
              :model-value="feedback.score"
              :size="14"
              color="#ffd21e"
              void-color="#eee"
              readonly
            />
          </div>
        </div>
      </div>

      <!-- 媒体内容 -->
      <div class="post-media mt-2">
        <!-- 多附件Tab模式 -->
        <div v-if="mediaTabs.length > 1" class="media-tabs">
          <!-- 移除 animated 和 swipeable 属性，避免多 tab 高度不一致时容器被最高的内容撑开，导致短内容下方出现空白 -->
          <van-tabs v-model:active="activeTab" shrink 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 overflow-hidden rounded-lg"
                      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="h-full w-full object-contain"
                      />
                      <div
                        class="absolute inset-0 flex cursor-pointer items-center justify-center bg-black/20"
                        @click="startPlay(v)"
                      >
                        <div
                          class="flex h-16 w-16 items-center justify-center rounded-full bg-black/50 transition-colors hover:bg-black/70"
                        >
                          <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 overflow-hidden rounded-lg"
                      :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 overflow-hidden rounded-lg"
                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="h-full w-full object-contain"
                />
                <div
                  class="absolute inset-0 flex cursor-pointer items-center justify-center bg-black/20"
                  @click="startPlay(v)"
                >
                  <div
                    class="flex h-16 w-16 items-center justify-center rounded-full bg-black/50 transition-colors hover:bg-black/70"
                  >
                    <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 overflow-hidden rounded-lg"
                :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 hasFeedbackList = computed(
  () => Array.isArray(props.post.feedback_list) && props.post.feedback_list.length > 0
)

// 文本折叠逻辑
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;
    }

    .feedback-list {
      .feedback-item {
        padding: 0.75rem;
        border-radius: 0.75rem;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
      }
    }

    .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>