@props([
    'showHeading' => false,
    'sourceType' => 'general',
    'sourceId' => null,
    'defaultSubject' => null,
])

@php
    $baseUrl = url('/'.app()->getLocale().'/assistant');
    $labels = [
        'otp_resend' => __('assistant.otp_resend'),
        'otp_confirm' => __('assistant.otp_confirm'),
        'change_phone' => __('assistant.change_phone'),
        'session_error' => __('assistant.session_not_found'),
        'restart_confirm' => __('assistant.restart_confirm'),
    ];
@endphp

<div
    class="site-assistant"
    x-data="siteLeadAssistant({
        baseUrl: @js($baseUrl),
        locale: @js(app()->getLocale()),
        sourceType: @js($sourceType),
        sourceId: @js($sourceId),
        labels: @js($labels),
    })"
    x-effect="renderMessages()"
>
    <div class="site-assistant-room">
        <div class="site-assistant-room__toolbar">
            <button
                type="button"
                class="site-assistant-room__restart"
                @click="restartChat()"
                :disabled="loading || typing"
            >{{ __('assistant.restart') }}</button>
        </div>

        <div class="site-assistant-room__scroll" x-ref="scroll">
            <div class="site-assistant-room__messages" x-ref="messages"></div>
            <p x-show="error" x-text="error" class="site-assistant-error" x-cloak></p>
        </div>

        <div class="site-assistant-room__footer">
            <div class="site-assistant-actions" x-show="quickActions().length" x-cloak>
                <template x-for="action in quickActions()" :key="action.id">
                    <button
                        type="button"
                        class="site-assistant-chip site-assistant-chip--action"
                        :class="{ 'is-disabled': action.disabled, 'site-assistant-chip--highlight': action.id === 'view_requests' }"
                        :disabled="action.disabled || loading || typing"
                        @click="fireAction(action)"
                        x-text="action.label"
                    ></button>
                </template>
            </div>

            <form class="site-assistant-composer" @submit.prevent="sendMessage()" x-show="showComposer()" x-cloak>
                <input type="file" accept="image/jpeg,image/png,image/webp,image/gif,image/*,video/mp4,video/webm,video/quicktime,video/*" class="sr-only" x-ref="file" @change="onFileChange($event)" />
                <button
                    type="button"
                    class="site-assistant-composer__icon"
                    @click="$refs.file.click()"
                    :disabled="loading || typing"
                    title="Image"
                    aria-label="Image"
                >
                    <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 7a2 2 0 0 1 2-2h2l1.2-1.6A2 2 0 0 1 10.8 2h2.4a2 2 0 0 1 1.6.8L16 5h2a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z"/><circle cx="12" cy="13" r="3.5"/></svg>
                </button>
                <input
                    type="text"
                    class="site-assistant-composer__input"
                    x-ref="composer"
                    x-model="input"
                    :placeholder="@js(__('assistant.input_placeholder'))"
                    autocomplete="off"
                    @keydown.enter="if (!$event.isComposing) { $event.preventDefault(); sendMessage(); }"
                />
                <button
                    type="submit"
                    class="site-assistant-composer__send"
                    :disabled="loading || typing || !input.trim()"
                    aria-label="Send"
                >
                    <svg viewBox="0 0 24 24" class="h-6 w-6" fill="currentColor"><path d="M3.4 20.6 21 12 3.4 3.4l.1 6.7L14 12 3.5 13.9z"/></svg>
                </button>
            </form>
        </div>
    </div>
</div>