<template>
    <div class="product-card" @click="handleCardClick">
        <div v-if="topFields.length > 0" class="custom-field-group custom-field-group--top">
            <div v-for="(item, index) in topFields" :key="`top-${item.name}-${item.value}-${index}`"
                class="custom-field-item-container">
                <div class="custom-field-item-title">{{ item.name }}:</div>
                <div class="custom-field-item-value">{{ item.value }}</div>
            </div>
        </div>

        <div class="product-card-main">
            <img v-if="imageUrl" :src="imageUrl" alt="" class="product-card-image">
            <div v-else class="product-card-image product-card-image--placeholder"></div>

            <div class="product-card-content">
                <div class="product-card-header">{{ header }}</div>
                <div class="product-card-desc">{{ desc }}</div>
            </div>
        </div>

        <div v-if="bottomFields.length > 0" class="custom-field-group custom-field-group--bottom">
            <div v-for="(item, index) in bottomFields" :key="`bottom-${item.name}-${item.value}-${index}`"
                class="custom-field-item-container">
                <div class="custom-field-item-title">{{ item.name }}:</div>
                <div class="custom-field-item-value">{{ item.value }}</div>
            </div>
        </div>
    </div>
</template>

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

import AIDeskCoreInstance, { type IMessageModel } from '@tencentcloud/ai-desk-core'
import type { customerServicePayloadType } from '../../../../../utils'

interface NormalizedCustomFieldItem {
    name: string
    value: string
    position: 'top' | 'bottom'
}

interface Props {
    payload?: customerServicePayloadType
    message: IMessageModel
}

const props = defineProps<Props>()

const safeToString = (input: unknown): string => {
    if (typeof input === 'string') {
        return input
    }

    return ''
}

const normalizePosition = (position: unknown): 'top' | 'bottom' => {
    const stringPosition = safeToString(position).toLowerCase()
    return stringPosition === 'top' ? 'top' : 'bottom'
}

const normalizedCustomFields = computed<NormalizedCustomFieldItem[]>(() => {
    const customFields = props.payload?.content?.customField
    if (!Array.isArray(customFields)) {
        return []
    }

    return customFields.map((item) => {
        return {
            name: safeToString(item?.name),
            value: safeToString(item?.value),
            position: normalizePosition(item?.position),
        }
    })
})

const topFields = computed(() => {
    return normalizedCustomFields.value.filter((item) => item.position === 'top')
})

const bottomFields = computed(() => {
    return normalizedCustomFields.value.filter((item) => item.position === 'bottom')
})

const imageUrl = computed(() => {
    return safeToString(props.payload?.content?.pic)
})

const header = computed(() => {
    return safeToString(props.payload?.content?.header)
})

const desc = computed(() => {
    return safeToString(props.payload?.content?.desc)
})

const cardUrl = computed(() => {
    return safeToString(props.payload?.content?.url)
})

const handleCardClick = () => {
    if (props.payload?.isCustomerClick) {
        AIDeskCoreInstance.SDKInstance.emit('onChatMessageClick', { message: props.message })
        return
    }

    if (!cardUrl.value || typeof window === 'undefined') {
        return
    }

    window.open(cardUrl.value, '_blank')
}
</script>

<style scoped>
.product-card {
    display: flex;
    background-color: transparent;
    cursor: pointer;
    flex-direction: column;
}

.custom-field-group--top {
    margin-bottom: 10px;
}

.custom-field-group--bottom {
    margin-top: 10px;
}

.product-card-main {
    display: flex;
}

.product-card-image {
    width: 60px;
    height: 60px;
    object-fit: fill;
    border-radius: 6px;
    flex-shrink: 0;
}

.product-card-image--placeholder {
    background: #f3f4f7;
}

.product-card-content {
    padding: 0;
    display: flex;
    margin: 0 10px;
    min-width: 150px;
    flex-direction: column;
    justify-content: space-between;
}

.product-card-header {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    word-break: break-all;
    max-width: 250px;
}

.product-card-desc {
    font-size: 14px;
    word-break: break-all;
    max-width: 250px;
    color: #1c66e5;
    font-weight: 600;
}

.custom-field-item-container {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 4px;
}

.custom-field-item-container:last-child {
    margin-bottom: 0;
}

.custom-field-item-title {
    max-width: 100px;
    font-size: 12px;
    font-weight: 400;
    color: #878787;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

.custom-field-item-value {
    max-width: 200px;
    font-size: 12px;
    color: #000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    margin-left: 10px;
}
</style>
