<template>
    <div class="chat-widget">

        <!-- Chat Popup Window -->
        <transition name="fade">
            <div v-if="isOpen" class="chat-widget__popup">
                <AgentChatComponent :toggleChat="toggleChat"></AgentChatComponent>
            </div>
        </transition>

        <!-- The Toggle Button -->
        <button
            type="button"
            class="chat-widget__toggle"
            :class="{ 'chat-widget__toggle--active': isOpen }"
            @click="toggleChat"
            aria-label="Open Chat"
        >
            <span class="chat-widget__text" v-if="!isOpen">AI</span>
            <span class="chat-widget__text" v-else>Close</span>

            <!-- Icon SVG -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="chat-widget__icon">
                <path opacity=".4" d="M48 240c0 42.8 15.1 82.4 41.2 114.7 12.2 15.1 14.1 36.1 4.8 53.2l-18 33.1 58.5-25.1c11.8-5.1 25.2-5.2 37.1-.3 25.7 10.5 54.2 16.4 84.3 16.4 117.8 0 208-88.8 208-192S373.8 48 256 48 48 136.8 48 240z"/>
                <path d="M51.9 384.9C19.3 344.6 0 294.4 0 240 0 107.5 114.6 0 256 0S512 107.5 512 240 397.4 480 256 480c-36.5 0-71.2-7.2-102.6-20L37 509.9c-3.7 1.6-7.5 2.1-11.5 2.1-14.1 0-25.5-11.4-25.5-25.5 0-4.3 1.1-8.5 3.1-12.2l48.8-89.4zm37.3-30.2c12.2 15.1 14.1 36.1 4.8 53.2l-18 33.1 58.5-25.1c11.8-5.1 25.2-5.2 37.1-.3 25.7 10.5 54.2 16.4 84.3 16.4 117.8 0 208-88.8 208-192S373.8 48 256 48 48 136.8 48 240c0 42.8 15.1 82.4 41.2 114.7z"/>
            </svg>
        </button>
    </div>
</template>

<script>
import AgentChatComponent from "./agent.vue";

export default {
    name: 'ChatWidget',
    components: {AgentChatComponent},
    data() {
        return {
            isOpen: false
        }
    },
    methods: {
        toggleChat() {
            this.isOpen = !this.isOpen;
        }
    }
}
</script>

<style scoped lang="less">
/* Variables for consistency */
@color-primary: #2563eb;
@color-primary-hover: #1d4ed8;
@color-dark: #374151;
@color-dark-hover: #1f2937;
@color-text-muted: #9ca3af;
@color-white: #ffffff;
@color-border: #e5e7eb;
@font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

/* BEM Block */
.chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: @font-stack;

    /* BEM Element: Popup */
    &__popup {
        background-color: @color-white;
        border-radius: 8px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border: 1px solid @color-border;
        margin-bottom: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: @color-text-muted;
    }

    /* BEM Element: Toggle Button */
    &__toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        background-color: @color-primary;
        color: @color-white;
        font-weight: 600;
        padding: 12px 20px;
        border-radius: 9999px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 16px;

        &:hover {
            background-color: @color-primary-hover;
            transform: scale(1.05);

            /* Nested interaction with icon */
            .chat-widget__icon {
                transform: rotate(12deg);
            }
        }

        /* BEM Modifier: Active State */
        &--active {
            background-color: @color-dark;

            &:hover {
                background-color: @color-dark-hover;
            }
        }
    }

    /* BEM Element: Icon */
    &__icon {
        width: 20px;
        height: 20px;
        fill: currentColor;
        transition: transform 0.2s;
    }
}

/* Vue Transitions (Utility) */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s, transform 0.3s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
    transform: translateY(20px);
}
</style>
