<template>
    <div class="agentAdminContainer">
        <h1 class="agentAdminContainer__title">AI Chatbot</h1>
        <AdminTabs :data="data" :on-refresh="fetchData"/>
    </div>
</template>

<script>

import AdminTabs from "./tabs.vue";

export default {
    name:'AgentAdminContainer',
    components: {AdminTabs},
    data() {
        return {
            data: []
        };
    },
    methods: {
        async fetchData() {
            const response = await fetch('/admin/agent/chat-history');
            const data = await response.json();
            this.data = (data.messages || []).map(item => {
                // Truncate message for preview
                let messagePreview = '';
                try {
                    const parsed = JSON.parse(item.messages);
                    messagePreview = (Array.isArray(parsed) && parsed.length > 0) ? parsed[0].content : '';
                } catch (e) {
                    messagePreview = 'Unable to parse message';
                }

                return {
                    id: item.id,
                    chat: messagePreview,
                    date: item.updated_at,
                    messages: item.messages,
                    created_at: item.created_at
                };
            });
        }
    },
    mounted() {
        this.fetchData();
    }
}
</script>

<style lang="less">
@import "../../styles/admin/container.less";
</style>
