<template>
    <div class="messageCard">
        <!-- Header -->
        <div class="messageCard__header">
            <div class="messageCard__headerLeft">
                <span class="messageCard__index">#{{ index }}</span>
                <role-badge :role="message.role" :type="message.type" />
                <token-badge :usage="message.usage" />
            </div>
            <div class="messageCard__headerRight">
                <button
                    :class="['messageCard__toggleBtn', { 'messageCard__toggleBtn--active': showRaw }]"
                    @click="showRaw = !showRaw"
                >
                    {{ showRaw ? 'Formatted' : 'Raw JSON' }}
                </button>
                <button
                    class="messageCard__expandBtn"
                    @click="expanded = !expanded"
                >
                    <svg
                        :class="['messageCard__expandIcon', { 'messageCard__expandIcon--expanded': expanded }]"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
            </div>
        </div>

        <!-- Content -->
        <div v-if="expanded" class="messageCard__body">
            <!-- Raw JSON View -->
            <div v-if="showRaw" class="messageCard__raw">
                <pre class="messageCard__rawPre">{{ rawJson }}</pre>
            </div>

            <!-- Formatted View -->
            <div v-else class="messageCard__formatted">
                <!-- User Message Content -->
                <div v-if="isUserMessage" class="messageCard__section">
                    <label class="messageCard__label">Message</label>
                    <p class="messageCard__userMessage">{{ message.content }}</p>
                </div>

                <!-- Tool Calls -->
                <div v-if="hasToolCalls" class="messageCard__section">
                    <label class="messageCard__label">Tool Calls</label>
                    <div class="messageCard__toolCalls">
                        <tool-call
                            v-for="(call, idx) in message.tool_calls"
                            :key="idx"
                            :call="call"
                        />
                    </div>
                </div>

                <!-- Tools / Tool Results -->
                <div v-if="hasTools" class="messageCard__section">
                    <label class="messageCard__label">
                        {{ message.type === 'tool_call_result' ? 'Tool Result' : 'Tool Execution' }}
                    </label>
                    <div class="messageCard__tools">
                        <tool-result
                            v-for="(tool, idx) in message.tools"
                            :key="idx"
                            :tool="tool"
                        />
                    </div>
                </div>

                <!-- Assistant Response -->
                <div v-if="isAssistantResponse" class="messageCard__section">
                    <label class="messageCard__label">Response</label>
                    <template v-if="isParsedObject">
                        <div class="messageCard__response">
                            <div v-if="parsedContent.response" class="messageCard__responseMessage">
                                <span class="messageCard__responseLabel">Display Message:</span>
                                <p class="messageCard__responseText">{{ parsedContent.response }}</p>
                            </div>
                            <div class="messageCard__responseMeta">
                                <div v-if="parsedContent.productId" class="messageCard__metaItem">
                                    <span class="messageCard__metaLabel">Product ID</span>
                                    <p class="messageCard__metaValue messageCard__metaValue--mono">{{ parsedContent.productId }}</p>
                                </div>
                                <div v-if="parsedContent.name" class="messageCard__metaItem">
                                    <span class="messageCard__metaLabel">Product</span>
                                    <p class="messageCard__metaValue">{{ parsedContent.name }}</p>
                                </div>
                                <div v-if="typeof parsedContent.isMedicalAdvice !== 'undefined'" class="messageCard__metaItem">
                                    <span class="messageCard__metaLabel">Medical Advice</span>
                                    <p :class="['messageCard__metaValue', parsedContent.isMedicalAdvice ? 'messageCard__metaValue--danger' : 'messageCard__metaValue--success']">
                                        {{ parsedContent.isMedicalAdvice ? 'Yes' : 'No' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </template>
                    <p v-else class="messageCard__assistantMessage">
                        {{ parsedContent }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import RoleBadge from './RoleBadge.vue';
import TokenBadge from './TokenBadge.vue';
import ToolCall from './ToolCall.vue';
import ToolResult from './ToolResult.vue';

export default {
    name: 'MessageCard',
    components: {
        RoleBadge,
        TokenBadge,
        ToolCall,
        ToolResult
    },
    props: {
        message: {
            type: Object,
            required: true
        },
        index: {
            type: Number,
            required: true
        },
        forceExpand: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            expanded: true,
            showRaw: false
        };
    },
    watch: {
        forceExpand(val) {
            this.expanded = val;
        }
    },
    computed: {
        parsedContent() {
            if (!this.message.content) return null;
            try {
                return JSON.parse(this.message.content);
            } catch (e) {
                return this.message.content;
            }
        },
        rawJson() {
            return JSON.stringify(this.message, null, 2);
        },
        isUserMessage() {
            return this.message.role === 'user' && this.message.content;
        },
        hasToolCalls() {
            return this.message.tool_calls && this.message.tool_calls.length > 0;
        },
        hasTools() {
            return this.message.tools && this.message.tools.length > 0;
        },
        isAssistantResponse() {
            return this.message.role === 'assistant' && this.message.content && !this.hasToolCalls;
        },
        isParsedObject() {
            return typeof this.parsedContent === 'object' && this.parsedContent !== null;
        }
    }
};
</script>

<style lang="less">
@import "../../../../styles/admin/elements/chat/MessageCard.less";
</style>
