{{-- Sticky notice while a manual background job runs (copy / AI / prepare / Shopify). --}}
@php
    $bgJob = $import->backgroundJob();
    $bgBusy = $import->isBackgroundBusy();
    $bgMsg = is_array($bgJob) ? (string) ($bgJob['message'] ?? '') : '';
    $bgKind = is_array($bgJob) ? (string) ($bgJob['kind'] ?? '') : '';
    $bgQueueRaw = is_array($import->form_data['bg_queue'] ?? null) ? $import->form_data['bg_queue'] : [];
    $bgQueueCount = is_array($bgQueueRaw) ? count($bgQueueRaw) : 0;
    $bgNowLabel = $bgBusy ? $import->backgroundStatusLabel() : '';
    $statusUrl = route('product-ai-import.auto-status', $import);
    $cancelUrl = route('product-ai-import.cancel-background', $import);
    $wizardStep = $wizardStep ?? ($bgJob['step'] ?? 'enhance');
@endphp

<section id="pai-bg-banner"
         class="pai-bg-banner {{ $bgBusy ? 'is-on' : '' }}"
         data-status-url="{{ $statusUrl }}"
         data-cancel-url="{{ $cancelUrl }}"
         data-busy="{{ $bgBusy ? '1' : '0' }}"
         data-kind="{{ $bgKind }}"
         data-queue-count="{{ $bgQueueCount }}"
         aria-live="off"
         @if(! $bgBusy) hidden @endif>
    <div class="pai-bg-banner-mark" aria-hidden="true">
        <span class="pai-bg-spinner"></span>
    </div>
    <div class="pai-bg-banner-body">
        <div class="pai-bg-banner-kicker">Working in background</div>
        <h2 id="pai-bg-banner-title">{{ $bgNowLabel ?: 'Processing…' }}</h2>
        <p id="pai-bg-banner-msg">{{ $bgMsg !== '' ? $bgMsg : 'You can keep editing — jobs for this import run one at a time.' }}</p>

        <div id="pai-bg-queue" class="pai-bg-queue" @if(! $bgBusy && $bgQueueCount < 1) hidden @endif>
            <div class="pai-bg-queue-head">
                <span class="pai-bg-queue-head-label">Job order</span>
                <span id="pai-bg-queue-meta" class="pai-bg-queue-meta">
                    @if($bgQueueCount > 0)
                        {{ $bgQueueCount }} waiting
                    @else
                        Running
                    @endif
                </span>
            </div>
            <ol id="pai-bg-queue-list" class="pai-bg-queue-list">
                @if($bgBusy)
                    <li class="pai-bg-queue-item is-now">
                        <span class="pai-bg-queue-pos">Now</span>
                        <span class="pai-bg-queue-label">{{ $bgNowLabel ?: 'Working…' }}</span>
                    </li>
                @endif
                @foreach(array_slice($bgQueueRaw, 0, 8) as $i => $qItem)
                    @php
                        $qKind = is_array($qItem) ? (string) ($qItem['kind'] ?? '') : '';
                        $qLabel = match ($qKind) {
                            'copy' => 'Writing listing copy',
                            'enhance' => 'Enhancing photos',
                            'video_enhance' => 'Enhancing video (Omni)',
                            'lifestyle' => 'Generating lifestyle',
                            'prepare' => 'Preparing media',
                            'shopify_create' => 'Creating Shopify draft',
                            'shopify_update' => 'Updating Shopify',
                            'shopify_pending' => 'Syncing pending to Shopify',
                            default => 'Queued job',
                        };
                    @endphp
                    <li class="pai-bg-queue-item">
                        <span class="pai-bg-queue-pos">{{ $i + 1 }}</span>
                        <span class="pai-bg-queue-label">{{ $qLabel }}</span>
                    </li>
                @endforeach
            </ol>
        </div>
    </div>
    <div class="pai-bg-banner-actions">
        <form action="{{ $cancelUrl }}" method="POST" id="pai-bg-cancel-form" onsubmit="return confirm('Stop the current job and clear the entire queue for this import? Partial results are kept.');">
            @csrf
            <input type="hidden" name="wizard_step" value="{{ $wizardStep }}">
            <button type="submit" class="btn btn-secondary pai-bg-stop-btn">Stop all</button>
        </form>
        <a href="{{ route('product-ai-import.index') }}" class="btn btn-secondary pai-bg-banner-link">All imports</a>
    </div>
</section>

<style>
.pai-bg-banner {
    display: none;
    overflow-anchor: none;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 0 1.1rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0b1220 100%);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #e2e8f0;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}
.pai-bg-banner.is-on,
.pai-bg-banner:not([hidden]) { display: flex; }
.pai-bg-banner[hidden] { display: none !important; }
.pai-bg-banner-mark { flex: 0 0 auto; padding-top: 0.2rem; }
.pai-bg-spinner {
    display: block; width: 1.35rem; height: 1.35rem;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, 0.35);
    border-top-color: #93c5fd;
    animation: pai-bg-spin 0.85s linear infinite;
}
@keyframes pai-bg-spin { to { transform: rotate(360deg); } }
.pai-bg-banner-body { flex: 1 1 auto; min-width: 0; }
.pai-bg-banner-kicker {
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: #93c5fd; font-weight: 700; margin-bottom: 0.2rem;
}
.pai-bg-banner h2 {
    margin: 0 0 0.2rem; font-size: 1.02rem; font-weight: 700; color: #f8fafc;
}
.pai-bg-banner > .pai-bg-banner-body > #pai-bg-banner-msg {
    margin: 0; font-size: 0.88rem; color: #94a3b8; line-height: 1.4;
}
.pai-bg-queue {
    margin-top: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.55);
    overflow: hidden;
}
.pai-bg-queue[hidden] { display: none !important; }
.pai-bg-queue-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(30, 41, 59, 0.65);
}
.pai-bg-queue-head-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #cbd5e1;
}
.pai-bg-queue-meta {
    font-size: 0.72rem; font-weight: 600; color: #93c5fd;
}
.pai-bg-queue-list {
    list-style: none; margin: 0; padding: 0.35rem 0;
    max-height: 11rem; overflow-y: auto;
}
.pai-bg-queue-item {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.84rem; color: #cbd5e1;
}
.pai-bg-queue-item + .pai-bg-queue-item {
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}
.pai-bg-queue-pos {
    flex: 0 0 auto;
    min-width: 2.4rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em;
    background: rgba(148, 163, 184, 0.16); color: #e2e8f0;
}
.pai-bg-queue-item.is-now .pai-bg-queue-pos {
    background: rgba(59, 130, 246, 0.28); color: #bfdbfe;
}
.pai-bg-queue-item.is-now .pai-bg-queue-label {
    color: #f8fafc; font-weight: 650;
}
.pai-bg-queue-label {
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pai-bg-banner-actions {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;
    padding-top: 0.15rem;
}
.pai-bg-stop-btn {
    border-color: rgba(248, 113, 113, 0.45) !important;
    color: #fecaca !important;
    background: rgba(127, 29, 29, 0.35) !important;
}
.pai-bg-stop-btn:hover { filter: brightness(1.08); }
.pai-bg-banner-link { white-space: nowrap; }
@media (max-width: 640px) {
    .pai-bg-banner { flex-wrap: wrap; }
    .pai-bg-banner-actions { width: 100%; }
    .pai-bg-banner-actions .btn { flex: 1 1 auto; text-align: center; }
}
</style>