{{-- Guide browser for Auto create (same flow as Manual: category → collection → products) --}}
@php
    $categoryOptions = $categoryOptions ?? [];
    $oldGuideId = old('guide_product_id');
    $oldGuideTitle = old('guide_product_title');
    $hasOldGuide = filled($oldGuideId);
    $oldFlags = old('guide_copy', []);
    $flagOn = static function (string $key) use ($oldFlags): bool {
        if (! is_array($oldFlags) || $oldFlags === []) {
            return true;
        }

        return ! empty($oldFlags[$key]);
    };
@endphp
<div class="pai-guide pai-guide--create" id="pai-auto-guide"
     data-guide-products-url="{{ route('product-ai-import.guide-products') }}"
     data-guide-product-url="{{ route('product-ai-import.guide-product') }}"
     data-collections-url="{{ route('product-ai-import.search-collections') }}">

    <input type="hidden" name="guide_product_id" id="guide_product_id" value="{{ $oldGuideId }}">
    <input type="hidden" name="guide_product_title" id="guide_product_title" value="{{ $oldGuideTitle }}">
    <input type="hidden" name="guide_metafields_json" id="guide_metafields_json" value="{{ old('guide_metafields_json') }}">
    <input type="hidden" name="guide_color_option" id="guide_color_option" value="{{ old('guide_color_option') }}">
    <input type="hidden" name="guide_color_values_json" id="guide_color_values_json" value="{{ old('guide_color_values_json') }}">
    <input type="hidden" name="guide_collections_json" id="guide_collections_json" value="{{ old('guide_collections_json') }}">
    <input type="hidden" name="guide_category_id" id="guide_category_id" value="{{ old('guide_category_id') }}">
    <input type="hidden" name="guide_category_name" id="guide_category_name" value="{{ old('guide_category_name') }}">
    <input type="hidden" name="guide_product_type" id="guide_product_type" value="{{ old('guide_product_type') }}">
    <input type="hidden" name="guide_template_suffix" id="guide_template_suffix" value="{{ old('guide_template_suffix') }}">
    <input type="hidden" name="guide_tags_json" id="guide_tags_json" value="{{ old('guide_tags_json') }}">
    <input type="hidden" name="guide_image" id="guide_image" value="{{ old('guide_image') }}">

    <div class="pai-guide-browse">
        <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>

    <div class="pai-guide-pick" id="pai-guide-pick" @if(! $hasOldGuide) hidden @endif>
        <div class="pai-guide-pick-card">
            <img id="pai-guide-pick-img" alt="" @if(! old('guide_image')) hidden @endif src="{{ old('guide_image') }}">
            <div class="pai-guide-pick-meta">
                <strong id="pai-guide-pick-title">{{ $oldGuideTitle ?: 'Selected guide' }}</strong>
                <span id="pai-guide-pick-sub" class="pai-hint" style="margin:0;">
                    @if($hasOldGuide)
                        Will be saved with this Auto import
                    @endif
                </span>
            </div>
            <button type="button" class="pai-guide-pick-clear" id="pai-guide-clear" title="Clear guide">×</button>
        </div>

        <div class="pai-guide-copy">
            <span class="pai-guide-filter-label">Include when syncing to Shopify</span>
            @foreach(['category' => 'Category', 'type' => 'Product type', 'template' => 'Theme template', 'tags' => 'Tags', 'collections' => 'Collections', 'metafields' => 'Metafields', 'colors' => 'Color variants'] as $flagKey => $flagLabel)
                <label class="pai-guide-check">
                    <input type="hidden" name="guide_copy[{{ $flagKey }}]" value="0">
                    <input type="checkbox" name="guide_copy[{{ $flagKey }}]" value="1" class="pai-guide-copy-flag" @checked($flagOn($flagKey))>
                    {{ $flagLabel }}
                </label>
            @endforeach
        </div>

        <div class="pai-guide-extra" id="pai-guide-extra" hidden></div>
        <div class="pai-guide-coll-list" id="pai-guide-coll-list" hidden></div>
        <p class="pai-hint" id="pai-guide-toast" style="margin:0;">Pick a product above — it becomes your guide for Shopify sync later. Uncheck anything you don’t want copied.</p>
    </div>
</div>