<template>
    <div class="chatHistoryAdmin">
        <!-- Header -->
        <div class="chatHistoryAdmin__header">
            <div class="chatHistoryAdmin__header__inner">
                <div class="chatHistoryAdmin__header__content">
                    <div class="chatHistoryAdmin__header__left">
                        <div class="chatHistoryAdmin__logo">
                            <svg class="chatHistoryAdmin__logo__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                            </svg>
                        </div>
                        <div class="chatHistoryAdmin__header__text">
                            <h1 class="chatHistoryAdmin__title">Chat History Viewer</h1>
                            <p class="chatHistoryAdmin__subtitle">Conversation ID: {{ conversationId }} • {{ date }}</p>
                        </div>
                    </div>
                    <div class="chatHistoryAdmin__header__actions">
                        <button
                            class="chatHistoryAdmin__button chatHistoryAdmin__button--back"
                            @click="$emit('back')"
                        >
                            <svg class="chatHistoryAdmin__button__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                            </svg>
                            Back to Table
                        </button>
                        <button
                            class="chatHistoryAdmin__button chatHistoryAdmin__button--secondary"
                            @click="toggleExpandAll"
                        >
                            {{ expandAll ? 'Collapse All' : 'Expand All' }}
                        </button>
                        <button
                            class="chatHistoryAdmin__button chatHistoryAdmin__button--primary"
                            @click="exportJson"
                        >
                            <svg class="chatHistoryAdmin__button__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                            </svg>
                            Export JSON
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="chatHistoryAdmin__content">
            <!-- Stats -->
            <conversation-stats :data="messages" class="chatHistoryAdmin__stats" />

            <!-- Timeline -->
            <div class="chatHistoryAdmin__timeline">
                <message-card
                    v-for="(message, index) in messages"
                    :key="index"
                    :message="message"
                    :index="index"
                    :force-expand="expandAll"
                />
            </div>
        </div>
    </div>
</template>

<script>


import ConversationStats from "./elements/chat/ConversationStats.vue";
import MessageCard from "./elements/chat/MessageCard.vue";

export default {
    name: 'ChatHistoryAdmin',
    components: {
        ConversationStats,
        MessageCard
    },
    emits: ['back'],
    props: {
        messages: {
            type: Array,
            default: () => []
        },
        conversationId: {
            type: [String, Number],
            default: 'conv_abc123'
        },
        date: {
            type: String,
            default: 'Dec 28, 2025'
        }
    },
    data() {
        return {
            expandAll: true
        };
    },
    methods: {
        toggleExpandAll() {
            this.expandAll = !this.expandAll;
        },
        exportJson() {
            const dataStr = JSON.stringify(this.messages, null, 2);
            const dataBlob = new Blob([dataStr], { type: 'application/json' });
            const url = URL.createObjectURL(dataBlob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `chat-history-${this.conversationId}.json`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        }
    }
};
</script>

<style lang="less">
.chatHistoryAdmin {
    min-height: 100vh;
    background-color: #f3f4f6;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    &__header {
        background-color: #ffffff;
        border-bottom: 1px solid #e5e7eb;
        position: sticky;
        top: 0;
        z-index: 10;

        &__inner {
            max-width: 72rem;
            margin: 0 auto;
            padding: 1rem;
        }

        &__content {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        &__left {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        &__text {
            display: flex;
            flex-direction: column;
        }

        &__actions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
    }

    &__logo {
        width: 2.5rem;
        height: 2.5rem;
        background-color: #111827;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;

        &__icon {
            width: 1.25rem;
            height: 1.25rem;
            color: #ffffff;
        }
    }

    &__title {
        font-size: 1.125rem;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }

    &__subtitle {
        font-size: 0.875rem;
        color: #6b7280;
        margin: 0;
    }

    &__button {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        border-radius: 0.5rem;
        border: none;
        cursor: pointer;
        transition: background-color 0.15s ease;
        display: flex;
        align-items: center;
        gap: 0.25rem;

        &--secondary {
            background-color: #f3f4f6;
            color: #374151;

            &:hover {
                background-color: #e5e7eb;
            }
        }

        &--primary {
            background-color: #111827;
            color: #ffffff;

            &:hover {
                background-color: #1f2937;
            }
        }


        &--back {
            background-color: #ffffff;
            color: #374151;
            border: 1px solid #d1d5db;

            &:hover {
                background-color: #f9fafb;
            }
        }

        &__icon {
            width: 1rem;
            height: 1rem;
        }
    }

    &__content {
        max-width: 72rem;
        margin: 0 auto;
        padding: 1.5rem 1rem;
    }

    &__stats {
        margin-bottom: 1.5rem;
    }

    &__timeline {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}


</style>
