@extends(decide_template())
@section('title', $pageTitle)

@section('page_styles')
<link href="{{ asset('css/ai-builder.css') }}?v={{$local_version}}" rel="stylesheet" type="text/css">
<style>
    /* Hide layout chrome for immersive builder */
    .pagetitle,
    #kt_subheader,
    .kt-subheader { display: none !important; }
    #kt_content { padding: 8px 8px 0 8px !important; }
    #kt_content > .col-md-12.content__main { display: none; }
    .kt-footer { display: none !important; }
</style>
@endsection

@section('page_scripts')
@php
$aiBuilderI18n = [
    'error_prefix' => trans('ai_builder.js.error_prefix'),
    'unknown_error' => trans('ai_builder.js.unknown_error'),
    'error_try_again' => trans('ai_builder.js.error_try_again'),
    'credits_suffix' => trans('common.ai.credits_suffix'),
    'no_email_to_use' => trans('ai_builder.js.no_email_to_use'),
    'btn_saving' => trans('ai_builder.js.btn_saving'),
    'btn_creating' => trans('ai_builder.js.btn_creating'),
    'drip_updated' => trans('ai_builder.js.drip_updated'),
    'broadcast_updated' => trans('ai_builder.js.broadcast_updated'),
    'email_created' => trans('ai_builder.js.email_created'),
    'failed_save_email' => trans('ai_builder.js.failed_save_email'),
    'error_occurred' => trans('ai_builder.js.error_occurred'),
    'save_finish' => trans('ai_builder.js.save_finish'),
    'loading' => trans('common.label.loading'),
    'untitled_conversation' => trans('ai_builder.js.untitled_conversation'),
    'delete_conversation_title' => trans('common.ai.delete_conversation'),
    'no_conversations' => trans('ai_builder.js.no_conversations'),
    'failed_load_conversations' => trans('ai_builder.js.failed_load_conversations'),
    'time_just_now' => trans('common.time_label.just_now'),
    'time_minutes_ago' => trans('common.time_label.minutes_ago'),
    'time_hours_ago' => trans('common.time_label.hours_ago'),
    'time_days_ago' => trans('common.time_label.days_ago'),
    'conversation_deleted' => trans('common.ai.conversation_deleted'),
    'failed_delete_conversation' => trans('common.ai.failed_delete_conversation'),
    'confirm_clear_all' => trans('common.ai.confirm_clear_all'),
    'conversations_cleared' => trans('common.ai.conversations_cleared'),
    'failed_clear_conversations' => trans('common.ai.failed_clear_conversations'),
    'uploading_image' => trans('ai_builder.js.uploading_image'),
    'image_uploaded' => trans('ai_builder.js.image_uploaded'),
    'upload_failed' => trans('ai_builder.js.upload_failed'),
    'searching' => trans('ai_builder.js.searching'),
    'no_images_found' => trans('ai_builder.js.no_images_found'),
    'search_failed' => trans('ai_builder.js.search_failed'),
    'image_search_failed' => trans('ai_builder.js.image_search_failed'),
    'image_added' => trans('ai_builder.js.image_added'),
    'failed_download_image' => trans('ai_builder.js.failed_download_image'),
    'failed_download_image_retry' => trans('ai_builder.js.failed_download_image_retry'),
    'search_empty' => trans('ai_builder.js.search_empty'),
    'remove_image' => trans('common.label.remove'),
];
@endphp
<script>
    // Collapse left sidebar for immersive builder
    $('body').addClass('kt-aside--minimize kt-brand--minimize');

    window.aiBuilderConfig = {
        csrfToken: '{{ csrf_token() }}',
        @if(!empty($dripId))
        sendMessageUrl: '{{ route("drips.ai.send") }}',
        useEmailUrl: '{{ route("drips.ai.use-email") }}',
        conversationUrl: '{{ url("drip/ai/conversation") }}/__ID__',
        conversationsUrl: '{{ route("drips.ai.conversations") }}',
        resumeBaseUrl: '{{ route("drips.ai-builder") }}?resume=',
        builderUrl: '{{ route("drips.ai-builder") }}',
        dripId: {{ $dripId }},
        backUrl: '{{ route("drips.edit", $dripId) }}',
        deleteConversationUrl: '{{ url("drip/ai/conversation") }}/__ID__',
        clearConversationsUrl: '{{ route("drips.ai.clear") }}',
        @else
        sendMessageUrl: '{{ route("broadcasts.ai.send") }}',
        useEmailUrl: '{{ route("broadcasts.ai.use-email") }}',
        conversationUrl: '{{ url("broadcast/ai/conversation") }}/__ID__',
        conversationsUrl: '{{ route("broadcasts.ai.conversations") }}',
        resumeBaseUrl: '{{ route("broadcasts.ai-builder") }}?resume=',
        builderUrl: '{{ route("broadcasts.ai-builder") }}',
        campaignId: {{ $campaignId ?? 'null' }},
        @if($campaignId)
        backUrl: '{{ route("broadcasts.edit", $campaignId) }}?type=1',
        @else
        backUrl: '{{ route("broadcasts.addblank") }}',
        @endif
        deleteConversationUrl: '{{ url("broadcast/ai/conversation") }}/__ID__',
        clearConversationsUrl: '{{ route("broadcasts.ai.clear") }}',
        @endif
        creditsUrl: '{{ route("broadcasts.ai.credits") }}',
        uploadImageUrl: '{{ route("broadcasts.ai.upload-image") }}',
        searchImagesUrl: '{{ route("broadcasts.ai.search-images") }}',
        downloadImageUrl: '{{ route("broadcasts.ai.download-image") }}',
        defaultTier: '{{ $defaultTier }}',
        creditsEnabled: {{ $aiCreditsEnabled ? 'true' : 'false' }},
        conversationId: {{ $conversationId ?? 'null' }},
        aiTiers: @json($aiTiers),
        i18n: @json($aiBuilderI18n),
    };
</script>
<script src="{{ asset('js/ai-builder.js') }}?v={{$local_version}}"></script>
@endsection

@section(decide_content())

<div class="ai-builder-wrapper">

    <!-- Top Bar -->
    <div class="ai-builder-topbar">
        <div class="topbar-left">
            <button type="button" id="ai-history-btn" class="ai-topbar-btn">
                <i class="la la-history"></i> {{ trans('ai_builder.topbar.history') }}
            </button>
            <div class="ai-topbar-divider"></div>
            <select id="ai-tier-selector" class="ai-tier-selector">
                @foreach($aiTiers as $tierKey => $tierLabel)
                    <option value="{{ $tierKey }}" {{ $tierKey === $defaultTier ? 'selected' : '' }}>{{ $tierLabel }}</option>
                @endforeach
            </select>
            @if($aiCreditsEnabled)
            <div class="ai-credit-badge">
                <i class="la la-bolt"></i>
                <strong id="ai-credits-count">{{ $aiCredits }}</strong> {{ trans('ai_builder.topbar.credits') }}
            </div>
            @endif
            <button type="button" id="ai-new-chat-btn" class="ai-topbar-btn btn-new-chat" style="display:none;">
                <i class="la la-plus"></i> {{ trans('ai_builder.topbar.new_chat') }}
            </button>
        </div>
        <div class="topbar-right">
            <div class="ai-conversation-credits" id="ai-conversation-credits" style="display:none;">
                <i class="la la-bolt"></i> {{ trans('ai_builder.topbar.total_label') }} <strong id="ai-total-credits">0</strong> {{ trans('ai_builder.topbar.credits_used') }}
            </div>
            <a href="{{ !empty($dripId) ? route('drips.edit', $dripId) : ($campaignId ? route('broadcasts.edit', $campaignId).'?type=1' : route('broadcasts.addblank')) }}" class="ai-topbar-btn btn-cancel">
                <i class="la la-times"></i> {{ trans('common.form.button.cancel') }}
            </a>
            <button type="button" id="ai-use-email-btn" class="ai-topbar-action btn-save-finish" style="display:none;">
                <i class="la la-check"></i> {{ trans('ai_builder.topbar.save_finish') }}
            </button>
        </div>
    </div>

    <!-- Main Split View -->
    <div class="ai-builder-container">

        <!-- Chat Panel -->
        <div class="ai-chat-panel">

            <!-- Welcome State -->
            <div class="ai-chat-welcome" id="ai-chat-welcome">
                <div class="ai-chat-welcome-icon">
                    <i class="la la-magic"></i>
                </div>
                <h3>{{ trans('ai_builder.welcome.heading') }}</h3>
                <p>{{ trans('ai_builder.welcome.description') }}</p>
                <div class="ai-chat-welcome-suggestions">
                    <div class="ai-suggestion-chip" data-prompt="{{ trans('ai_builder.welcome.chip_prompt_launch') }}">
                        <i class="la la-rocket"></i>
                        <span>{{ trans('ai_builder.welcome.chip_label_launch') }}</span>
                    </div>
                    <div class="ai-suggestion-chip" data-prompt="{{ trans('ai_builder.welcome.chip_prompt_newsletter') }}">
                        <i class="la la-newspaper-o"></i>
                        <span>{{ trans('ai_builder.welcome.chip_label_newsletter') }}</span>
                    </div>
                    <div class="ai-suggestion-chip" data-prompt="{{ trans('ai_builder.welcome.chip_prompt_welcome') }}">
                        <i class="la la-handshake-o"></i>
                        <span>{{ trans('ai_builder.welcome.chip_label_welcome') }}</span>
                    </div>
                    <div class="ai-suggestion-chip" data-prompt="{{ trans('ai_builder.welcome.chip_prompt_promo') }}">
                        <i class="la la-tags"></i>
                        <span>{{ trans('ai_builder.welcome.chip_label_promo') }}</span>
                    </div>
                </div>
            </div>

            <!-- Messages -->
            <div class="ai-chat-messages" id="ai-chat-messages">
            </div>

            <!-- Thinking indicator (below chat messages) -->
            <div class="ai-typing-indicator">
                <span class="ai-typing-dots"><span></span><span></span><span></span></span>
                <span class="ai-thinking-text">{{ trans('ai_builder.thinking.generating') }}</span>
                <span class="ai-thinking-timer">(0s)</span>
            </div>

            <!-- Input Area -->
            <div class="ai-chat-input-area">
                <div class="ai-chat-input-wrapper">
                    <!-- Image Strip (thumbnails of uploaded/downloaded images) -->
                    <div class="ai-image-strip" id="ai-image-strip"></div>
                    <textarea id="ai-message-input" rows="1" placeholder="{{ trans('ai_builder.input.placeholder') }}"></textarea>
                    <div class="ai-input-actions">
                        <button type="button" id="ai-image-btn" class="ai-input-toolbar-btn" title="{{ trans('ai_builder.input.add_image_title') }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                        </button>
                        <div class="ai-input-divider"></div>
                        <button type="button" id="ai-send-btn" class="ai-send-btn" title="{{ trans('ai_builder.input.send_title') }}">
                            <i class="la la-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Preview Panel -->
        <div class="ai-preview-panel">
            <div class="ai-preview-header">
                <div class="ai-preview-title">
                    <i class="la la-eye"></i>
                    <span>{{ trans('ai_builder.preview.title') }}</span>
                </div>
            </div>
            <div class="ai-preview-frame-wrapper">
                <div class="ai-preview-empty" id="ai-preview-empty">
                    <div class="ai-preview-empty-icon">
                        <i class="fa fa-envelope"></i>
                    </div>
                    <h4>{{ trans('ai_builder.preview.empty_heading') }}</h4>
                    <p>{{ trans('ai_builder.preview.empty_description') }}</p>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- History Drawer Overlay -->
<div class="ai-drawer-overlay" id="ai-drawer-overlay"></div>

<!-- History Drawer -->
<div class="ai-history-drawer" id="ai-history-drawer">
    <div class="ai-drawer-header">
        <span><i class="la la-history"></i> {{ trans('ai_builder.drawer.title') }}</span>
        <button type="button" class="ai-drawer-close" id="ai-drawer-close"><i class="la la-times"></i></button>
    </div>
    <div class="ai-drawer-actions">
        <button type="button" id="ai-drawer-new-chat" class="ai-drawer-new-btn">
            <i class="la la-plus"></i> {{ trans('ai_builder.drawer.new_conversation') }}
        </button>
        <button type="button" id="ai-drawer-clear-all" class="ai-drawer-clear-btn">
            <i class="la la-trash"></i> {{ trans('ai_builder.drawer.clear_all') }}
        </button>
    </div>
    <div class="ai-drawer-body" id="ai-drawer-body">
        <div class="ai-drawer-loading">{{ trans('common.label.loading') }}</div>
    </div>
</div>

<!-- Image Modal (Upload + Search) -->
<div class="ai-image-modal-overlay" id="ai-image-modal-overlay">
    <div class="ai-image-modal">
        <div class="ai-image-modal-header">
            <span class="ai-image-modal-title">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#34bfa3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                {{ trans('ai_builder.image_modal.title') }}
            </span>
            <button type="button" class="ai-image-modal-close" id="ai-image-modal-close">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <!-- Tabs -->
        <div class="ai-image-modal-tabs">
            <button type="button" class="ai-image-modal-tab active" data-tab="upload">
                <i class="la la-cloud-upload"></i> {{ trans('ai_builder.image_modal.tab_upload') }}
            </button>
            <button type="button" class="ai-image-modal-tab" data-tab="search">
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right:2px"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                {{ trans('ai_builder.image_modal.tab_search') }}
            </button>
        </div>
        <!-- Upload Tab -->
        <div class="ai-image-tab-content" id="ai-tab-upload">
            <div class="ai-upload-dropzone" id="ai-upload-dropzone">
                <div class="ai-dropzone-content">
                    <i class="la la-cloud-upload"></i>
                    <div class="ai-dropzone-text">{{ trans('ai_builder.image_modal.dropzone_text') }}</div>
                    <div class="ai-dropzone-subtext">{{ trans('ai_builder.image_modal.dropzone_or') }}</div>
                    <button type="button" class="ai-dropzone-browse-btn" id="ai-dropzone-browse-btn">{{ trans('ai_builder.image_modal.browse_btn') }}</button>
                    <div class="ai-dropzone-hint">{{ trans('ai_builder.image_modal.file_hint') }}</div>
                </div>
            </div>
            <input type="file" id="ai-image-file" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none">
        </div>
        <!-- Search Tab -->
        <div class="ai-image-tab-content" id="ai-tab-search" style="display:none;">
            <div class="ai-image-modal-search">
                <input type="text" id="ai-image-search-input" placeholder="{{ trans('ai_builder.image_modal.search_placeholder') }}">
                <button type="button" id="ai-image-search-go" class="ai-image-search-go-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </button>
            </div>
            <div class="ai-image-modal-body" id="ai-image-modal-body">
                <div class="ai-image-modal-empty">
                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#c5cad4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:10px"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                    <div>{{ trans('ai_builder.image_modal.search_empty') }}</div>
                </div>
            </div>
            <div class="ai-image-modal-footer" id="ai-image-modal-footer">
                <button type="button" id="ai-image-load-more" class="ai-image-load-more-btn" style="display:none;">{{ trans('ai_builder.image_modal.load_more') }}</button>
            </div>
        </div>
    </div>
</div>

@endsection