<template>
    <div class="chatFooter">
        <form @submit.prevent="handleSubmit" class="input-form">
            <div class="input-field-group">

                <div class="text-input-wrapper">
                    <input
                        type="text"
                        v-model="text"
                        placeholder="Ask a question..."
                        class="text-input"
                    />
                    <div class="accessory-icons">
                        <button type="button" class="icon-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Pro v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path opacity=".4" d="M144 96l0 128c0 26.5 21.5 48 48 48s48-21.5 48-48l0-128c0-26.5-21.5-48-48-48s-48 21.5-48 48z"/><path d="M192 48c26.5 0 48 21.5 48 48l0 128c0 26.5-21.5 48-48 48s-48-21.5-48-48l0-128c0-26.5 21.5-48 48-48zM96 96l0 128c0 53 43 96 96 96s96-43 96-96l0-128c0-53-43-96-96-96S96 43 96 96zM48 184c0-13.3-10.7-24-24-24S0 170.7 0 184l0 40c0 97.9 73.3 178.7 168 190.5l0 49.5-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-49.5c94.7-11.8 168-92.6 168-190.5l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 79.5-64.5 144-144 144S48 303.5 48 224l0-40z"/></svg>
                        </button>
                    </div>
                </div>

                <button type="submit" :class="['send-btn', { active: isSendButtonActive }]">
                    ↑
                </button>
            </div>
        </form>
        <div class="privacy-policy-bar">
            By chatting with us, you agree to our <a href="#">Privacy Policy</a>
        </div>
    </div>
</template>

<script>
export default {
    name:'ChatFooter',
    // 1. Reactive state is defined in the data() function
    data() {
        return {
            text: '',
        };
    },

    // 2. Logic that depends on reactive data is defined in computed properties
    computed: {
        isSendButtonActive() {
            // Returns true if the text is not empty or only whitespace
            return this.text.trim().length > 0;
        },
    },

    // 3. Functions that handle events or business logic are defined in methods
    methods: {
        handleSubmit() {
            // We check the reactive property 'text'
            if (this.isSendButtonActive) {
                // Replace this console log with your actual logic (e.g., emitting an event)
                console.log('Sending message:', this.text);

                fetch('/agent/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ message: this.text }),
                })

                // Clear input after sending
                this.text = '';
            }
        },
    },
};
</script>

<style scoped>
/*
|---------------------------------------------
| CSS STYLES (Scoped for this component)
|---------------------------------------------
*/

/* Container for the whole input area (text box + policy text) */
.chatFooter {
    padding: 10px 15px; /* Padding for the entire bottom bar */
    border-top: 1px solid #e5e7eb; /* Separator line */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    position: sticky; /* Keep it at the bottom */
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Form layout for the input bar itself */
.input-form {
    margin-bottom: 8px; /* Space above the privacy policy text */
}

.input-field-group {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between the attachment, input field, and send button */
}

/* Style for the main text input wrapper (the large, rounded box) */
.text-input-wrapper {
    flex-grow: 1; /* Allows the input box to take up most of the space */
    display: flex;
    align-items: center;
    background-color: #f3f3f3; /* Slightly lighter dark background for the input field */
    border-radius: 25px; /* Greatly rounded corners */
    padding: 8px 15px;
    min-height: 48px;
}

/* The actual text input element */
.text-input {
    flex-grow: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 16px;
    padding: 0;
    margin-right: 10px;
}

.text-input::placeholder {
    color: #adb5bd; /* Lighter placeholder text */
}

/* Accessory icons (emoji, mic, GIF) inside the input field */
.accessory-icons {
    display: flex;
    gap: 5px;
}

/* Base style for all icon buttons */
.icon-btn {
    background: none;
    border: none;
    color: #adb5bd;
    cursor: pointer;
    padding: 5px;
    font-size: 20px;
    transition: color 0.2s;
}

.icon-btn:hover {
    color: #ffffff; /* Brighter color on hover */
}

/* Attachment button outside the main input box */
.attachment-btn {
    font-size: 24px;
}

/* Send button (the upward arrow) */
.send-btn {
    background-color: #495057; /* Default gray background */
    color: #dee2e6;
    border: none;
    border-radius: 50%; /* Make it a perfect circle */
    width: 40px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    cursor: not-allowed;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Active state when there is text in the input */
.send-btn.active {
    background-color: #007bff; /* Bright blue background for active state */
    color: #ffffff; /* White arrow */
    cursor: pointer;
}

/* Privacy policy text at the very bottom */
.privacy-policy-bar {
    text-align: center;
    font-size: 12px;
    color: #adb5bd;
}

.privacy-policy-bar a {
    color: #007bff;
    text-decoration: none;
}

.privacy-policy-bar a:hover {
    text-decoration: underline;
}
</style>
