@php
    $theme = setting('dash_theme', 'default');
    $model_label = '';
    try {
        $model_label = \App\Domains\Entity\Enums\EntityEnum::fromSlug($message->model_slug ?? '')->label();
    } catch (RuntimeException | Exception $exception) {
    }

    // Parse reference images from the images field (comma-separated) or from params
    $referenceImages = [];
    if (!empty($message->images)) {
        $referenceImages = array_filter(array_map('trim', explode(',', $message->images)));
    }

    $is_chat_pro =
        \App\Helpers\Classes\MarketplaceHelper::isRegistered('ai-chat-pro') &&
        (route('dashboard.user.openai.chat.pro.index') === $currentUrl ||
            route('chat.pro') === $currentUrl ||
            route('dashboard.user.openai.chat.pro.index') === $previousUrl ||
            route('chat.pro') === $previousUrl);
    $is_chat_pro_image = isset($website_url) && $website_url === 'chatpro-image' && \App\Helpers\Classes\MarketplaceHelper::isRegistered('ai-chat-pro-image-chat');

    $suggestion_style = setting('ai_chat_pro_suggestion_style', 'pill');

    // Get AI-generated images from linked AiChatProImage records (only if extension is installed)
    $aiGeneratedImages = [];
    if ($is_chat_pro_image) {
        if ($message->relationLoaded('aiChatProImages')) {
            foreach ($message->aiChatProImages as $imageRecord) {
                if ($imageRecord->isCompleted() && !empty($imageRecord->generated_images)) {
                    $aiGeneratedImages = array_merge($aiGeneratedImages, $imageRecord->generated_images);
                }
            }
        } else {
            $imageRecords = $message->aiChatProImages()->where('status', \App\Enums\AiImageStatusEnum::COMPLETED)->get();
            foreach ($imageRecords as $imageRecord) {
                if (!empty($imageRecord->generated_images)) {
                    $aiGeneratedImages = array_merge($aiGeneratedImages, $imageRecord->generated_images);
                }
            }
        }
    }
@endphp

<div
    data-message-id="{{ $message->id }}"
    data-title="{{ $message->tiptapContent?->title ?? 'Document' }}"
    data-model="{{ $message->model_slug ?? '' }}"
    @class([
        'lqd-chat-ai-bubble mb-2.5 flex max-w-full content-start items-start gap-2 animating-words-done',
        'w-full' => $is_multi_model_message,
        'w-auto' => !$is_multi_model_message,
    ])
>
    @if ($message->output != null || count($aiGeneratedImages) > 0)
        <div class="lqd-chat-sender flex items-center gap-2.5">
            <span
                class="lqd-chat-avatar mt-0.5 inline-block size-6 shrink-0 rounded-full bg-cover bg-center"
                style="background-image: url('{{ !empty($chat->category?->image) ? custom_theme_url($chat->category?->image, true) : url(custom_theme_url('/assets/img/auth/default-avatar.png')) }}')"
            ></span>
            <span class="lqd-chat-sender-name sr-only">
                {{ __($chat?->category?->name ?? 'AI Assistant') }}
            </span>
        </div>
        <div class="chat-content-container group relative max-w-[calc(100%-64px)] rounded-[2em] bg-clay text-heading-foreground dark:bg-white/[2%]">
            @php
                $has_canvas_content = $canvas_enabled && $message->tiptapContent?->output;
                $output = $has_canvas_content ? $message->tiptapContent?->output : $message->output;

                $output = str_replace(['<br>', '<br/>', '<br >', '<br />'], "\n", $output);
                $output = str_replace('/http', 'http', $output);
            @endphp

            @if ($has_canvas_content && $is_chat_pro)
                <div class="mb-3 w-full">
                    <button
                        class="lqd-chat-bubble-canvas-trigger group/btn flex items-center gap-2 rounded-md border px-3 py-2 text-2xs font-medium transition-all hover:border-foreground hover:bg-foreground hover:text-background group-[&.loading]:pointer-events-none group-[&.streaming-on]:pointer-events-none group-[&.loading]:opacity-50 group-[&.streaming-on]:opacity-50"
                        type="button"
                        @click.prevent="setCanvasActive(true);"
                    >
                        <span
                            class="pointer-events-none inline-grid size-9 place-items-center rounded-full border-none bg-surface-background p-0 text-foreground shadow-lg shadow-black/5 transition-all group-hover/btn:scale-110 group-[&.loading]:scale-90 group-[&.streaming-on]:scale-90"
                        >
                            <x-tabler-pencil class="size-4" />
                        </span>
                        {{ __('Open in Canvas') }}
                    </button>
                </div>
            @endif

            @if ($is_multi_model_message && $is_chat_pro)
                <div class="multi-model-response-head mb-3 hidden w-full items-center gap-4">
                    <svg
                        class="shrink-0"
                        width="15"
                        height="14"
                        viewBox="0 0 15 14"
                        fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M4.76586 11.495L5.08728 11.4297C5.1773 11.4117 5.25828 11.363 5.31647 11.292C5.37466 11.221 5.40645 11.132 5.40645 11.0402C5.40645 10.9484 5.37466 10.8594 5.31647 10.7884C5.25828 10.7174 5.1773 10.6688 5.08728 10.6507L4.76586 10.5854C4.36954 10.505 4.00569 10.3097 3.71974 10.0237C3.43379 9.7378 3.23842 9.37397 3.15801 8.97767L3.09275 8.65626C3.07471 8.56625 3.02605 8.48525 2.95503 8.42706C2.88402 8.36888 2.79504 8.3371 2.70323 8.3371C2.61142 8.3371 2.52245 8.36888 2.45143 8.42706C2.38042 8.48525 2.33175 8.56625 2.3137 8.65626L2.24844 8.97767C2.16804 9.37397 1.97266 9.7378 1.68671 10.0237C1.40076 10.3097 1.03692 10.505 0.640595 10.5854L0.319189 10.6507C0.229171 10.6688 0.148173 10.7174 0.0899825 10.7884C0.0317923 10.8594 0 10.9484 0 11.0402C0 11.132 0.0317923 11.221 0.0899825 11.292C0.148173 11.363 0.229171 11.4117 0.319189 11.4297L0.640595 11.495C1.03692 11.5754 1.40076 11.7708 1.68671 12.0567C1.97266 12.3426 2.16804 12.7065 2.24844 13.1028L2.3137 13.4242C2.33175 13.5142 2.38042 13.5952 2.45143 13.6534C2.52245 13.7116 2.61142 13.7433 2.70323 13.7433C2.79504 13.7433 2.88402 13.7116 2.95503 13.6534C3.02605 13.5952 3.07471 13.5142 3.09275 13.4242L3.15801 13.1028C3.23842 12.7065 3.43379 12.3426 3.71974 12.0567C4.00569 11.7708 4.36954 11.5754 4.76586 11.495Z"
                        />
                        <path
                            d="M12.5567 5.67479L13.7396 5.43497C13.8576 5.41083 13.9637 5.34666 14.0399 5.25332C14.1161 5.15998 14.1577 5.04318 14.1577 4.92269C14.1577 4.80221 14.1161 4.68542 14.0399 4.59208C13.9637 4.49873 13.8576 4.43457 13.7396 4.41042L12.5567 4.1706C11.9869 4.05496 11.4637 3.77405 11.0526 3.36291C10.6414 2.95178 10.3605 2.42865 10.2449 1.85884L10.005 0.67604C9.98131 0.557759 9.91735 0.451342 9.82403 0.374886C9.73071 0.29843 9.61379 0.256653 9.49315 0.256653C9.37251 0.256653 9.25559 0.29843 9.16228 0.374886C9.06896 0.451342 9.00499 0.557759 8.98126 0.67604L8.74143 1.85884C8.62589 2.4287 8.345 2.95188 7.93384 3.36303C7.52267 3.77418 6.99947 4.05506 6.42959 4.1706L5.24674 4.41042C5.12869 4.43457 5.02259 4.49873 4.9464 4.59208C4.87022 4.68542 4.8286 4.80221 4.8286 4.92269C4.8286 5.04318 4.87022 5.15998 4.9464 5.25332C5.02259 5.34666 5.12869 5.41083 5.24674 5.43497L6.42959 5.67479C6.99947 5.79032 7.52267 6.07121 7.93384 6.48236C8.345 6.89351 8.62589 7.4167 8.74143 7.98656L8.98126 9.16936C9.00499 9.28764 9.06896 9.39404 9.16228 9.4705C9.25559 9.54695 9.37251 9.58874 9.49315 9.58874C9.61379 9.58874 9.73071 9.54695 9.82403 9.4705C9.91735 9.39404 9.98131 9.28764 10.005 9.16936L10.2449 7.98656C10.3605 7.41674 10.6414 6.89361 11.0526 6.48248C11.4637 6.07135 11.9869 5.79042 12.5567 5.67479Z"
                        />
                    </svg>

                    <span class="multi-model-response-name inline-block max-w-full truncate text-[12px] font-medium underline underline-offset-4">
                        {{ $model_label }}
                    </span>

                    {{-- <div class="multi-model-response-actions contents shrink-0">
						<x-button
							class="multi-model-response-regenerate size-8 shrink-0 rounded-full p-0"
							data-message-id="{{ $message->id }}"
							data-model="{{ $message->model_slug ?? '' }}"
							size="none"
							variant="outline"
						>
							<x-tabler-rotate class="size-4" />
						</x-button>
					</div> --}}
                </div>
            @endif

            @php
                // For AI Chat Pro Image: add image markdown to output if we have generated images but no markdown in output
                if ($is_chat_pro_image && count($aiGeneratedImages) > 0) {
                    $hasImageMarkdown = preg_match('/!\[.*?\]\(.*?\)/', $output);
                    if (!$hasImageMarkdown) {
                        $imageMarkdown =
                            "::: lqd-chat-image-grid \n" . implode('', array_map(fn($imagePath) => "![Generated Image]({$imagePath})", $aiGeneratedImages)) . "\n::: \n";
                        $output = $imageMarkdown . $output;
                    }
                }
            @endphp

            <pre @class([
                'chat-content prose relative w-full max-w-none !whitespace-pre-wrap px-6 py-3.5 indent-0 font-[inherit] text-xs font-normal text-current [word-break:break-word] empty:hidden [&_*]:text-current',
                'is-html' => $has_canvas_content,
            ])>{{ $has_canvas_content ? str()->of($output)->toHtmlString() : $output }}</pre>

            <div
                class="lqd-chat-actions-wrap pointer-events-auto invisible absolute -end-5 bottom-0 flex flex-col gap-2 opacity-0 transition-all group-hover:!visible group-hover:!opacity-100">
                @if ($is_chat_pro_image)
                    <button
                        class="lqd-reimagine-images group/btn relative inline-flex size-10 items-center justify-center rounded-full border-none bg-white p-0 text-[12px] text-black shadow-lg transition-all hover:-translate-y-[2px] hover:scale-110"
                        title="{{ __('Reimagine') }}"
                        @click.prevent="$store.chatsV2.reimagineImages($event, $el)"
                    >
                        <span
                            class="pointer-events-none absolute end-full top-1/2 me-1 inline-block -translate-y-1/2 translate-x-1 whitespace-nowrap rounded-full bg-white px-3 py-1 font-medium leading-5 opacity-0 shadow-lg transition-all group-hover/btn:translate-x-0 group-hover/btn:opacity-100"
                        >
                            {{ __('Reimagine') }}
                        </span>
                        <x-tabler-rotate class="size-4" />
                    </button>

                    <button
                        class="lqd-download-images group/btn relative inline-flex size-10 items-center justify-center rounded-full border-none bg-white p-0 text-[12px] text-black shadow-lg transition-all hover:-translate-y-[2px] hover:scale-110"
                        title="{{ __('Download images') }}"
                        x-data="{ downloading: false }"
                        @click.prevent="$store.chatsV2.downloadBubbleImages($event, $el)"
                        :disabled="downloading"
                    >
                        <span
                            class="pointer-events-none absolute end-full top-1/2 me-1 inline-block -translate-y-1/2 translate-x-1 whitespace-nowrap rounded-full bg-white px-3 py-1 font-medium leading-5 opacity-0 shadow-lg transition-all group-hover/btn:translate-x-0 group-hover/btn:opacity-100"
                        >
                            {{ __('Download images') }}
                        </span>
                        <x-tabler-download
                            class="size-4"
                            x-show="!downloading"
                        />
                        <x-tabler-loader-2
                            class="size-4 animate-spin"
                            x-show="downloading"
                            x-cloak
                        />
                    </button>
                @endif

                <div class="lqd-clipboard-copy-wrap group/copy-wrap flex flex-col gap-2 transition-all">
                    <button
                        class="lqd-clipboard-copy group/btn relative inline-flex size-10 items-center justify-center rounded-full border-none bg-white p-0 text-[12px] text-black shadow-lg transition-all hover:-translate-y-[2px] hover:scale-110"
                        data-copy-options='{ "content": ".chat-content", "contentIn": "<.chat-content-container" }'
                        title="{{ __('Copy to clipboard') }}"
                    >
                        <span
                            class="pointer-events-none absolute end-full top-1/2 me-1 inline-block -translate-y-1/2 translate-x-1 whitespace-nowrap rounded-full bg-white px-3 py-1 font-medium leading-5 opacity-0 shadow-lg transition-all group-hover/btn:translate-x-0 group-hover/btn:opacity-100"
                        >
                            {{ __('Copy to clipboard') }}
                        </span>
                        <x-tabler-copy class="size-4" />
                    </button>
                </div>

                @if (\App\Helpers\Classes\MarketplaceHelper::isRegistered('canvas') && (bool) setting('ai_chat_pro_canvas', 1) && $is_chat_pro)
                    <button
                        class="lqd-chat-bubble-canvas-trigger group/btn inline-flex size-10 items-center justify-center rounded-full border-none bg-white p-0 text-[12px] text-black shadow-lg transition-all hover:-translate-y-[2px] hover:scale-110"
                        type="button"
                        @click.prevent="setCanvasActive(true);"
                    >
                        <span
                            class="pointer-events-none absolute end-full top-1/2 me-1 inline-block -translate-y-1/2 translate-x-1 whitespace-nowrap rounded-full bg-white px-3 py-1 font-medium leading-5 opacity-0 shadow-lg transition-all group-hover/btn:translate-x-0 group-hover/btn:opacity-100"
                        >
                            {{ __('Open in Canvas') }}
                        </span>
                        <x-tabler-edit class="size-4" />
                    </button>
                @endif
            </div>

            @if ($is_multi_model_message && $is_chat_pro)
                <div class="multi-model-response-foot hidden">
                    <x-button
                        class="multi-model-response-accept mt-3 p-0 text-[12px] underline underline-offset-4"
                        data-message-id="{{ $message->id }}"
                        data-model="{{ $message->model_slug ?? '' }}"
                        size="none"
                        variant="none"
                    >
                        <x-tabler-thumb-up class="size-4" />
                        {{ __('I prefer this response') }}
                    </x-button>
                </div>
            @endif
        </div>
    @endif
    @php
        $showSuggestions = ($is_chat_pro || $is_chat_pro_image) && ($isLastMessage ?? false);
        $suggestionsResponse = $showSuggestions && $message ? $message->suggestions_response : null;
        $suggestionsData = is_array($suggestionsResponse) && isset($suggestionsResponse['suggestions']) ? $suggestionsResponse['suggestions'] : [];
    @endphp
    @if (!empty($suggestionsData) && is_array($suggestionsData) && $showSuggestions)
        <div @class(['lqd-chat-bubble-foot', 'mt-2' => $is_chat_pro])>
            <div
                @class([
                    'lqd-chat-bubble-suggestions empty:hidden',
                    'flex flex-wrap gap-2' =>
                        $is_chat_pro_image || $suggestion_style === 'pill',
                    'flex flex-col gap-1 items-start' =>
                        $is_chat_pro && $suggestion_style === 'inline',
                ])
                x-data='{ suggestions: @json($suggestionsData) }'
            >
                <template
                    x-for="(suggestion, index) in suggestions"
                    x-key="index"
                >
                    <x-button
                        @class([
                            'text-3xs font-semibold text-primary hover:bg-primary hover:text-primary-foreground' =>
                                $is_chat_pro_image || $suggestion_style === 'pill',
                            'bg-primary/5' => $is_chat_pro_image || $suggestion_style === 'pill',
                            'border bg-transparent hover:border-primary' =>
                                $is_chat_pro && $suggestion_style === 'pill',
                            'dark:text-accent dark:hover:text-primary-foreground' =>
                                $theme === 'social-media-dashboard' && $suggestion_style === 'pill',
                            'px-0 py-1.5 text-start justify-start [font-weight:inherit]' =>
                                $is_chat_pro && $suggestion_style === 'inline',
                            'hover:text-primary' => $suggestion_style === 'inline',
                        ])
                        variant="none"
                        type="button"
                        ::data-prompt="suggestion"
                        @click.prevent="$store.chatsV2.onSuggestionClick($event)"
                    >
                        @if ($is_chat_pro && $suggestion_style === 'inline')
                            <span class="-scale-x-100">↵</span>
                        @endif
                        <span x-text="suggestion"></span>
                    </x-button>
                </template>
            </div>
        </div>
    @endif
</div>

@if (count($referenceImages) > 0)
    <div class="lqd-chat-image-bubble mb-2 flex !w-fit max-w-[50%] !flex-row content-end gap-2 !px-3 !py-2.5 last:mb-0 lg:ms-auto lg:justify-self-end">
        @foreach ($referenceImages as $refImage)
            <a
                class="inline-flex w-40 shrink-0 items-center gap-1.5"
                data-fslightbox="gallery"
                data-type="image"
                href="{{ $refImage }}"
            >
                <img
                    class="img-content w-full"
                    loading="lazy"
                    src="{{ $refImage }}"
                />
            </a>
        @endforeach
    </div>
@endif

@if ($message->outputImage != null && $message->outputImage != '')
    <div class="lqd-chat-image-bubble mb-2 flex !w-fit max-w-[50%] !flex-row content-end gap-2 !px-3 !py-2.5 last:mb-0 lg:ms-auto lg:justify-self-end">
        <a
            class="inline-flex w-40 shrink-0 items-center gap-1.5"
            data-fslightbox="gallery"
            data-type="image"
            href="{{ $message->outputImage }}"
        >
            <img
                class="img-content w-full"
                loading="lazy"
                src="{{ $message->outputImage }}"
            />
        </a>
    </div>
@endif