{{-- Optional: guide taxonomy / tags / collections from an existing Shopify product --}}
@php
    $hasSavedGuide = filled($guideProductId ?? null) || filled($guideProductTitle ?? null);
    $copyFlags = is_array($form['guide_copy_flags'] ?? null) ? $form['guide_copy_flags'] : [];
    $flagOn = static function (string $key) use ($copyFlags): bool {
        if (! array_key_exists($key, $copyFlags)) {
            return true; // default all on
        }

        return (bool) $copyFlags[$key];
    };
@endphp
<div class="pai-guide" id="pai-guide" data-open="{{ $hasSavedGuide ? '1' : '0' }}"
     data-guide-products-url="{{ route('product-ai-import.guide-products') }}"
     data-guide-product-url="{{ route('product-ai-import.guide-product') }}"
     data-apply-guide-url="{{ route('product-ai-import.apply-guide', $import) }}"
     data-suggest-guides-url="{{ route('product-ai-import.suggest-guides', $import) }}"
     data-collections-url="{{ route('product-ai-import.search-collections') }}"
     data-saved-guide-id="{{ $guideProductId ?? '' }}"
     data-saved-guide-title="{{ $guideProductTitle ?? '' }}"
     data-saved-guide-snapshot="{{ $hasSavedGuide ? e(json_encode($guideSnapshot ?: [
         'id' => $guideProductId,
         'title' => $guideProductTitle,
         'metafields' => $guideMetafields ?? [],
         'color_option' => $guideColorOption ?? 'Color',
         'color_values' => $guideColorValues ?? [],
     ], JSON_UNESCAPED_UNICODE)) : '' }}">
    <div class="pai-guide-toggle">
        <label class="pai-guide-switch">
            <input type="checkbox" id="pai-guide-enable" @checked($hasSavedGuide)>
            <span class="pai-guide-switch-ui" aria-hidden="true"></span>
            <span class="pai-guide-switch-text">
                <strong>Guide from existing product</strong>
                <span>Optional — pick a catalog product (AI or browse). It becomes your guide automatically. Uncheck what you don’t want synced.</span>
            </span>
        </label>
        @if($hasSavedGuide)
            <span class="pai-guide-active-pill" id="pai-guide-active-pill">Guiding: {{ $guideProductTitle ?: $guideProductId }}</span>
        @else
            <span class="pai-guide-active-pill" id="pai-guide-active-pill" hidden></span>
        @endif
    </div>

    <div class="pai-guide-body" id="pai-guide-body" @if(!$hasSavedGuide) hidden @endif>
        {{-- AI suggestions (easiest path) --}}
        <div class="pai-guide-ai">
            <div class="pai-guide-ai-head">
                <div>
                    <span class="pai-guide-filter-label">AI suggestions</span>
                    <p class="pai-hint" style="margin:0.15rem 0 0;">Best 3 catalog matches — tap one and it becomes your guide (no extra Apply step).</p>
                </div>
                <button type="button" class="btn btn-primary" id="pai-guide-suggest-btn">Suggest 3 guides</button>
            </div>
            <div class="pai-guide-ai-status" id="pai-guide-ai-status" hidden></div>
            <div class="pai-guide-ai-grid" id="pai-guide-ai-grid" aria-live="polite"></div>
        </div>

        <details class="pai-guide-manual">
            <summary>Or browse manually</summary>
            <div class="pai-guide-manual-body">
                <div class="pai-guide-filters">
                    <div class="pai-guide-filter">
                        <span class="pai-guide-filter-label">1 · Category</span>
                        <div class="pai-guide-chips" id="pai-guide-cats" role="listbox" aria-label="Filter by category">
                            <button type="button" class="pai-guide-chip is-active" data-category-id="" role="option">Any</button>
                            @foreach($categoryOptions as $catId => $catLabel)
                                <button type="button" class="pai-guide-chip" data-category-id="{{ $catId }}" role="option">{{ $catLabel }}</button>
                            @endforeach
                        </div>
                    </div>
                    <div class="pai-guide-filter">
                        <span class="pai-guide-filter-label">2 · Collection</span>
                        <div class="pai-guide-coll-wrap">
                            <input type="text" id="pai-guide-coll-search" class="pai-input" placeholder="Search collection…" autocomplete="off">
                            <input type="hidden" id="pai-guide-coll-id" value="">
                            <div id="pai-guide-coll-results" class="pai-collection-results" hidden></div>
                            <div class="pai-guide-coll-selected" id="pai-guide-coll-selected" hidden>
                                <span id="pai-guide-coll-selected-title"></span>
                                <button type="button" class="pai-guide-coll-clear" id="pai-guide-coll-clear" title="Clear collection">×</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pai-guide-products-head">
                    <span class="pai-guide-filter-label">3 · Products</span>
                    <span class="pai-hint" id="pai-guide-products-hint" style="margin:0;">Pick a category and/or collection. Collection wins when both are set.</span>
                </div>
                <div class="pai-guide-products" id="pai-guide-products" aria-live="polite"></div>
                <div class="pai-guide-pager" id="pai-guide-pager" hidden>
                    <button type="button" class="btn btn-secondary" id="pai-guide-prev" disabled>← Prev</button>
                    <span class="pai-hint" id="pai-guide-page-label" style="margin:0;">Page 1</span>
                    <button type="button" class="btn btn-secondary" id="pai-guide-next" disabled>Next →</button>
                </div>
            </div>
        </details>

        <div class="pai-guide-pick" id="pai-guide-pick" @if(!$hasSavedGuide) hidden @endif>
            <div class="pai-guide-pick-card">
                <img id="pai-guide-pick-img" alt="" hidden>
                <div class="pai-guide-pick-meta">
                    <strong id="pai-guide-pick-title">{{ $guideProductTitle ?: 'Saved guide' }}</strong>
                    <span id="pai-guide-pick-sub" class="pai-hint" style="margin:0;">
                        @if($hasSavedGuide)
                            Saved guide — will stay after refresh / Shopify update
                            @if(count($guideColorValues ?? [])) · {{ count($guideColorValues) }} colors @endif
                            @if(count($guideMetafields ?? [])) · {{ count($guideMetafields) }} metafields @endif
                        @endif
                    </span>
                </div>
            </div>
            <div class="pai-guide-copy">
                <span class="pai-guide-filter-label">Include when syncing to Shopify</span>
                <label class="pai-guide-check"><input type="checkbox" id="pai-guide-copy-category" class="pai-guide-copy-flag" @checked($flagOn('category'))> Category</label>
                <label class="pai-guide-check"><input type="checkbox" id="pai-guide-copy-type" class="pai-guide-copy-flag" @checked($flagOn('type'))> Product type</label>
                <label class="pai-guide-check"><input type="checkbox" id="pai-guide-copy-template" class="pai-guide-copy-flag" @checked($flagOn('template'))> Theme template</label>
                <label class="pai-guide-check"><input type="checkbox" id="pai-guide-copy-tags" class="pai-guide-copy-flag" @checked($flagOn('tags'))> Tags</label>
                <label class="pai-guide-check"><input type="checkbox" id="pai-guide-copy-collections" class="pai-guide-copy-flag" @checked($flagOn('collections'))> Collections</label>
                <label class="pai-guide-check"><input type="checkbox" id="pai-guide-copy-metafields" class="pai-guide-copy-flag" @checked($flagOn('metafields'))> Metafields</label>
                <label class="pai-guide-check"><input type="checkbox" id="pai-guide-copy-colors" class="pai-guide-copy-flag" @checked($flagOn('colors'))> Color variants</label>
            </div>
            <div class="pai-guide-extra" id="pai-guide-extra" @if(!count($guideColorValues ?? []) && !count(array_filter($guideMetafields ?? [], fn ($m) => is_array($m) && ($m['source'] ?? 'product') !== 'category' && ($m['namespace'] ?? '') !== 'shopify' && filled($m['value'] ?? null) && !str_contains((string)($m['value'] ?? ''), 'gid://shopify/Metaobject'))) hidden @endif>
                @if(count($guideColorValues ?? []))
                    <div class="pai-guide-extra-block">
                        <strong>Color variants ({{ $guideColorOption ?? 'Color' }})</strong>
                        <div class="pai-guide-extra-chips">
                            @foreach($guideColorValues as $cv)
                                <span class="pai-guide-extra-chip">{{ $cv }}</span>
                            @endforeach
                        </div>
                    </div>
                @endif
                @php
                    $friendlyGuideMfs = [];
                    foreach ($guideMetafields ?? [] as $mf) {
                        if (! is_array($mf)) {
                            continue;
                        }
                        if (($mf['source'] ?? 'product') === 'category' || ($mf['namespace'] ?? '') === 'shopify') {
                            continue;
                        }
                        $val = trim((string) ($mf['value'] ?? ''));
                        if ($val === '' || str_contains($val, 'gid://shopify/Metaobject')) {
                            continue;
                        }
                        $label = trim((string) ($mf['label'] ?? $mf['key'] ?? ''));
                        if ($label === '') {
                            continue;
                        }
                        $display = $val;
                        $decoded = json_decode($val, true);
                        if (is_array($decoded) && isset($decoded['value'], $decoded['unit'])) {
                            $unit = strtolower((string) $decoded['unit']);
                            $short = match ($unit) {
                                'grams' => 'g',
                                'ounces' => 'oz',
                                'inches' => 'in',
                                'millimeters' => 'mm',
                                'centimeters' => 'cm',
                                default => $unit,
                            };
                            $num = $decoded['value'];
                            if (is_numeric($num)) {
                                $f = (float) $num;
                                $numStr = (abs($f - round($f)) < 0.0000001)
                                    ? (string) (int) round($f)
                                    : rtrim(rtrim(sprintf('%.6F', $f), '0'), '.');
                            } else {
                                $numStr = (string) $num;
                            }
                            $display = $numStr.' '.$short;
                        } elseif (is_array($decoded)) {
                            if ($decoded === [] || str_starts_with((string) reset($decoded), 'gid://')) {
                                continue;
                            }
                            $display = implode(', ', array_map('strval', $decoded));
                        }
                        $friendlyGuideMfs[] = ['label' => $label, 'display' => $display];
                    }
                @endphp
                @if(count($friendlyGuideMfs))
                    <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 — your piece gets values from notes / edits below.</p>
                        <div class="pai-guide-extra-chips">
                            @foreach($friendlyGuideMfs as $fm)
                                <span class="pai-guide-extra-chip" title="{{ $fm['display'] }}">{{ $fm['label'] }}: {{ \Illuminate\Support\Str::limit($fm['display'], 40) }}</span>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
            <div class="pai-guide-coll-list" id="pai-guide-coll-list" hidden></div>
            <div class="pai-guide-apply-row">
                <span class="pai-hint" id="pai-guide-toast" style="margin:0;">Selecting a guide saves it automatically. Uncheck items above to skip them on Shopify sync. Turn off the switch to clear the guide.</span>
            </div>
        </div>
    </div>
</div>