<template>
    <view class="video-card">
        <view class="video-card__main">
            <view class="video-card__info">
                <view class="video-card__title" @tap="goDetail">{{ item.title }}</view>
                <view v-if="descText" class="video-card__desc" @tap="goDetail">{{ descText }}</view>
                <view class="video-card__footer" @tap="goDetail">
                    <text class="video-card__author">{{ item.author || '体育小编' }}</text>
                    <text class="video-card__meta">{{ formatTime(item.create_time) }}</text>
                    <view class="video-card__right">
                        <text class="video-card__meta">{{ item.click || 0 }}播放</text>
                    </view>
                </view>
            </view>
            <view class="video-card__cover">
                <video v-if="playing" class="video-card__video" :src="videoSrc" :poster="item.image" :autoplay="true"
                    :show-fullscreen-btn="true" :show-play-btn="true" :controls="true" object-fit="contain"
                    @ended="playing = false" @error="handleVideoError" />
                <template v-else>
                    <image class="video-card__img" :src="item.image || '/static/images/default_cover.png'"
                        mode="aspectFill" />
                    <view class="video-card__play" @tap.stop="handlePlay">
                        <view class="video-card__play-btn">
                            <view class="video-card__play-icon" />
                        </view>
                    </view>
                    <view v-if="item.duration" class="video-card__duration">
                        <text>{{ item.duration }}</text>
                    </view>
                </template>
            </view>
        </view>
        <view v-if="translatedPreview" class="video-card__translate" @tap="goDetail">
            <text class="video-card__translate-text">{{ translatedPreview }}</text>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

const props = withDefaults(
    defineProps<{
        item: any
    }>(),
    {
        item: () => ({})
    }
)

const playing = ref(false)

const extractVideoFromContent = (content: string): string => {
    if (!content) return ''
    const m = content.match(/src="(https?:\/\/[^\"]+\.mp4[^\"]*)"/i)
    return m ? m[1] : ''
}

const videoSrc = computed(() => {
    if (props.item.video_url) return props.item.video_url
    return extractVideoFromContent(props.item.content)
})

const handlePlay = () => {
    if (!videoSrc.value) {
        uni.navigateTo({ url: `/pages/news_detail/news_detail?id=${props.item.id}` })
        return
    }
    playing.value = true
}

const handleVideoError = () => {
    playing.value = false
    uni.showToast({ title: '视频加载失败', icon: 'none' })
}

const goDetail = () => {
    uni.navigateTo({ url: `/pages/news_detail/news_detail?id=${props.item.id}` })
}

const stripHtml = (html: string) => {
    if (!html) return ''
    return html
        .replace(/<[^>]+>/g, '')
        .replace(/&nbsp;/g, ' ')
        .replace(/\s+/g, ' ')
        .trim()
}

const descText = computed(() => {
    if (props.item.desc) return props.item.desc
    if (props.item.content) return stripHtml(props.item.content).substring(0, 100)
    return ''
})

const normalizeText = (text: string) => {
    if (!text) return ''
    return text
        .replace(/<[^>]+>/g, ' ')
        .replace(/&nbsp;/g, ' ')
        .replace(/\s+/g, ' ')
        .trim()
}

const truncateText = (text: string, maxLength = 90) => {
    if (!text) return ''
    if (text.length <= maxLength) return text
    return `${text.slice(0, maxLength).trimEnd()}...`
}

const translatedPreview = computed(() => {
    const text = normalizeText(props.item.translated_content || '')
    return truncateText(text, 90)
})

const formatTime = (t: string) => {
    if (!t) return ''
    const d = new Date(t.replace(/-/g, '/'))
    if (isNaN(d.getTime())) return t
    const m = String(d.getMonth() + 1).padStart(2, '0')
    const day = String(d.getDate()).padStart(2, '0')
    const h = String(d.getHours()).padStart(2, '0')
    const min = String(d.getMinutes()).padStart(2, '0')
    return `${m}-${day} ${h}:${min}`
}
</script>

<style lang="scss" scoped>
.video-card {
    display: block;
    padding: 24rpx 30rpx;
    background: #fff;
    border-bottom: 1rpx solid #f0f0f0;

    &__main {
        display: flex;
        gap: 20rpx;
        align-items: flex-start;
    }

    &__info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
    }

    &__title {
        font-size: 32rpx;
        font-weight: 500;
        color: #222;
        line-height: 1.5;
        margin-bottom: 12rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
    }

    &__desc {
        font-size: 24rpx;
        color: #808080;
        margin-top: -8rpx;
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &__cover {
        position: relative;
        width: 260rpx;
        height: 380rpx;
        border-radius: 12rpx;
        overflow: hidden;
        flex-shrink: 0;
    }

    &__img {
        width: 100%;
        height: 100%;
    }

    &__video {
        width: 100%;
        height: 100%;
    }

    &__play {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__play-btn {
        width: 84rpx;
        height: 84rpx;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__play-icon {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 14rpx 0 14rpx 24rpx;
        border-color: transparent transparent transparent #185dff;
        margin-left: 6rpx;
    }

    &__duration {
        position: absolute;
        right: 16rpx;
        bottom: 16rpx;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 22rpx;
        padding: 4rpx 12rpx;
        border-radius: 6rpx;
    }

    &__translate {
        margin-top: 10rpx;
        width: 100%;
        box-sizing: border-box;
        padding-left: 4rpx;
    }

    &__translate-text {
        display: block;
        font-size: 22rpx;
        color: #3b4b66;
        line-height: 1.75;
        white-space: pre-wrap;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &__footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 16rpx;
        gap: 20rpx;
        white-space: nowrap;
        overflow: hidden;
    }

    &__author {
        font-size: 24rpx;
        color: #999;
        white-space: nowrap;
        flex-shrink: 0;
    }

    &__meta {
        font-size: 24rpx;
        color: #bbb;
        white-space: nowrap;
        flex-shrink: 0;
    }

    &__right {
        margin-left: auto;
        flex-shrink: 0;
    }
}
</style>
