@extends('layouts.app')

@section('title', 'Improve existing – Product AI')

@php
    $omniSnap = app(\App\Services\ProductAiOmniQuotaService::class)->snapshot();
@endphp

@section('content')
<div class="pai-page pai-improve-hub">
    <p class="setting-back"><a href="{{ route('product-ai-import.index') }}">← Product AI Import</a></p>

    <header class="pai-improve-hero">
        <div class="pai-improve-hero-copy">
            <p class="pai-improve-kicker">AVI THE JEWELER · Catalog</p>
            <h1>Improve existing</h1>
            <p>
                Polish live Shopify media, then sync <strong>media only</strong>.
                Title, body, price, variants, metafields, and status stay untouched.
                Products tagged <code>pai-media-improved</code> are skipped automatically.
            </p>
        </div>
        <div class="pai-improve-hero-meter {{ ! empty($omniSnap['blocked']) ? 'is-blocked' : '' }}" id="pai-improve-omni-meter" title="Omni video quota (photos still run if Enhance is on)">
            <span class="pai-improve-meter-label" id="pai-improve-omni-label">{{ $omniSnap['label'] ?? 'Omni today' }}</span>
            <span class="pai-improve-meter-lock" id="pai-improve-omni-lock" @if(empty($omniSnap['blocked'])) hidden @endif>
                Video locked until <span id="pai-improve-omni-until">{{ $omniSnap['blocked_until_human'] ?? 'reset' }}</span>
            </span>
            <span class="pai-improve-meter-hint" id="pai-improve-omni-hint" @if(! empty($omniSnap['blocked'])) hidden @endif>
                Counts each Omni generate call today (success or fail). Updates while the batch runs. Video AI OK below is products with AI video — not the same number.
            </span>
        </div>
    </header>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-error">{{ session('error') }}</div>
    @endif
    @if ($errors->any())
        <div class="alert alert-error">
            <ul style="margin:0;padding-left:1.25rem;">
                @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Always first: live queue / batch so refresh still shows what is running --}}
    <section class="pai-improve-card pai-improve-batch" id="pai-improve-batch" @if(empty($activeBatch)) hidden @endif>
        @php
            $bc = $activeBatch['counts'] ?? [];
            $br = $activeBatch['report'] ?? [];
            $bcDone = (int) ($br['successful'] ?? $bc['done'] ?? 0);
            $bcRedo = (int) ($br['needs_redo'] ?? $bc['needs_retry'] ?? 0);
            $bcNeedSync = (int) ($br['needs_sync'] ?? $bc['needs_sync'] ?? 0);
            $bcFail = (int) ($br['failed'] ?? (($bc['failed'] ?? 0) + ($bc['blocked'] ?? 0)));
            $bcNoVid = (int) ($br['no_video'] ?? $bc['no_video'] ?? 0);
            $bcVidAtt = (int) ($br['video_attention'] ?? $bc['video_attention'] ?? 0);
            $bcVidOk = (int) ($br['video_ok'] ?? $bc['video_ok'] ?? 0);
            $bcRun = (int) ($bc['running'] ?? 0);
            $bcQueued = (int) ($bc['queued'] ?? 0);
        @endphp
        <div class="pai-batch-head">
            <div class="pai-batch-head-copy">
                <div class="pai-batch-kicker">
                    <span class="pai-batch-live" id="pai-batch-live" @if(! in_array(($activeBatch['status'] ?? ''), ['queued', 'running'], true)) hidden @endif>Live</span>
                    <h2>Batch results</h2>
                </div>
                <p id="pai-batch-message">{{ $activeBatch['message'] ?? 'Starting…' }}</p>
                <div class="pai-batch-now" id="pai-batch-now"
                     @if(! in_array(($activeBatch['status'] ?? ''), ['queued', 'running'], true) || empty($activeBatch['current_title'])) hidden @endif>
                    <span class="pai-batch-now-label">Now working</span>
                    <strong id="pai-batch-now-title">{{ $activeBatch['current_title'] ?? '' }}</strong>
                </div>
                @if(! empty($activeBatch['collection_title']))
                    <p class="pai-hint" style="margin:0.25rem 0 0;">
                        Collection: <strong>{{ $activeBatch['collection_title'] }}</strong>
                    </p>
                @endif
                <p class="pai-hint" id="pai-batch-hint" style="margin:0.35rem 0 0;">
                    <strong>Successful</strong> = studio photos OK in this batch.
                    <strong>Needs redo</strong> = photos failed — run again.
                    <strong>Needs sync</strong> = photos ready, Shopify not updated yet.
                    <strong>Video AI OK</strong> = product has Omni AI video (live check).
                    <strong>Video pending</strong> = has video, but Omni did not finish in this batch (original kept). If you later finish Omni inside the product, this card updates.
                </p>
            </div>
            <div class="pai-batch-head-aside">
                <div class="pai-batch-pct-ring" id="pai-batch-pct">{{ (int) ($activeBatch['progress_pct'] ?? 0) }}%</div>
                <button type="button" class="btn btn-secondary" id="pai-improve-batch-stop"
                        style="margin-top:0.55rem;width:100%;"
                        @if(! in_array(($activeBatch['status'] ?? ''), ['queued', 'running'], true)) hidden @endif>
                    Stop all
                </button>
                <a href="{{ route('product-ai-import.index') }}" class="pai-batch-index-link">Imports list →</a>
            </div>
        </div>
        <div class="pai-improve-batch-bar">
            <div class="pai-improve-batch-bar-fill" id="pai-batch-bar" style="width:{{ (int) ($activeBatch['progress_pct'] ?? 0) }}%"></div>
        </div>

        <div class="pai-batch-report" id="pai-batch-report">
            <button type="button" class="pai-batch-stat is-ok" data-filter="done">
                <strong id="pai-bc-done">{{ $bcDone }}</strong>
                <span>Successful</span>
            </button>
            <button type="button" class="pai-batch-stat is-redo" data-filter="needs_retry">
                <strong id="pai-bc-redo">{{ $bcRedo }}</strong>
                <span>Needs redo</span>
            </button>
            <button type="button" class="pai-batch-stat is-vidok" data-filter="video_ok">
                <strong id="pai-bc-vidok">{{ $bcVidOk }}</strong>
                <span>Video AI OK</span>
            </button>
            <button type="button" class="pai-batch-stat is-needsync" data-filter="needs_sync">
                <strong id="pai-bc-needsync">{{ $bcNeedSync }}</strong>
                <span>Needs sync</span>
            </button>
            <button type="button" class="pai-batch-stat is-vidatt" data-filter="video_attention">
                <strong id="pai-bc-vidatt">{{ $bcVidAtt }}</strong>
                <span>Video pending</span>
            </button>
            <button type="button" class="pai-batch-stat is-fail" data-filter="failed">
                <strong id="pai-bc-failed">{{ $bcFail }}</strong>
                <span>Failed</span>
            </button>
            <button type="button" class="pai-batch-stat is-video" data-filter="no_video">
                <strong id="pai-bc-novideo">{{ $bcNoVid }}</strong>
                <span>No video</span>
            </button>
            <button type="button" class="pai-batch-stat is-live" data-filter="running">
                <strong id="pai-bc-running">{{ $bcRun }}</strong>
                <span>Running</span>
            </button>
            <button type="button" class="pai-batch-stat" data-filter="queued">
                <strong id="pai-bc-queued">{{ $bcQueued }}</strong>
                <span>Queued</span>
            </button>
        </div>
        <p class="pai-batch-report-line" id="pai-batch-report-line">{{ $br['headline'] ?? '' }}</p>

        <div class="pai-batch-filters" id="pai-batch-filters" role="tablist">
            <button type="button" class="pai-batch-filter is-on" data-filter="all">All</button>
            <button type="button" class="pai-batch-filter" data-filter="done">Successful</button>
            <button type="button" class="pai-batch-filter" data-filter="needs_retry">Needs redo</button>
            <button type="button" class="pai-batch-filter" data-filter="video_ok">Video AI OK</button>
            <button type="button" class="pai-batch-filter" data-filter="needs_sync">Needs sync</button>
            <button type="button" class="pai-batch-filter" data-filter="video_attention">Video pending</button>
            <button type="button" class="pai-batch-filter" data-filter="failed">Failed</button>
            <button type="button" class="pai-batch-filter" data-filter="no_video">No video</button>
            <button type="button" class="pai-batch-filter" data-filter="running">Running</button>
            <button type="button" class="pai-batch-filter" data-filter="queued">Queued</button>
        </div>
        <p class="pai-batch-empty" id="pai-batch-empty" hidden>No products in this filter.</p>

        <ul class="pai-improve-batch-list" id="pai-batch-list">
            @foreach(($activeBatch['items'] ?? []) as $item)
                @php
                    $st = (string) ($item['status'] ?? 'queued');
                    if ($st === 'synced') { $st = 'done'; }
                    $img = trim((string) ($item['image_url'] ?? ''));
                    $prog = (int) ($item['progress'] ?? 0);
                    $open = $item['open_url'] ?? (! empty($item['import_id']) ? route('product-ai-import.show', (int) $item['import_id']) : null);
                    $flags = is_array($item['flags'] ?? null) ? $item['flags'] : [];
                    $label = match ($st) {
                        'done' => 'Successful',
                        'needs_retry' => 'Needs redo',
                        'needs_sync' => 'Needs sync',
                        'failed' => 'Failed',
                        'blocked' => 'Blocked',
                        'cancelled' => 'Cancelled',
                        'running' => 'Running',
                        'queued' => 'Queued',
                        default => $st,
                    };
                @endphp
                <li class="pai-batch-item is-{{ $st }}"
                    data-status="{{ $st }}"
                    data-no-video="{{ ! empty($flags['no_video']) ? '1' : '0' }}"
                    data-video-attention="{{ ! empty($flags['video_attention']) ? '1' : '0' }}"
                    data-video-ok="{{ ! empty($flags['video_omni_ok']) ? '1' : '0' }}">
                    <button type="button" class="pai-batch-thumb" @if($img === '') disabled @endif
                            data-full="{{ $img }}" data-title="{{ $item['title'] ?? '' }}" title="View image">
                        @if($img !== '')
                            <img src="{{ $img }}" alt="">
                        @else
                            <span class="pai-batch-thumb-ph">No img</span>
                        @endif
                        <span class="pai-batch-thumb-zoom" aria-hidden="true">⌕</span>
                    </button>
                    <div class="pai-batch-item-body">
                        <div class="pai-batch-item-top">
                            <span class="st is-{{ $st }}">{{ $label }}</span>
                            @if(! empty($flags['video_omni_ok']))
                                <span class="pai-batch-chip is-vidok">Video AI OK</span>
                            @elseif(! empty($flags['video_attention']))
                                <span class="pai-batch-chip is-vidatt">Video pending</span>
                            @elseif(! empty($item['has_video']) || ! empty($flags['has_video']))
                                <span class="pai-batch-chip is-video">Has video</span>
                            @elseif(! empty($flags['no_video']))
                                <span class="pai-batch-chip is-novid">No video</span>
                            @endif
                            @if($st === 'running' && $prog > 0)
                                <span class="pai-batch-chip is-prog">{{ $prog }}%</span>
                            @endif
                            @if(! empty($item['import_id']))
                                <span class="pai-batch-chip">#{{ (int) $item['import_id'] }}</span>
                            @endif
                        </div>
                        <strong class="pai-batch-title">{{ $item['title'] ?? '' }}</strong>
                        @if(! empty($item['summary']))
                            <div class="sum">{{ $item['summary'] }}</div>
                        @endif
                        @if(! empty($flags['video_attention_reason']))
                            <div class="sum sum-vid">{{ $flags['video_attention_reason'] }}</div>
                        @endif
                        @if($st === 'running' && $prog > 0)
                            <div class="pai-batch-item-bar"><i style="width:{{ $prog }}%"></i></div>
                        @endif
                    </div>
                    @if($open)
                        <a class="pai-batch-open" href="{{ $open }}">Open</a>
                    @endif
                </li>
            @endforeach
        </ul>
    </section>

    <div class="pai-batch-lightbox" id="pai-batch-lightbox" hidden>
        <button type="button" class="pai-batch-lightbox-backdrop" id="pai-batch-lightbox-close" aria-label="Close"></button>
        <figure class="pai-batch-lightbox-fig">
            <img id="pai-batch-lightbox-img" src="" alt="">
            <figcaption id="pai-batch-lightbox-cap"></figcaption>
            <button type="button" class="pai-batch-lightbox-x" id="pai-batch-lightbox-x" aria-label="Close">×</button>
        </figure>
    </div>

    <section class="pai-improve-card">
        <div class="pai-improve-card-head">
            <h2>Past New Import products</h2>
            <p>
                New Import now adds <code>pai-media-improved</code> automatically.
                Click once to tag products already linked from Product AI in your account (no need to tag by hand in Shopify).
            </p>
        </div>
        <form method="POST" action="{{ route('product-ai-import.improve.tag-past') }}" class="pai-improve-actions" style="margin-top:0;"
              onsubmit="return confirm('Add pai-media-improved on Shopify for all Product AI products linked in your account?');">
            @csrf
            <button type="submit" class="btn btn-secondary">Tag past Product AI products on Shopify</button>
            <p class="pai-hint" style="margin:0;">Safe to run again — Shopify ignores duplicate tags.</p>
        </form>
    </section>

    {{-- Step toggles --}}
    <section class="pai-improve-card">
        <div class="pai-improve-card-head">
            <h2>Steps to run</h2>
            <p>
                Defaults: Enhance + Scale + Prepare + Shopify. Use presets for resize-only on a collection
                (already-tagged products are included when Enhance is off).
            </p>
        </div>
        <div class="pai-improve-presets" id="pai-improve-presets">
            <button type="button" class="btn btn-secondary" data-pai-preset="catalog">Catalog (full)</button>
            <button type="button" class="btn btn-secondary" data-pai-preset="resize">Scale + Prepare + Sync</button>
            <button type="button" class="btn btn-secondary" data-pai-preset="sync">Prepare + Sync</button>
        </div>
        <div class="pai-improve-steps" id="pai-improve-steps">
            <label class="pai-improve-step is-on">
                <input type="checkbox" id="pai-step-enhance" checked>
                <span class="pai-improve-step-body">
                    <strong>1 · Enhance media</strong>
                    <em>AI photos + Omni video when present. Auto detects an existing worn / “how it looks” photo (finger, ear, wrist…) and skips Enhance on it so gallery order stays. No video → skip video only. Quota lock → skip video, keep photos.</em>
                </span>
            </label>
            <label class="pai-improve-step">
                <input type="checkbox" id="pai-step-lifestyle">
                <span class="pai-improve-step-body">
                    <strong>2 · Lifestyle · how it looks</strong>
                    <em>Off by default — reuses a worn photo already in the gallery when detected. If you turn it on and none exists, AI can generate one. Failures do not block Shopify sync.</em>
                </span>
            </label>
            <label class="pai-improve-step is-on">
                <input type="checkbox" id="pai-step-scale" checked>
                <span class="pai-improve-step-body">
                    <strong>3 · Product scale</strong>
                    <em>No AI tokens. Applies Settings default fill % by type (rings vs pendants) to studio AI photos, then matches siblings. Worn / measures skipped.</em>
                </span>
            </label>
            <label class="pai-improve-step is-on">
                <input type="checkbox" id="pai-step-prepare" checked>
                <span class="pai-improve-step-body">
                    <strong>4 · Prepare</strong>
                    <em>Theme crop + compress (contain, no cut). Same as the Prepare wizard step — required before a clean Shopify upload.</em>
                </span>
            </label>
            <label class="pai-improve-step is-on">
                <input type="checkbox" id="pai-step-shopify" checked>
                <span class="pai-improve-step-body">
                    <strong>5 · Shopify media sync</strong>
                    <em>Replace gallery (media only), remap variants, then tag <code>pai-media-improved</code>. Does not change title, price, or metafields.</em>
                </span>
            </label>
        </div>
    </section>

    {{-- Find products --}}
    <section class="pai-improve-card">
        <div class="pai-improve-card-head">
            <h2>Find products</h2>
            <p>One product (manual or auto), or run the whole collection pending list.</p>
        </div>

        <div class="pai-improve-tabs" role="tablist">
            <button type="button" class="pai-improve-tab is-active" data-tab="collection" id="pai-tab-collection">Collection (Auto)</button>
            <button type="button" class="pai-improve-tab" data-tab="product" id="pai-tab-product">Search one product</button>
        </div>

        <div class="pai-improve-panel is-active" id="pai-panel-collection" data-panel="collection">
            <label for="pai-improve-coll-q" class="pai-field-label">Collection</label>
            <div class="pai-improve-search-wrap">
                <input type="text" id="pai-improve-coll-q" class="pai-input" placeholder="Search collection…" autocomplete="off">
                <input type="hidden" id="pai-improve-coll-id" value="">
                <div id="pai-improve-coll-results" class="pai-collection-results" hidden></div>
            </div>
            <div class="pai-improve-coll-selected" id="pai-improve-coll-selected" hidden>
                <span id="pai-improve-coll-selected-title"></span>
                <button type="button" class="pai-guide-coll-clear" id="pai-improve-coll-clear" title="Clear">×</button>
            </div>

            <div class="pai-improve-stats" id="pai-improve-coll-stats" hidden>
                <div class="pai-improve-stat"><strong id="pai-stat-pending">0</strong><span>Pending</span></div>
                <div class="pai-improve-stat is-muted"><strong id="pai-stat-excluded">0</strong><span>Excluded</span></div>
                <div class="pai-improve-stat is-muted"><strong id="pai-stat-improved">0</strong><span>Already improved</span></div>
                <div class="pai-improve-stat is-muted"><strong id="pai-stat-video">0</strong><span>With video (pending)</span></div>
            </div>

            <div class="pai-guide-products-head" style="margin-top:1rem;">
                <span class="pai-guide-filter-label">Products in collection</span>
                <span class="pai-hint" id="pai-improve-coll-products-hint" style="margin:0;">Pick a collection first.</span>
                <div class="pai-improve-exclude-actions" id="pai-improve-exclude-actions" hidden>
                    <button type="button" class="btn btn-secondary" id="pai-improve-coll-exclude-all" title="Exclude every pending product in this collection">
                        Exclude all
                    </button>
                    <button type="button" class="btn btn-secondary" id="pai-improve-coll-clear-excludes" hidden>
                        Clear exclusions
                    </button>
                </div>
            </div>
            <div class="pai-guide-products" id="pai-improve-coll-products" aria-live="polite"></div>
            <div class="pai-guide-pager" id="pai-improve-coll-pager" hidden>
                <button type="button" class="btn btn-secondary" id="pai-improve-coll-prev" disabled>← Prev</button>
                <span class="pai-hint" id="pai-improve-coll-page-label" style="margin:0;">Page 1</span>
                <button type="button" class="btn btn-secondary" id="pai-improve-coll-next" disabled>Next →</button>
            </div>

            <div class="pai-improve-actions">
                <button type="button" class="btn btn-primary" id="pai-improve-batch-start" disabled>
                    Start Auto for pending
                </button>
                <p class="pai-hint" style="margin:0;">
                    Runs one-by-one on the server queue (survives refresh).
                    With Enhance on, already-tagged products are skipped.
                    With Enhance off (Scale / Prepare / Sync), tagged products are included.
                    Tip: <strong>Exclude all</strong>, then <strong>Include</strong> the ones you want, then Start.
                </p>
            </div>
        </div>

        <div class="pai-improve-panel" id="pai-panel-product" data-panel="product" hidden>
            <form action="{{ route('product-ai-import.improve.store') }}" method="POST" id="pai-improve-form" data-pai-lux-loader="improve">
                @csrf
                <input type="hidden" name="product_gid" id="pai-improve-product-gid" value="{{ old('product_gid') }}" required>
                <input type="hidden" name="mode" id="pai-improve-mode" value="manual">
                <input type="hidden" name="steps[enhance]" id="pai-form-step-enhance" value="1">
                <input type="hidden" name="steps[lifestyle]" id="pai-form-step-lifestyle" value="0">
                <input type="hidden" name="steps[scale]" id="pai-form-step-scale" value="1">
                <input type="hidden" name="steps[prepare]" id="pai-form-step-prepare" value="1">
                <input type="hidden" name="steps[shopify]" id="pai-form-step-shopify" value="1">

                <label for="pai-improve-product-q" class="pai-field-label">Product title</label>
                <div class="pai-improve-search-wrap">
                    <div class="pai-improve-product-search-row">
                        <input type="search" id="pai-improve-product-q" class="pai-input" placeholder="Paste full title — symbols like &amp; are OK…" autocomplete="off" maxlength="200">
                        <button type="button" class="btn btn-primary" id="pai-improve-product-search-btn">Search</button>
                    </div>
                    <div id="pai-improve-product-results" class="pai-collection-results pai-improve-product-results" hidden></div>
                </div>
                <p class="pai-hint" id="pai-improve-product-hint">Type at least 2 characters, then Search (or wait). Already-improved products are hidden.</p>

                <div class="pai-improve-pick" id="pai-improve-pick-card" @if(! old('product_gid')) hidden @endif style="margin-top:1rem;">
                    <img id="pai-improve-pick-img" alt="" hidden>
                    <div class="pai-improve-pick-meta">
                        <strong id="pai-improve-pick-title">{{ old('product_title', 'Selected product') }}</strong>
                        <span class="pai-hint" id="pai-improve-pick-sub" style="margin:0;"></span>
                    </div>
                    <button type="button" class="pai-guide-pick-clear" id="pai-improve-clear" title="Clear">×</button>
                </div>

                <div class="pai-improve-actions">
                    <button type="submit" class="btn btn-primary" id="pai-improve-submit-auto" @disabled(! old('product_gid')) data-mode="auto">
                        Auto improve this product
                    </button>
                    <button type="submit" class="btn btn-secondary" id="pai-improve-submit-manual" @disabled(! old('product_gid')) data-mode="manual">
                        Open wizard (manual)
                    </button>
                </div>
            </form>
        </div>
    </section>

</div>

@include('product_ai_import.partials.luxury-loader')

@push('styles')
@include('product_ai_import.partials.styles')
<style>
.pai-improve-hub { max-width: min(1480px, 100%); margin: 0 auto; width: 100%; }
.pai-improve-hero {
    display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; align-items: flex-start;
    margin: 0 0 1.5rem; padding: 1.35rem 1.5rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%);
    border-radius: 16px; color: #f8fafc;
}
.pai-improve-kicker {
    margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; font-weight: 700;
}
.pai-improve-hero h1 { margin: 0 0 0.45rem; font-size: 1.65rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.pai-improve-hero-copy p { margin: 0; max-width: 36rem; font-size: 0.92rem; line-height: 1.5; color: #cbd5e1; }
.pai-improve-hero-copy code { background: rgba(255,255,255,0.1); padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.8em; }
.pai-improve-hero-meter {
    min-width: 12rem; max-width: 16rem; padding: 0.75rem 0.9rem; border-radius: 12px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
}
.pai-improve-hero-meter.is-blocked { border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.12); }
.pai-improve-meter-label { display: block; font-weight: 700; font-size: 0.9rem; }
.pai-improve-meter-hint, .pai-improve-meter-lock { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: #cbd5e1; line-height: 1.35; }
.pai-improve-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.25rem 1.35rem; margin-bottom: 1.1rem;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pai-improve-card-head h2 { margin: 0 0 0.25rem; font-size: 1.05rem; color: #0f172a; }
.pai-improve-card-head p { margin: 0 0 1rem; font-size: 0.88rem; color: #64748b; }
.pai-improve-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.85rem; }
.pai-improve-presets .btn { font-size: 0.78rem; padding: 0.3rem 0.7rem; }
.pai-improve-steps { display: grid; gap: 0.65rem; }
.pai-improve-step {
    display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem;
    border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; background: #f8fafc; transition: border-color .12s, background .12s;
}
.pai-improve-step.is-on { background: #f0fdf4; border-color: #86efac; }
.pai-improve-step input { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: #15803d; }
.pai-improve-step-body strong { display: block; color: #0f172a; font-size: 0.92rem; }
.pai-improve-step-body em { display: block; margin-top: 0.2rem; font-style: normal; font-size: 0.8rem; color: #64748b; line-height: 1.4; }
.pai-improve-tabs { display: flex; gap: 0.45rem; margin-bottom: 1rem; }
.pai-improve-tab {
    border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 999px;
    padding: 0.4rem 0.95rem; font-size: 0.86rem; font-weight: 600; cursor: pointer;
}
.pai-improve-tab.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.pai-field-label { display: block; font-size: 0.78rem; font-weight: 700; color: #475569; margin-bottom: 0.4rem; }
.pai-improve-search-wrap { position: relative; }
.pai-improve-product-search-row {
    display: flex; align-items: stretch; gap: 0.55rem; flex-wrap: wrap;
}
.pai-improve-product-search-row .pai-input { flex: 1 1 16rem; min-width: 12rem; }
.pai-improve-product-search-row .btn { flex: 0 0 auto; }
.pai-collection-results {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 0.25rem);
    max-height: 16rem; overflow: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.pai-improve-product-results {
    position: static; margin-top: 0.65rem; max-height: 22rem;
    border-radius: 12px; border-color: #e2e8f0;
}
.pai-collection-results button {
    display: flex; align-items: center; gap: 0.65rem; width: 100%; text-align: left; border: 0; background: #fff;
    padding: 0.55rem 0.75rem; font-size: 0.86rem; cursor: pointer; color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
}
.pai-collection-results button:last-child { border-bottom: 0; }
.pai-collection-results button:hover { background: #eff6ff; }
.pai-collection-results img, .pai-collection-results .pai-res-ph {
    width: 2.25rem; height: 2.25rem; object-fit: cover; border-radius: 6px; background: #f1f5f9; flex-shrink: 0;
}
.pai-improve-product-results img, .pai-improve-product-results .pai-res-ph {
    width: 3.5rem; height: 3.5rem; border-radius: 8px;
}
.pai-collection-results .pai-res-meta { display: block; font-size: 0.72rem; color: #64748b; text-transform: capitalize; }
.pai-improve-coll-selected {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem;
    padding: 0.45rem 0.65rem; background: #f1f5f9; border-radius: 8px; font-size: 0.9rem; font-weight: 600;
}
.pai-improve-stats { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem; }
.pai-improve-stat {
    flex: 1; min-width: 7rem; padding: 0.65rem 0.8rem; border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0;
}
.pai-improve-stat.is-muted { background: #f8fafc; border-color: #e2e8f0; }
.pai-improve-stat strong { display: block; font-size: 1.25rem; color: #0f172a; }
.pai-improve-stat span { font-size: 0.75rem; color: #64748b; font-weight: 600; }
.pai-improve-pick {
    display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.9rem;
    border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc;
}
.pai-improve-pick img { width: 4rem; height: 4rem; object-fit: cover; border-radius: 8px; background: #e2e8f0; }
.pai-improve-pick-meta { flex: 1; min-width: 0; }
.pai-improve-pick-meta strong { display: block; color: #0f172a; }
.pai-improve-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; margin-top: 1.15rem; }
.pai-guide-products {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; min-height: 4rem;
}
@media (max-width: 1000px) { .pai-guide-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pai-guide-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pai-guide-card {
    border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; cursor: default;
    text-align: left; padding: 0; position: relative;
}
.pai-guide-card.is-improved { opacity: 0.72; }
.pai-guide-card.is-excluded { opacity: 0.55; background: #f8fafc; }
.pai-guide-card.is-excluded img { filter: grayscale(0.35); }
.pai-guide-card.is-selectable { cursor: pointer; }
.pai-guide-card.is-selectable:hover { border-color: #94a3b8; }
.pai-guide-card.is-selected { border-color: #0f172a; box-shadow: 0 0 0 1px #0f172a; }
.pai-guide-exclude {
    position: absolute; top: 0.35rem; right: 0.35rem; z-index: 2;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em;
    padding: 0.18rem 0.45rem; border-radius: 999px; border: 1px solid #cbd5e1;
    background: rgba(255,255,255,0.95); color: #334155; cursor: pointer; line-height: 1.2;
}
.pai-guide-exclude:hover { border-color: #94a3b8; background: #fff; }
.pai-guide-card.is-excluded .pai-guide-exclude {
    border-color: #fcd34d; background: #fffbeb; color: #92400e;
}
.pai-guide-products-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.pai-improve-exclude-actions {
    margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}
.pai-improve-exclude-actions .btn { font-size: 0.78rem; padding: 0.25rem 0.65rem; }
.pai-guide-card img, .pai-guide-card .pai-guide-card-ph {
    display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f3f4f6;
}
.pai-guide-card-ph { display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 0.75rem; }
.pai-guide-card-body { padding: 0.45rem 0.5rem 0.55rem; }
.pai-guide-card-title {
    font-size: 0.78rem; font-weight: 600; color: #111827; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2rem;
}
.pai-guide-card-meta { font-size: 0.68rem; color: #6b7280; margin-top: 0.2rem; text-transform: capitalize; }
.pai-guide-badge {
    position: absolute; top: 0.35rem; left: 0.35rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em;
    padding: 0.15rem 0.4rem; border-radius: 999px; background: #e2e8f0; color: #334155;
}
.pai-guide-badge.is-done { background: #dcfce7; color: #166534; }
.pai-guide-badge.is-excluded { background: #fef3c7; color: #92400e; }
.pai-guide-badge.is-video { left: auto; right: 0.35rem; background: #dbeafe; color: #1d4ed8; }
.pai-guide-card:not(.is-improved) .pai-guide-badge.is-video { right: 4.6rem; }
.pai-guide-empty {
    grid-column: 1 / -1; padding: 1.5rem 1rem; text-align: center; color: #6b7280; font-size: 0.9rem;
    border: 1px dashed #e5e7eb; border-radius: 10px; background: #fafafa;
}
.pai-guide-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.85rem; }
.pai-guide-coll-clear, .pai-guide-pick-clear {
    margin-left: auto; border: 0; background: transparent; cursor: pointer; font-size: 1.2rem; color: #6b7280; line-height: 1;
}
.pai-improve-batch {
    border-color: #cbd5e1;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    overflow: hidden;
    padding: 1.35rem 1.4rem 1.5rem;
    grid-column: 1 / -1;
}
.pai-batch-head {
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start;
    margin-bottom: 0.85rem;
}
.pai-batch-kicker { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.35rem; }
.pai-batch-kicker h2 { margin: 0; font-size: 1.15rem; letter-spacing: -0.02em; color: #0f172a; }
.pai-batch-live {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: #166534; background: #dcfce7; border: 1px solid #86efac; border-radius: 999px;
    padding: 0.2rem 0.55rem;
}
.pai-batch-live::before {
    content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.55); animation: pai-batch-pulse 1.6s ease infinite;
}
@keyframes pai-batch-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    70% { box-shadow: 0 0 0 0.45rem rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.pai-batch-head-copy p { margin: 0; font-size: 0.9rem; color: #334155; line-height: 1.4; max-width: 40rem; }
.pai-batch-now {
    margin-top: 0.65rem; padding: 0.55rem 0.75rem; border-radius: 10px;
    background: linear-gradient(90deg, #eef2ff, #f8fafc); border: 1px solid #c7d2fe;
    display: flex; flex-wrap: wrap; gap: 0.35rem 0.65rem; align-items: baseline;
}
.pai-batch-now-label {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: #4338ca;
}
.pai-batch-now strong { font-size: 0.95rem; color: #0f172a; }
.pai-batch-item.is-running {
    box-shadow: 0 0 0 2px #6366f1; background: #eef2ff;
}
.pai-batch-item.is-running .st { background: #4f46e5; color: #fff; }
.pai-batch-head-aside { text-align: right; }
.pai-batch-pct-ring {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 3.6rem; height: 3.6rem; padding: 0 0.55rem; border-radius: 999px;
    background: #0f172a; color: #f8fafc; font-weight: 800; font-size: 0.95rem;
    box-shadow: 0 8px 20px rgba(15,23,42,0.18);
}
.pai-batch-index-link {
    display: block; margin-top: 0.45rem; font-size: 0.78rem; font-weight: 600; color: #475569; text-decoration: none;
}
.pai-batch-index-link:hover { color: #0f172a; }
.pai-improve-batch-bar {
    height: 0.55rem; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-bottom: 0.75rem;
}
.pai-improve-batch-bar-fill {
    height: 100%; background: linear-gradient(90deg, #0f766e, #16a34a 55%, #4ade80);
    transition: width .4s ease;
}
.pai-batch-counts {
    display: none;
}
.pai-batch-report {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.35rem 0 0.65rem;
}
.pai-batch-stat {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.7rem 0.65rem;
    text-align: center;
    cursor: pointer;
    font: inherit;
    width: 100%;
}
.pai-batch-stat:hover { box-shadow: 0 0 0 2px rgba(15,23,42,0.08); }
.pai-batch-stat.is-filter-on { box-shadow: 0 0 0 2px #0f172a; }
.pai-batch-stat strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1.1;
    color: #0f172a;
    letter-spacing: -0.03em;
}
.pai-batch-stat span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pai-batch-stat.is-ok { border-color: #86efac; background: #f0fdf4; }
.pai-batch-stat.is-ok strong { color: #166534; }
.pai-batch-stat.is-redo { border-color: #fdba74; background: #fff7ed; }
.pai-batch-stat.is-redo strong { color: #c2410c; }
.pai-batch-stat.is-vidok { border-color: #99f6e4; background: #f0fdfa; }
.pai-batch-stat.is-vidok strong { color: #0f766e; }
.pai-batch-stat.is-needsync { border-color: #f9a8d4; background: #fdf2f8; }
.pai-batch-stat.is-needsync strong { color: #be185d; }
.pai-batch-stat.is-vidatt { border-color: #c4b5fd; background: #f5f3ff; }
.pai-batch-stat.is-vidatt strong { color: #6d28d9; }
.pai-batch-stat.is-fail { border-color: #fca5a5; background: #fef2f2; }
.pai-batch-stat.is-fail strong { color: #b91c1c; }
.pai-batch-stat.is-video { border-color: #bfdbfe; background: #eff6ff; }
.pai-batch-stat.is-video strong { color: #1d4ed8; }
.pai-batch-stat.is-live { border-color: #a5b4fc; background: #eef2ff; }
.pai-batch-report-line {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: #334155;
    font-weight: 600;
    line-height: 1.4;
}
.pai-batch-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.pai-batch-filter {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
}
.pai-batch-filter.is-on {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}
.pai-batch-empty {
    margin: 0 0 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
}
.pai-improve-batch-list {
    list-style: none; margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    max-height: min(72vh, 52rem);
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f1f5f9;
    padding: 0.85rem;
}
.pai-batch-item {
    display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.75rem; align-items: center;
    padding: 0.7rem 0.8rem; border: 1px solid #e2e8f0; border-radius: 12px;
    background: #fff; font-size: 0.84rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
.pai-batch-item.is-filtered-out { display: none !important; }
.pai-batch-item.is-running {
    border-color: #93c5fd; background: linear-gradient(90deg, #eff6ff 0%, #fff 55%);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.12);
}
.pai-batch-item.is-done { background: #fafafa; }
.pai-batch-item.is-needs_retry {
    border-color: #fdba74; background: #fffbeb;
}
.pai-batch-item.is-needs_sync {
    border-color: #f9a8d4; background: #fdf2f8;
}
.pai-batch-item.is-failed, .pai-batch-item.is-blocked {
    border-color: #fecaca; background: #fff7f7;
}
.pai-batch-item.is-cancelled { opacity: 0.72; }
.pai-batch-thumb {
    position: relative; width: 4.5rem; height: 4.5rem; padding: 0; border: 0; border-radius: 10px;
    overflow: hidden; background: #e2e8f0; cursor: zoom-in; flex-shrink: 0;
}
.pai-batch-thumb:disabled { cursor: default; opacity: 0.85; }
.pai-batch-thumb img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform .25s ease;
}
.pai-batch-thumb:not(:disabled):hover img { transform: scale(1.06); }
.pai-batch-thumb-ph {
    display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
    font-size: 0.68rem; color: #94a3b8; font-weight: 600;
}
.pai-batch-thumb-zoom {
    position: absolute; right: 0.25rem; bottom: 0.25rem;
    width: 1.15rem; height: 1.15rem; border-radius: 999px;
    background: rgba(15,23,42,0.72); color: #fff; font-size: 0.7rem; line-height: 1.15rem; text-align: center;
    opacity: 0; transition: opacity .15s;
}
.pai-batch-thumb:not(:disabled):hover .pai-batch-thumb-zoom { opacity: 1; }
.pai-batch-item-body { min-width: 0; }
.pai-batch-item-top { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.25rem; }
.pai-batch-item .st {
    display: inline-flex; font-weight: 800; text-transform: uppercase; font-size: 0.64rem; letter-spacing: 0.05em;
    padding: 0.18rem 0.45rem; border-radius: 999px; background: #f1f5f9; color: #475569;
}
.pai-batch-item .st.is-done { background: #dcfce7; color: #166534; }
.pai-batch-item .st.is-needs_retry { background: #ffedd5; color: #c2410c; }
.pai-batch-item .st.is-needs_sync { background: #fce7f3; color: #be185d; }
.pai-batch-item .st.is-failed, .pai-batch-item .st.is-blocked { background: #fee2e2; color: #b91c1c; }
.pai-batch-item .st.is-running { background: #dbeafe; color: #1d4ed8; }
.pai-batch-item .st.is-queued { background: #e2e8f0; color: #334155; }
.pai-batch-item .st.is-skipped, .pai-batch-item .st.is-cancelled { background: #f1f5f9; color: #64748b; }
.pai-batch-chip {
    font-size: 0.68rem; font-weight: 700; color: #64748b; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 999px; padding: 0.12rem 0.4rem;
}
.pai-batch-chip.is-video { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.pai-batch-chip.is-novid { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.pai-batch-chip.is-prog { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
.pai-batch-chip.is-vidok { background: #f0fdfa; border-color: #99f6e4; color: #0f766e; }
.pai-batch-chip.is-vidatt { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.pai-batch-title {
    display: block; color: #0f172a; font-size: 0.9rem; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pai-batch-item .sum {
    margin-top: 0.25rem; color: #475569; font-size: 0.8rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pai-batch-item .sum-vid { color: #6d28d9; font-weight: 600; margin-top: 0.15rem; -webkit-line-clamp: 2; }
.pai-batch-item.is-needs_retry .sum,
.pai-batch-item.is-failed .sum { color: #9a3412; font-weight: 600; }
.pai-batch-item.is-needs_sync .sum { color: #9d174d; font-weight: 600; }
.pai-batch-chip.is-vidatt { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.pai-batch-item .sum-vid { color: #6d28d9; font-weight: 600; margin-top: 0.15rem; }
@media (max-width: 1100px) {
    .pai-batch-report { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pai-improve-batch-list { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .pai-batch-report { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .pai-batch-report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pai-improve-batch-list { max-height: 60vh; grid-template-columns: 1fr; }
    .pai-batch-item { grid-template-columns: 3.6rem 1fr; }
    .pai-batch-thumb { width: 3.6rem; height: 3.6rem; }
    .pai-batch-open { grid-column: 2; justify-self: start; margin-top: 0.15rem; }
}
.pai-batch-item-bar {
    margin-top: 0.4rem; height: 0.28rem; background: #e2e8f0; border-radius: 999px; overflow: hidden;
}
.pai-batch-item-bar i {
    display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #38bdf8);
    border-radius: 999px; transition: width .3s ease;
}
.pai-batch-open {
    align-self: center; text-decoration: none; font-size: 0.78rem; font-weight: 700;
    color: #0f172a; border: 1px solid #cbd5e1; background: #fff; border-radius: 999px;
    padding: 0.4rem 0.75rem; white-space: nowrap;
}
.pai-batch-open:hover { background: #0f172a; color: #fff; border-color: #0f172a; }
.pai-batch-lightbox {
    position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
}
.pai-batch-lightbox[hidden] { display: none !important; }
.pai-batch-lightbox-backdrop {
    position: absolute; inset: 0; border: 0; background: rgba(15,23,42,0.72); cursor: zoom-out;
}
.pai-batch-lightbox-fig {
    position: relative; margin: 0; max-width: min(92vw, 720px); max-height: 88vh;
    background: #0f172a; border-radius: 14px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45); animation: pai-lb-in .18s ease;
}
@keyframes pai-lb-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
.pai-batch-lightbox-fig img {
    display: block; max-width: 100%; max-height: calc(88vh - 3rem); object-fit: contain; background: #111827;
}
.pai-batch-lightbox-fig figcaption {
    padding: 0.65rem 1rem; color: #e2e8f0; font-size: 0.85rem; font-weight: 600;
    background: rgba(15,23,42,0.95);
}
.pai-batch-lightbox-x {
    position: absolute; top: 0.45rem; right: 0.45rem; width: 2rem; height: 2rem; border: 0;
    border-radius: 999px; background: rgba(15,23,42,0.7); color: #fff; font-size: 1.25rem; cursor: pointer;
}
@media (max-width: 640px) {
    .pai-batch-item { grid-template-columns: 3.6rem 1fr; }
    .pai-batch-thumb { width: 3.6rem; height: 3.6rem; }
    .pai-batch-open { grid-column: 2; justify-self: start; margin-top: 0.15rem; }
}
</style>
@endpush

@push('scripts')
<script>
(function () {
    var productUrl = @json(route('product-ai-import.improve.search-products'));
    var collUrl = @json(route('product-ai-import.improve.search-collections'));
    var collProductsUrl = @json(route('product-ai-import.improve.collection-products'));
    var collExcludeUrl = @json(route('product-ai-import.improve.collection-exclude'));
    var collExcludeAllUrl = @json(route('product-ai-import.improve.collection-exclude-all'));
    var collExcludeClearUrl = @json(route('product-ai-import.improve.collection-exclude-clear'));
    var batchStartUrl = @json(route('product-ai-import.improve.batch'));
    var batchStatusUrl = @json(route('product-ai-import.improve.batch-status'));
    var batchCancelUrl = @json(route('product-ai-import.improve.batch-cancel'));
    var showImportBase = @json(url('/product-ai-import'));
    var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';

    var stepEnhance = document.getElementById('pai-step-enhance');
    var stepLifestyle = document.getElementById('pai-step-lifestyle');
    var stepScale = document.getElementById('pai-step-scale');
    var stepPrepare = document.getElementById('pai-step-prepare');
    var stepShopify = document.getElementById('pai-step-shopify');
    var formEnhance = document.getElementById('pai-form-step-enhance');
    var formLifestyle = document.getElementById('pai-form-step-lifestyle');
    var formScale = document.getElementById('pai-form-step-scale');
    var formPrepare = document.getElementById('pai-form-step-prepare');
    var formShopify = document.getElementById('pai-form-step-shopify');
    var modeInput = document.getElementById('pai-improve-mode');

    function syncStepUi() {
        [stepEnhance, stepLifestyle, stepScale, stepPrepare, stepShopify].forEach(function (el) {
            if (!el) return;
            el.closest('.pai-improve-step').classList.toggle('is-on', !!el.checked);
        });
        if (formEnhance) formEnhance.value = stepEnhance && stepEnhance.checked ? '1' : '0';
        if (formLifestyle) formLifestyle.value = stepLifestyle && stepLifestyle.checked ? '1' : '0';
        if (formScale) formScale.value = stepScale && stepScale.checked ? '1' : '0';
        if (formPrepare) formPrepare.value = stepPrepare && stepPrepare.checked ? '1' : '0';
        if (formShopify) formShopify.value = stepShopify && stepShopify.checked ? '1' : '0';
    }
    [stepEnhance, stepLifestyle, stepScale, stepPrepare, stepShopify].forEach(function (el) {
        if (el) el.addEventListener('change', syncStepUi);
    });

    function applyStepPreset(name) {
        var map = {
            catalog: { enhance: true, lifestyle: false, scale: true, prepare: true, shopify: true },
            resize: { enhance: false, lifestyle: false, scale: true, prepare: true, shopify: true },
            sync: { enhance: false, lifestyle: false, scale: false, prepare: true, shopify: true }
        };
        var p = map[name];
        if (!p) return;
        if (stepEnhance) stepEnhance.checked = !!p.enhance;
        if (stepLifestyle) stepLifestyle.checked = !!p.lifestyle;
        if (stepScale) stepScale.checked = !!p.scale;
        if (stepPrepare) stepPrepare.checked = !!p.prepare;
        if (stepShopify) stepShopify.checked = !!p.shopify;
        syncStepUi();
    }
    document.querySelectorAll('[data-pai-preset]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            applyStepPreset(btn.getAttribute('data-pai-preset') || '');
        });
    });
    syncStepUi();

    function currentSteps() {
        return {
            enhance: !!(stepEnhance && stepEnhance.checked),
            lifestyle: !!(stepLifestyle && stepLifestyle.checked),
            scale: !!(stepScale && stepScale.checked),
            prepare: !!(stepPrepare && stepPrepare.checked),
            shopify: !!(stepShopify && stepShopify.checked)
        };
    }

    var gidInput = document.getElementById('pai-improve-product-gid');
    var submitAuto = document.getElementById('pai-improve-submit-auto');
    var submitManual = document.getElementById('pai-improve-submit-manual');
    var pickCard = document.getElementById('pai-improve-pick-card');
    var pickTitle = document.getElementById('pai-improve-pick-title');
    var pickSub = document.getElementById('pai-improve-pick-sub');
    var pickImg = document.getElementById('pai-improve-pick-img');
    var batchStartBtn = document.getElementById('pai-improve-batch-start');

    function selectProduct(p) {
        if (!p || !p.id || p.already_improved || p.excluded) return;
        gidInput.value = p.id;
        if (submitAuto) submitAuto.disabled = false;
        if (submitManual) submitManual.disabled = false;
        pickCard.hidden = false;
        pickTitle.textContent = p.title || 'Selected product';
        pickSub.textContent = (p.status || '') + (p.has_video ? ' · has video' : ' · no video');
        if (p.image) { pickImg.src = p.image; pickImg.hidden = false; }
        else { pickImg.removeAttribute('src'); pickImg.hidden = true; }
        document.querySelectorAll('.pai-guide-card').forEach(function (el) {
            el.classList.toggle('is-selected', el.getAttribute('data-id') === p.id);
        });
    }

    function clearProduct() {
        gidInput.value = '';
        if (submitAuto) submitAuto.disabled = true;
        if (submitManual) submitManual.disabled = true;
        pickCard.hidden = true;
        document.querySelectorAll('.pai-guide-card.is-selected').forEach(function (el) {
            el.classList.remove('is-selected');
        });
    }

    document.getElementById('pai-improve-clear').addEventListener('click', clearProduct);

    document.querySelectorAll('#pai-improve-submit-auto, #pai-improve-submit-manual').forEach(function (btn) {
        btn.addEventListener('click', function () {
            syncStepUi();
            modeInput.value = btn.getAttribute('data-mode') || 'manual';
        });
    });

    document.querySelectorAll('.pai-improve-tab').forEach(function (tab) {
        tab.addEventListener('click', function () {
            var name = tab.getAttribute('data-tab');
            document.querySelectorAll('.pai-improve-tab').forEach(function (t) {
                t.classList.toggle('is-active', t === tab);
            });
            document.querySelectorAll('.pai-improve-panel').forEach(function (panel) {
                var on = panel.getAttribute('data-panel') === name;
                panel.hidden = !on;
                panel.classList.toggle('is-active', on);
            });
        });
    });

    /* Product search */
    var productTimer = null;
    var productQ = document.getElementById('pai-improve-product-q');
    var productResults = document.getElementById('pai-improve-product-results');
    var productHint = document.getElementById('pai-improve-product-hint');
    var productSearchBtn = document.getElementById('pai-improve-product-search-btn');

    function runProductSearch() {
        var q = (productQ.value || '').trim();
        if (q.length < 2) {
            productResults.hidden = true;
            productResults.innerHTML = '';
            productHint.textContent = 'Type at least 2 characters, then Search (or wait). Already-improved products are hidden.';
            return;
        }
        productHint.textContent = 'Searching…';
        fetch(productUrl + '?q=' + encodeURIComponent(q), { headers: { 'Accept': 'application/json' } })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                var list = data.products || [];
                productResults.innerHTML = '';
                if (!list.length) {
                    productResults.hidden = true;
                    productHint.textContent = data.error
                        ? ('Search failed: ' + data.error)
                        : 'No pending products found. Try fewer words, or check if it already has the improved tag.';
                    return;
                }
                productHint.textContent = list.length + ' result' + (list.length === 1 ? '' : 's') + ' — click one to select';
                list.forEach(function (p) {
                    var btn = document.createElement('button');
                    btn.type = 'button';
                    var imgHtml = p.image
                        ? '<img src="' + String(p.image).replace(/"/g, '&quot;') + '" alt="">'
                        : '<span class="pai-res-ph"></span>';
                    btn.innerHTML = imgHtml + '<span><strong>' + escapeHtml(p.title || '') + '</strong>'
                        + '<span class="pai-res-meta">' + escapeHtml(p.status || '') + '</span></span>';
                    btn.addEventListener('click', function () {
                        selectProduct(p);
                        productResults.hidden = true;
                        productQ.value = p.title || '';
                    });
                    productResults.appendChild(btn);
                });
                productResults.hidden = false;
            })
            .catch(function () {
                productHint.textContent = 'Search failed.';
                productResults.hidden = true;
            });
    }

    productQ.addEventListener('input', function () {
        clearTimeout(productTimer);
        var q = productQ.value.trim();
        if (q.length < 2) {
            productResults.hidden = true;
            productResults.innerHTML = '';
            productHint.textContent = 'Type at least 2 characters, then Search (or wait). Already-improved products are hidden.';
            return;
        }
        productHint.textContent = 'Searching…';
        productTimer = setTimeout(runProductSearch, 320);
    });
    productQ.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            clearTimeout(productTimer);
            runProductSearch();
        }
    });
    if (productSearchBtn) {
        productSearchBtn.addEventListener('click', function () {
            clearTimeout(productTimer);
            runProductSearch();
        });
    }

    document.addEventListener('click', function (e) {
        // Product results stay open (inline panel) until a product is selected.
        var collResults = document.getElementById('pai-improve-coll-results');
        var collQ = document.getElementById('pai-improve-coll-q');
        if (collResults && !collResults.contains(e.target) && e.target !== collQ) collResults.hidden = true;
    });

    /* Collection */
    var collTimer = null;
    var collQ = document.getElementById('pai-improve-coll-q');
    var collId = document.getElementById('pai-improve-coll-id');
    var collResults = document.getElementById('pai-improve-coll-results');
    var collSelected = document.getElementById('pai-improve-coll-selected');
    var collSelectedTitle = document.getElementById('pai-improve-coll-selected-title');
    var collProducts = document.getElementById('pai-improve-coll-products');
    var collHint = document.getElementById('pai-improve-coll-products-hint');
    var collPager = document.getElementById('pai-improve-coll-pager');
    var collPrev = document.getElementById('pai-improve-coll-prev');
    var collNext = document.getElementById('pai-improve-coll-next');
    var collPageLabel = document.getElementById('pai-improve-coll-page-label');
    var collStats = document.getElementById('pai-improve-coll-stats');
    var collExcludeActions = document.getElementById('pai-improve-exclude-actions');
    var collExcludeAll = document.getElementById('pai-improve-coll-exclude-all');
    var collClearExcludes = document.getElementById('pai-improve-coll-clear-excludes');
    var cursors = [null];
    var page = 0;
    var pagePending = 0;
    var pageImproved = 0;
    var pageExcluded = 0;

    collQ.addEventListener('input', function () {
        clearTimeout(collTimer);
        var q = collQ.value.trim();
        if (q.length < 1) { collResults.hidden = true; return; }
        collTimer = setTimeout(function () {
            fetch(collUrl + '?q=' + encodeURIComponent(q), { headers: { 'Accept': 'application/json' } })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    var list = data.collections || [];
                    collResults.innerHTML = '';
                    list.forEach(function (c) {
                        var btn = document.createElement('button');
                        btn.type = 'button';
                        btn.textContent = c.title || c.id;
                        btn.addEventListener('click', function () {
                            collId.value = c.id;
                            collSelectedTitle.textContent = c.title || c.id;
                            collSelected.hidden = false;
                            collResults.hidden = true;
                            collQ.value = c.title || '';
                            cursors = [null];
                            page = 0;
                            loadCollProducts(null);
                        });
                        collResults.appendChild(btn);
                    });
                    collResults.hidden = list.length === 0;
                });
        }, 280);
    });

    document.getElementById('pai-improve-coll-clear').addEventListener('click', function () {
        collId.value = '';
        collSelected.hidden = true;
        collQ.value = '';
        collProducts.innerHTML = '';
        collPager.hidden = true;
        collStats.hidden = true;
        if (collExcludeActions) collExcludeActions.hidden = true;
        if (collClearExcludes) collClearExcludes.hidden = true;
        batchStartBtn.disabled = true;
        collHint.textContent = 'Pick a collection first.';
    });

    if (collExcludeAll) {
        collExcludeAll.addEventListener('click', function () {
            var id = collId.value;
            if (!id) return;
            collExcludeAll.disabled = true;
            collHint.textContent = 'Excluding all pending in collection…';
            fetch(collExcludeAllUrl, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                },
                body: JSON.stringify({ collection_id: id }),
            })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (!data.ok) {
                        alert(data.message || 'Could not exclude all.');
                        return;
                    }
                    loadCollProducts(cursors[page] || null);
                })
                .catch(function () {
                    alert('Could not exclude all.');
                })
                .finally(function () {
                    collExcludeAll.disabled = false;
                });
        });
    }

    if (collClearExcludes) {
        collClearExcludes.addEventListener('click', function () {
            var id = collId.value;
            if (!id) return;
            collClearExcludes.disabled = true;
            fetch(collExcludeClearUrl, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                },
                body: JSON.stringify({ collection_id: id }),
            })
                .then(function (r) { return r.json(); })
                .then(function () {
                    loadCollProducts(cursors[page] || null);
                })
                .finally(function () {
                    collClearExcludes.disabled = false;
                });
        });
    }

    function setProductExcluded(product, excluded, cardEl) {
        var id = collId.value;
        if (!id || !product || !product.id) return;
        var excludeBtn = cardEl ? cardEl.querySelector('.pai-guide-exclude') : null;
        if (excludeBtn) excludeBtn.disabled = true;
        fetch(collExcludeUrl, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrf,
            },
            body: JSON.stringify({
                collection_id: id,
                product_gid: product.id,
                excluded: excluded ? 1 : 0,
            }),
        })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (!data.ok) {
                    alert(data.message || 'Could not update exclusion.');
                    return;
                }
                loadCollProducts(cursors[page] || null);
            })
            .catch(function () {
                alert('Could not update exclusion.');
            })
            .finally(function () {
                if (excludeBtn) excludeBtn.disabled = false;
            });
    }

    function loadCollProducts(cursor) {
        var id = collId.value;
        if (!id) return;
        collHint.textContent = 'Loading…';
        collProducts.innerHTML = '';
        batchStartBtn.disabled = true;
        var url = collProductsUrl + '?collection_id=' + encodeURIComponent(id);
        if (cursor) url += '&cursor=' + encodeURIComponent(cursor);
        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data.error) {
                    collHint.textContent = data.error;
                    return;
                }
                var list = data.products || [];
                var info = data.page_info || {};
                pagePending = parseInt(data.pending_on_page || 0, 10) || 0;
                pageImproved = parseInt(data.improved_on_page || 0, 10) || 0;
                pageExcluded = parseInt(data.excluded_on_page || 0, 10) || 0;
                var videoPending = 0;
                list.forEach(function (p) {
                    if (!p.already_improved && !p.excluded && p.has_video) videoPending++;
                });

                collStats.hidden = false;
                document.getElementById('pai-stat-pending').textContent = String(pagePending);
                document.getElementById('pai-stat-excluded').textContent = String(pageExcluded);
                document.getElementById('pai-stat-improved').textContent = String(pageImproved);
                document.getElementById('pai-stat-video').textContent = String(videoPending);
                if (collExcludeActions) collExcludeActions.hidden = false;
                if (collExcludeAll) {
                    collExcludeAll.hidden = (pagePending + pageExcluded) < 1 && !info.has_next_page;
                    collExcludeAll.disabled = false;
                }
                if (collClearExcludes) collClearExcludes.hidden = pageExcluded < 1;

                if (!list.length) {
                    collProducts.innerHTML = '<div class="pai-guide-empty">No products in this collection.</div>';
                    collHint.textContent = 'Empty collection.';
                    collPager.hidden = true;
                    return;
                }

                if (pagePending < 1 && pageExcluded > 0 && pageImproved < 1) {
                    collHint.textContent = 'All products on this page are excluded from Auto.';
                } else if (pagePending < 1 && pageImproved > 0 && pageExcluded < 1) {
                    collHint.textContent = 'All products on this page already improved (tag pai-media-improved).';
                } else {
                    collHint.textContent = pagePending + ' pending · '
                        + pageExcluded + ' excluded · '
                        + pageImproved + ' already improved on this page.';
                }

                list.forEach(function (p) {
                    var card = document.createElement('div');
                    card.className = 'pai-guide-card'
                        + (p.already_improved ? ' is-improved' : (p.excluded ? ' is-excluded' : ' is-selectable'))
                        + (gidInput.value === p.id ? ' is-selected' : '');
                    card.setAttribute('data-id', p.id);
                    var badges = '';
                    if (p.already_improved) badges += '<span class="pai-guide-badge is-done">Done</span>';
                    if (p.excluded) badges += '<span class="pai-guide-badge is-excluded">Excluded</span>';
                    if (p.has_video && !p.already_improved && !p.excluded) {
                        badges += '<span class="pai-guide-badge is-video">Video</span>';
                    }
                    var excludeCtl = '';
                    if (!p.already_improved) {
                        excludeCtl = '<button type="button" class="pai-guide-exclude">'
                            + (p.excluded ? 'Include' : 'Exclude') + '</button>';
                    }
                    var img = p.image
                        ? '<img src="' + p.image + '" alt="">'
                        : '<div class="pai-guide-card-ph">No image</div>';
                    var metaExtra = p.already_improved
                        ? ' · skipped'
                        : (p.excluded ? ' · excluded from Auto' : '');
                    card.innerHTML = badges + excludeCtl + img + '<div class="pai-guide-card-body"><div class="pai-guide-card-title">'
                        + escapeHtml(p.title || '') + '</div><div class="pai-guide-card-meta">'
                        + escapeHtml(p.status || '') + metaExtra + '</div></div>';
                    var excludeBtn = card.querySelector('.pai-guide-exclude');
                    if (excludeBtn) {
                        excludeBtn.addEventListener('click', function (ev) {
                            ev.preventDefault();
                            ev.stopPropagation();
                            setProductExcluded(p, !p.excluded, card);
                        });
                    }
                    if (!p.already_improved && !p.excluded) {
                        card.addEventListener('click', function () { selectProduct(p); });
                    }
                    collProducts.appendChild(card);
                });

                batchStartBtn.disabled = pagePending < 1 && !info.has_next_page;
                // Enable if any pending on page; batch service will scan full collection.
                if (pagePending > 0 || info.has_next_page) batchStartBtn.disabled = false;
                if (pagePending < 1 && pageExcluded > 0 && !info.has_next_page) batchStartBtn.disabled = true;
                if (pagePending < 1 && pageImproved > 0 && pageExcluded < 1 && !info.has_next_page) batchStartBtn.disabled = true;

                collPager.hidden = false;
                collPrev.disabled = page <= 0;
                collNext.disabled = !info.has_next_page;
                collPageLabel.textContent = 'Page ' + (page + 1);
                collNext.onclick = function () {
                    if (!info.has_next_page || !info.end_cursor) return;
                    page += 1;
                    cursors[page] = info.end_cursor;
                    loadCollProducts(info.end_cursor);
                };
                collPrev.onclick = function () {
                    if (page <= 0) return;
                    page -= 1;
                    loadCollProducts(cursors[page] || null);
                };
            })
            .catch(function () {
                collHint.textContent = 'Could not load products.';
            });
    }

    /* Batch */
    var batchPanel = document.getElementById('pai-improve-batch');
    var batchMsg = document.getElementById('pai-batch-message');
    var batchBar = document.getElementById('pai-batch-bar');
    var batchPct = document.getElementById('pai-batch-pct');
    var batchList = document.getElementById('pai-batch-list');
    var batchTimer = null;
    var activeBatchBootstrap = @json($activeBatch ?? null);
    var currentBatchId = (activeBatchBootstrap && activeBatchBootstrap.id) ? String(activeBatchBootstrap.id) : '';

    batchStartBtn.addEventListener('click', function () {
        var id = collId.value;
        if (!id) return;
        var steps = currentSteps();
        if (!steps.enhance && !steps.lifestyle && !steps.scale && !steps.prepare && !steps.shopify) {
            alert('Select at least one step.');
            return;
        }
        batchStartBtn.disabled = true;
        batchStartBtn.textContent = 'Starting…';
        fetch(batchStartUrl, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            body: JSON.stringify({
                collection_id: id,
                collection_title: collSelectedTitle.textContent || '',
                steps: steps
            })
        })
            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
            .then(function (res) {
                batchStartBtn.textContent = 'Start Auto for pending';
                if (!res.ok) {
                    batchStartBtn.disabled = false;
                    alert(res.j.message || 'Could not start batch.');
                    return;
                }
                batchPanel.hidden = false;
                try { batchPanel.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch (e) {}
                currentBatchId = res.j.batch_id || '';
                pollBatch(res.j.batch_id);
            })
            .catch(function () {
                batchStartBtn.disabled = false;
                batchStartBtn.textContent = 'Start Auto for pending';
                alert('Could not start batch.');
            });
    });

    function pollBatch(batchId) {
        if (batchId) currentBatchId = String(batchId);
        if (batchTimer) clearInterval(batchTimer);
        function tick() {
            var url = batchStatusUrl + (currentBatchId ? ('?batch_id=' + encodeURIComponent(currentBatchId)) : '');
            fetch(url, {
                headers: { 'Accept': 'application/json' },
                credentials: 'same-origin'
            })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (!data.ok || !data.batch) return;
                    batchPanel.hidden = false;
                    if (data.batch.id) currentBatchId = String(data.batch.id);
                    renderBatch(data.batch);
                    if (data.omni_quota) applyOmniMeter(data.omni_quota);
                    if (data.batch.status === 'done' || data.batch.status === 'failed' || data.batch.status === 'cancelled') {
                        clearInterval(batchTimer);
                        batchTimer = null;
                        batchStartBtn.disabled = false;
                    }
                });
        }
        tick();
        // Full item reclassify is heavier than lite — 4s is enough for a live progress feel.
        batchTimer = setInterval(tick, 4000);
    }

    function applyOmniMeter(q) {
        if (!q || typeof q !== 'object') return;
        var meter = document.getElementById('pai-improve-omni-meter');
        var label = document.getElementById('pai-improve-omni-label');
        var lock = document.getElementById('pai-improve-omni-lock');
        var until = document.getElementById('pai-improve-omni-until');
        var hint = document.getElementById('pai-improve-omni-hint');
        if (label) label.textContent = q.label || ('Omni today: ' + (q.used || 0) + ' / ' + (q.limit || 20));
        if (meter) {
            if (q.blocked) meter.classList.add('is-blocked');
            else meter.classList.remove('is-blocked');
        }
        if (lock) {
            lock.hidden = !q.blocked;
            if (until) until.textContent = q.blocked_until_human || 'reset';
        }
        if (hint) {
            hint.hidden = !!q.blocked;
            if (!q.blocked && q.hint) hint.textContent = q.hint;
        }
    }

    var batchLive = document.getElementById('pai-batch-live');
    var batchStopBtn = document.getElementById('pai-improve-batch-stop');
    var batchReportLine = document.getElementById('pai-batch-report-line');
    var batchFilter = 'all';
    var batchCounts = {
        done: document.getElementById('pai-bc-done'),
        redo: document.getElementById('pai-bc-redo'),
        running: document.getElementById('pai-bc-running'),
        queued: document.getElementById('pai-bc-queued'),
        failed: document.getElementById('pai-bc-failed'),
        novideo: document.getElementById('pai-bc-novideo'),
        vidatt: document.getElementById('pai-bc-vidatt'),
        vidok: document.getElementById('pai-bc-vidok'),
        needsync: document.getElementById('pai-bc-needsync')
    };
    var batchEmpty = document.getElementById('pai-batch-empty');
    var batchFilterUserPicked = false;
    var lightbox = document.getElementById('pai-batch-lightbox');
    var lightboxImg = document.getElementById('pai-batch-lightbox-img');
    var lightboxCap = document.getElementById('pai-batch-lightbox-cap');

    function statusLabel(st) {
        if (st === 'done') return 'Successful';
        if (st === 'needs_retry') return 'Needs redo';
        if (st === 'needs_sync') return 'Needs sync';
        if (st === 'failed') return 'Failed';
        if (st === 'blocked') return 'Blocked';
        if (st === 'cancelled') return 'Cancelled';
        if (st === 'running') return 'Running';
        if (st === 'queued') return 'Queued';
        return st;
    }

    function applyBatchFilter() {
        var visible = 0;
        batchList.querySelectorAll('.pai-batch-item').forEach(function (li) {
            var st = li.getAttribute('data-status') || '';
            var noVid = li.getAttribute('data-no-video') === '1';
            var vidAtt = li.getAttribute('data-video-attention') === '1';
            var vidOk = li.getAttribute('data-video-ok') === '1';
            var show = true;
            if (batchFilter === 'done') show = st === 'done';
            else if (batchFilter === 'needs_retry') show = st === 'needs_retry';
            else if (batchFilter === 'needs_sync') show = st === 'needs_sync';
            else if (batchFilter === 'failed') show = st === 'failed' || st === 'blocked';
            else if (batchFilter === 'no_video') show = noVid;
            else if (batchFilter === 'video_attention') show = vidAtt;
            else if (batchFilter === 'video_ok') show = vidOk;
            else if (batchFilter === 'running') show = st === 'running';
            else if (batchFilter === 'queued') show = st === 'queued';
            li.classList.toggle('is-filtered-out', !show);
            if (show) visible++;
        });
        if (batchEmpty) batchEmpty.hidden = visible > 0;
    }

    function setBatchFilter(next, fromUser) {
        if (fromUser) batchFilterUserPicked = true;
        batchFilter = next || 'all';
        document.querySelectorAll('.pai-batch-filter').forEach(function (b) {
            b.classList.toggle('is-on', (b.getAttribute('data-filter') || '') === batchFilter);
        });
        document.querySelectorAll('.pai-batch-stat[data-filter]').forEach(function (b) {
            b.classList.toggle('is-filter-on', (b.getAttribute('data-filter') || '') === batchFilter);
        });
        applyBatchFilter();
    }

    document.querySelectorAll('.pai-batch-filter').forEach(function (btn) {
        btn.addEventListener('click', function () {
            setBatchFilter(btn.getAttribute('data-filter') || 'all', true);
        });
    });
    document.querySelectorAll('.pai-batch-stat[data-filter]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            setBatchFilter(btn.getAttribute('data-filter') || 'all', true);
        });
    });

    function openLightbox(src, title) {
        if (!src || !lightbox) return;
        lightboxImg.src = src;
        lightboxCap.textContent = title || '';
        lightbox.hidden = false;
        document.body.style.overflow = 'hidden';
    }
    function closeLightbox() {
        if (!lightbox) return;
        lightbox.hidden = true;
        lightboxImg.src = '';
        document.body.style.overflow = '';
    }
    ['pai-batch-lightbox-close', 'pai-batch-lightbox-x'].forEach(function (id) {
        var el = document.getElementById(id);
        if (el) el.addEventListener('click', closeLightbox);
    });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeLightbox();
    });
    batchList.addEventListener('click', function (e) {
        var btn = e.target.closest('.pai-batch-thumb');
        if (!btn || btn.disabled) return;
        openLightbox(btn.getAttribute('data-full') || '', btn.getAttribute('data-title') || '');
    });

    function renderBatch(b) {
        batchMsg.textContent = b.message || '';
        var pct = parseInt(b.progress_pct || 0, 10) || 0;
        batchBar.style.width = pct + '%';
        batchPct.textContent = pct + '%';
        var live = b.status === 'queued' || b.status === 'running';
        if (batchLive) batchLive.hidden = !live;
        var nowEl = document.getElementById('pai-batch-now');
        var nowTitle = document.getElementById('pai-batch-now-title');
        if (nowEl && nowTitle) {
            var cur = (b.current_title || '').trim();
            if (live && cur) {
                nowEl.hidden = false;
                nowTitle.textContent = cur;
            } else if (live && (b.counts && b.counts.queued > 0) && !(b.counts.running > 0)) {
                nowEl.hidden = false;
                nowTitle.textContent = 'Starting next product… (keep this page open)';
            } else {
                nowEl.hidden = true;
                nowTitle.textContent = '';
            }
        }
        if (batchStopBtn) batchStopBtn.hidden = !live;
        var c = b.counts || {};
        var r = b.report || {};
        if (batchCounts.done) batchCounts.done.textContent = String(r.successful != null ? r.successful : (c.done || 0));
        if (batchCounts.redo) batchCounts.redo.textContent = String(r.needs_redo != null ? r.needs_redo : (c.needs_retry || 0));
        if (batchCounts.failed) batchCounts.failed.textContent = String(r.failed != null ? r.failed : ((c.failed || 0) + (c.blocked || 0)));
        if (batchCounts.novideo) batchCounts.novideo.textContent = String(r.no_video != null ? r.no_video : (c.no_video || 0));
        if (batchCounts.vidatt) batchCounts.vidatt.textContent = String(r.video_attention != null ? r.video_attention : (c.video_attention || 0));
        if (batchCounts.needsync) batchCounts.needsync.textContent = String(r.needs_sync != null ? r.needs_sync : (c.needs_sync || 0));
        if (batchCounts.vidok) batchCounts.vidok.textContent = String(r.video_ok != null ? r.video_ok : (c.video_ok || 0));
        if (batchCounts.running) batchCounts.running.textContent = String(c.running || 0);
        if (batchCounts.queued) batchCounts.queued.textContent = String(c.queued || 0);
        if (batchReportLine) batchReportLine.textContent = r.headline || '';

        batchList.innerHTML = '';
        (b.items || []).forEach(function (item) {
            var st = item.status || 'queued';
            if (st === 'synced') st = 'done';
            var flags = item.flags || {};
            var noVid = !!(flags.no_video);
            var hasVid = !!(item.has_video || flags.has_video);
            // Running card: hide stale “Omni did not run” copy — it is being worked on now.
            var vidAtt = !!(flags.video_attention) && st !== 'running';
            var vidReason = st === 'running' ? '' : (flags.video_attention_reason || '');
            var prog = parseInt(item.progress || 0, 10) || 0;
            var img = item.image_url || '';
            var href = item.open_url || (item.import_id ? (showImportBase + '/' + item.import_id) : '');
            var li = document.createElement('li');
            li.className = 'pai-batch-item is-' + st;
            li.setAttribute('data-status', st);
            li.setAttribute('data-no-video', noVid ? '1' : '0');
            li.setAttribute('data-video-attention', vidAtt ? '1' : '0');
            li.setAttribute('data-video-ok', flags.video_omni_ok ? '1' : '0');
            var chips = '';
            if (flags.video_omni_ok) chips += '<span class="pai-batch-chip is-vidok">Video AI OK</span>';
            else if (vidAtt) chips += '<span class="pai-batch-chip is-vidatt">Video pending</span>';
            else if (hasVid) chips += '<span class="pai-batch-chip is-video">Has video</span>';
            else if (noVid) chips += '<span class="pai-batch-chip is-novid">No video</span>';
            if (st === 'running' && prog > 0) chips += '<span class="pai-batch-chip is-prog">' + prog + '%</span>';
            if (item.import_id) chips += '<span class="pai-batch-chip">#' + escapeHtml(String(item.import_id)) + '</span>';
            var bar = (st === 'running' && prog > 0)
                ? '<div class="pai-batch-item-bar"><i style="width:' + prog + '%"></i></div>'
                : '';
            var thumbInner = img
                ? '<img src="' + escapeHtml(img) + '" alt=""><span class="pai-batch-thumb-zoom" aria-hidden="true">⌕</span>'
                : '<span class="pai-batch-thumb-ph">No img</span>';
            li.innerHTML =
                '<button type="button" class="pai-batch-thumb"' + (img ? '' : ' disabled')
                + ' data-full="' + escapeHtml(img) + '" data-title="' + escapeHtml(item.title || '') + '" title="View image">'
                + thumbInner + '</button>'
                + '<div class="pai-batch-item-body">'
                + '<div class="pai-batch-item-top"><span class="st is-' + escapeHtml(st) + '">' + escapeHtml(statusLabel(st)) + '</span>' + chips + '</div>'
                + '<strong class="pai-batch-title">' + escapeHtml(item.title || '') + '</strong>'
                + (item.summary ? '<div class="sum">' + escapeHtml(item.summary) + '</div>' : '')
                + (vidReason ? '<div class="sum sum-vid">' + escapeHtml(vidReason) + '</div>' : '')
                + bar
                + '</div>'
                + (href ? '<a class="pai-batch-open" href="' + escapeHtml(href) + '">Open</a>' : '');
            batchList.appendChild(li);
        });
        // While live: show In progress so the merchant sees the running card.
        // When finished: auto-open the most useful filter once (don't fight after they click).
        if (live && !batchFilterUserPicked) {
            batchFilter = 'running';
        } else if (!live && !batchFilterUserPicked) {
            if ((r.needs_sync || 0) > 0) {
                batchFilter = 'needs_sync';
            } else if ((r.video_attention || 0) > 0 && (r.needs_redo || 0) < 1) {
                batchFilter = 'video_attention';
            } else if ((r.needs_redo || 0) > 0) {
                batchFilter = 'needs_retry';
            }
        }
        setBatchFilter(batchFilter, false);
        if (live) {
            batchStartBtn.disabled = true;
            batchStartBtn.textContent = 'Batch running…';
            var runRow = batchList.querySelector('.pai-batch-item.is-running');
            if (runRow && typeof runRow.scrollIntoView === 'function') {
                try { runRow.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } catch (err) {}
            }
        } else {
            batchStartBtn.textContent = 'Start Auto for pending';
        }
        if (b.collection_id && !collId.value) {
            collId.value = b.collection_id;
            collSelectedTitle.textContent = b.collection_title || b.collection_id;
            collSelected.hidden = false;
            collQ.value = b.collection_title || '';
            loadCollProducts(null);
        }
    }

    if (batchStopBtn) {
        batchStopBtn.addEventListener('click', function () {
            if (!confirm('Stop the entire queue?\n\nQueued products are cancelled immediately. The running product is marked stopped right away (safe to close the browser). If Google Omni is mid-upload, that HTTP call may finish on the server but the result will be discarded.')) {
                return;
            }
            batchStopBtn.disabled = true;
            batchStopBtn.textContent = 'Stopping…';
            var body = new FormData();
            body.append('_token', csrf);
            if (currentBatchId) body.append('batch_id', currentBatchId);
            fetch(batchCancelUrl, {
                method: 'POST',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
                credentials: 'same-origin',
                body: body
            })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    alert((data && data.message) ? data.message : 'Stop requested.');
                    if (currentBatchId) pollBatch(currentBatchId);
                    else {
                        fetch(batchStatusUrl, { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })
                            .then(function (r) { return r.json(); })
                            .then(function (d) {
                                if (d && d.batch) {
                                    batchPanel.hidden = false;
                                    renderBatch(d.batch);
                                }
                            });
                    }
                })
                .catch(function () {
                    alert('Could not stop the batch. Refresh and try again.');
                })
                .finally(function () {
                    batchStopBtn.disabled = false;
                    batchStopBtn.textContent = 'Stop all';
                });
        });
    }

    // Restore / discover live Improve Auto work after refresh (cache or imports).
    if (activeBatchBootstrap && activeBatchBootstrap.id) {
        batchPanel.hidden = false;
        renderBatch(activeBatchBootstrap);
        if (activeBatchBootstrap.status === 'queued' || activeBatchBootstrap.status === 'running') {
            pollBatch(activeBatchBootstrap.id);
        }
    } else {
        // No bootstrap — still ask the server (imports may be running from an older process).
        fetch(batchStatusUrl, {
            headers: { 'Accept': 'application/json' },
            credentials: 'same-origin'
        })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data.omni_quota) applyOmniMeter(data.omni_quota);
                if (!data.ok || !data.batch) return;
                batchPanel.hidden = false;
                renderBatch(data.batch);
                if (data.batch.status === 'queued' || data.batch.status === 'running') {
                    pollBatch(data.batch.id || '');
                }
            });
    }

    function escapeHtml(s) {
        return String(s)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }
})();
</script>
@endpush
@endsection