<template>
    <section class="container py-4">
        <div class="card border-0 shadow-sm">
            <div class="card-body d-flex flex-column" style="min-height: 70vh">
                <h1 class="card-title text-primary mb-3">💬 Chat with Eira</h1>
                <p class="lead mb-3">Ask anything or get help with your day.</p>
                <!-- Chat Messages -->
                <div class="flex-grow-1 overflow-auto mb-3 bg-light rounded p-3 shadow-sm" style="max-height: 50vh">
                    <div v-for="(message, index) in messages" :key="index" class="mb-2">
                        <div :class="message.sender === 'user' ? 'text-end' : 'text-start'">
                            <span :class="['d-inline-block px-3 py-2 rounded', message.sender === 'user' ? 'bg-primary text-white' : 'bg-white text-dark shadow-sm']">
                                {{ message.text }}
                            </span>
                        </div>
                    </div>
                </div>
                <!-- Input -->
                <div class="input-group">
                    <input v-model="userInput" @keydown.enter="sendMessage" type="text" class="form-control" placeholder="Type your message..." />
                    <button class="btn btn-primary" :disabled="loading || !userInput.trim()" @click="sendMessage">
                        Send
                    </button>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
export default {
    name: "ChatView",
    data() {
        return {
            userInput: "",
            messages: [],
            loading: false,
        };
    },
    methods: {
        async sendMessage() {
            const input = this.userInput.trim();
            if (!input) return;

            // Add user message to history
            this.messages.push({ sender: "user", text: input });
            this.userInput = "";
            this.loading = true;

            try {
                const response = await fetch("https://192.168.70.11:8000/chat", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ message: input }),
                });

                if (!response.ok) throw new Error("Failed to get Eira's response");

                const data = await response.json();
                const reply = data.reply || "I'm not sure how to respond to that.";

                this.messages.push({ sender: "eira", text: reply });
            } catch (error) {
                console.error("Chat error:", error);
                this.messages.push({ sender: "eira", text: "Sorry, something went wrong." });
            } finally {
                this.loading = false;
                this.$nextTick(() => {
                    const container = this.$el.querySelector(".overflow-auto");
                    container.scrollTop = container.scrollHeight;
                });
            }
        },
    },
};
</script>
<style scoped>
.text-primary {
    color: #6f42c1 !important;
}
</style>