<template>
    <div class="adminTabsComponent">
        <div class="adminTabsComponent__container">
            <div class="adminTabsComponent__card">
                <div class="adminTabsComponent__header">
                    <div class="adminTabsComponent__headerRow">
                        <nav class="adminTabsComponent__nav">
                            <button
                                v-for="tab in tabs"
                                :key="tab.id"
                                @click="setActiveTab(tab.id)"
                                :class="['adminTabsComponent__tab', { 'adminTabsComponent__tab--active': activeTab === tab.id }]"
                            >
                                <span class="adminTabsComponent__icon" v-html="tab.icon"></span>
                                {{ tab.label }}
                            </button>
                        </nav>
                        <button
                            v-if="activeTab !== 'context' && !viewingChat"
                            class="adminTabsComponent__refreshBtn"
                            :class="{ 'adminTabsComponent__refreshBtn--spinning': refreshing }"
                            :disabled="refreshing"
                            @click="handleRefresh"
                            title="Refresh"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
                        </button>
                    </div>
                </div>

                <div class="adminTabsComponent__body">
                    <div class="adminTabsComponent__text">
                        <ChatHistory
                            v-if="activeTab === 'chats' && viewingChat"
                            :messages="selectedChat.messages || []"
                            :conversation-id="selectedChat.id || ''"
                            :date="selectedChat.date || ''"
                            @back="handleBackToTable"
                        />
                        <component
                            v-else-if="activeContent.componentName"
                            :is="activeContent.componentName"
                            ref="activeComponent"
                            :data="data"
                            @view="handleViewChat"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import DataTable from './table.vue';
import Metrics from "./metrics.vue";
import Settings from "./settings.vue";
import ChatHistory from "./chatHistory.vue";
import Context from "./context.vue";
export default {
    name: 'AdminTabs',
    components: { DataTable, Metrics, Settings, ChatHistory, Context },
    data() {
        return {
            activeTab: 'metrics',
            refreshing: false,
            viewingChat: false,
            selectedChat: null,
            tabs: [
                {
                    id: 'metrics',
                    label: 'Metrics',
                    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>'
                },
                {
                    id: 'chats',
                    label: 'Chats',
                    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>'
                },
                {
                    id: 'context',
                    label: 'Context',
                    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>'
                },
                {
                    id: 'settings',
                    label: 'Settings',
                    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>'
                },
            ],
            tabContent: {
                metrics: {
                    componentName: 'Metrics'
                },
                chats: {
                    componentName: 'DataTable'
                },
                settings: {
                    componentName: 'Settings'
                },
                context: {
                    componentName: 'Context'
                }
            }
        };
    },
    computed: {
        activeContent() {
            return this.tabContent[this.activeTab];
        }
    },
    methods: {
        setActiveTab(tabId) {
            this.activeTab = tabId;
            this.viewingChat = false;
            this.selectedChat = null;
        },
        handleViewChat(chatData) {
            // Parse messages if it's a JSON string
            let messages = chatData.messages;
            if (typeof messages === 'string') {
                try {
                    messages = JSON.parse(messages);
                } catch (e) {
                    messages = [];
                }
            }
            this.selectedChat = {
                ...chatData,
                messages: messages || []
            };
            this.viewingChat = true;
        },
        handleBackToTable() {
            this.viewingChat = false;
            this.selectedChat = null;
        },
        async handleRefresh() {
            if (this.refreshing) return;
            this.refreshing = true;

            try {
                if (this.activeTab === 'chats' && this.onRefresh) {
                    await this.onRefresh();
                } else if (this.$refs.activeComponent && typeof this.$refs.activeComponent.refresh === 'function') {
                    await this.$refs.activeComponent.refresh();
                }
            } finally {
                this.refreshing = false;
            }
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        },
        onRefresh: {
            type: Function,
            default: null
        }
    }
};
</script>

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