<template>
    <div class="conversationStats">
        <div class="conversationStats__card">
            <p class="conversationStats__label">Messages</p>
            <p class="conversationStats__value">{{ data.length }}</p>
        </div>
        <div class="conversationStats__card">
            <p class="conversationStats__label">User</p>
            <p class="conversationStats__value conversationStats__value--user">{{ userMessages }}</p>
        </div>
        <div class="conversationStats__card">
            <p class="conversationStats__label">Assistant</p>
            <p class="conversationStats__value conversationStats__value--assistant">{{ assistantMessages }}</p>
        </div>
        <div class="conversationStats__card">
            <p class="conversationStats__label">Tool Calls</p>
            <p class="conversationStats__value conversationStats__value--tool">{{ toolCalls }}</p>
        </div>
        <div class="conversationStats__card">
            <p class="conversationStats__label">Tokens</p>
            <p class="conversationStats__value conversationStats__value--tokens">
                {{ formattedTokensIn }} / {{ formattedTokensOut }}
            </p>
            <p class="conversationStats__sublabel">in / out</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ConversationStats',
    props: {
        data: {
            type: Array,
            required: true
        }
    },
    computed: {
        totalTokensIn() {
            return this.data.reduce((sum, m) => sum + (m.usage?.input_tokens || 0), 0);
        },
        totalTokensOut() {
            return this.data.reduce((sum, m) => sum + (m.usage?.output_tokens || 0), 0);
        },
        formattedTokensIn() {
            return this.totalTokensIn.toLocaleString();
        },
        formattedTokensOut() {
            return this.totalTokensOut.toLocaleString();
        },
        toolCalls() {
            return this.data.filter(m => m.type === 'tool_call' || (m.tool_calls && m.tool_calls.length > 0)).length;
        },
        userMessages() {
            return this.data.filter(m => m.role === 'user' && m.content).length;
        },
        assistantMessages() {
            return this.data.filter(m => m.role === 'assistant' && m.content).length;
        }
    }
};
</script>

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