{{--
    Chat shell for prompt-only landing pages. Markup matches campaign chat;
    the campaign drawer is omitted so this stays a single composer and result.
--}}
<x-mb-layout :page-title="$page?->displayTitle() ?? 'New prompt page'" :conversations="$conversations" :conversation-id="null">
    @php
        $setupComplete = $page?->hasSetup() ?? false;
        $composerLocked = $page?->composerLocked() ?? true;
    @endphp

    @push('styles')
        <link href="{{ asset('assets/mb/css/prompt-landing-pages.css') }}?v={{ filemtime(public_path('assets/mb/css/prompt-landing-pages.css')) }}" rel="stylesheet">
    @endpush

    <section class="mb-chat mb-chat--prompt" data-context="Create a landing page for ">
        @if (session('status'))
            <div class="mb-chat-status" role="status">
                <div class="mb-note is-info"><i class="bi bi-info-circle"></i><div>{{ session('status') }}</div></div>
            </div>
        @endif
        <div class="mb-page-toolbar">
            <div class="mb-page-toolbar-actions">
                <a href="{{ route('landing-pages.index', ['tab' => 'prompt']) }}" class="btn btn-outline-secondary btn-sm">Back to listing</a>
                <a href="{{ route('prompt-landing-pages.create') }}" class="btn btn-outline-secondary btn-sm">New landing page</a>
            </div>
            <div id="pageToolbarActions" class="mb-page-toolbar-actions" @if (! ($page?->isReady() ?? false)) hidden @endif>
                <a id="pageDownload" class="btn btn-primary btn-sm" href="{{ $page?->canDownload() ? route('prompt-landing-pages.download', $page) : '#' }}" @if (! ($page?->canDownload() ?? false)) hidden @endif>Download HTML</a>
                <a id="pageEditor" class="btn btn-outline-secondary btn-sm" href="{{ $page?->canEdit() ? route('prompt-landing-pages.editor', $page) : '#' }}" @if (! ($page?->canEdit() ?? false)) hidden @endif>Edit page</a>
                <a id="pagePreview" class="btn btn-outline-secondary btn-sm" href="{{ $page?->isReady() ? route('prompt-landing-pages.preview', $page) : '#' }}" target="_blank" rel="noopener noreferrer">Open preview</a>
                <a id="pagePartnerLink" class="btn btn-outline-secondary btn-sm" href="{{ $page?->partnerPreviewUrl() ?: '#' }}" target="_blank" rel="noopener noreferrer" @if (! $page?->partnerPreviewUrl()) hidden @endif>Partner link</a>
                <span id="pageApproval" class="mb-page-toolbar-actions" @if (! ($page?->canApprove() ?? false)) hidden @endif>
                    <button type="button" class="btn btn-primary btn-sm" id="pageApprove">Approve</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="pageReject">Reject</button>
                </span>
                <span id="pageApprovalStatus" class="mb-page-review-status" data-state="{{ $page?->isApproved() ? 'approved' : ($page?->isRejected() ? 'rejected' : '') }}" @if (! ($page?->isApproved() || $page?->isRejected())) hidden @endif>{{ $page?->isApproved() ? 'Approved' : 'Rejected' }}</span>
                <span class="mb-page-setup-error" id="pageApprovalError" hidden></span>
            </div>
        </div>

        <div class="mb-chat-scroll" id="chatScroll">
            @if (empty($transcript) && ($page?->hasSetup() ?? false) && ! ($page?->isReady() ?? false))
                <button class="mb-suggest" data-action="suggest">Create a landing page</button>
            @endif

            <div id="msgs" class="d-flex flex-column">
                @if ($setupComplete)
                    <div class="mb-msg me mb-msg--setup" id="pageSetupSummary">
                        <div class="mb-msg-text">Website: {{ $page->website_url }}
Purpose: {{ $page->purpose }}</div>
                    </div>
                @endif
                @foreach ($transcript as $message)
                    <div class="mb-msg{{ $message['role'] === 'user' ? ' me' : '' }}">
                        @if (! empty($message['attachments']))
                            <div class="mb-msg-files">
                                @foreach ($message['attachments'] as $file)
                                    <a class="mb-file-card" href="{{ $file['download_url'] }}" download="{{ $file['name'] }}" title="Download {{ $file['name'] }}">
                                        <div class="mb-file-card-preview">
                                            @if (($file['preview'] ?? '') === 'image')
                                                <img src="{{ $file['url'] }}" alt="">
                                            @elseif (($file['preview'] ?? '') === 'pdf')
                                                <iframe src="{{ $file['url'] }}#toolbar=0&navpanes=0&scrollbar=0" title="{{ $file['name'] }}" tabindex="-1"></iframe>
                                            @else
                                                <i class="bi bi-file-earmark-text" aria-hidden="true"></i>
                                            @endif
                                            @if (($file['badge'] ?? '') !== '')
                                                <span class="mb-file-card-badge">{{ $file['badge'] }}</span>
                                            @endif
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        @endif
                        <div class="mb-msg-text">{!! $message['html'] ?: e($message['text']) !!}</div>
                    </div>
                @endforeach
            </div>

            <div id="agentStatus" class="mb-agent-status" @if (! ($page?->isBusy() ?? false)) hidden @endif>
                <span class="mb-agent-status-dot" aria-hidden="true"></span>
                <span id="agentStatusLabel">{{ $page?->statusLabel() ?: 'Searching…' }}</span>
            </div>

            <div id="pageResult" class="mb-page-result" data-host="{{ $page?->displayWebsite() }}" @if (! ($page?->isReady() ?? false)) hidden @endif>
                @if ($page?->isReady())
                    <iframe title="Landing page preview" src="{{ route('prompt-landing-pages.preview', $page) }}" tabindex="-1"></iframe>
                @endif
            </div>
        </div>

        @unless ($setupComplete)
            <div class="mb-page-setup" id="pageSetup">
                <form id="pageSetupForm">
                    <p class="mb-page-setup-lead">First, tell us the website to match and what this page is for.</p>
                    <div class="mb-page-setup-fields">
                        <label class="mb-page-setup-field">
                            <span>Website domain <span class="mb-page-setup-req" aria-hidden="true">*</span></span>
                            <input type="text" name="website_url" id="setupWebsiteUrl" value="{{ $page?->website_url }}" placeholder="lucos.com or https://lucos.com" autocomplete="url" required>
                        </label>
                        <label class="mb-page-setup-field">
                            <span>Purpose of this landing page <span class="mb-page-setup-req" aria-hidden="true">*</span></span>
                            <select name="purpose" id="setupPurpose" required>
                                <option value="" disabled @selected(blank($page?->purpose))>Select purpose</option>
                                @foreach ($purposes as $purpose)
                                    <option value="{{ $purpose }}" @selected($page?->purpose === $purpose)>{{ $purpose }}</option>
                                @endforeach
                            </select>
                        </label>
                    </div>
                    <p class="mb-page-setup-error" id="pageSetupError" hidden></p>
                    <button type="submit" class="btn btn-primary btn-sm" id="pageSetupSave">Save and continue</button>
                </form>
            </div>
        @endunless

        <div class="mb-composer-wrap">
            <div class="mb-composer{{ $composerLocked ? ' is-locked' : '' }}" id="composerBox">
                <div class="mb-attachments" id="attachments"></div>
                <textarea rows="1" placeholder="Describe the landing page..." aria-label="Message" id="composer" @disabled($composerLocked)></textarea>
                <div class="mb-composer-bar">
                    <button class="mb-icon-btn" data-pop="attach" aria-label="Add attachment" aria-haspopup="menu" @disabled($composerLocked)><i class="bi bi-plus-lg"></i></button>
                    <button class="mb-send" data-action="send" aria-label="Send" @disabled($composerLocked)><i class="bi bi-arrow-up"></i></button>
                </div>
                <input type="file" id="fileInput" multiple hidden accept=".pdf,.txt,.md,image/jpeg,image/png,image/gif,image/webp" @disabled($composerLocked)>
            </div>
        </div>

        <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>

    @push('scripts')
        <script>
            window.promptLandingPageChat = {
                page: @json($page?->id),
                sendUrl: @json(route('prompt-landing-pages.send')),
                setupUrl: @json(route('prompt-landing-pages.setup')),
                statusUrl: @json($page ? route('prompt-landing-pages.status', $page) : null),
                showUrl: @json($page ? route('prompt-landing-pages.show', $page) : null),
                approveUrl: @json($page ? route('prompt-landing-pages.approve', $page) : null),
                rejectUrl: @json($page ? route('prompt-landing-pages.reject', $page) : null),
                busy: @json($page?->isBusy() ?? false),
                setupComplete: @json($setupComplete),
                approved: @json($page?->isApproved() ?? false),
                canApprove: @json($page?->canApprove() ?? false),
                websiteHost: @json($page?->displayWebsite()),
                token: @json(csrf_token()),
            };
        </script>
        <script src="{{ asset('assets/js/prompt-landing-pages-chat.js') }}?v={{ filemtime(public_path('assets/js/prompt-landing-pages-chat.js')) }}"></script>
    @endpush
</x-mb-layout>