@extends('layouts.app')

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

@section('content')
@php
    $maxImages = (int) $settings->max_images_per_import;
    $maxVideos = (int) $settings->max_videos_per_import;
    $imgMb = number_format($settings->max_image_upload_kb / 1024, 0);
    $vidMb = number_format($settings->max_video_upload_kb / 1024, 0);
    $autoOn = (string) old('auto_mode', '0') === '1';
@endphp
<div class="pai-page pai-create-page">
    <p class="setting-back"><a href="{{ route('product-ai-import.index') }}">← Product AI Import</a></p>

    <header class="pai-create-hero">
        <div>
            <p class="pai-create-kicker">AVI THE JEWELER · Catalog</p>
            <h1>New import</h1>
            <p class="pai-create-sub">
                Upload photos once. Choose <strong>Manual</strong> to walk the wizard, or <strong>Auto</strong> to run the full pipeline — Shopify draft only if everything checks out.
            </p>
        </div>
    </header>

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

    <form action="{{ route('product-ai-import.store') }}" method="POST" enctype="multipart/form-data" class="pai-form" id="pai-create-form" data-pai-lux-loader="create">
        @csrf
        <input type="hidden" name="auto_mode" id="pai-auto-mode-value" value="{{ $autoOn ? '1' : '0' }}">

        <section class="pai-create-mode" aria-label="Import mode">
            <button type="button" class="pai-mode-card {{ ! $autoOn ? 'is-active' : '' }}" id="pai-mode-manual" data-mode="0">
                <span class="pai-mode-tag">Default</span>
                <strong>Manual</strong>
                <span>You control each step — Media, titles, enhance, lifestyle, prepare, then Shopify.</span>
            </button>
            <button type="button" class="pai-mode-card pai-mode-card--auto {{ $autoOn ? 'is-active' : '' }}" id="pai-mode-auto" data-mode="1">
                <span class="pai-mode-tag">Hands-free</span>
                <strong>Auto</strong>
                <span>Runs copy → enhance → lifestyle → prepare, then Shopify draft only when ready. Blocks with a clear checklist if something failed or is missing.</span>
            </button>
        </section>

        <section class="pai-create-card">
            <div class="pai-create-card-head">
                <h2>1 · Media</h2>
                <p>Drop every angle together. Auto mode needs at least one photo.</p>
            </div>
            <div class="pai-dropzone pai-dropzone--media" id="pai-media-drop">
                <div class="pai-dropzone-hit">
                    <input
                        type="file"
                        name="media[]"
                        id="media"
                        class="pai-file-input"
                        accept=".jpg,.jpeg,.png,.webp,.mp4,.mov,image/jpeg,image/png,image/webp,video/mp4,video/quicktime"
                        multiple
                        required
                    >
                    <div class="pai-dropzone-label">
                        <strong>Photos &amp; video</strong>
                        <span>
                            Drag &amp; drop or click ·
                            Images JPG/PNG/WEBP (max {{ $maxImages }}, up to {{ $imgMb }} MB) ·
                            Video MP4/MOV (max {{ $maxVideos }}, up to {{ $vidMb }} MB)
                        </span>
                    </div>
                </div>
                <div class="pai-client-previews" id="pai-media-preview"></div>
            </div>
        </section>

        <section class="pai-create-card pai-auto-only" id="pai-auto-panel" @if(! $autoOn) hidden @endif>
            <div class="pai-create-card-head">
                <h2>2 · Notes for AI</h2>
                <p>Same GemLightbox-style text as Details. Titles (3 options → auto-picks Detailed / C), description, and SEO build from this + your photos.</p>
            </div>
            <div class="pai-fields">
                <div class="pai-field pai-field--full">
                    <label for="product_details">Product details <span class="pai-req">required for Auto</span></label>
                    <textarea name="product_details" id="product_details" class="pai-textarea" rows="10" maxlength="20000"
                              placeholder="WEIGHT: 6.3 g&#10;length 1.4 in&#10;COST: 1115&#10;PRICE: 2500&#10;CARATS: 1.90 CT&#10;MATERIAL: 10K&#10;DIAMOND: NATURAL&#10;GENDER: UNISEX&#10;VS2">{{ old('product_details') }}</textarea>
                </div>
                <div class="pai-field">
                    <label for="sku">SKU <span class="pai-optional">(optional)</span></label>
                    <input type="text" name="sku" id="sku" class="pai-input" value="{{ old('sku') }}" maxlength="120" placeholder="e.g. PE1R1558G">
                </div>
            </div>

            <div class="pai-create-card-head" style="margin-top:1.35rem;">
                <h2>3 · Guide product <span class="pai-optional">(optional)</span></h2>
                <p>Same catalog browser as Manual — category, collection, then pick a product. Structure copies on Shopify sync.</p>
            </div>
            @include('product_ai_import.partials.guide_browse_create', [
                'categoryOptions' => $categoryOptions ?? [],
            ])

            <div class="pai-auto-roadmap">
                <h3>Auto will run</h3>
                <ol>
                    <li><strong>Details</strong> — 3 titles (picks Detailed / C) + description + SEO</li>
                    <li><strong>Enhance photos</strong> — polish every product photo · select for Shopify</li>
                    <li><strong>Enhance video</strong> — trim ~9s + Google Omni · select for Shopify (if a video was uploaded)</li>
                    <li><strong>Lifestyle</strong> — all photos as refs · one worn shot · select for Shopify</li>
                    <li><strong>Prepare</strong> — crop/compress to 1.25:1 (incl. video) · SEO file names</li>
                    <li><strong>Shopify</strong> — creates DRAFT only if checks pass; otherwise shows what to fix</li>
                </ol>
            </div>
        </section>

        <div class="pai-create-actions">
            <button type="submit" class="btn btn-primary" id="pai-create-submit">
                {{ $autoOn ? 'Start auto import' : 'Create import & upload' }}
            </button>
            <a href="{{ route('product-ai-import.index') }}" class="btn btn-secondary">Cancel</a>
            <p class="pai-hint pai-create-hint" id="pai-create-hint">
                @if($autoOn)
                    After upload you’ll return to the list — Auto keeps working if you refresh or start another import.
                @else
                    Opens the step-by-step wizard after upload.
                @endif
            </p>
        </div>
    </form>
</div>

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

@push('styles')
@include('product_ai_import.partials.styles')
<style>
.pai-page.pai-create-page {
    max-width: none;
    width: 100%;
    margin: 0 auto;
}
.pai-create-hero {
    margin: 0 0 1.25rem; padding: 1.35rem 1.45rem; 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-create-kicker {
    margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: #93c5fd; font-weight: 600;
}
.pai-create-hero h1 { margin: 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; }
.pai-create-sub { margin: 0.45rem 0 0; color: #cbd5e1; font-size: 0.92rem; line-height: 1.45; max-width: 40rem; }
.pai-create-mode {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 1.15rem;
}
@media (max-width: 700px) { .pai-create-mode { grid-template-columns: 1fr; } }
.pai-mode-card {
    text-align: left; cursor: pointer; border: 1px solid #e2e8f0; border-radius: 14px;
    background: #fff; padding: 1.05rem 1.1rem; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pai-mode-card:hover { border-color: #93c5fd; transform: translateY(-1px); }
.pai-mode-card.is-active {
    border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.14);
    background: linear-gradient(180deg, #f8fbff 0%, #fff 60%);
}
.pai-mode-card--auto.is-active {
    border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,0.14);
    background: linear-gradient(180deg, #f0fdfa 0%, #fff 60%);
}
.pai-mode-tag {
    display: inline-block; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 0.15rem 0.5rem; margin-bottom: 0.45rem;
}
.pai-mode-card.is-active .pai-mode-tag { color: #1d4ed8; background: #dbeafe; }
.pai-mode-card--auto.is-active .pai-mode-tag { color: #0f766e; background: #ccfbf1; }
.pai-mode-card strong { display: block; font-size: 1.05rem; color: #0f172a; margin-bottom: 0.3rem; }
.pai-mode-card > span:last-child { display: block; font-size: 0.84rem; color: #64748b; line-height: 1.4; }
.pai-create-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.15rem 1.2rem 1.25rem;
    margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pai-create-card-head { margin-bottom: 0.85rem; }
.pai-create-card-head h2 { margin: 0 0 0.25rem; font-size: 1.05rem; color: #0f172a; }
.pai-create-card-head p { margin: 0; font-size: 0.86rem; color: #64748b; line-height: 1.4; }
.pai-req { color: #b45309; font-size: 0.75rem; font-weight: 600; }
.pai-optional { color: #94a3b8; font-weight: 500; font-size: 0.8rem; }
.pai-dropzone--media { min-height: 200px; }
.pai-dropzone--media .pai-dropzone-hit { min-height: 6.5rem; }

/* Guide browse (same language as Manual wizard) */
.pai-guide--create {
    margin: 0 0 0.25rem; border: 1px solid #e5e7eb; border-radius: 12px;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 40%); overflow: hidden;
}
.pai-guide-browse { padding: 1rem 1.05rem 1.1rem; }
.pai-collection-results {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.25rem);
    max-height: 14rem; overflow: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.pai-collection-results button {
    display: block; width: 100%; text-align: left; border: 0; background: #fff;
    padding: 0.55rem 0.75rem; font-size: 0.86rem; cursor: pointer; color: #0f172a;
}
.pai-collection-results button:hover { background: #eff6ff; }
.pai-guide-filters { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 800px) { .pai-guide-filters { grid-template-columns: 1fr; } }
.pai-guide-filter-label {
    display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: #6b7280; margin-bottom: 0.45rem;
}
.pai-guide-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pai-guide-chip {
    border: 1px solid #e5e7eb; background: #fff; color: #374151; border-radius: 999px;
    padding: 0.35rem 0.7rem; font-size: 0.82rem; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.pai-guide-chip:hover { border-color: #9ca3af; }
.pai-guide-chip.is-active { background: #111827; border-color: #111827; color: #fff; }
.pai-guide-coll-wrap { position: relative; }
.pai-guide-coll-selected {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem;
    padding: 0.4rem 0.55rem; background: #f3f4f6; border-radius: 6px; font-size: 0.88rem;
}
.pai-guide-coll-clear {
    margin-left: auto; border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: #6b7280; line-height: 1;
}
.pai-guide-products-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.55rem; }
.pai-guide-products {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; min-height: 4rem;
}
@media (max-width: 1000px) { .pai-guide-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pai-guide-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pai-guide-card {
    border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; cursor: pointer;
    text-align: left; padding: 0; transition: border-color .12s, box-shadow .12s;
}
.pai-guide-card:hover { border-color: #9ca3af; }
.pai-guide-card.is-selected { border-color: #111827; box-shadow: 0 0 0 1px #111827; }
.pai-guide-card img, .pai-guide-card .pai-guide-card-ph {
    display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f3f4f6;
}
.pai-guide-card-ph { display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 0.75rem; }
.pai-guide-card-body { padding: 0.45rem 0.5rem 0.55rem; }
.pai-guide-card-title {
    font-size: 0.78rem; font-weight: 600; color: #111827; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2rem;
}
.pai-guide-card-meta { font-size: 0.68rem; color: #6b7280; margin-top: 0.2rem; text-transform: capitalize; }
.pai-guide-empty {
    grid-column: 1 / -1; padding: 1.5rem 1rem; text-align: center; color: #6b7280; font-size: 0.9rem;
    border: 1px dashed #e5e7eb; border-radius: 10px; background: #fafafa;
}
.pai-guide-pager {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.75rem;
}
.pai-guide-pick {
    padding: 1rem 1.05rem 1.15rem; border-top: 1px solid #e5e7eb;
    display: grid; gap: 0.85rem; background: #fff;
}
.pai-guide-pick-card {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem;
    background: #111827; color: #fff; border-radius: 10px; position: relative;
}
.pai-guide-pick-card img {
    width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: #374151; flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.2);
}
.pai-guide-pick-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.pai-guide-pick-meta strong { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pai-guide-pick-meta .pai-hint { color: #cbd5e1 !important; }
.pai-guide-pick-clear {
    flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 999px;
    background: rgba(255,255,255,0.12); color: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.pai-guide-pick-clear:hover { background: rgba(255,255,255,0.22); }
.pai-guide-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1rem; }
.pai-guide-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: #374151; cursor: pointer; margin: 0; }
.pai-guide-coll-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pai-guide-coll-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem;
    border: 1px solid #e5e7eb; border-radius: 999px; padding: 0.25rem 0.55rem; background: #fff; cursor: pointer;
}
.pai-guide-coll-chip input { margin: 0; }
.pai-guide-extra {
    display: grid; gap: 0.55rem; padding: 0.65rem 0.75rem; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0;
}
.pai-guide-extra-block strong {
    display: block; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; margin-bottom: 0.3rem;
}
.pai-guide-extra-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pai-guide-extra-chip {
    font-size: 0.72rem; font-weight: 600; color: #334155; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 999px; padding: 0.15rem 0.5rem;
}

.pai-auto-roadmap {
    margin-top: 1.25rem; padding: 0.95rem 1rem; border-radius: 12px; background: #f8fafc; border: 1px dashed #cbd5e1;
}
.pai-auto-roadmap h3 { margin: 0 0 0.55rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.pai-auto-roadmap ol { margin: 0; padding-left: 1.15rem; color: #334155; font-size: 0.88rem; line-height: 1.55; }
.pai-auto-roadmap li.is-skip { color: #94a3b8; }
.pai-create-actions {
    display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; margin: 0.35rem 0 2rem;
}
.pai-create-hint { margin: 0; flex: 1 1 100%; }
</style>
@endpush

@push('scripts')
@include('product_ai_import.partials.upload-preview-script')
<script>
(function () {
    var modeVal = document.getElementById('pai-auto-mode-value');
    var panel = document.getElementById('pai-auto-panel');
    var submitBtn = document.getElementById('pai-create-submit');
    var hint = document.getElementById('pai-create-hint');
    var details = document.getElementById('product_details');
    var manualBtn = document.getElementById('pai-mode-manual');
    var autoBtn = document.getElementById('pai-mode-auto');

    function setMode(on) {
        modeVal.value = on ? '1' : '0';
        manualBtn.classList.toggle('is-active', !on);
        autoBtn.classList.toggle('is-active', on);
        if (panel) panel.hidden = !on;
        if (details) details.required = !!on;
        if (submitBtn) submitBtn.textContent = on ? 'Start auto import' : 'Create import & upload';
        if (hint) {
            hint.textContent = on
                ? 'After upload you’ll return to the list — Auto keeps working if you refresh or start another import.'
                : 'Opens the step-by-step wizard after upload.';
        }
    }
    manualBtn.addEventListener('click', function () { setMode(false); });
    autoBtn.addEventListener('click', function () { setMode(true); });

    var guide = document.getElementById('pai-auto-guide');
    if (guide) {
        var productsEl = document.getElementById('pai-guide-products');
        var hintEl = document.getElementById('pai-guide-products-hint');
        var pager = document.getElementById('pai-guide-pager');
        var prevBtn = document.getElementById('pai-guide-prev');
        var nextBtn = document.getElementById('pai-guide-next');
        var pageLabel = document.getElementById('pai-guide-page-label');
        var pickPanel = document.getElementById('pai-guide-pick');
        var toast = document.getElementById('pai-guide-toast');
        var collSearch = document.getElementById('pai-guide-coll-search');
        var collId = document.getElementById('pai-guide-coll-id');
        var collResults = document.getElementById('pai-guide-coll-results');
        var collSelected = document.getElementById('pai-guide-coll-selected');
        var collSelectedTitle = document.getElementById('pai-guide-coll-selected-title');
        var clearBtn = document.getElementById('pai-guide-clear');

        var state = {
            categoryId: '',
            collectionId: '',
            page: 1,
            cursors: [null],
            hasNext: false,
            endCursor: null,
            selected: null,
            loading: false,
            collTimer: null
        };

        function escapeHtml(s) {
            return String(s).replace(/[&<>"']/g, function (c) {
                return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
            });
        }
        function escapeAttr(s) { return escapeHtml(s); }

        function showToast(msg, isError) {
            if (!toast) return;
            toast.textContent = msg;
            toast.style.color = isError ? '#b91c1c' : '#065f46';
        }

        function setHidden(id, title, product) {
            document.getElementById('guide_product_id').value = id || '';
            document.getElementById('guide_product_title').value = title || '';
            if (!product) {
                document.getElementById('guide_metafields_json').value = '';
                document.getElementById('guide_color_option').value = '';
                document.getElementById('guide_color_values_json').value = '';
                document.getElementById('guide_collections_json').value = '';
                document.getElementById('guide_category_id').value = '';
                document.getElementById('guide_category_name').value = '';
                document.getElementById('guide_product_type').value = '';
                document.getElementById('guide_template_suffix').value = '';
                document.getElementById('guide_tags_json').value = '';
                document.getElementById('guide_image').value = '';
                return;
            }
            document.getElementById('guide_metafields_json').value = JSON.stringify(product.metafields || []);
            document.getElementById('guide_color_option').value = product.color_option || 'Color';
            document.getElementById('guide_color_values_json').value = JSON.stringify(product.color_values || []);
            document.getElementById('guide_collections_json').value = JSON.stringify(product.collections || []);
            document.getElementById('guide_category_id').value = product.category_id || '';
            document.getElementById('guide_category_name').value = product.category_name || '';
            document.getElementById('guide_product_type').value = product.product_type || '';
            document.getElementById('guide_template_suffix').value = product.template_suffix != null ? String(product.template_suffix) : '';
            document.getElementById('guide_tags_json').value = JSON.stringify(product.tags || []);
            document.getElementById('guide_image').value = product.image || '';
        }

        function currentCategory() {
            var active = guide.querySelector('.pai-guide-chip.is-active');
            return active ? (active.getAttribute('data-category-id') || '') : '';
        }

        function loadProducts(page) {
            state.categoryId = currentCategory();
            state.collectionId = collId ? collId.value : '';
            if (!state.categoryId && !state.collectionId) {
                productsEl.innerHTML = '<div class="pai-guide-empty">Choose a category and/or collection to browse products.</div>';
                pager.hidden = true;
                if (hintEl) hintEl.textContent = 'Pick a category and/or collection. Collection wins when both are set.';
                return;
            }
            if (state.loading) return;
            state.loading = true;
            if (hintEl) {
                hintEl.textContent = state.collectionId
                    ? 'Loading collection…'
                    : 'Loading…';
            }
            productsEl.innerHTML = '<div class="pai-guide-empty">Loading products…</div>';

            var cursor = state.cursors[page - 1] || null;
            var params = new URLSearchParams();
            if (state.categoryId) params.set('category_id', state.categoryId);
            if (state.collectionId) params.set('collection_id', state.collectionId);
            if (cursor) params.set('cursor', cursor);

            fetch(guide.dataset.guideProductsUrl + '?' + params.toString(), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin'
            })
            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
            .then(function (res) {
                state.loading = false;
                if (!res.ok) {
                    productsEl.innerHTML = '<div class="pai-guide-empty">' + escapeHtml(res.j.error || 'Could not load products.') + '</div>';
                    pager.hidden = true;
                    return;
                }
                var list = res.j.products || [];
                var info = res.j.page_info || {};
                state.page = page;
                state.hasNext = !!info.has_next_page;
                state.endCursor = info.end_cursor || null;
                if (state.hasNext && state.endCursor) state.cursors[page] = state.endCursor;
                if (hintEl) {
                    hintEl.textContent = list.length
                        ? (list.length + ' product' + (list.length === 1 ? '' : 's') + ' · page ' + page)
                        : 'No products for this filter.';
                }
                if (!list.length) {
                    productsEl.innerHTML = '<div class="pai-guide-empty">No products found. Try another category or collection.</div>';
                } else {
                    productsEl.innerHTML = list.map(function (p) {
                        var selected = state.selected && state.selected.id === p.id ? ' is-selected' : '';
                        var img = p.image
                            ? '<img src="' + escapeAttr(p.image) + '" alt="">'
                            : '<div class="pai-guide-card-ph">No image</div>';
                        return '<button type="button" class="pai-guide-card' + selected + '" data-id="' + escapeAttr(p.id) + '">'
                            + img
                            + '<div class="pai-guide-card-body">'
                            + '<div class="pai-guide-card-title">' + escapeHtml(p.title || '') + '</div>'
                            + '<div class="pai-guide-card-meta">' + escapeHtml((p.status || '').toLowerCase())
                            + (p.product_type ? ' · ' + escapeHtml(p.product_type) : '') + '</div>'
                            + '</div></button>';
                    }).join('');
                }
                pager.hidden = false;
                pageLabel.textContent = 'Page ' + page;
                prevBtn.disabled = page <= 1;
                nextBtn.disabled = !state.hasNext;
            })
            .catch(function () {
                state.loading = false;
                productsEl.innerHTML = '<div class="pai-guide-empty">Network error loading products.</div>';
                pager.hidden = true;
            });
        }

        function resetPagesAndLoad() {
            state.cursors = [null];
            state.page = 1;
            loadProducts(1);
        }

        function friendlyGuideMetafields(list) {
            var out = [];
            (list || []).forEach(function (m) {
                if (!m || typeof m !== 'object') return;
                var ns = String(m.namespace || '');
                var source = String(m.source || 'product');
                if (ns === 'shopify' || source === 'category') return;
                var label = String(m.label || m.key || '').trim();
                if (!label) return;
                var raw = m.value == null ? '' : String(m.value).trim();
                if (!raw || raw.indexOf('gid://shopify/Metaobject') !== -1) return;
                var display = raw;
                try {
                    var parsed = JSON.parse(raw);
                    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed) && parsed.value != null && parsed.unit) {
                        var unit = String(parsed.unit).toLowerCase();
                        var short = ({ grams: 'g', ounces: 'oz', inches: 'in', millimeters: 'mm', centimeters: 'cm' })[unit] || unit;
                        display = String(parsed.value) + ' ' + short;
                    } else if (Array.isArray(parsed)) {
                        if (!parsed.length || String(parsed[0]).indexOf('gid://') === 0) return;
                        display = parsed.map(String).join(', ');
                    }
                } catch (e) {}
                if (display.length > 48) display = display.slice(0, 48) + '…';
                out.push({ label: label, display: display });
            });
            return out;
        }

        function renderPick() {
            var p = state.selected;
            if (!p) {
                pickPanel.hidden = true;
                return;
            }
            pickPanel.hidden = false;
            document.getElementById('pai-guide-pick-title').textContent = p.title || '';
            var sub = [];
            if (p.category_name) sub.push(p.category_name);
            if (p.product_type) sub.push(p.product_type);
            if (p.theme_template || p.template_suffix) sub.push('tpl: ' + (p.theme_template || p.template_suffix || 'Default product'));
            if (p.tags && p.tags.length) sub.push(p.tags.length + ' tags');
            if (p.collections && p.collections.length) sub.push(p.collections.length + ' collections');
            if (p.color_values && p.color_values.length) sub.push(p.color_values.length + ' colors');
            if (p.metafields && p.metafields.length) sub.push(p.metafields.length + ' metafields');
            document.getElementById('pai-guide-pick-sub').textContent = sub.join(' · ') || 'Will be saved with this Auto import';
            var img = document.getElementById('pai-guide-pick-img');
            if (p.image) {
                img.src = p.image;
                img.hidden = false;
            } else {
                img.removeAttribute('src');
                img.hidden = true;
            }
            var list = document.getElementById('pai-guide-coll-list');
            if (p.collections && p.collections.length) {
                list.hidden = false;
                list.innerHTML = p.collections.map(function (c) {
                    return '<label class="pai-guide-coll-chip">'
                        + '<input type="checkbox" class="pai-guide-coll-cb" name="guide_collection_ids[]" value="' + escapeAttr(c.id) + '" data-title="' + escapeAttr(c.title || '') + '" checked>'
                        + escapeHtml(c.title || 'Collection')
                        + '</label>';
                }).join('');
            } else {
                list.hidden = true;
                list.innerHTML = '';
            }
            var extra = document.getElementById('pai-guide-extra');
            var blocks = [];
            if (p.color_values && p.color_values.length) {
                blocks.push(
                    '<div class="pai-guide-extra-block"><strong>Color variants (' + escapeHtml(p.color_option || 'Color') + ')</strong>'
                    + '<div class="pai-guide-extra-chips">'
                    + p.color_values.map(function (v) { return '<span class="pai-guide-extra-chip">' + escapeHtml(v) + '</span>'; }).join('')
                    + '</div></div>'
                );
            }
            var productMfs = friendlyGuideMetafields(p.metafields || []);
            if (productMfs.length) {
                blocks.push(
                    '<div class="pai-guide-extra-block"><strong>Product metafields on guide</strong>'
                    + '<p class="pai-hint" style="margin:0.2rem 0 0.45rem;">Checklist from the guide — values come from your notes later.</p>'
                    + '<div class="pai-guide-extra-chips">'
                    + productMfs.map(function (m) {
                        return '<span class="pai-guide-extra-chip" title="' + escapeAttr(m.display) + '">'
                            + escapeHtml(m.label) + (m.display ? ': ' + escapeHtml(m.display) : '')
                            + '</span>';
                    }).join('')
                    + '</div></div>'
                );
            }
            if (blocks.length) {
                extra.hidden = false;
                extra.innerHTML = blocks.join('');
            } else {
                extra.hidden = true;
                extra.innerHTML = '';
            }
            showToast('Guide selected — will save with this Auto import.');
        }

        function selectProduct(id) {
            showToast('Loading guide details…');
            fetch(guide.dataset.guideProductUrl + '?id=' + encodeURIComponent(id), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin'
            })
            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
            .then(function (res) {
                if (!res.ok || !res.j.product) {
                    showToast(res.j.error || 'Could not load product.', true);
                    return;
                }
                state.selected = res.j.product;
                setHidden(state.selected.id, state.selected.title || '', state.selected);
                renderPick();
                productsEl.querySelectorAll('.pai-guide-card').forEach(function (card) {
                    card.classList.toggle('is-selected', card.getAttribute('data-id') === id);
                });
            })
            .catch(function () { showToast('Network error.', true); });
        }

        function clearGuide() {
            state.selected = null;
            setHidden('', '', null);
            pickPanel.hidden = true;
            productsEl.querySelectorAll('.pai-guide-card').forEach(function (c) { c.classList.remove('is-selected'); });
            var extra = document.getElementById('pai-guide-extra');
            if (extra) { extra.hidden = true; extra.innerHTML = ''; }
            var list = document.getElementById('pai-guide-coll-list');
            if (list) { list.hidden = true; list.innerHTML = ''; }
            showToast('Guide cleared.');
        }

        guide.querySelectorAll('.pai-guide-chip').forEach(function (chip) {
            chip.addEventListener('click', function () {
                guide.querySelectorAll('.pai-guide-chip').forEach(function (c) { c.classList.remove('is-active'); });
                chip.classList.add('is-active');
                resetPagesAndLoad();
            });
        });

        if (prevBtn) prevBtn.addEventListener('click', function () {
            if (state.page > 1) loadProducts(state.page - 1);
        });
        if (nextBtn) nextBtn.addEventListener('click', function () {
            if (state.hasNext) loadProducts(state.page + 1);
        });

        productsEl.addEventListener('click', function (e) {
            var card = e.target.closest('.pai-guide-card');
            if (card) selectProduct(card.getAttribute('data-id'));
        });

        if (clearBtn) clearBtn.addEventListener('click', clearGuide);

        function searchCollections(q) {
            if (!q || q.length < 2) {
                collResults.hidden = true;
                collResults.innerHTML = '';
                return;
            }
            fetch(guide.dataset.collectionsUrl + '?q=' + encodeURIComponent(q), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin'
            })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                var list = data.collections || data.results || [];
                if (!list.length) {
                    collResults.innerHTML = '<button type="button" disabled>No collections found</button>';
                    collResults.hidden = false;
                    return;
                }
                collResults.innerHTML = list.map(function (c) {
                    return '<button type="button" data-id="' + escapeAttr(c.id) + '" data-title="' + escapeAttr(c.title || '') + '">'
                        + escapeHtml(c.title || c.id) + '</button>';
                }).join('');
                collResults.hidden = false;
            })
            .catch(function () {
                collResults.innerHTML = '<button type="button" disabled>Search failed</button>';
                collResults.hidden = false;
            });
        }

        if (collSearch) {
            collSearch.addEventListener('input', function () {
                clearTimeout(state.collTimer);
                var q = (collSearch.value || '').trim();
                state.collTimer = setTimeout(function () { searchCollections(q); }, 280);
            });
        }
        if (collResults) {
            collResults.addEventListener('click', function (e) {
                var btn = e.target.closest('button[data-id]');
                if (!btn) return;
                collId.value = btn.getAttribute('data-id') || '';
                if (collSelected) collSelected.hidden = false;
                if (collSelectedTitle) collSelectedTitle.textContent = btn.getAttribute('data-title') || '';
                collResults.hidden = true;
                collSearch.value = '';
                resetPagesAndLoad();
            });
        }
        var collClear = document.getElementById('pai-guide-coll-clear');
        if (collClear) {
            collClear.addEventListener('click', function () {
                collId.value = '';
                if (collSelected) collSelected.hidden = true;
                if (collSelectedTitle) collSelectedTitle.textContent = '';
                resetPagesAndLoad();
            });
        }

        // Restore empty products hint on load
        productsEl.innerHTML = '<div class="pai-guide-empty">Choose a category and/or collection to browse products.</div>';
    }

    var form = document.getElementById('pai-create-form');
    if (form && typeof window.paiShowLuxuryLoader === 'function') {
        form.addEventListener('submit', function () {
            var auto = modeVal.value === '1';
            window.paiShowLuxuryLoader(
                auto ? 'Starting auto import…' : 'Uploading media…',
                auto
                    ? 'Upload first, then the pipeline runs in the background. You can leave this page.'
                    : 'Saving files — after upload you can keep working in the wizard.'
            );
        });
    }
})();
</script>
@endpush
@endsection