@extends('layouts.app')

@section('title', 'Product AI Import')

@section('content')
@php
    $shopifyListings = $shopifyListings ?? [];
    $availableChannels = $availableChannels ?? [];
    $deferRepairBar = (bool) ($deferRepairBar ?? false);
@endphp
<div class="pai-page">
    <header class="pai-index-hero">
        <div>
            <p class="pai-index-kicker">AVI THE JEWELER · Catalog</p>
        <h1>Product AI Import</h1>
            <p class="pai-index-sub">
                Build Shopify drafts from photos and notes, or <strong>Improve existing</strong> live products (media only).
                <strong>Manual</strong> walks the wizard; <strong>Auto</strong> runs the pipeline and creates a Shopify draft only when everything checks out.
            </p>
        </div>
        <div class="pai-index-actions">
            <a href="{{ route('product-ai-import.improve') }}" class="btn btn-secondary">Improve existing</a>
        <a href="{{ route('product-ai-import.create') }}" class="btn btn-primary">New import</a>
    </div>
    </header>

    @if (session('success'))
        <div class="alert alert-success" style="margin-bottom:1rem;">{{ session('success') }}</div>
    @endif
    @if (session('warning'))
        <div class="alert alert-warning" style="margin-bottom:1rem;">{{ session('warning') }}</div>
    @endif
    @if (session('error'))
        <div class="alert alert-error" style="margin-bottom:1rem;">{{ session('error') }}</div>
    @endif

    <section class="pai-index-card">
        @php $indexSearchQ = $indexSearchQ ?? ''; @endphp
        @if($imports->isEmpty() && $indexSearchQ === '')
            <p class="pai-empty">No imports yet. Start with <strong>New import</strong> to upload images and an optional video.</p>
        @else
            @php
                $pendingImports = $imports->filter(function ($imp) {
                    if (! filled($imp->shopify_product_gid) || $imp->isRepairAttentionSkipped()) {
                        return false;
                    }

                    return $imp->hasPendingShopifySync() || $imp->shopifyPayloadNeedsPrepare();
                });
                $pendingCount = $pendingImports->count();
                $pendingListRows = $pendingImports->map(function ($imp) {
                    $needsPrepare = $imp->shopifyPayloadNeedsPrepare();
                    $needsSync = $imp->hasPendingShopifySync();
                    $reason = $imp->improvePendingWorkReason();
                    if ($reason === null) {
                        if ($needsPrepare && $needsSync) {
                            $reason = 'Prepare media, then push to Shopify.';
                        } elseif ($needsPrepare) {
                            $reason = 'Prepare pending media (crop / compress).';
                        } else {
                            $reason = 'Push pending gallery changes to Shopify.';
                        }
                    }
                    $preview = $imp->listPreviewImage();

                    return [
                        'import_id' => (int) $imp->id,
                        'title' => (string) ($imp->title ?: ('Import #'.$imp->id)),
                        'open_url' => route('product-ai-import.show', $imp),
                        'dismiss_url' => route('product-ai-import.dismiss-repair', $imp),
                        'image_url' => $preview?->displayUrl() ?: $preview?->originalUrl(),
                        'sku' => (string) ($imp->sku ?: ''),
                        'workflow' => $imp->isImproveExisting() ? 'improve' : 'import',
                        'mode' => $imp->is_auto_mode ? 'auto' : 'manual',
                        'needs_prepare' => $needsPrepare,
                        'needs_sync' => $needsSync,
                        'summary' => $reason,
                    ];
                })->values()->all();
                $runningAutos = $imports->filter(function ($imp) {
                    return $imp->isImproveExisting()
                        && $imp->is_auto_mode
                        && in_array((string) $imp->auto_status, [
                            \App\Models\ProductAiImport::AUTO_STATUS_QUEUED,
                            \App\Models\ProductAiImport::AUTO_STATUS_RUNNING,
                        ], true);
                });
                $runningAutoCount = $runningAutos->count();

                $repairStats = $repairStats ?? null;
                $repairTotal = 0;
                $repairRedo = 0;
                $repairSync = 0;
                $repairVideo = 0;
                $repairVideoMissing = 0;
                $repairBusy = 0;
                $repairQueued = 0;
                $repairCapped = false;
                $repairMode = 'mixed';
                $syncOnly = false;
                $videoOnly = false;
                $omniPaused = false;
                $omniResumeAt = null;
                $repairVideoDeferred = 0;
                $repairVideoRunnable = 0;
                $repairListRedo = [];
                $repairListSync = [];
                $repairListVideo = [];
                if (is_array($repairStats)) {
                    $repairTotal = (int) ($repairStats['total'] ?? 0);
                    $repairRedo = (int) ($repairStats['redo'] ?? 0);
                    $repairSync = (int) ($repairStats['sync'] ?? 0);
                    $repairVideo = (int) ($repairStats['video'] ?? 0);
                    $repairVideoMissing = (int) ($repairStats['video_missing'] ?? $repairVideo);
                    $repairBusy = (int) ($repairStats['busy'] ?? 0);
                    $repairQueued = (int) ($repairStats['queued'] ?? $repairTotal);
                    $repairCapped = (bool) ($repairStats['capped'] ?? false);
                    $repairMode = (string) ($repairStats['mode'] ?? 'mixed');
                    $syncOnly = $repairMode === 'sync_only';
                    $videoOnly = $repairMode === 'video_only';
                    $omniPaused = (bool) ($repairStats['omni_paused'] ?? false);
                    $omniResumeAt = $repairStats['omni_resume_at'] ?? null;
                    $repairVideoDeferred = (int) ($repairStats['video_deferred'] ?? 0);
                    $repairVideoRunnable = max(0, $repairVideo - $repairVideoDeferred);
                    $repairLists = is_array($repairStats['lists'] ?? null) ? $repairStats['lists'] : [];
                    $repairListRedo = is_array($repairLists['redo'] ?? null) ? $repairLists['redo'] : [];
                    $repairListSync = is_array($repairLists['sync'] ?? null) ? $repairLists['sync'] : [];
                    $repairListVideo = is_array($repairLists['video'] ?? null) ? $repairLists['video'] : [];
                }
                $batchLite = $activeBatchLite ?? null;
                $batchLiteActive = (bool) ($batchLite['is_active'] ?? false);
                // Orange “now working” row only while the batch is live — never after it finishes.
                $batchCurrentId = $batchLiteActive ? (int) ($batchLite['current_import_id'] ?? 0) : 0;
                $batchCurrentOnPage = $batchCurrentId > 0 && $imports->contains(fn ($imp) => (int) $imp->id === $batchCurrentId);
                $isSearching = $indexSearchQ !== '';
            @endphp

            <form method="GET" action="{{ route('product-ai-import.index') }}" class="pai-index-search" role="search" id="pai-index-search">
                <label class="pai-index-search-label" for="pai-index-q">Find a product</label>
                <div class="pai-index-search-row">
                    <span class="pai-index-search-icon" aria-hidden="true">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                            <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>
                            <path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <input
                        type="search"
                        name="q"
                        id="pai-index-q"
                        class="pai-index-search-input"
                        value="{{ $indexSearchQ }}"
                        placeholder="Paste title, SKU, or import # (symbols like &amp; are OK)…"
                        autocomplete="off"
                        maxlength="200"
                    >
                    @if($isSearching)
                        <a href="{{ route('product-ai-import.index') }}" class="pai-index-search-clear" title="Clear search">Clear</a>
                    @endif
                    <button type="submit" class="btn btn-primary pai-index-search-btn">Search</button>
                </div>
                @if($isSearching)
                    <p class="pai-index-search-meta">
                        {{ $imports->total() }} result{{ $imports->total() === 1 ? '' : 's' }} for “{{ $indexSearchQ }}”
                    </p>
                @endif
            </form>

            @if(! $isSearching && $runningAutoCount > 0 && ! $batchLiteActive)
                <div class="pai-pending-bar" style="background:#fff7ed;border-color:#fdba74;">
                    <div class="pai-pending-bar-copy">
                        <strong>{{ $runningAutoCount }}</strong> Improve Auto job(s) running on this page
                        <span class="pai-muted">
                            @foreach($runningAutos->take(3) as $ra)
                                <a href="{{ route('product-ai-import.show', $ra) }}">#{{ $ra->id }} {{ \Illuminate\Support\Str::limit($ra->title ?: 'Product', 40) }}</a>@if(! $loop->last) · @endif
                            @endforeach
                            @if($runningAutoCount > 3) · +{{ $runningAutoCount - 3 }} more @endif
                        </span>
                    </div>
                    <div class="pai-pending-bar-actions">
                        <form action="{{ route('product-ai-import.improve.batch-cancel') }}" method="POST"
                              onsubmit="return confirm('Stop all Improve Auto jobs in the queue? Remaining products will be cancelled.');">
                            @csrf
                            <button type="submit" class="btn btn-secondary">Stop all Auto</button>
                        </form>
                    </div>
                </div>
            @endif

            @if(! $isSearching && $batchLiteActive)
                <section class="pai-repair-bar is-running" id="pai-batch-lite" aria-label="Batch in progress"
                         data-batch-id="{{ $batchLite['id'] ?? '' }}"
                         data-status-url="{{ route('product-ai-import.improve.batch-status', ['lite' => 1]) }}">
                    <div class="pai-repair-head">
                        <div class="pai-repair-title">
                            <span class="pai-repair-dot is-live" aria-hidden="true"></span>
                            <div>
                                <h2 id="pai-bl-heading">{{ ($batchLite['source'] ?? '') === 'repair' ? 'Repair pass running' : 'Improve Auto batch running' }}</h2>
                                <p id="pai-bl-counts">
                                    @if((int) ($batchLite['running'] ?? 0) > 0)
                                        Working <strong id="pai-bl-current">{{ (int) ($batchLite['current'] ?? 0) }}</strong> of <span id="pai-bl-total">{{ (int) ($batchLite['total'] ?? 0) }}</span>
                                        · <span id="pai-bl-finished">{{ (int) ($batchLite['finished'] ?? 0) }}</span> finished
                                    @else
                                        <strong id="pai-bl-finished">{{ (int) ($batchLite['finished'] ?? 0) }}</strong> of <span id="pai-bl-total">{{ (int) ($batchLite['total'] ?? 0) }}</span> processed
                                    @endif
                                </p>
                            </div>
                        </div>
                        <div class="pai-repair-bar-actions">
                            <a href="{{ route('product-ai-import.improve') }}" class="btn btn-primary pai-repair-cta">Watch full queue</a>
                            <form action="{{ route('product-ai-import.improve.batch-cancel') }}" method="POST"
                                  onsubmit="return confirm('Stop the whole queue?\n\nQueued products cancel now. The running one is marked stopped immediately — safe to close the browser. Omni mid-upload may finish on the server but will be discarded.');">
                                @csrf
                                <button type="submit" class="btn btn-secondary">Stop all</button>
                            </form>
                        </div>
                    </div>
                    <div class="pai-repair-progress" role="progressbar"
                         aria-valuenow="{{ (int) ($batchLite['progress_pct'] ?? 0) }}" aria-valuemin="0" aria-valuemax="100">
                        <i id="pai-bl-bar" style="width: {{ max(2, (int) ($batchLite['progress_pct'] ?? 0)) }}%"></i>
                    </div>

                    <div class="pai-now-card" id="pai-now-card" @if($batchCurrentId < 1 && empty($batchLite['current_title'])) hidden @endif>
                        <div class="pai-now-thumb" id="pai-now-thumb">
                            @if(! empty($batchLite['current_image_url']))
                                <img src="{{ $batchLite['current_image_url'] }}" alt="">
                            @else
                                <span>No photo</span>
                            @endif
                        </div>
                        <div class="pai-now-copy">
                            <div class="pai-now-label">Now working on this product</div>
                            <div class="pai-now-title" id="pai-now-title">{{ $batchLite['current_title'] ?? 'Starting…' }}</div>
                            <div class="pai-now-meta" id="pai-now-meta">
                                @if($batchCurrentId > 0)
                                    #{{ $batchCurrentId }}@if(! empty($batchLite['current_sku'])) · SKU {{ $batchLite['current_sku'] }}@endif
                                    @if($batchCurrentOnPage)
                                        · on this page (highlighted below)
                                    @else
                                        · not on this page — use Open
                                    @endif
                                @endif
                            </div>
                            <div class="pai-now-step" id="pai-now-step">{{ $batchLite['current_step_message'] ?? '' }}</div>
                        </div>
                        <div class="pai-now-actions">
                            @if(! empty($batchLite['current_open_url']))
                                <a href="{{ $batchLite['current_open_url'] }}" class="btn btn-primary" id="pai-now-open">Open product</a>
                            @else
                                <a href="{{ route('product-ai-import.improve') }}" class="btn btn-primary" id="pai-now-open">Open in queue</a>
                            @endif
                        </div>
                    </div>

                    <p class="pai-repair-note" id="pai-bl-note">
                        {{ \Illuminate\Support\Str::limit($batchLite['message'] ?? '', 220) }}
                        The queue survives a refresh. You do not need to hunt every page — use <strong>Open product</strong> above.
                    </p>
                </section>
            @endif

            @if(! $isSearching && $deferRepairBar && ! $batchLiteActive)
                <div id="pai-repair-deferred-slot"
                     data-url="{{ route('product-ai-import.index-repair-bar') }}"
                     aria-busy="true">
                    <div class="pai-repair-bar pai-repair-bar--loading">
                        <p class="pai-repair-note" style="margin:0.85rem;">Scanning catalog backlog…</p>
                    </div>
                </div>
            @elseif(! $isSearching && ! $batchLiteActive && ($repairTotal > 0 || $repairVideoMissing > 0))
                @include('product_ai_import.partials.index_repair_bar', [
                    'repairTotal' => $repairTotal,
                    'repairRedo' => $repairRedo,
                    'repairSync' => $repairSync,
                    'repairVideo' => $repairVideo,
                    'repairVideoMissing' => $repairVideoMissing,
                    'repairBusy' => $repairBusy,
                    'repairQueued' => $repairQueued,
                    'repairCapped' => $repairCapped,
                    'repairMode' => $repairMode,
                    'syncOnly' => $syncOnly,
                    'videoOnly' => $videoOnly,
                    'omniPaused' => $omniPaused,
                    'omniResumeAt' => $omniResumeAt,
                    'repairVideoDeferred' => $repairVideoDeferred,
                    'repairVideoRunnable' => $repairVideoRunnable,
                    'repairListRedo' => $repairListRedo,
                    'repairListSync' => $repairListSync,
                    'repairListVideo' => $repairListVideo,
                ])
            @endif

            @if(! $isSearching && $pendingCount > 0)
                @include('product_ai_import.partials.index_pending_bar', [
                    'pendingCount' => $pendingCount,
                    'pendingListRows' => $pendingListRows,
                ])
            @endif

            <div class="pai-table-wrap" id="pai-index-results">
                <table class="pai-table pai-table--pro">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Mode</th>
                            <th>Workflow</th>
                            <th>Import</th>
                            <th>Shopify</th>
                            <th>Pending</th>
                            <th>Sales channels</th>
                            <th>Updated</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($imports as $import)
                            @php
                                // Shopify set only — never count AI history (original + Enhanced + Omni = inflated).
                                $shopifySet = $import->shopifyMediaItems();
                                $preview = $import->listPreviewImage();
                                $previewUrl = $preview?->displayUrl();
                                $origUrl = $preview?->originalUrl() ?: $previewUrl;
                                $websiteUrl = $import->storefrontUrl();
                                $imgCount = $shopifySet->filter(fn ($m) => $m->isImage())->count();
                                $vidCount = $shopifySet->filter(fn ($m) => $m->isVideo())->count();
                                if ($imgCount < 1 && $vidCount < 1) {
                                    $imgCount = $import->uploadedProductImagesCount();
                                    $vidCount = $import->uploadedVideosCount();
                                }
                                $listing = $shopifyListings[$import->id] ?? ['status' => null, 'channels' => [], 'channels_live' => false];
                                $shopStatus = strtoupper((string) ($listing['status'] ?? ''));
                                $channels = is_array($listing['channels'] ?? null) ? $listing['channels'] : [];
                                $channelsLive = ! empty($listing['channels_live']);
                                if ($channels === [] && $availableChannels !== [] && ! $channelsLive) {
                                    $channels = array_map(static fn ($ch) => [
                                        'id' => $ch['id'],
                                        'name' => $ch['name'],
                                        'published' => true,
                                    ], $availableChannels);
                                }
                                $adminUrl = is_array($import->form_data) ? ($import->form_data['shopify_admin_url'] ?? null) : null;
                                $linked = (bool) $import->shopify_product_gid;
                                $autoRunning = $import->isAutoRunning();
                                $bgBusy = $import->isBackgroundBusy();
                                $isBatchCurrent = $batchCurrentId > 0 && (int) $import->id === $batchCurrentId;
                                $workBusy = $autoRunning || $bgBusy || $isBatchCurrent;
                                $needsPrepare = $linked && $import->shopifyPayloadNeedsPrepare();
                                $pendingSync = $import->hasPendingShopifySync();
                                $hasPending = $needsPrepare || $pendingSync;
                                $paiVideos = $import->relationLoaded('media')
                                    ? $import->media->where('media_type', \App\Models\ProductAiImportMedia::TYPE_VIDEO)
                                    : $import->videos;
                                $noOmniVideo = $import->isImproveExisting()
                                    && $paiVideos->where('is_ai_generated', false)->isNotEmpty()
                                    && ! $import->hasAiEnhancedVideo();
                                $indexGallery = [];
                                $galleryStart = 0;
                                $galleryZipUrl = route('product-ai-import.download-ai-zip', $import);
                                foreach ($shopifySet as $media) {
                                    $gUrl = $media->displayUrl();
                                    if (! $gUrl) {
                                        continue;
                                    }
                                    if ($preview && (int) $media->id === (int) $preview->id) {
                                        $galleryStart = count($indexGallery);
                                    }
                                    $isWorn = $import->isWornOriginalMedia($media);
                                    $isMeas = $import->isMeasurementOriginalMedia($media);
                                    $gKind = 'Original';
                                    if ($media->isVideo()) {
                                        $gKind = $media->is_ai_generated ? 'Omni video' : 'Video';
                                    } elseif ($media->isEnhance()) {
                                        $gKind = 'Enhanced';
                                    } elseif ($media->isLifestyleAi()) {
                                        $gKind = 'Lifestyle';
                                    } elseif ($isWorn) {
                                        $gKind = 'How it looks';
                                    } elseif ($isMeas) {
                                        $gKind = 'Measurement';
                                    } elseif ($media->is_ai_generated) {
                                        $gKind = 'AI';
                                    }
                                    $canDownload = $import->isIndexGalleryDownloadable($media)
                                        && $import->indexGalleryDownloadRelativePath($media) !== null;
                                    $indexGallery[] = [
                                        'id' => (int) $media->id,
                                        'src' => $gUrl,
                                        'orig' => $media->originalUrl() ?: $gUrl,
                                        'kind' => $gKind,
                                        'pos' => (int) $media->position,
                                        'is_video' => $media->isVideo(),
                                        'downloadable' => $canDownload,
                                        'download_url' => $canDownload
                                            ? route('product-ai-import.media.download-ai', [$import, $media])
                                            : null,
                                        'selected' => $canDownload,
                                    ];
                                }
                            @endphp
                            <tr data-import-id="{{ $import->id }}"
                                class="{{ $hasPending ? 'pai-row--pending' : '' }}{{ $isBatchCurrent ? ' pai-row--batch-now' : '' }}"
                                data-auto-status-url="{{ route('product-ai-import.auto-status', $import) }}"
                                data-auto-running="{{ $workBusy ? '1' : '0' }}">
                                <td>
                                    <div class="pai-prod">
                                        @if($previewUrl)
                                            <button
                                                type="button"
                                                class="pai-index-thumb"
                                                data-pai-index-lightbox
                                                data-src="{{ $previewUrl }}"
                                                data-orig="{{ $origUrl }}"
                                                data-title="{{ $import->title ?: ('Import #'.$import->id) }}"
                                                data-import-id="{{ $import->id }}"
                                                data-zip-url="{{ $galleryZipUrl }}"
                                                data-gallery='@json($indexGallery)'
                                                data-gallery-start="{{ $galleryStart }}"
                                                title="Browse gallery ({{ count($indexGallery) }} item{{ count($indexGallery) === 1 ? '' : 's' }})"
                                            >
                                                <img src="{{ $previewUrl }}" alt="{{ $import->title ?: 'Product preview' }}">
                                            </button>
                                        @else
                                            <div class="pai-index-thumb pai-index-thumb--empty"><span>No photo</span></div>
                                        @endif
                                        <div class="pai-prod-copy">
                                            @if($websiteUrl)
                                                <a href="{{ $websiteUrl }}" target="_blank" rel="noopener" class="pai-title pai-title-link" data-pai-title title="Open on website">{{ $import->title ?: 'Untitled' }} ↗</a>
                                            @else
                                                <div class="pai-title" data-pai-title>{{ $import->title ?: 'Untitled' }}</div>
                                            @endif
                                            <div class="pai-muted">#{{ $import->id }} · SKU {{ $import->sku ?: '—' }}</div>
                                            <div class="pai-muted">{{ $imgCount }} photo{{ $imgCount === 1 ? '' : 's' }}@if($vidCount > 0) · {{ $vidCount }} video{{ $vidCount === 1 ? '' : 's' }}@endif</div>
                                            @if($websiteUrl)
                                                <div class="pai-prod-links">
                                                    <a href="{{ $websiteUrl }}" target="_blank" rel="noopener" class="pai-site-link">View on website ↗</a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($import->is_auto_mode)
                                        <span class="pai-mode-badge pai-mode-badge--auto">Auto</span>
                                    @else
                                        <span class="pai-mode-badge pai-mode-badge--manual">Manual</span>
                                    @endif
                                </td>
                                <td>
                                    @if($import->isImproveExisting())
                                        <span class="pai-mode-badge pai-mode-badge--improve">Improve</span>
                                    @else
                                        <span class="pai-mode-badge pai-mode-badge--import">Import</span>
                                    @endif
                                </td>
                                <td>
                                    @php
                                        // “Needs sync” must never wear the green synced badge.
                                        $paiPendingSync = $workBusy ? null : $import->improvePendingWorkReason();
                                        $paiBadge = $workBusy ? ' pai-badge--running' : '';
                                        if ($import->is_auto_mode && ! $workBusy) {
                                            if ($paiPendingSync !== null) {
                                                $paiBadge = ' pai-badge--blocked';
                                            } elseif ($import->auto_status === \App\Models\ProductAiImport::AUTO_STATUS_BLOCKED) {
                                                $paiBadge = ' pai-badge--blocked';
                                            } elseif ($import->auto_status === \App\Models\ProductAiImport::AUTO_STATUS_FAILED) {
                                                $paiBadge = ' pai-badge--failed';
                                            } elseif ($import->auto_status === \App\Models\ProductAiImport::AUTO_STATUS_SYNCED) {
                                                $paiBadge = ' pai-badge--synced';
                                            }
                                        }
                                    @endphp
                                    <span class="pai-badge{{ $paiBadge }}" data-pai-status>
                                        @if($isBatchCurrent && ! $autoRunning && ! $bgBusy)
                                            In repair queue
                                        @else
                                            {{ $import->statusLabel() }}
                                        @endif
                                    </span>
                                    @if($paiPendingSync !== null)
                                        <div class="pai-pending-hint">{{ $paiPendingSync }}</div>
                                    @endif
                                    @php
                                        $idxActivity = $import->indexActivityPresentation(
                                            $isBatchCurrent,
                                            is_array($batchLite ?? null) ? ($batchLite['current_step_message'] ?? null) : null
                                        );
                                        $idxBlockers = is_array($import->form_data['auto_blockers'] ?? null) ? $import->form_data['auto_blockers'] : [];
                                        $idxShowBlockers = $import->is_auto_mode
                                            && $import->auto_status === \App\Models\ProductAiImport::AUTO_STATUS_BLOCKED
                                            && count($idxBlockers) > 0;
                                        $idxShowActivity = $idxActivity['show_line'] || $idxShowBlockers;
                                    @endphp
                                    <div class="pai-auto-line" data-pai-auto-line @if(! $idxShowActivity) hidden @endif>
                                        @if($workBusy)
                                            <div class="pai-auto-bar" aria-hidden="true"><span data-pai-auto-bar style="width: {{ $autoRunning ? max(2, (int) $import->auto_progress) : 40 }}%"></span></div>
                                            <div class="pai-auto-msg" data-pai-auto-msg>{{ $idxActivity['running_message'] }}</div>
                                        @else
                                            <div class="pai-auto-msg" data-pai-auto-msg hidden></div>
                                        @endif
                                        @if($idxShowBlockers)
                                            <div class="pai-chip-row" data-pai-auto-blockers>
                                                @foreach(array_slice($idxBlockers, 0, 3) as $b)
                                                    <span class="pai-chip pai-chip--warn" title="{{ $b['detail'] ?? ($b['title'] ?? 'Issue') }}">{{ $b['title'] ?? 'Issue' }}</span>
                        @endforeach
                                                @if(count($idxBlockers) > 3)
                                                    <span class="pai-chip pai-chip--neutral">+{{ count($idxBlockers) - 3 }}</span>
                                                @endif
                                            </div>
                                        @endif
                                        @if(! empty($idxActivity['chips']))
                                            <div class="pai-chip-row" data-pai-activity-chips>
                                                @foreach($idxActivity['chips'] as $chip)
                                                    <span class="pai-chip pai-chip--{{ $chip['tone'] }}"@if(! empty($chip['title'])) title="{{ $chip['title'] }}"@endif>{{ $chip['label'] }}</span>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </td>
                                <td data-pai-shop-cell data-import-id="{{ $import->id }}">
                                    @if(! $linked)
                                        <span class="pai-shop-status pai-shop-status--none">Not linked</span>
                                    @elseif($shopStatus === 'ACTIVE')
                                        <span class="pai-shop-status pai-shop-status--active" data-pai-shop-status>Active</span>
                                    @elseif($shopStatus === 'DRAFT')
                                        <span class="pai-shop-status pai-shop-status--draft" data-pai-shop-status>Draft</span>
                                    @elseif($shopStatus === 'ARCHIVED')
                                        <span class="pai-shop-status pai-shop-status--archived" data-pai-shop-status>Archived</span>
                                    @elseif($shopStatus !== '')
                                        <span class="pai-shop-status" data-pai-shop-status>{{ ucfirst(strtolower($shopStatus)) }}</span>
                                    @else
                                        <span class="pai-shop-status pai-shop-status--draft" data-pai-shop-status>Linked</span>
                                    @endif
                                    <div class="pai-shop-links">
                                        @if($websiteUrl)
                                            <a href="{{ $websiteUrl }}" target="_blank" rel="noopener" class="pai-site-link">Website ↗</a>
                                        @endif
                                        @if($adminUrl)
                                            <a href="{{ $adminUrl }}" target="_blank" rel="noopener" class="pai-admin-link">Shopify admin ↗</a>
                                        @endif
                                    </div>
                                </td>
                                <td class="pai-td-pending">
                                    @if($needsPrepare)
                                        <div class="pai-pending-flag pai-pending-flag--prepare">Prepare pending</div>
                                    @elseif($pendingSync)
                                        <div class="pai-pending-flag pai-pending-flag--sync">Sync pending</div>
                                    @elseif($noOmniVideo)
                                        <div class="pai-pending-flag pai-pending-flag--video" title="Original video kept — Omni was skipped or never run. Shopify Pending is clear if the original already synced.">No Omni video</div>
                                    @else
                                        <span class="pai-muted">—</span>
                                    @endif
                                </td>
                                <td class="pai-td-channels" data-pai-channels-cell data-import-id="{{ $import->id }}" data-linked="{{ $linked ? '1' : '0' }}">
                                    @if($channelsLive && $channels === [])
                                        <span class="pai-channels-loading">Loading channels…</span>
                                    @elseif($channels === [])
                                        <span class="pai-muted">Channels unavailable</span>
                                    @else
                                        <div class="pai-channels" data-pai-channels-wrap title="{{ $linked ? 'Published sales channels' : 'Default on create: all channels marked' }}">
                                            @foreach($channels as $ch)
                                                @php $on = ! empty($ch['published']); @endphp
                                                <span class="pai-channel {{ $on ? 'is-on' : 'is-off' }}">
                                                    <span class="pai-channel-check" aria-hidden="true">{{ $on ? '✓' : '·' }}</span>
                                                    {{ $ch['name'] ?? 'Channel' }}
                                                </span>
                                            @endforeach
                                        </div>
                                        @unless($linked)
                                            <div class="pai-muted" style="margin-top:0.35rem;">Default: all marked on create</div>
                                        @endunless
                                    @endif
                                </td>
                                <td class="pai-updated">
                                    {{ $import->updated_at?->timezone(config('app.deals_display_timezone', 'America/New_York'))->format('M j, g:i A') }}
                                </td>
                                <td class="pai-actions-cell">
                                    <div class="pai-row-actions">
                                        <a href="{{ $import->isImproveExisting()
                                            ? route('product-ai-import.show', ['productAiImport' => $import, 'step' => 'media'])
                                            : route('product-ai-import.show', $import) }}" class="btn btn-primary pai-open-btn">Open</a>
                                        @if($import->isImproveExisting() && $linked && ! $import->wasRevertedToOriginals())
                                            <form
                                                action="{{ route('product-ai-import.revert-improve-originals', $import) }}"
                                                method="POST"
                                                class="pai-revert-form"
                                                onsubmit="return confirm('Revert this product on Shopify to the original files (before AI and crop)?\n\n• Removes enhanced / cropped media\n• Restores originals and remaps variants\n• Keeps the pai-media-improved tag so Improve will not touch it again');"
                                            >
                                                @csrf
                                                <input type="hidden" name="return" value="index">
                                                <button
                                                    type="submit"
                                                    class="pai-revert-btn"
                                                    @disabled($workBusy)
                                                    title="Restore original media on Shopify and keep the Improve skip tag"
                                                >Revert</button>
                                            </form>
                                        @elseif($import->isImproveExisting() && $linked && $import->wasRevertedToOriginals())
                                            <span class="pai-reverted-chip" title="Originals restored; Improve tag kept">Reverted</span>
                                        @endif
                                        @if($import->canDeleteFromApp())
                                            <button
                                                type="button"
                                                class="pai-delete-btn"
                                                data-pai-delete
                                                data-delete-url="{{ route('product-ai-import.destroy', $import) }}"
                                                data-import-id="{{ $import->id }}"
                                                data-import-title="{{ $import->title ?: ('Import #'.$import->id) }}"
                                                data-import-sku="{{ $import->sku ?: '' }}"
                                                data-import-mode="{{ $import->modeLabel() }}"
                                                data-auto-running="{{ $workBusy ? '1' : '0' }}"
                                                title="Delete this import from the app"
                                            >
                                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                                    <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    <path d="M10 11v6M14 11v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                                </svg>
                                                Delete
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="pai-index-empty">
                                    @if($indexSearchQ !== '')
                                        No products match “{{ $indexSearchQ }}”.
                                        <a href="{{ route('product-ai-import.index') }}">Clear search</a>
                                    @else
                                        No Product AI imports yet.
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="pai-pagination">{{ $imports->links() }}</div>
            <div id="pai-index-deferred"
                 hidden
                 data-listings-url="{{ route('product-ai-import.index-listings') }}"></div>
        @endif
    </section>
</div>

<div class="pai-index-lb" id="pai-index-lightbox" hidden>
    <div class="pai-index-lb-backdrop" data-pai-index-lb-close></div>
    <div class="pai-index-lb-dialog" role="dialog" aria-modal="true" aria-label="Gallery preview">
        <button type="button" class="pai-index-lb-close" data-pai-index-lb-close aria-label="Close">×</button>
        <div class="pai-index-lb-title" id="pai-index-lb-title"></div>
        <div class="pai-index-lb-meta" id="pai-index-lb-meta" hidden>
            <span class="pai-index-lb-counter" id="pai-index-lb-counter"></span>
            <span class="pai-index-lb-kind" id="pai-index-lb-kind"></span>
            <span class="pai-index-lb-pos" id="pai-index-lb-pos"></span>
        </div>
        <div class="pai-index-lb-stage">
            <button type="button" class="pai-index-lb-nav pai-index-lb-nav--prev" id="pai-index-lb-prev" aria-label="Previous" hidden>‹</button>
            <div class="pai-index-lb-body" id="pai-index-lb-body"></div>
            <button type="button" class="pai-index-lb-nav pai-index-lb-nav--next" id="pai-index-lb-next" aria-label="Next" hidden>›</button>
        </div>
        <div class="pai-index-lb-thumbs-wrap" id="pai-index-lb-thumbs-wrap" hidden>
            <div class="pai-index-lb-thumbs" id="pai-index-lb-thumbs" role="tablist" aria-label="Gallery thumbnails"></div>
        </div>
        <div class="pai-index-lb-dl" id="pai-index-lb-dl" hidden>
            <p class="pai-index-lb-dl-note">Download Enhanced, Omni video, Lifestyle AI, and how-it-looks. Studio originals &amp; measurement are excluded.</p>
            <div class="pai-index-lb-dl-row">
                <span class="pai-index-lb-dl-count" id="pai-index-lb-dl-count">0 selected</span>
                <button type="button" class="btn btn-secondary btn-sm" id="pai-index-lb-select-all">Select all</button>
                <button type="button" class="btn btn-secondary btn-sm" id="pai-index-lb-select-none">Clear</button>
                <button type="button" class="btn btn-primary btn-sm" id="pai-index-lb-download" disabled>Download selected</button>
            </div>
        </div>
        <div class="pai-index-lb-actions">
            <a href="#" id="pai-index-lb-open" target="_blank" rel="noopener" class="btn btn-secondary">Open full size</a>
            <a href="#" id="pai-index-lb-dl-one" class="btn btn-primary" hidden>Download this</a>
        </div>
    </div>
</div>

{{-- Delete import: two-step confirm --}}
<div class="pai-del-modal" id="pai-del-modal" hidden>
    <div class="pai-del-modal-backdrop" data-pai-del-close></div>
    <div class="pai-del-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="pai-del-title">
        <div class="pai-del-modal-head">
            <h2 id="pai-del-title">Delete import?</h2>
            <button type="button" class="pai-del-modal-x" data-pai-del-close aria-label="Close">×</button>
        </div>
        <div class="pai-del-modal-body">
            <p class="pai-del-lead">This permanently removes the import from the app — photos, videos, AI files, and database records. Shopify is not touched (this import is not linked).</p>
            <div class="pai-del-summary">
                <strong id="pai-del-name"></strong>
                <span id="pai-del-meta" class="pai-muted"></span>
            </div>
            <p class="pai-del-warn" id="pai-del-auto-warn" hidden>Auto is still running on this import. Deleting will stop further progress and erase everything already generated.</p>

            <div class="pai-del-step" data-pai-del-step="1">
                <p class="pai-del-q">Are you sure you want to delete this import?</p>
                <div class="pai-del-actions">
                    <button type="button" class="btn btn-secondary" data-pai-del-close>Cancel</button>
                    <button type="button" class="btn btn-primary" id="pai-del-continue">Continue</button>
                </div>
            </div>

            <div class="pai-del-step" data-pai-del-step="2" hidden>
                <p class="pai-del-q">Second confirmation — type <strong>DELETE</strong> to confirm.</p>
                <input type="text" id="pai-del-confirm-input" class="pai-input" autocomplete="off" placeholder="Type DELETE" aria-label="Type DELETE to confirm">
                <div class="pai-del-actions">
                    <button type="button" class="btn btn-secondary" data-pai-del-back>Back</button>
                    <button type="submit" form="pai-del-form" class="btn btn-danger" id="pai-del-submit" disabled>Delete permanently</button>
                </div>
            </div>
        </div>
        <form id="pai-del-form" method="POST" action="#">
            @csrf
            @method('DELETE')
        </form>
    </div>
</div>

@push('styles')
<style>
.pai-page { max-width: none; width: 100%; }
.pai-index-hero {
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end;
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.6rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}
.pai-index-kicker {
    margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: #93c5fd; font-weight: 600;
}
.pai-index-hero h1 { margin: 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; }
.pai-index-sub { margin: 0.4rem 0 0; color: #cbd5e1; font-size: 0.92rem; max-width: 48rem; line-height: 1.45; }
.pai-index-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.pai-index-actions .btn-secondary {
    background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); color: #e2e8f0;
}
.pai-index-actions .btn-secondary:hover { background: rgba(255,255,255,0.14); color: #fff; }
.pai-index-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 0.35rem 0.65rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pai-empty { margin: 1rem; color: #6b7280; }
.pai-table-wrap { overflow-x: auto; }
.pai-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pai-table th, .pai-table td { text-align: left; padding: 0.95rem 0.75rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.pai-table th {
    color: #64748b; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    padding-top: 1rem;
}
.pai-table tbody tr:hover { background: #f8fafc; }
.pai-prod { display: flex; gap: 0.85rem; align-items: flex-start; min-width: 16rem; }
.pai-prod-copy { min-width: 0; }
.pai-title { font-weight: 650; color: #0f172a; line-height: 1.3; }
.pai-muted { color: #64748b; font-size: 0.78rem; margin-top: 0.2rem; }
.pai-badge {
    display: inline-block; background: #eff6ff; color: #1d4ed8; border-radius: 999px;
    padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 650;
}
.pai-badge--running { background: #ecfdf5; color: #047857; }
.pai-badge--blocked { background: #fffbeb; color: #b45309; }
.pai-badge--failed { background: #fef2f2; color: #b91c1c; }
.pai-badge--synced { background: #eff6ff; color: #1d4ed8; }
.pai-mode-badge {
    display: inline-block; border-radius: 6px; padding: 0.22rem 0.55rem;
    font-size: 0.7rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase;
}
.pai-mode-badge--manual { background: #f1f5f9; color: #475569; }
.pai-mode-badge--auto { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.pai-mode-badge--improve { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
.pai-mode-badge--import { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; }
.pai-auto-line { margin-top: 0.45rem; max-width: 11.5rem; }
.pai-auto-msg {
    color: #475569; font-size: 0.72rem; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pai-pending-hint {
    margin-top: 0.25rem; color: #be185d; font-size: 0.72rem; font-weight: 600; line-height: 1.35;
}
.pai-chip-row {
    display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem;
}
.pai-chip {
    display: inline-flex; align-items: center; max-width: 100%;
    padding: 0.12rem 0.45rem; border-radius: 5px;
    font-size: 0.68rem; font-weight: 650; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border: 1px solid transparent; cursor: default;
}
.pai-chip--ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.pai-chip--warn { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.pai-chip--danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pai-chip--neutral { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.pai-auto-bar {
    height: 4px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-bottom: 0.3rem;
}
.pai-auto-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #059669, #34d399);
    transition: width .4s ease;
}
.pai-shop-status {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 700;
    background: #f1f5f9; color: #334155;
}
.pai-shop-status--active { background: #ecfdf5; color: #047857; }
.pai-shop-status--draft { background: #fff7ed; color: #c2410c; }
.pai-shop-status--archived { background: #f1f5f9; color: #64748b; }
.pai-shop-status--none { background: #f8fafc; color: #94a3b8; font-weight: 600; }
.pai-pending-bar {
    display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem; align-items: center; justify-content: space-between;
    margin: 0.85rem 0.85rem 0.35rem; padding: 0.85rem 1rem;
    border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0;
}
.pai-pending-section {
    margin: 0.85rem 0.85rem 0.5rem;
    padding: 1rem 1.15rem 0.9rem;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 68%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pai-pending-head {
    display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem;
    align-items: flex-start; justify-content: space-between;
}
.pai-pending-title { display: flex; gap: 0.65rem; align-items: flex-start; }
.pai-pending-title h2 {
    margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: #0f172a;
}
.pai-pending-title p { margin: 0.15rem 0 0; font-size: 0.85rem; color: #475569; max-width: 42rem; }
.pai-pending-title p strong { color: #1d4ed8; font-size: 0.95rem; }
.pai-pending-dot {
    flex: 0 0 auto; width: 10px; height: 10px; margin-top: 0.35rem;
    border-radius: 50%; background: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}
.pai-pending-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pai-pending-stats { margin-top: 0.85rem; }
.pai-pending-stats .pai-repair-stat em strong { color: #334155; font-weight: 700; }
.pai-repair-bar--loading {
    border-style: dashed;
    background: #f8fafc;
    border-color: #e2e8f0;
}
.pai-repair-bar--loading .pai-repair-note { color: #64748b; }
.pai-channels-loading {
    display: inline-block;
    font-size: 0.75rem;
    color: #94a3b8;
    animation: paiChannelsPulse 1.2s ease-in-out infinite;
}
@keyframes paiChannelsPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}
.pai-repair-bar {
    margin: 0.85rem 0.85rem 0.5rem;
    padding: 1rem 1.15rem 0.9rem;
    border-radius: 14px;
    border: 1px solid #fbcfe8;
    background: linear-gradient(180deg, #fff5f9 0%, #ffffff 68%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pai-repair-head {
    display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem;
    align-items: flex-start; justify-content: space-between;
}
.pai-repair-title { display: flex; gap: 0.65rem; align-items: flex-start; }
.pai-repair-title h2 {
    margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: #0f172a;
}
.pai-repair-title p { margin: 0.15rem 0 0; font-size: 0.85rem; color: #475569; }
.pai-repair-title p strong { color: #be185d; font-size: 0.95rem; }
.pai-repair-dot {
    flex: 0 0 auto; width: 10px; height: 10px; margin-top: 0.35rem;
    border-radius: 50%; background: #ec4899;
    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.16);
}
.pai-repair-cta { white-space: nowrap; }
.pai-repair-bar.is-running { border-color: #fed7aa; background: linear-gradient(180deg, #fffaf3 0%, #ffffff 68%); }
.pai-repair-bar.is-running .pai-repair-title p strong { color: #c2410c; }
.pai-repair-bar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pai-repair-dot.is-live { background: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18); animation: paiRepairPulse 1.4s ease-in-out infinite; }
@keyframes paiRepairPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.10); }
    50% { box-shadow: 0 0 0 7px rgba(249, 115, 22, 0.22); }
}
.pai-repair-progress {
    margin-top: 0.85rem; height: 8px; border-radius: 999px;
    background: #f1f5f9; overflow: hidden;
}
.pai-repair-progress i {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #fb923c, #f97316);
    transition: width 0.4s ease;
}
.pai-repair-stats {
    display: grid; gap: 0.6rem; margin-top: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}
.pai-repair-stat {
    padding: 0.6rem 0.75rem; border-radius: 10px;
    background: #fff; border: 1px solid #e2e8f0;
    display: flex; flex-direction: column; gap: 0.1rem;
    text-align: left; font: inherit; color: inherit; width: 100%;
}
button.pai-repair-stat {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
button.pai-repair-stat:hover {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}
button.pai-repair-stat.is-open {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
    border-color: #93c5fd;
}
.pai-repair-stat b { font-size: 1.35rem; line-height: 1.1; font-weight: 800; color: #0f172a; }
.pai-repair-stat span { font-size: 0.8rem; font-weight: 700; color: #334155; }
.pai-repair-stat em { font-style: normal; font-size: 0.74rem; color: #64748b; }
.pai-repair-stat.is-redo { border-color: #fecdd3; background: #fff7f8; }
.pai-repair-stat.is-redo b { color: #be123c; }
.pai-repair-stat.is-sync { border-color: #bfdbfe; background: #f5f9ff; }
.pai-repair-stat.is-sync b { color: #1d4ed8; }
.pai-repair-stat.is-video { border-color: #c4b5fd; background: #f8f5ff; }
.pai-repair-stat.is-video b { color: #6d28d9; }
.pai-repair-stat.is-busy { border-color: #fed7aa; background: #fffaf5; }
.pai-repair-stat.is-busy b { color: #c2410c; }
.pai-repair-list-panel {
    margin-top: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 40%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    padding: 0.95rem 1rem 1rem;
}
.pai-repair-list-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.35rem;
}
.pai-repair-list-kicker {
    margin: 0 0 0.15rem;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: #94a3b8;
}
.pai-repair-list-head strong { display: block; font-size: 1rem; color: #0f172a; }
.pai-repair-list-help {
    margin: 0 0 0.75rem; font-size: 0.78rem; color: #64748b; line-height: 1.4;
}
.pai-repair-list-help strong { color: #0f172a; }
.pai-repair-list-close {
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
    font-size: 0.78rem; font-weight: 700; cursor: pointer;
    padding: 0.35rem 0.65rem; border-radius: 8px;
}
.pai-repair-list-close:hover { color: #0f172a; border-color: #cbd5e1; }
.pai-repair-list {
    margin: 0; padding: 0; max-height: 360px; overflow: auto;
    display: flex; flex-direction: column; gap: 0.55rem;
}
/* Author `display:flex` must not override the HTML hidden attribute. */
.pai-repair-list[hidden] {
    display: none !important;
}
.pai-repair-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.75rem;
    border: 1px solid #e8eef5;
    border-radius: 12px;
    background: #fff;
}
.pai-repair-item-thumb {
    width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
}
.pai-repair-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pai-repair-item-thumb span {
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em; color: #94a3b8;
}
.pai-repair-item-body { min-width: 0; }
.pai-repair-item-body h4 {
    margin: 0; font-size: 0.9rem; font-weight: 700; color: #0f172a;
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pai-repair-item-body p {
    margin: 0.2rem 0 0; font-size: 0.76rem; color: #64748b; line-height: 1.35;
}
.pai-repair-pill {
    display: inline-block; margin-left: 0.25rem;
    padding: 0.08rem 0.4rem; border-radius: 999px;
    font-size: 0.68rem; font-weight: 800; color: #6d28d9; background: #ede9fe;
}
.pai-repair-item-tags {
    display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem;
}
.pai-repair-item-tags span {
    font-size: 0.68rem; font-weight: 700; color: #64748b;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 999px; padding: 0.1rem 0.45rem;
}
.pai-repair-item-actions {
    display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end;
}
.pai-repair-done-btn {
    background: #0f172a !important; color: #fff !important; border-color: #0f172a !important;
}
.pai-repair-done-btn:hover { filter: brightness(1.08); }
.pai-repair-done-btn:disabled { opacity: 0.55; cursor: wait; }
.pai-repair-item.is-dismissing { opacity: 0.45; pointer-events: none; }
.pai-repair-list-empty {
    margin: 0; padding: 1.25rem 0.75rem; text-align: center;
    color: #64748b; font-size: 0.84rem; background: #f8fafc;
    border: 1px dashed #e2e8f0; border-radius: 12px;
}
@media (max-width: 700px) {
    .pai-repair-item {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .pai-repair-item-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .pai-repair-item-actions .btn { flex: 1 1 auto; text-align: center; }
}
.pai-repair-note { margin: 0.75rem 0 0; font-size: 0.76rem; color: #64748b; }
.pai-repair-note a { color: #be185d; font-weight: 700; }
.pai-now-card {
    margin-top: 0.85rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border: 1px solid #fdba74;
    border-radius: 12px;
    background: #fff7ed;
}
.pai-now-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #ffe4c4;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 0.65rem;
    color: #9a3412;
}
.pai-now-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pai-now-copy { flex: 1; min-width: 0; }
.pai-now-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c2410c;
}
.pai-now-title {
    margin-top: 0.15rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}
.pai-now-meta { margin-top: 0.15rem; font-size: 0.78rem; color: #64748b; }
.pai-now-step { margin-top: 0.25rem; font-size: 0.8rem; color: #9a3412; font-weight: 600; }
.pai-now-actions { flex-shrink: 0; }
.pai-row--batch-now {
    outline: 2px solid #f97316;
    outline-offset: -2px;
    background: #fff7ed !important;
}
.pai-row--batch-now td:first-child { box-shadow: inset 4px 0 0 #f97316; }
.pai-pending-bar-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem; }
.pai-pending-bar-copy strong { font-size: 0.95rem; color: #0f172a; }
.pai-pending-bar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pai-td-pending { min-width: 7.5rem; }
.pai-row--pending { background: #fcfcfd; }
.pai-table--pro { min-width: 1100px; }
.pai-pending-flag {
    display: inline-block;
    margin-top: 0;
    padding: 0.22rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.pai-pending-flag--prepare {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
}
.pai-pending-flag--video {
    border-color: #c4b5fd;
    background: #f5f3ff;
    color: #5b21b6;
}
.pai-pending-flag--sync {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #93c5fd;
}
.pai-admin-link { color: #2563eb; text-decoration: none; font-weight: 600; }
.pai-admin-link:hover { text-decoration: underline; }
.pai-site-link {
    color: #0f766e; text-decoration: none; font-weight: 600; font-size: 0.78rem;
}
.pai-site-link:hover { text-decoration: underline; color: #0d9488; }
.pai-title-link {
    display: inline; color: #0f172a; text-decoration: none; font-weight: 700;
}
.pai-title-link:hover { color: #0f766e; text-decoration: underline; }
.pai-prod-links { margin-top: 0.3rem; }
.pai-shop-links {
    display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.4rem;
}
.pai-index-search {
    margin: 0 0 1rem; padding: 0.95rem 1.05rem; border: 1px solid #e2e8f0;
    border-radius: 14px; background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.pai-index-search-label {
    display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #64748b; margin-bottom: 0.45rem;
}
.pai-index-search-row {
    display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
}
.pai-index-search-icon {
    display: inline-flex; color: #94a3b8; flex: 0 0 auto;
}
.pai-index-search-input {
    flex: 1 1 16rem; min-width: 12rem; border: 1px solid #cbd5e1; border-radius: 10px;
    padding: 0.65rem 0.85rem; font-size: 0.95rem; color: #0f172a; background: #fff;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.04);
}
.pai-index-search-input:focus {
    outline: none; border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(15,23,42,0.08);
}
.pai-index-search-btn { flex: 0 0 auto; }
.pai-index-search-clear {
    color: #64748b; font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.pai-index-search-clear:hover { color: #0f172a; text-decoration: underline; }
.pai-index-search-meta {
    margin: 0.55rem 0 0; font-size: 0.82rem; color: #64748b;
}
.pai-index-empty {
    padding: 2rem 1rem !important; text-align: center; color: #64748b; font-size: 0.95rem;
}
.pai-index-empty a { color: #2563eb; font-weight: 600; }
.pai-channels { display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: 28rem; }
.pai-channel {
    display: inline-flex; align-items: center; gap: 0.28rem;
    border-radius: 999px; padding: 0.18rem 0.5rem; font-size: 0.7rem; font-weight: 650;
    border: 1px solid #e2e8f0; background: #fff; color: #64748b;
}
.pai-channel.is-on { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.pai-channel.is-off { background: #f8fafc; color: #94a3b8; }
.pai-channel-check { font-size: 0.68rem; }
.pai-updated { white-space: nowrap; color: #64748b; font-size: 0.82rem; }
.pai-actions-cell { text-align: right; white-space: nowrap; min-width: 14.5rem; }
.pai-row-actions {
    display: inline-flex; flex-direction: row; flex-wrap: nowrap; gap: 0.45rem;
    justify-content: flex-end; align-items: center;
}
.pai-open-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.45rem 0.95rem; font-size: 0.82rem; font-weight: 650; border-radius: 8px;
    text-decoration: none; line-height: 1.2;
}
.pai-revert-form { display: inline-flex; margin: 0; }
.pai-revert-btn {
    appearance: none; display: inline-flex; align-items: center; justify-content: center;
    padding: 0.45rem 0.85rem; font-size: 0.82rem; font-weight: 650; line-height: 1.2;
    border-radius: 8px; border: 1px solid #fdba74; color: #c2410c; background: #fff7ed;
    cursor: pointer; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pai-revert-btn:hover:not(:disabled) {
    background: #ffedd5; border-color: #fb923c; color: #9a3412;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.18);
}
.pai-revert-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pai-reverted-chip {
    display: inline-flex; align-items: center; padding: 0.35rem 0.65rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
    border-radius: 999px; border: 1px solid #e2e8f0; color: #64748b; background: #f8fafc;
}
.pai-delete-btn {
    appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0.45rem 0.85rem; font-size: 0.82rem; font-weight: 650; line-height: 1.2;
    border-radius: 8px; border: 1px solid #fca5a5; color: #b91c1c; background: #fff;
    cursor: pointer; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pai-delete-btn:hover {
    background: #fef2f2; border-color: #f87171; color: #991b1b;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}
.pai-delete-btn:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.28);
}
.pai-delete-btn svg { flex: 0 0 auto; }

.pai-del-modal[hidden] { display: none !important; }
.pai-del-modal {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.pai-del-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.pai-del-modal-dialog {
    position: relative; z-index: 1; width: min(440px, 100%);
    background: #fff; border-radius: 14px; border: 1px solid #e2e8f0;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.25); overflow: hidden;
}
.pai-del-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 1rem 1.15rem; border-bottom: 1px solid #f1f5f9;
}
.pai-del-modal-head h2 { margin: 0; font-size: 1.05rem; color: #0f172a; }
.pai-del-modal-x {
    width: 2rem; height: 2rem; border: 0; border-radius: 999px; cursor: pointer;
    background: #f1f5f9; color: #475569; font-size: 1.2rem; line-height: 1;
}
.pai-del-modal-body { padding: 1.1rem 1.15rem 1.25rem; }
.pai-del-lead { margin: 0 0 0.85rem; font-size: 0.9rem; color: #475569; line-height: 1.45; }
.pai-del-summary {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.7rem 0.8rem; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0;
    margin-bottom: 0.85rem;
}
.pai-del-summary strong { font-size: 0.92rem; color: #0f172a; }
.pai-del-warn {
    margin: 0 0 0.85rem; padding: 0.55rem 0.7rem; border-radius: 8px;
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 0.84rem; line-height: 1.4;
}
.pai-del-q { margin: 0 0 0.75rem; font-size: 0.92rem; color: #0f172a; font-weight: 600; }
.pai-del-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-top: 0.85rem; }
#pai-del-confirm-input { width: 100%; max-width: 100%; }
.pai-pagination { margin: 0.75rem 1rem 0; }
.pai-index-thumb {
    appearance: none; flex: 0 0 auto;
    width: 4.5rem; height: 4.5rem; padding: 0;
    border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
    background: #fff; cursor: zoom-in;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pai-index-thumb:hover { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.pai-index-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pai-index-thumb--empty {
    display: flex; align-items: center; justify-content: center; cursor: default;
    color: #94a3b8; font-size: 0.68rem; font-weight: 600; background: #f8fafc;
}
.pai-index-thumb--empty:hover { border-color: #e5e7eb; box-shadow: none; }

.pai-index-lb[hidden] { display: none !important; }
.pai-index-lb {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center; padding: 0.5rem;
}
.pai-index-lb-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.78); }
.pai-index-lb-dialog {
    position: relative; z-index: 1;
    width: min(1180px, 98vw);
    height: min(96vh, 920px);
    max-height: 96vh;
    background: #0f172a; color: #e2e8f0; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 25px 50px rgba(0,0,0,0.45);
    display: flex; flex-direction: column;
}
.pai-index-lb-close {
    position: absolute; top: 0.55rem; right: 0.65rem; z-index: 2;
    width: 2rem; height: 2rem; border: 0; border-radius: 999px;
    background: rgba(255,255,255,0.1); color: #fff; font-size: 1.25rem; cursor: pointer;
}
.pai-index-lb-title {
    padding: 0.65rem 3rem 0.2rem 1rem; font-size: 0.88rem; font-weight: 600; color: #f8fafc;
    line-height: 1.3;
}
.pai-index-lb-meta {
    display: flex; flex-wrap: wrap; gap: 0.35rem 0.65rem; align-items: center;
    padding: 0 1rem 0.35rem; font-size: 0.75rem;
}
.pai-index-lb-counter {
    font-weight: 800; color: #e2e8f0; background: rgba(255,255,255,0.1);
    border-radius: 999px; padding: 0.15rem 0.55rem;
}
.pai-index-lb-kind {
    font-weight: 700; color: #93c5fd; background: rgba(37,99,235,0.2);
    border-radius: 999px; padding: 0.15rem 0.55rem;
}
.pai-index-lb-pos { color: #94a3b8; }
.pai-index-lb-stage {
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 0.35rem 0.5rem;
}
.pai-index-lb-nav {
    flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25); background: rgba(15,23,42,0.55);
    color: #f8fafc; font-size: 1.5rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, border-color .12s;
}
.pai-index-lb-nav:hover { background: rgba(37,99,235,0.45); border-color: #93c5fd; }
.pai-index-lb-nav:disabled { opacity: 0.35; cursor: default; }
.pai-index-lb-body {
    flex: 1 1 auto; align-self: stretch; min-width: 0; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0.25rem;
}
.pai-index-lb-body img, .pai-index-lb-body video {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    object-fit: contain; border-radius: 8px; background: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.pai-index-lb-thumbs-wrap {
    flex: 0 0 auto;
    display: flex; justify-content: center;
    padding: 0.65rem 1rem 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.15);
}
.pai-index-lb-thumbs {
    display: flex; gap: 0.6rem; justify-content: center;
    width: max-content; max-width: 100%; margin: 0 auto;
    overflow-x: auto; padding: 0.15rem 0.25rem 0.25rem;
    scroll-behavior: smooth;
}
.pai-index-lb-thumbs::-webkit-scrollbar { height: 7px; }
.pai-index-lb-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 999px; }
.pai-index-lb-thumb {
    flex: 0 0 auto; position: relative; width: 7.25rem; height: 7.25rem;
    padding: 0; border: 2px solid rgba(255,255,255,0.2); border-radius: 10px;
    background: #1e293b; overflow: hidden; cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.pai-index-lb-thumb:hover { border-color: #93c5fd; transform: scale(1.03); }
.pai-index-lb-thumb.is-active {
    border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,0.4);
    transform: scale(1.05);
}
.pai-index-lb-thumb img, .pai-index-lb-thumb video {
    display: block; width: 100%; height: 100%; object-fit: cover; background: #fff;
}
.pai-index-lb-thumb-vid {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; font-size: 1.5rem; color: #e2e8f0;
    background: linear-gradient(135deg, #334155, #1e293b);
}
.pai-index-lb-thumb-n {
    position: absolute; left: 0.3rem; top: 0.3rem; z-index: 1;
    min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
    border-radius: 5px; background: rgba(15,23,42,0.88); color: #f8fafc;
    font-size: 0.72rem; font-weight: 800; line-height: 1.35rem; text-align: center;
}
.pai-index-lb-thumb-kind {
    position: absolute; right: 0; bottom: 0; left: 0; z-index: 1;
    padding: 0.2rem 0.25rem; background: rgba(15,23,42,0.82);
    color: #e2e8f0; font-size: 0.65rem; font-weight: 700;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pai-index-lb-thumb.is-downloadable .pai-index-lb-thumb-kind { background: rgba(37, 99, 235, 0.88); }
.pai-index-lb-thumb.is-blocked .pai-index-lb-thumb-kind { background: rgba(71, 85, 105, 0.92); }
.pai-index-lb-thumb.is-blocked { opacity: 0.72; }
.pai-index-lb-thumb-check {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer;
    accent-color: #2563eb;
}
.pai-index-lb-dl {
    flex: 0 0 auto;
    padding: 0.65rem 1rem 0.35rem;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.55);
}
.pai-index-lb-dl-note {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.35;
}
.pai-index-lb-dl-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
}
.pai-index-lb-dl-count {
    font-size: 0.8rem; font-weight: 600; color: #e2e8f0; margin-right: 0.25rem;
}
.pai-index-lb-dl .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.75rem; }
.pai-index-lb-actions {
    flex: 0 0 auto;
    display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.55rem 1rem 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 900px) {
    .pai-index-lb-dialog { width: 100%; height: 98vh; max-height: 98vh; }
    .pai-channels { max-width: 14rem; }
}
</style>
@endpush

@push('scripts')
<script>
(function () {
    var searchForm = document.getElementById('pai-index-search');
    var resultsEl = document.getElementById('pai-index-results');
    if (searchForm && resultsEl && searchForm.querySelector('[name="q"]') && (searchForm.querySelector('[name="q"]').value || '').trim() !== '') {
        resultsEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    var lb = document.getElementById('pai-index-lightbox');
    if (lb) {
        var titleEl = document.getElementById('pai-index-lb-title');
        var metaEl = document.getElementById('pai-index-lb-meta');
        var counterEl = document.getElementById('pai-index-lb-counter');
        var kindEl = document.getElementById('pai-index-lb-kind');
        var posEl = document.getElementById('pai-index-lb-pos');
        var bodyEl = document.getElementById('pai-index-lb-body');
        var openEl = document.getElementById('pai-index-lb-open');
        var dlOneEl = document.getElementById('pai-index-lb-dl-one');
        var prevBtn = document.getElementById('pai-index-lb-prev');
        var nextBtn = document.getElementById('pai-index-lb-next');
        var thumbsWrap = document.getElementById('pai-index-lb-thumbs-wrap');
        var thumbsEl = document.getElementById('pai-index-lb-thumbs');
        var dlPanel = document.getElementById('pai-index-lb-dl');
        var dlCountEl = document.getElementById('pai-index-lb-dl-count');
        var dlSelectAllBtn = document.getElementById('pai-index-lb-select-all');
        var dlSelectNoneBtn = document.getElementById('pai-index-lb-select-none');
        var dlDownloadBtn = document.getElementById('pai-index-lb-download');
        var gallery = [];
        var galleryIndex = 0;
        var thumbsBuilt = false;
        var zipUrl = '';
        var csrfToken = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';

        function parseGallery(btn) {
            try {
                var raw = btn.getAttribute('data-gallery') || '[]';
                var items = JSON.parse(raw);
                return Array.isArray(items) ? items : [];
            } catch (e) {
                return [];
            }
        }

        function isDownloadable(item) {
            return !!(item && item.downloadable && item.download_url);
        }

        function selectedDownloadable() {
            return gallery.filter(function (item) {
                return isDownloadable(item) && item.selected;
            });
        }

        function syncDownloadUi() {
            var selectable = gallery.filter(isDownloadable);
            var selected = selectedDownloadable();
            if (dlPanel) {
                dlPanel.hidden = selectable.length < 1;
            }
            if (dlCountEl) {
                dlCountEl.textContent = selected.length + ' selected';
            }
            if (dlDownloadBtn) {
                dlDownloadBtn.disabled = selected.length < 1;
                dlDownloadBtn.textContent = selected.length > 1
                    ? ('Download selected (' + selected.length + ')')
                    : 'Download selected';
            }
            var cur = gallery[galleryIndex];
            if (dlOneEl) {
                if (isDownloadable(cur)) {
                    dlOneEl.hidden = false;
                    dlOneEl.href = cur.download_url;
                    dlOneEl.setAttribute('download', '');
                } else {
                    dlOneEl.hidden = true;
                    dlOneEl.removeAttribute('href');
                }
            }
            if (thumbsEl && thumbsBuilt) {
                thumbsEl.querySelectorAll('.pai-index-lb-thumb-check').forEach(function (box) {
                    var idx = parseInt(box.getAttribute('data-gallery-idx') || '-1', 10);
                    if (idx >= 0 && gallery[idx]) {
                        box.checked = !!gallery[idx].selected;
                    }
                });
            }
        }

        function buildThumbs() {
            if (!thumbsEl || !thumbsWrap) return;
            thumbsEl.innerHTML = '';
            thumbsBuilt = false;
            if (gallery.length < 1) {
                thumbsWrap.hidden = true;
                syncDownloadUi();
                return;
            }
            thumbsWrap.hidden = false;
            gallery.forEach(function (item, i) {
                var btn = document.createElement('button');
                btn.type = 'button';
                var canDl = isDownloadable(item);
                btn.className = 'pai-index-lb-thumb'
                    + (i === galleryIndex ? ' is-active' : '')
                    + (canDl ? ' is-downloadable' : ' is-blocked');
                btn.setAttribute('role', 'tab');
                btn.setAttribute('aria-selected', i === galleryIndex ? 'true' : 'false');
                btn.setAttribute('aria-label', 'Item ' + (i + 1) + ': ' + (item.kind || 'Photo'));
                btn.setAttribute('data-gallery-idx', String(i));

                var num = document.createElement('span');
                num.className = 'pai-index-lb-thumb-n';
                num.textContent = String(i + 1);
                btn.appendChild(num);

                if (canDl) {
                    var check = document.createElement('input');
                    check.type = 'checkbox';
                    check.className = 'pai-index-lb-thumb-check';
                    check.checked = !!item.selected;
                    check.setAttribute('data-gallery-idx', String(i));
                    check.title = 'Include in download';
                    check.addEventListener('click', function (ev) {
                        ev.stopPropagation();
                    });
                    check.addEventListener('change', function (ev) {
                        ev.stopPropagation();
                        if (!gallery[i]) return;
                        gallery[i].selected = !!check.checked;
                        syncDownloadUi();
                    });
                    btn.appendChild(check);
                }

                if (item.is_video) {
                    var vid = document.createElement('video');
                    vid.src = item.src || '';
                    vid.muted = true;
                    vid.playsInline = true;
                    vid.preload = 'metadata';
                    btn.appendChild(vid);
                } else {
                    var thumb = document.createElement('img');
                    thumb.src = item.src || '';
                    thumb.alt = '';
                    thumb.loading = 'lazy';
                    btn.appendChild(thumb);
                }

                var kind = document.createElement('span');
                kind.className = 'pai-index-lb-thumb-kind';
                kind.textContent = item.kind || 'Photo';
                btn.appendChild(kind);

                btn.addEventListener('click', function () {
                    var idx = parseInt(btn.getAttribute('data-gallery-idx') || '0', 10);
                    if (idx === galleryIndex) return;
                    galleryIndex = idx;
                    renderSlide(false);
                });
                thumbsEl.appendChild(btn);
            });
            thumbsBuilt = true;
            syncDownloadUi();
        }

        function updateThumbActive() {
            if (!thumbsEl || !thumbsBuilt) return;
            var buttons = thumbsEl.querySelectorAll('.pai-index-lb-thumb');
            buttons.forEach(function (btn, i) {
                var on = i === galleryIndex;
                btn.classList.toggle('is-active', on);
                btn.setAttribute('aria-selected', on ? 'true' : 'false');
            });
            var active = buttons[galleryIndex];
            if (active && typeof active.scrollIntoView === 'function') {
                active.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
            }
            syncDownloadUi();
        }

        function renderSlide(rebuildThumbs) {
            if (rebuildThumbs === undefined) rebuildThumbs = true;
            if (!gallery.length) return;
            var item = gallery[galleryIndex] || gallery[0];
            var src = item.src || '';
            var orig = item.orig || src;
            var total = gallery.length;
            bodyEl.innerHTML = '';
            if (item.is_video) {
                var vid = document.createElement('video');
                vid.src = src;
                vid.controls = true;
                vid.playsInline = true;
                vid.preload = 'metadata';
                bodyEl.appendChild(vid);
            } else {
                var img = document.createElement('img');
                img.src = src;
                img.alt = titleEl.textContent || '';
                bodyEl.appendChild(img);
            }
            openEl.href = orig || src;
            if (metaEl) metaEl.hidden = false;
            if (counterEl) counterEl.textContent = (galleryIndex + 1) + ' / ' + total;
            if (kindEl) kindEl.textContent = item.kind || 'Photo';
            if (posEl) posEl.textContent = total > 1
                ? ('Gallery order · slot ' + ((parseInt(item.pos, 10) || 0) + 1))
                : ('Position ' + ((parseInt(item.pos, 10) || 0) + 1));
            var multi = total > 1;
            if (prevBtn) {
                prevBtn.hidden = !multi;
                prevBtn.disabled = galleryIndex < 1;
            }
            if (nextBtn) {
                nextBtn.hidden = !multi;
                nextBtn.disabled = galleryIndex >= total - 1;
            }
            if (rebuildThumbs) buildThumbs();
            else updateThumbActive();
            syncDownloadUi();
        }

        function closeLb() {
            lb.hidden = true;
            bodyEl.innerHTML = '';
            if (thumbsEl) thumbsEl.innerHTML = '';
            if (thumbsWrap) thumbsWrap.hidden = true;
            if (dlPanel) dlPanel.hidden = true;
            if (dlOneEl) dlOneEl.hidden = true;
            thumbsBuilt = false;
            gallery = [];
            galleryIndex = 0;
            zipUrl = '';
            document.body.style.overflow = '';
        }

        function openLb(btn) {
            var src = btn.getAttribute('data-src') || '';
            var orig = btn.getAttribute('data-orig') || src;
            var title = btn.getAttribute('data-title') || '';
            if (!src) return;
            zipUrl = btn.getAttribute('data-zip-url') || '';
            gallery = parseGallery(btn);
            if (!gallery.length) {
                gallery = [{ src: src, orig: orig, kind: 'Preview', pos: 0, is_video: false, downloadable: false }];
            }
            gallery.forEach(function (item) {
                if (isDownloadable(item)) {
                    item.selected = item.selected !== false;
                } else {
                    item.selected = false;
                }
            });
            galleryIndex = Math.max(0, Math.min(gallery.length - 1, parseInt(btn.getAttribute('data-gallery-start') || '0', 10) || 0));
            titleEl.textContent = title;
            renderSlide();
            lb.hidden = false;
            document.body.style.overflow = 'hidden';
        }

        function stepGallery(delta) {
            if (gallery.length < 2) return;
            galleryIndex = Math.max(0, Math.min(gallery.length - 1, galleryIndex + delta));
            renderSlide(false);
        }

        function downloadSelectedZip() {
            var selected = selectedDownloadable();
            if (!selected.length || !zipUrl) return;
            if (selected.length === 1 && selected[0].download_url) {
                window.location.href = selected[0].download_url;
                return;
            }
            var form = document.createElement('form');
            form.method = 'POST';
            form.action = zipUrl;
            form.style.display = 'none';
            var token = document.createElement('input');
            token.type = 'hidden';
            token.name = '_token';
            token.value = csrfToken;
            form.appendChild(token);
            selected.forEach(function (item) {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'media_ids[]';
                input.value = String(item.id || '');
                form.appendChild(input);
            });
            document.body.appendChild(form);
            form.submit();
            setTimeout(function () { form.remove(); }, 2000);
        }

        if (prevBtn) prevBtn.addEventListener('click', function () { stepGallery(-1); });
        if (nextBtn) nextBtn.addEventListener('click', function () { stepGallery(1); });
        if (dlSelectAllBtn) {
            dlSelectAllBtn.addEventListener('click', function () {
                gallery.forEach(function (item) {
                    if (isDownloadable(item)) item.selected = true;
                });
                syncDownloadUi();
            });
        }
        if (dlSelectNoneBtn) {
            dlSelectNoneBtn.addEventListener('click', function () {
                gallery.forEach(function (item) { item.selected = false; });
                syncDownloadUi();
            });
        }
        if (dlDownloadBtn) {
            dlDownloadBtn.addEventListener('click', function () { downloadSelectedZip(); });
        }

        document.addEventListener('click', function (e) {
            var openBtn = e.target.closest('[data-pai-index-lightbox]');
            if (openBtn) {
                e.preventDefault();
                openLb(openBtn);
                return;
            }
            if (e.target.closest('[data-pai-index-lb-close]')) closeLb();
        });
        document.addEventListener('keydown', function (e) {
            if (lb.hidden) return;
            if (e.key === 'Escape') closeLb();
            else if (e.key === 'ArrowLeft') { e.preventDefault(); stepGallery(-1); }
            else if (e.key === 'ArrowRight') { e.preventDefault(); stepGallery(1); }
        });
    }

    // Two-step delete confirmation
    (function initDeleteModal() {
        var modal = document.getElementById('pai-del-modal');
        if (!modal) return;
        var form = document.getElementById('pai-del-form');
        var nameEl = document.getElementById('pai-del-name');
        var metaEl = document.getElementById('pai-del-meta');
        var autoWarn = document.getElementById('pai-del-auto-warn');
        var step1 = modal.querySelector('[data-pai-del-step="1"]');
        var step2 = modal.querySelector('[data-pai-del-step="2"]');
        var input = document.getElementById('pai-del-confirm-input');
        var submitBtn = document.getElementById('pai-del-submit');
        var continueBtn = document.getElementById('pai-del-continue');

        function setStep(n) {
            step1.hidden = n !== 1;
            step2.hidden = n !== 2;
            if (n === 2 && input) {
                input.value = '';
                submitBtn.disabled = true;
                setTimeout(function () { input.focus(); }, 30);
            }
        }
        function closeModal() {
            modal.hidden = true;
            document.body.style.overflow = '';
            setStep(1);
            if (input) input.value = '';
            if (submitBtn) submitBtn.disabled = true;
        }
        function openModal(btn) {
            form.action = btn.getAttribute('data-delete-url') || '#';
            nameEl.textContent = btn.getAttribute('data-import-title') || 'Import';
            var id = btn.getAttribute('data-import-id') || '';
            var sku = btn.getAttribute('data-import-sku') || '';
            var mode = btn.getAttribute('data-import-mode') || '';
            metaEl.textContent = '#' + id
                + (mode ? ' · ' + mode : '')
                + (sku ? ' · SKU ' + sku : '');
            autoWarn.hidden = btn.getAttribute('data-auto-running') !== '1';
            setStep(1);
            modal.hidden = false;
            document.body.style.overflow = 'hidden';
        }

        document.addEventListener('click', function (e) {
            var delBtn = e.target.closest('[data-pai-delete]');
            if (delBtn) {
                e.preventDefault();
                openModal(delBtn);
                return;
            }
            if (e.target.closest('[data-pai-del-close]')) {
                e.preventDefault();
                closeModal();
                return;
            }
            if (e.target.closest('[data-pai-del-back]')) {
                e.preventDefault();
                setStep(1);
            }
        });
        if (continueBtn) {
            continueBtn.addEventListener('click', function () { setStep(2); });
        }
        if (input) {
            input.addEventListener('input', function () {
                submitBtn.disabled = (input.value || '').trim().toUpperCase() !== 'DELETE';
            });
            input.addEventListener('keydown', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    if (!submitBtn.disabled) form.submit();
                }
            });
        }
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && !modal.hidden) closeModal();
        });
        form.addEventListener('submit', function () {
            submitBtn.disabled = true;
            submitBtn.textContent = 'Deleting…';
        });
    })();

    // Live progress for Auto / background jobs still running
    var timers = {};
    var rowSawRunning = {};
    function pollRow(row) {
        var url = row.getAttribute('data-auto-status-url');
        if (!url) return;
        var id = row.getAttribute('data-import-id') || '';
        fetch(url, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (data) {
                if (!data) return;
                var statusEl = row.querySelector('[data-pai-status]');
                var line = row.querySelector('[data-pai-auto-line]');
                var bar = row.querySelector('[data-pai-auto-bar]');
                var msg = row.querySelector('[data-pai-auto-msg]');
                var titleEl = row.querySelector('[data-pai-title]');
                if (statusEl && data.status_label) statusEl.textContent = data.status_label;
                if (titleEl && data.title) titleEl.textContent = data.title;
                var workMsg = data.auto_message || data.bg_message || '';
                if (workMsg.length > 72) workMsg = workMsg.slice(0, 69) + '…';
                if (data.is_running) {
                    rowSawRunning[id] = true;
                }
                if (line) {
                    var hasRunningMsg = data.is_running && workMsg;
                    var hasBlockers = Array.isArray(data.blockers) && data.blockers.length > 0 && data.auto_status === 'blocked';
                    line.hidden = !(data.is_running || hasBlockers);
                    if (data.is_running) {
                        line.hidden = false;
                        if (!bar) {
                            var barWrap = document.createElement('div');
                            barWrap.className = 'pai-auto-bar';
                            barWrap.setAttribute('aria-hidden', 'true');
                            barWrap.innerHTML = '<span data-pai-auto-bar style="width:2%"></span>';
                            line.insertBefore(barWrap, line.firstChild);
                            bar = barWrap.querySelector('[data-pai-auto-bar]');
                        }
                    }
                    if (bar) {
                        var pct = data.is_auto_running
                            ? Math.max(2, parseInt(data.auto_progress || 0, 10))
                            : (data.is_bg_running ? 45 : 2);
                        bar.style.width = pct + '%';
                        var barParent = bar.closest('.pai-auto-bar');
                        if (barParent) barParent.hidden = !data.is_running;
                    }
                    if (msg) msg.textContent = data.is_running ? workMsg : '';
                }
                if (statusEl) {
                    statusEl.classList.remove('pai-badge--running', 'pai-badge--blocked', 'pai-badge--failed', 'pai-badge--synced');
                    if (data.is_running) statusEl.classList.add('pai-badge--running');
                    else if (data.auto_status === 'blocked') statusEl.classList.add('pai-badge--blocked');
                    else if (data.auto_status === 'failed') statusEl.classList.add('pai-badge--failed');
                    else if (data.auto_status === 'synced') statusEl.classList.add('pai-badge--synced');
                }
                var blockersEl = row.querySelector('[data-pai-auto-blockers]');
                if (blockersEl && Array.isArray(data.blockers) && data.blockers.length) {
                    blockersEl.innerHTML = data.blockers.slice(0, 3).map(function (b) {
                        var title = (b.detail || b.title || 'Issue').replace(/"/g, '&quot;');
                        return '<span class="pai-chip pai-chip--warn" title="' + title + '">' + (b.title || 'Issue') + '</span>';
                    }).join('') + (data.blockers.length > 3 ? '<span class="pai-chip pai-chip--neutral">+' + (data.blockers.length - 3) + '</span>' : '');
                    blockersEl.hidden = false;
                    if (line) line.hidden = false;
                } else if (blockersEl && data.auto_status !== 'blocked') {
                    blockersEl.hidden = true;
                }
                if (!data.is_running) {
                    row.setAttribute('data-auto-running', '0');
                    if (timers[id]) {
                        clearInterval(timers[id]);
                        delete timers[id];
                    }
                    // Refresh once only if this row was actually working during this page visit.
                    // Avoids reload loops when bg_status stays "done" on already-finished products.
                    var batchLive = document.getElementById('pai-batch-lite');
                    if (!batchLive && rowSawRunning[id] && (data.auto_status === 'synced' || data.auto_status === 'blocked' || data.auto_status === 'failed'
                        || data.bg_status === 'done' || data.bg_status === 'failed')) {
                        rowSawRunning[id] = false;
                        setTimeout(function () { window.location.reload(); }, 600);
                    }
                }
            })
            .catch(function () {});
    }

    function startRowPoll(row) {
        var id = row.getAttribute('data-import-id') || String(Math.random());
        if (timers[id]) return;
        row.setAttribute('data-auto-running', '1');
        pollRow(row);
        timers[id] = setInterval(function () { pollRow(row); }, 2500);
    }

    Array.prototype.slice.call(document.querySelectorAll('tr[data-auto-running="1"]')).forEach(startRowPoll);

    // Catalog banner: keep counts + “Now working” card in sync without hunting pages.
    (function pollBatchLite() {
        var root = document.getElementById('pai-batch-lite');
        if (!root) return;
        var url = root.getAttribute('data-status-url');
        if (!url) return;
        var lastImportId = null;

        function applyLite(b) {
            if (!b || !b.is_active) {
                window.location.reload();
                return;
            }
            var finished = parseInt(b.finished || 0, 10);
            var total = parseInt(b.total || 0, 10);
            var current = parseInt(b.current || 0, 10);
            var running = parseInt(b.running || 0, 10);
            var pct = parseInt(b.progress_pct || 0, 10);
            var counts = document.getElementById('pai-bl-counts');
            if (counts) {
                if (running > 0) {
                    counts.innerHTML = 'Working <strong id="pai-bl-current">' + current + '</strong> of <span id="pai-bl-total">' + total + '</span>'
                        + ' · <span id="pai-bl-finished">' + finished + '</span> finished';
                } else {
                    counts.innerHTML = '<strong id="pai-bl-finished">' + finished + '</strong> of <span id="pai-bl-total">' + total + '</span> processed';
                }
            }
            var bar = document.getElementById('pai-bl-bar');
            if (bar) bar.style.width = Math.max(2, pct) + '%';
            var note = document.getElementById('pai-bl-note');
            if (note && b.message) {
                note.innerHTML = (b.message || '').slice(0, 220)
                    + ' The queue survives a refresh. You do not need to hunt every page — use <strong>Open product</strong> above.';
            }

            var importId = parseInt(b.current_import_id || 0, 10);
            var card = document.getElementById('pai-now-card');
            if (card) {
                card.hidden = !(importId > 0 || (b.current_title || ''));
            }
            var titleEl = document.getElementById('pai-now-title');
            if (titleEl) titleEl.textContent = b.current_title || 'Starting…';
            var stepEl = document.getElementById('pai-now-step');
            if (stepEl) stepEl.textContent = b.current_step_message || '';
            var metaEl = document.getElementById('pai-now-meta');
            var onPage = importId > 0 && !!document.querySelector('tr[data-import-id="' + importId + '"]');
            if (metaEl) {
                var meta = '';
                if (importId > 0) {
                    meta = '#' + importId;
                    if (b.current_sku) meta += ' · SKU ' + b.current_sku;
                    meta += onPage ? ' · on this page (highlighted below)' : ' · not on this page — use Open';
                }
                metaEl.textContent = meta;
            }
            var openEl = document.getElementById('pai-now-open');
            if (openEl && b.current_open_url) openEl.href = b.current_open_url;
            var thumb = document.getElementById('pai-now-thumb');
            if (thumb && b.current_image_url) {
                thumb.innerHTML = '<img src="' + String(b.current_image_url).replace(/"/g, '&quot;') + '" alt="">';
            }

            document.querySelectorAll('tr.pai-row--batch-now').forEach(function (tr) {
                tr.classList.remove('pai-row--batch-now');
            });
            if (importId > 0) {
                var row = document.querySelector('tr[data-import-id="' + importId + '"]');
                if (row) {
                    row.classList.add('pai-row--batch-now');
                    startRowPoll(row);
                    if (lastImportId !== importId) {
                        try { row.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } catch (e) {}
                    }
                }
            }
            lastImportId = importId;
        }

        function tick() {
            fetch(url, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
                .then(function (r) { return r.ok ? r.json() : null; })
                .then(function (data) {
                    if (!data || !data.batch) {
                        window.location.reload();
                        return;
                    }
                    applyLite(data.batch);
                })
                .catch(function () {});
        }
        tick();
        setInterval(tick, 3000);
    })();

    /* Click repair count cards → show products; Done → leave product alone */
    window.paiInitRepairBar = function () {
        var bar = document.getElementById('pai-repair-bar');
        var panel = document.getElementById('pai-repair-list-panel');
        var titleEl = document.getElementById('pai-repair-list-title');
        var closeBtn = document.getElementById('pai-repair-list-close');
        if (!bar || !panel || bar.getAttribute('data-pai-bound') === '1') return;
        bar.setAttribute('data-pai-bound', '1');

        var titles = {
            redo: 'Need photos redone',
            sync: 'Prepare + Shopify push',
            video: 'Have video, no Omni AI'
        };
        var lists = {
            redo: document.getElementById('pai-repair-list-redo'),
            sync: document.getElementById('pai-repair-list-sync'),
            video: document.getElementById('pai-repair-list-video')
        };
        var openKey = null;
        var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content
            || ((document.querySelector('input[name="_token"]') || {}).value || '');

        function readBarCount(key) {
            if (!bar) return 0;
            return Math.max(0, parseInt(bar.getAttribute('data-count-' + key) || '0', 10) || 0);
        }

        function writeBarCount(key, n) {
            if (!bar) return;
            n = Math.max(0, n);
            bar.setAttribute('data-count-' + key, String(n));
        }

        function setText(el, n) {
            if (el) el.textContent = String(Math.max(0, n));
        }

        function updateRepairCounts(touched, wasQueued) {
            if (!bar) return;
            var redo = readBarCount('redo');
            var sync = readBarCount('sync');
            var video = readBarCount('video');
            var total = readBarCount('total');
            var queued = readBarCount('queued');
            var deferred = readBarCount('video-deferred');

            if (touched.redo) redo = Math.max(0, redo - 1);
            if (touched.sync) sync = Math.max(0, sync - 1);
            if (touched.video) {
                video = Math.max(0, video - 1);
                if (deferred > 0 && !wasQueued) deferred = Math.max(0, deferred - 1);
            }
            if (touched.redo || touched.sync || (touched.video && wasQueued)) {
                total = Math.max(0, total - 1);
            }
            if (wasQueued) queued = Math.max(0, queued - 1);

            writeBarCount('redo', redo);
            writeBarCount('sync', sync);
            writeBarCount('video', video);
            writeBarCount('total', total);
            writeBarCount('queued', queued);
            writeBarCount('video-deferred', deferred);

            ['redo', 'sync', 'video'].forEach(function (k) {
                var n = k === 'redo' ? redo : (k === 'sync' ? sync : video);
                var b = document.querySelector('[data-pai-stat-n="' + k + '"]');
                setText(b, n);
                var btn = document.querySelector('button[data-pai-repair-list="' + k + '"]');
                if (btn && n < 1) {
                    if (openKey === k) {
                        panel.hidden = true;
                        hideAllLists();
                        openKey = null;
                    }
                    btn.remove();
                }
            });

            var headCount = document.getElementById('pai-repair-head-count');
            if (headCount) {
                var key = headCount.getAttribute('data-count-key') || 'total';
                setText(headCount, key === 'video' ? video : total);
            }

            var noteVideo = document.getElementById('pai-repair-note-video');
            var noteVideoN = document.querySelector('[data-pai-note-video-n]');
            setText(noteVideoN, video);
            if (noteVideo) noteVideo.hidden = video < 1;

            setText(document.getElementById('pai-repair-note-queued'), queued);
            setText(document.getElementById('pai-repair-note-total'), total);

            document.querySelectorAll('[data-pai-cta-n]').forEach(function (el) {
                var cta = document.getElementById('pai-repair-cta');
                var isVideoCta = cta && cta.getAttribute('data-cta-video') === '1';
                setText(el, isVideoCta ? (queued > 0 ? queued : video) : queued);
            });

            var cta = document.getElementById('pai-repair-cta');
            var ctaForm = document.getElementById('pai-repair-cta-form');
            if (queued < 1) {
                if (ctaForm) ctaForm.remove();
                else if (cta && cta.tagName === 'BUTTON' && !cta.disabled) cta.remove();
            }

            if (redo < 1 && sync < 1 && video < 1 && total < 1) {
                bar.remove();
            }
        }

        function hideAllLists() {
            Object.keys(lists).forEach(function (k) {
                if (!lists[k]) return;
                lists[k].hidden = true;
                lists[k].setAttribute('hidden', '');
            });
            document.querySelectorAll('button.pai-repair-stat.is-open').forEach(function (btn) {
                btn.classList.remove('is-open');
                btn.setAttribute('aria-expanded', 'false');
            });
        }

        function showList(key, btn) {
            if (openKey === key) {
                panel.hidden = true;
                hideAllLists();
                openKey = null;
                return;
            }
            hideAllLists();
            openKey = key;
            panel.hidden = false;
            if (lists[key]) {
                lists[key].hidden = false;
                lists[key].removeAttribute('hidden');
            }
            if (titleEl) titleEl.textContent = titles[key] || 'Products';
            if (btn) {
                btn.classList.add('is-open');
                btn.setAttribute('aria-expanded', 'true');
            }
            try { panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } catch (e) {}
        }

        document.querySelectorAll('button[data-pai-repair-list]').forEach(function (btn) {
            btn.addEventListener('click', function () {
                showList(btn.getAttribute('data-pai-repair-list') || '', btn);
            });
        });
        if (closeBtn) {
            closeBtn.addEventListener('click', function () {
                panel.hidden = true;
                hideAllLists();
                openKey = null;
            });
        }

        panel.addEventListener('click', function (e) {
            var doneBtn = e.target.closest('.pai-repair-done-btn');
            if (!doneBtn || !panel.contains(doneBtn)) return;
            e.preventDefault();
            var url = doneBtn.getAttribute('data-dismiss-url') || '';
            if (!url) return;
            if (!window.confirm('Mark this product as Done?\n\nIt will leave the Fix & sync / Omni backlog. Shopify will not be changed. If you edit its media later, it can show up again.')) {
                return;
            }
            var item = doneBtn.closest('.pai-repair-item');
            if (item) item.classList.add('is-dismissing');
            doneBtn.disabled = true;
            doneBtn.textContent = 'Saving…';
            var fd = new FormData();
            fd.append('_token', csrf);
            fetch(url, {
                method: 'POST',
                body: fd,
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin'
            })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
            .then(function (res) {
                if (!res.ok || !res.d || !res.d.ok) {
                    throw new Error((res.d && res.d.message) || 'Could not mark done');
                }
                var importId = item ? item.getAttribute('data-import-id') : '';
                var touched = {};
                var wasQueued = false;
                ['redo', 'sync', 'video'].forEach(function (k) {
                    var list = lists[k];
                    if (!list || !importId) return;
                    var card = list.querySelector('.pai-repair-item[data-import-id="' + importId + '"]');
                    if (!card) return;
                    touched[k] = true;
                    if (k === 'redo' || k === 'sync') wasQueued = true;
                    if (k === 'video' && !card.querySelector('.pai-repair-pill')) wasQueued = true;
                });

                // Same product can appear in more than one group — remove every card.
                if (importId) {
                    panel.querySelectorAll('.pai-repair-item[data-import-id="' + importId + '"]').forEach(function (el) {
                        if (el.parentNode) el.parentNode.removeChild(el);
                    });
                } else if (item && item.parentNode) {
                    item.parentNode.removeChild(item);
                }
                Object.keys(lists).forEach(function (k) {
                    var list = lists[k];
                    if (list && !list.querySelector('.pai-repair-item') && !list.querySelector('.pai-repair-list-empty')) {
                        list.innerHTML = '<p class="pai-repair-list-empty">All clear in this group.</p>';
                    }
                });

                updateRepairCounts(touched, wasQueued);
            })
            .catch(function (err) {
                if (item) item.classList.remove('is-dismissing');
                doneBtn.disabled = false;
                doneBtn.textContent = 'Done';
                alert(err.message || 'Could not mark done.');
            });
        });
    };
    if (document.getElementById('pai-repair-bar')) {
        window.paiInitRepairBar();
    }

    window.paiInitPendingBar = function () {
        var section = document.getElementById('pai-pending-section');
        var panel = document.getElementById('pai-pending-list-panel');
        var toggleBtn = document.getElementById('pai-pending-stat-btn');
        var closeBtn = document.getElementById('pai-pending-list-close');
        var list = document.getElementById('pai-pending-list');
        if (!section || !panel || section.getAttribute('data-pai-bound') === '1') return;
        section.setAttribute('data-pai-bound', '1');

        var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content
            || ((document.querySelector('input[name="_token"]') || {}).value || '');
        var open = false;

        function readCount() {
            return Math.max(0, parseInt(section.getAttribute('data-count-pending') || '0', 10) || 0);
        }

        function writeCount(n) {
            n = Math.max(0, n);
            section.setAttribute('data-count-pending', String(n));
            var head = document.getElementById('pai-pending-head-count');
            var stat = document.getElementById('pai-pending-stat-n');
            if (head) head.textContent = String(n);
            if (stat) stat.textContent = String(n);
        }

        function setOpen(next) {
            open = !!next;
            panel.hidden = !open;
            if (toggleBtn) {
                toggleBtn.classList.toggle('is-open', open);
                toggleBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
            }
            if (open) {
                try { panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } catch (e) {}
            }
        }

        if (toggleBtn) {
            toggleBtn.addEventListener('click', function () {
                setOpen(!open);
            });
        }
        if (closeBtn) {
            closeBtn.addEventListener('click', function () {
                setOpen(false);
            });
        }

        panel.addEventListener('click', function (e) {
            var skipBtn = e.target.closest('.pai-pending-skip-btn');
            if (!skipBtn || !panel.contains(skipBtn)) return;
            e.preventDefault();
            var url = skipBtn.getAttribute('data-dismiss-url') || '';
            if (!url) return;
            if (!window.confirm('Skip this product?\n\nShopify will stay as-is. It will not appear in this pending list until you change its media again.')) {
                return;
            }
            var item = skipBtn.closest('.pai-repair-item');
            if (item) item.classList.add('is-dismissing');
            skipBtn.disabled = true;
            skipBtn.textContent = 'Saving…';
            var fd = new FormData();
            fd.append('_token', csrf);
            fetch(url, {
                method: 'POST',
                body: fd,
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin'
            })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
            .then(function (res) {
                if (!res.ok || !res.d || !res.d.ok) {
                    throw new Error((res.d && res.d.message) || 'Could not skip');
                }
                if (item && item.parentNode) item.parentNode.removeChild(item);
                var n = Math.max(0, readCount() - 1);
                writeCount(n);
                var bulkForm = section.querySelector('form[action*="run-pending-bulk"]');
                if (bulkForm && item) {
                    var importId = item.getAttribute('data-import-id');
                    if (importId) {
                        bulkForm.querySelectorAll('input[name="ids[]"]').forEach(function (inp) {
                            if (inp.value === importId && inp.parentNode) inp.parentNode.removeChild(inp);
                        });
                    }
                }
                if (n < 1) {
                    section.remove();
                } else if (list && !list.querySelector('.pai-repair-item')) {
                    setOpen(false);
                }
            })
            .catch(function (err) {
                if (item) item.classList.remove('is-dismissing');
                skipBtn.disabled = false;
                skipBtn.textContent = 'Skip';
                alert(err.message || 'Could not skip.');
            });
        });
    };
    if (document.getElementById('pai-pending-section')) {
        window.paiInitPendingBar();
    }

    /* Deferred: repair banner + Shopify channels (page paints first) */
    (function paiIndexDeferred() {
        var repairSlot = document.getElementById('pai-repair-deferred-slot');
        if (repairSlot) {
            var repairUrl = repairSlot.getAttribute('data-url') || '';
            if (repairUrl) {
                fetch(repairUrl, {
                    headers: { 'Accept': 'text/html', 'X-Requested-With': 'XMLHttpRequest' },
                    credentials: 'same-origin'
                })
                .then(function (r) {
                    if (r.status === 204) return '';
                    return r.ok ? r.text() : '';
                })
                .then(function (html) {
                    if (!html || !String(html).trim()) {
                        repairSlot.remove();
                        return;
                    }
                    repairSlot.outerHTML = html;
                    if (window.paiInitRepairBar) window.paiInitRepairBar();
                })
                .catch(function () { repairSlot.remove(); });
            }
        }

        var cfg = document.getElementById('pai-index-deferred');
        if (!cfg) return;
        var listingsUrl = cfg.getAttribute('data-listings-url') || '';
        if (!listingsUrl) return;

        var cells = document.querySelectorAll('[data-pai-channels-cell]');
        var ids = [];
        cells.forEach(function (c) {
            var id = c.getAttribute('data-import-id');
            if (id) ids.push(id);
        });
        if (!ids.length) return;

        fetch(listingsUrl + '?ids=' + encodeURIComponent(ids.join(',')), {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'same-origin'
        })
        .then(function (r) { return r.ok ? r.json() : null; })
        .then(function (data) {
            if (!data || !data.ok || !data.listings) return;
            Object.keys(data.listings).forEach(function (importId) {
                var listing = data.listings[importId] || {};
                var cell = document.querySelector('[data-pai-channels-cell][data-import-id="' + importId + '"]');
                if (!cell) return;

                var channels = Array.isArray(listing.channels) ? listing.channels : [];
                if (channels.length) {
                    var html = '<div class="pai-channels" data-pai-channels-wrap title="Published sales channels">';
                    channels.forEach(function (ch) {
                        var on = !!ch.published;
                        html += '<span class="pai-channel ' + (on ? 'is-on' : 'is-off') + '">'
                            + '<span class="pai-channel-check" aria-hidden="true">' + (on ? '✓' : '·') + '</span> '
                            + String(ch.name || 'Channel').replace(/</g, '&lt;') + '</span>';
                    });
                    html += '</div>';
                    cell.innerHTML = html;
                } else if (cell.querySelector('.pai-channels-loading')) {
                    cell.innerHTML = '<span class="pai-muted">Channels unavailable</span>';
                }

                var status = String(listing.status || '').toUpperCase();
                if (status) {
                    var shopCell = document.querySelector('[data-pai-shop-cell][data-import-id="' + importId + '"]');
                    var badge = shopCell ? shopCell.querySelector('[data-pai-shop-status]') : null;
                    if (badge) {
                        badge.textContent = status === 'ACTIVE' ? 'Active'
                            : (status === 'DRAFT' ? 'Draft' : (status === 'ARCHIVED' ? 'Archived' : status.charAt(0) + status.slice(1).toLowerCase()));
                        badge.className = 'pai-shop-status'
                            + (status === 'ACTIVE' ? ' pai-shop-status--active'
                                : (status === 'DRAFT' ? ' pai-shop-status--draft'
                                    : (status === 'ARCHIVED' ? ' pai-shop-status--archived' : '')));
                    }
                }
            });
        })
        .catch(function () {});
    })();
})();
</script>
@endpush
@endsection