<template>
    <div class="chatActions">
        <div class="chatActions__left">
            <button
                type="button"
                @click="startRecording"
                v-if="!isRecording"
                :disabled="isLoading"
                class="chatButton chatButton--record"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
                </svg>
                Record
            </button>

            <button
                type="button"
                @click="stopRecording"
                v-if="isRecording"
                class="chatButton chatButton--stop"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd" />
                </svg>
                Stop
            </button>

            <div v-show="audioUrl" class="audio-preview">
                <audio ref="recordedAudio" controls></audio>
            </div>
        </div>

        <button
            type="submit"
            :disabled="isLoading || !message"
            class="chatButton chatButton--send"
        >
            {{ isLoading ? 'Sending...' : 'Send Message' }}
        </button>
    </div>
</template>

<script>
export default {
    name: 'chatActions',
    props: {
        isRecording: {
            type: Boolean,
            default: false
        },
        isLoading: {
            type: Boolean,
            default: false
        },
        audioUrl: {
            type: String,
            default: ''
        },
        message: {
            type: String,
            default: ''
        }
    },
    methods: {
        startRecording() {
            this.$emit('start-recording');
        },
        stopRecording() {
            this.$emit('stop-recording');
        }
    }
}
</script>

<style lang="less" scoped>
.chatActions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-gray);

    @media (min-width: 640px) {
        flex-direction: row;
    }

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

/* Desktop view for actions */




/* -- Buttons -- */
.chatButton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background-color 0.2s;

    &--record {
        background-color: #0AC054;
        color: white;
    }

    &--record:hover {
        background-color: #19c45e;
    }

    &--stop {
        background-color: #800000;
        color: white;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    &--stop:hover {
        background-color: #a00000;
    }

    &--send {
        width: 100%;
        padding: 0.75rem 1.5rem;
        background: #0A48AC;
        color: white;
        font-weight: 600;
        border-radius: 0.75rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        transform: scale(1);
        transition: transform 0.1s, box-shadow 0.2s;

        @media (min-width: 640px) {
            width: auto;
        }
    }

    &--send:hover:not(:disabled) {
        background: linear-gradient(to right, #1d4ed8, #4338ca);
        transform: scale(1.02);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    }

    &--send:active:not(:disabled) {
        transform: scale(0.98);
    }

    &--send:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

</style>
