{{--
    Ported from the design's chat.php. Markup and classes are the design's; the
    transcript and the campaign are ours.

    The campaign drawer is an addition. The design has no place for campaign
    state, and the product cannot ship without it, so it slides over rather than
    displacing the chat. Raised with design rather than reshaping their layout.
--}}
<x-mb-layout :page-title="$pageTitle ?? 'New chat'" :conversations="$conversations" :conversation-id="$conversationId" campaign-panel :has-campaign="$hasCampaign ?? false">

    <section class="mb-chat{{ !empty($hasCampaign) ? ' has-campaign-open' : '' }}" data-context="Create a new ad campaign">
        <div class="mb-chat-scroll" id="chatScroll">
            @if (empty($transcript))
                <div class="mb-starters" id="starterPrompts">
                    <div class="mb-starters-title">What would you like to build today?</div>
                    <div class="mb-starters-grid">
                        <button type="button" class="mb-starter-card" data-action="starter" data-prompt="Create a new Meta ad campaign">
                            <div class="mb-starter-icon"><i class="bi bi-meta"></i></div>
                            <div class="mb-starter-body">
                                <strong>Meta Ads Campaign</strong>
                                <span>Drive traffic and conversions across Facebook & Instagram feeds and stories</span>
                            </div>
                        </button>
                        <button type="button" class="mb-starter-card" data-action="starter" data-prompt="Create a new Google Ads campaign">
                            <div class="mb-starter-icon"><i class="bi bi-google"></i></div>
                            <div class="mb-starter-body">
                                <strong>Google Ads Campaign</strong>
                                <span>Capture high-intent searches with Search, Display, and Performance Max</span>
                            </div>
                        </button>
                        <button type="button" class="mb-starter-card" data-action="starter" data-prompt="Create a new LinkedIn campaign">
                            <div class="mb-starter-icon"><i class="bi bi-linkedin"></i></div>
                            <div class="mb-starter-body">
                                <strong>LinkedIn Ads Campaign</strong>
                                <span>Engage decision-makers, professionals, and targeted B2B audiences</span>
                            </div>
                        </button>
                        <button type="button" class="mb-starter-card" data-action="starter" data-prompt="Create a new TikTok campaign">
                            <div class="mb-starter-icon"><i class="bi bi-tiktok"></i></div>
                            <div class="mb-starter-body">
                                <strong>TikTok Ads Campaign</strong>
                                <span>Reach new audiences with short-form video and conversion campaigns</span>
                            </div>
                        </button>
                    </div>
                </div>
            @endif

            <div id="msgs" class="d-flex flex-column">
                @foreach ($transcript as $message)
                    <div class="mb-msg{{ $message['role'] === 'user' ? ' me' : '' }}">
                        @if ($message['html'])
                            {!! $message['html'] !!}
                        @else
                            {{ $message['text'] }}
                        @endif
                    </div>
                @endforeach
            </div>
        </div>

        <button type="button" class="mb-scroll-bottom-pill d-none" id="scrollBottomBtn" aria-label="Scroll to newest messages">
            New messages <i class="bi bi-arrow-down-short"></i>
        </button>

        <div id="dropOverlay" class="mb-drop-overlay d-none">
            <i class="bi bi-cloud-arrow-up mb-drop-icon"></i>
            <span class="mb-drop-text">Drop image or video files to attach</span>
        </div>

        <div class="mb-composer-wrap">
            <div class="mb-composer" id="composerBox">
                <div class="mb-attachments" id="attachments"></div>
                <textarea rows="1" placeholder="{{ empty($transcript) ? 'Describe your campaign or paste a landing page URL...' : 'Type your message...' }}" aria-label="Message" id="composer"></textarea>
                <div class="mb-composer-bar">
                    <button class="mb-icon-btn" data-pop="attach" aria-label="Add attachment" aria-haspopup="menu"><i class="bi bi-plus-lg"></i></button>
                    <div class="d-flex align-items-center">
                        <span id="composerCounter" class="mb-char-counter small" aria-live="polite"></span>
                        <button class="mb-send" data-action="send" aria-label="Send"><i class="bi bi-arrow-up"></i></button>
                    </div>
                </div>
                <input type="file" id="fileInput" multiple hidden accept="image/*,video/mp4,video/quicktime">
            </div>
        </div>

        {{-- Attach popover, ported from the design's attach-menu.php. "Upload from
             Library" is left out: the creative library is another team's module
             and is not wired yet, so offering it would do nothing. --}}
        <div class="mb-pop mb-menu mb-attach-menu d-none" id="pop-attach" role="menu">
            <button type="button" class="mb-menu-item" data-action="attach-file" role="menuitem"><i class="bi bi-paperclip"></i>Attach file</button>
        </div>
    </section>

    {{-- Campaign drawer: not in the design, see the note at the top. --}}
    <aside class="mb-campaign{{ !empty($hasCampaign) ? ' open' : '' }}" id="campaignDrawer" aria-label="Campaign">
        <div class="mb-campaign-head">
            <strong>Campaign</strong>
            <button class="mb-icon-btn" data-action="toggle-campaign" aria-label="Close campaign"><i class="bi bi-x-lg"></i></button>
        </div>
        <div class="mb-campaign-body" id="panel">{!! $panelHtml !!}</div>
        <div class="mb-campaign-foot">
            <button id="publish" class="btn btn-primary w-100" @disabled(! $ready || $published)>
                {{ $published ? 'Published' : 'Publish' }}
            </button>
            <div id="publishNote" class="mb-campaign-note"></div>
        </div>
    </aside>

    @push('scripts')
        <script>
            window.chat = {
                conversation: @json($conversationId),
                sendUrl: @json(route('chat.send')),
                publishUrl: @json(route('chat.publish')),
                decideUrl: @json(route('chat.decide')),
                viewUrl: @json(route('chat.view')),
                awaiting: @json($awaiting ?? []),
                choices: @json($choices ?? []),
                hasCampaign: @json((bool) ($hasCampaign ?? false)),
                token: @json(csrf_token()),
            };
        </script>
        <script src="{{ asset('assets/js/chat.js') }}?v={{ filemtime(public_path('assets/js/chat.js')) }}"></script>
    @endpush
</x-mb-layout>