<template>
    <navigator :url="detailUrl" class="translated-article-card" :class="cardClass">
        <view class="translated-article-card__content">
            <view v-if="item.image" class="translated-article-card__media">
                <image class="translated-article-card__image" :src="item.image" mode="aspectFill" />
            </view>
            <view class="translated-article-card__title">{{ item.title }}</view>
            <view v-if="translatedTitle" class="translated-article-card__title-translate">{{ translatedTitle }}</view>
            <view v-if="descText" class="translated-article-card__desc">{{ descText }}</view>
            <view v-if="translatedDesc" class="translated-article-card__desc-translate">{{ translatedDesc }}</view>
        </view>
        <view class="translated-article-card__footer">
            <text class="translated-article-card__author">{{ item.author || authorFallback }}</text>
            <text class="translated-article-card__meta">{{ commentText }}</text>
            <text class="translated-article-card__meta">{{ formatTime(item.create_time) }}</text>
        </view>
    </navigator>
</template>

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

const props = withDefaults(
    defineProps<{
        item: any
        variant?: 'feed' | 'worldcup'
        authorFallback?: string
        commentPrefix?: string
    }>(),
    {
        item: () => ({}),
        variant: 'feed',
        authorFallback: '体育小编',
        commentPrefix: ''
    }
)

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

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

const translatedParts = computed(() => {
    const text = stripText(props.item.translated_content || props.item.worldcup_translated_content || '')
    if (!text) {
        return {
            title: '',
            desc: '',
            body: ''
        }
    }

    const titleMatch = text.match(/(?:^|\s)(?:标题|title)[:：]\s*([\s\S]*?)(?=\s*(?:摘要|正文|desc|summary|content|body)[:：]|$)/i)
    const descMatch = text.match(/(?:^|\s)(?:摘要|desc|summary)[:：]\s*([\s\S]*?)(?=\s*(?:正文|content|body)[:：]|$)/i)
    const bodyMatch = text.match(/(?:^|\s)(?:正文|content|body)[:：]\s*([\s\S]*)$/i)

    return {
        title: stripText(props.item.translated_title || titleMatch?.[1] || ''),
        desc: stripText(props.item.translated_desc || props.item.translated_abstract || descMatch?.[1] || ''),
        body: stripText(bodyMatch?.[1] || (!titleMatch && !descMatch ? text : ''))
    }
})

const cardClass = computed(() => `translated-article-card--${props.variant}`)

const detailUrl = computed(() => `/pages/news_detail/news_detail?id=${props.item.id}`)

const descText = computed(() => {
    return truncateText(stripText(props.item.desc || props.item.abstract || props.item.content || ''), props.variant === 'worldcup' ? 100 : 88)
})

const translatedTitle = computed(() => {
    return truncateText(translatedParts.value.title, props.variant === 'worldcup' ? 42 : 48)
})

const translatedDesc = computed(() => {
    return truncateText(translatedParts.value.desc || translatedParts.value.body, props.variant === 'worldcup' ? 78 : 126)
})

const commentText = computed(() => {
    return `${props.commentPrefix}${props.item.comment_count || props.item.click || 0}评论`
})

const formatTime = (t: string) => {
    if (!t) return ''
    const d = new Date(String(t).replace(/-/g, '/'))
    if (isNaN(d.getTime())) return t
    const y = d.getFullYear()
    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')
    if (props.variant === 'worldcup') {
        return `${y}-${m}-${day} ${h}:${min}`
    }
    return `${m}-${day} ${h}:${min}`
}
</script>

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

    &--feed {
        padding: 24rpx 30rpx;
    }

    &--worldcup {
        padding: 22rpx 20rpx 18rpx 0;
        border-bottom-color: #edf0f5;
    }

    &__content {
        min-width: 0;
        overflow: hidden;
    }

    &__media {
        float: right;
        width: 260rpx;
        height: 180rpx;
        margin: 0 0 12rpx 20rpx;
        overflow: hidden;
        border-radius: 8rpx;
        background: #e5eaf1;
    }

    &--worldcup &__media {
        width: 232rpx;
        height: 180rpx;
        margin-left: 18rpx;
        border-radius: 0;
    }

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

    &__title {
        font-size: 28rpx;
        line-height: 1.35;
        font-weight: 700;
        color: #07111f;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    &--worldcup &__title {
        font-size: 34rpx;
        line-height: 1.38;
    }

    &__title-translate {
        display: block;
        margin-top: 8rpx;
        font-size: 28rpx;
        line-height: 1.45;
        color: #17365f;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    &--worldcup &__title-translate {
        margin-top: 10rpx;
        color: #2c3f58;
    }

    &__desc,
    &__desc-translate {
        display: block;
        margin-top: 10rpx;
        font-size: 24rpx;
        line-height: 1.55;
        word-break: break-word;
    }

    &--worldcup &__desc,
    &--worldcup &__desc-translate {
        margin-top: 12rpx;
        font-size: 25rpx;
        line-height: 1.58;
    }

    &__desc {
        color: #6f7b8d;
    }

    &--worldcup &__desc {
        color: #0f243d;
    }

    &__desc-translate {
        color: #17365f;
    }

    &--worldcup &__desc-translate {
        color: #42566f;
    }

    &__footer {
        display: flex;
        align-items: center;
        gap: 18rpx;
        margin-top: 16rpx;
        min-width: 0;
        overflow: hidden;
    }

    &--worldcup &__footer {
        margin-top: 18rpx;
    }

    &__author,
    &__meta {
        font-size: 23rpx;
        line-height: 1.3;
        color: #9aa3af;
        white-space: nowrap;
        flex-shrink: 0;
    }

    &--worldcup &__author,
    &--worldcup &__meta {
        font-size: 22rpx;
        color: #8190a3;
    }

    &__author {
        max-width: 160rpx;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &--worldcup &__author {
        max-width: 220rpx;
    }
}
</style>
