<template>
    <div v-if="message?.from === 'administrator' || message?.from === 'System message' || message?.from === '系统消息' || message?.flow === 'out'"
        class="message-info-collect-tip-only">
        {{ tipText }}
    </div>

    <div v-else-if="message?.flow === 'in' && message?.from !== 'administrator'" class="message-info-collect-container">
        <div class="message-info-collect-title">
            <div class="message-info-collect-title-text">{{ tipText }}</div>
        </div>

        <div v-for="(variable, index) in inputVariables" :key="`${variable.name}-${variable.variableValue}-${index}`"
            class="message-info-collect-item">
            <div class="message-info-collect-item-label">
                <span v-if="variable.isRequired === 1" class="message-info-collect-required">*</span>
                <span class="message-info-collect-name" :class="{ 'is-required': variable.isRequired === 1 }">
                    {{ variable.name }}
                </span>
            </div>
            <div class="message-info-collect-value">{{ variable.variableValue }}</div>
        </div>
    </div>
</template>

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

import type { IMessageModel } from '@tencentcloud/ai-desk-core'

interface InputVariable {
    variableValue?: unknown
    name?: unknown
    isRequired?: unknown
}

interface MessageInfoCollectData {
    content?: {
        tip?: unknown
        inputVariables?: InputVariable[] | null
    } | null
    nodeStatus?: number
}

interface NormalizedInputVariable {
    variableValue: string
    name: string
    isRequired: number
}

interface Props {
    message: IMessageModel
    data?: MessageInfoCollectData | null
}

const { message, data } = defineProps<Props>()

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

    if (typeof input === 'number' || typeof input === 'boolean') {
        return String(input)
    }

    return ''
}

const safeToNumber = (input: unknown): number => {
    const parsed = Number(input)
    return Number.isNaN(parsed) ? 0 : parsed
}

const tipText = computed(() => {
    return safeToString(data?.content?.tip)
})

const inputVariables = computed<NormalizedInputVariable[]>(() => {
    const variables = data?.content?.inputVariables
    if (!Array.isArray(variables)) {
        return []
    }

    return variables.map((variable) => {
        return {
            variableValue: safeToString(variable?.variableValue),
            name: safeToString(variable?.name),
            isRequired: safeToNumber(variable?.isRequired),
        }
    })
})
</script>

<style scoped>
.message-info-collect-tip-only {
    word-break: break-all;
    overflow-wrap: break-word;
}

.message-info-collect-container {
    word-break: break-all;
    font-size: 14px;
    padding: 0 0 0 6px;
    min-width: 270px;
    box-sizing: border-box;
}

.message-info-collect-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.message-info-collect-title-text {
    max-width: 210px;
    word-break: break-all;
}

.message-info-collect-item {
    margin-bottom: 16px;
}

.message-info-collect-item:last-child {
    margin-bottom: 0;
}

.message-info-collect-item-label {
    display: flex;
    align-items: flex-start;
}

.message-info-collect-required {
    color: red;
    line-height: 1.5;
}

.message-info-collect-name {
    padding-left: 8px;
}

.message-info-collect-name.is-required {
    padding-left: 2px;
}

.message-info-collect-value {
    margin-top: 6px;
    margin-left: 10px;
    word-break: break-all;
}
</style>
