{{-- Example: admin/product-search.blade.php --}}
@extends('layouts.app')

@section('title', __('admin.product_search_title'))

@section('content')

    <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">
        {{ __('admin.product_search_header') }}
    </h1>

    <div x-data="productSearchPageManager({
        i18n: {
            addSelected: '{{ __('admin.add_selected_to_inventory') }}',
            processing: '{{ __('admin.processing') }}',
            loading: '{{ __('admin.loading_results') }}',
            noResults: '{{ __('admin.no_products_found_message') }}',
            searchFailed: '{{ __('admin.search_failed_message') }}',
            asinsNotFound: '{{ __('admin.asins_not_found_message') }}',
            bulkProcessing: '{{ __('admin.bulk_processing_message') }}',
            bulkCompleted: '{{ __('admin.bulk_completed_message') }}',
            initialMessage: '{{ __('admin.search_initial_message') }}',
            addToDb: '{{ __('admin.add_to_db_title') }}',
            productAdded: '{{ __('admin.product_added_title') }}',
            productProcessed: '{{ __('admin.product_processed_title') }}',
            productExists: '{{ __('admin.product_already_exists') }}',
            failedToAdd: '{{ __('admin.failed_to_add_product') }}',
            noTitle: '{{ __('admin.no_title', [], app()->getLocale()) }}',
            priceLabel: '{{ __('admin.price_label') }}',
            statusLabel: '{{ __('admin.status_label') }}',
            unknownStatus: '{{ __('admin.product_status_unknown') }}',
            viewOnAmazon: '{{ __('admin.view_on_amazon') }}',
            businessPriceLabel: '{{ __('admin.business_price_label') }}',
            quantityDiscounts: '{{ __('admin.quantity_discounts_available') }}',
            starRatingAria: '{{ __('admin.star_rating_aria_label') }}',
            invalidAsinFormat: '{{ __('admin.invalid_asin_format_message') }}' // New translation key
        }
    })">

        {{-- Flash Message --}}
        <div x-show="flashMessage.show" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform translate-y-2"
            x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-300"
            x-transition:leave-start="opacity-100 transform translate-y-0"
            x-transition:leave-end="opacity-0 transform translate-y-2"
            class="fixed top-5 right-5 z-50 rounded-md p-4 shadow-lg"
            :class="{
                'bg-green-100 dark:bg-green-800/90 border border-green-300 dark:border-green-700': flashMessage
                    .type === 'success',
                'bg-red-100 dark:bg-red-800/90 border border-red-300 dark:border-red-700': flashMessage
                    .type === 'error',
                'bg-yellow-100 dark:bg-yellow-700/90 border border-yellow-300 dark:border-yellow-600': flashMessage
                    .type === 'warning'
            }"
            style="display: none;">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg x-show="flashMessage.type === 'success'" class="h-5 w-5 text-green-500 dark:text-green-400"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                            clip-rule="evenodd" />
                    </svg>
                    <svg x-show="flashMessage.type === 'error'" class="h-5 w-5 text-red-500 dark:text-red-400"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                            clip-rule="evenodd" />
                    </svg>
                    <svg x-show="flashMessage.type === 'warning'" class="h-5 w-5 text-yellow-500 dark:text-yellow-400"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.21 3.03-1.742 3.03H4.42c-1.532 0-2.492-1.696-1.742-3.03l5.58-9.92zM10 13a1 1 0 110-2 1 1 0 010 2zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                            clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium"
                        :class="{
                            'text-green-800 dark:text-green-200': flashMessage
                                .type === 'success',
                            'text-red-800 dark:text-red-200': flashMessage
                                .type === 'error',
                            'text-yellow-800 dark:text-yellow-200': flashMessage
                                .type === 'warning'
                        }"
                        x-html="flashMessage.message"></p>
                </div>
            </div>
        </div>

        {{-- Search Type Tabs --}}
        <div class="mb-6">
            <div class="border-b border-gray-200 dark:border-gray-700">
                <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                    <button @click="searchMode = 'keyword'"
                        :class="{ 'border-indigo-500 text-indigo-600 dark:text-indigo-400': searchMode === 'keyword', 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': searchMode !== 'keyword' }"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm focus:outline-none">
                        {{ __('admin.keyword_search_tab') }}
                    </button>
                    <button @click="searchMode = 'asin'"
                        :class="{ 'border-indigo-500 text-indigo-600 dark:text-indigo-400': searchMode === 'asin', 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': searchMode !== 'asin' }"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm focus:outline-none">
                        {{ __('admin.asin_lookup_tab') }}
                    </button>
                </nav>
            </div>
        </div>

        {{-- Search Form Container --}}
        <div class="mb-8 bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 border border-gray-200 dark:border-gray-700">
            {{-- Keyword Search Form --}}
            <form id="product-search-form" class="space-y-6" x-show="searchMode === 'keyword'"
                @submit.prevent="handleKeywordSearch">
                {{-- Keywords, Region, Locale Row --}}
                <div class="md:flex md:items-end md:gap-x-4">
                    <div class="flex-grow mb-4 md:mb-0">
                        <label for="keywords"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('admin.keywords_label') }}
                            <span class="text-red-500">{{ __('admin.required_field') }}</span></label>
                        <input type="text" id="keywords" name="keywords" required
                            placeholder="{{ __('admin.keywords_placeholder') }}"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                    </div>
                    <div class="w-full md:w-1/4 mb-4 md:mb-0 hidden">
                        <label for="productRegionKeyword"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('admin.region_label') }}
                            <span class="text-red-500">{{ __('admin.required_field') }}</span></label>
                        <select id="productRegionKeyword" name="productRegion" required
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none">
                            <option value="US">US</option>
                            <option value="CA">CA</option>
                        </select>
                    </div>
                    <div class="w-full md:w-1/4 hidden">
                        <label for="localeKeyword"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('admin.locale_label') }}
                            <span class="text-red-500">{{ __('admin.required_field') }}</span></label>
                        <select id="localeKeyword" name="locale" required
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none">
                            <option value="en_US">en_US</option>
                            <option value="fr_CA">fr_CA</option>
                        </select>
                    </div>
                </div>
                {{-- Facets for Keyword Search --}}
                <div class="hidden">
                    <label
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ __('admin.facets_label') }}</label>
                    <div class="flex flex-wrap gap-x-6 gap-y-2">
                        <div class="flex items-center"><input id="facet_keyword_offers" name="facets[]" value="OFFERS"
                                type="checkbox"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500"
                                checked><label for="facet_keyword_offers"
                                class="ml-2 block text-sm text-gray-900 dark:text-gray-200 cursor-pointer">{{ __('admin.facet_offers') }}</label>
                        </div>
                        <div class="flex items-center"><input id="facet_keyword_images" name="facets[]" value="IMAGES"
                                type="checkbox"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500"
                                checked><label for="facet_keyword_images"
                                class="ml-2 block text-sm text-gray-900 dark:text-gray-200 cursor-pointer">{{ __('admin.facet_images') }}</label>
                        </div>
                        <div class="flex items-center"><input id="facet_keyword_categories" name="facets[]"
                                value="CATEGORIES" type="checkbox"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500"><label
                                for="facet_keyword_categories"
                                class="ml-2 block text-sm text-gray-900 dark:text-gray-200 cursor-pointer">{{ __('admin.facet_categories') }}</label>
                        </div>
                        <div class="flex items-center"><input id="facet_keyword_brands" name="facets[]" value="BRANDS"
                                type="checkbox"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500"><label
                                for="facet_keyword_brands"
                                class="ml-2 block text-sm text-gray-900 dark:text-gray-200 cursor-pointer">{{ __('admin.facet_brands') }}</label>
                        </div>
                        <div class="flex items-center"><input id="facet_keyword_product_info" name="facets[]"
                                value="PRODUCT_INFORMATION" type="checkbox"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500"
                                checked><label for="facet_keyword_product_info"
                                class="ml-2 block text-sm text-gray-900 dark:text-gray-200 cursor-pointer">{{ __('admin.facet_product_info') }}</label>
                        </div>
                    </div>
                </div>
                <div class="pt-2">
                    <button type="submit"
                        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">
                        {{ __('admin.search_keywords_button') }}
                    </button>
                </div>
            </form>

            {{-- ASIN Lookup Form --}}
            <form id="asin-lookup-form" class="space-y-6" x-show="searchMode === 'asin'"
                @submit.prevent="handleAsinSearch" x-cloak>
                <div>
                    <label for="asins"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('admin.asins_label') }}
                        <span class="text-red-500">{{ __('admin.required_field') }}</span></label>
                    <textarea id="asins" name="asins" rows="3" required placeholder="{{ __('admin.asins_placeholder') }}"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"></textarea>
                </div>
                <div class="md:flex md:items-end md:gap-x-4">
                    <div class="w-full md:w-1/3 mb-4 md:mb-0 hidden">
                        <label for="productRegionAsin"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('admin.region_label') }}
                            <span class="text-red-500">{{ __('admin.required_field') }}</span></label>
                        <select id="productRegionAsin" name="productRegion" required
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none">
                            <option value="US">US</option>
                            <option value="CA">CA</option>
                        </select>
                    </div>
                    <div class="w-full md:w-1/3 hidden">
                        <label for="localeAsin"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('admin.locale_label') }}
                            <span class="text-red-500">{{ __('admin.required_field') }}</span></label>
                        <select id="localeAsin" name="locale" required
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none">
                            <option value="en_US">en_US</option>
                            <option value="fr_CA">fr_CA</option>
                        </select>
                    </div>
                </div>
                {{-- Facets for ASIN Search --}}
                <div class="hidden">
                    <label
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ __('admin.facets_label') }}</label>
                    <div class="flex flex-wrap gap-x-6 gap-y-2">
                        <div class="flex items-center"><input id="facet_asin_offers" name="facets[]" value="OFFERS"
                                type="checkbox"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500"
                                checked><label for="facet_asin_offers"
                                class="ml-2 block text-sm text-gray-900 dark:text-gray-200 cursor-pointer">{{ __('admin.facet_offers') }}</label>
                        </div>
                        <div class="flex items-center"><input id="facet_asin_images" name="facets[]" value="IMAGES"
                                type="checkbox"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500"
                                checked><label for="facet_asin_images"
                                class="ml-2 block text-sm text-gray-900 dark:text-gray-200 cursor-pointer">{{ __('admin.facet_images') }}</label>
                        </div>
                        <div class="flex items-center"><input id="facet_asin_product_info" name="facets[]"
                                value="PRODUCT_INFORMATION" type="checkbox"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500"
                                disabled><label for="facet_asin_product_info"
                                class="ml-2 block text-sm text-gray-900 dark:text-gray-200 cursor-pointer">{{ __('admin.facet_product_info') }}</label>
                        </div>
                        <div class="flex items-center"><input id="facet_asin_reviews" name="facets[]"
                                value="CUSTOMER_REVIEWS_SUMMARY" type="checkbox"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500"
                                disabled><label for="facet_asin_reviews"
                                class="ml-2 block text-sm text-gray-900 dark:text-gray-200 cursor-pointer">{{ __('admin.facet_reviews') }}</label>
                        </div>
                        <div class="flex items-center"><input id="facet_asin_badges" name="facets[]" value="BADGES"
                                type="checkbox"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500"
                                disabled><label for="facet_asin_badges"
                                class="ml-2 block text-sm text-gray-900 dark:text-gray-200 cursor-pointer">{{ __('admin.facet_badges') }}</label>
                        </div>
                    </div>
                </div>
                <div class="pt-2">
                    <button type="submit"
                        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">
                        {{ __('admin.lookup_asins_button') }}
                    </button>
                </div>
            </form>
        </div> {{-- End Form Container --}}

        {{-- Results Area --}}
        <hr class="my-8 border-gray-300 dark:border-gray-700">

        {{-- Results Header: Title, View Toggle, and Bulk Actions --}}
        <div class="flex flex-wrap justify-between items-center mb-4 gap-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">{{ __('admin.results_header') }}</h2>
            <div class="flex items-center space-x-3">
                <div class="flex items-center" x-show="productsAvailable">
                    <input type="checkbox" id="select-all-products" x-model="selectAll" @change="toggleSelectAll"
                        class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 bg-white dark:bg-gray-700">
                    <label for="select-all-products"
                        class="ml-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">{{ __('admin.select_all') }}</label>
                </div>
                <button type="button" id="bulk-add-to-inventory" @click="bulkAddToInventory"
                    :disabled="selectedProducts.length === 0 || bulkProcessing"
                    class="inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-150 ease-in-out"
                    :class="{
                        'bg-green-600 hover:bg-green-700 focus:ring-green-500': selectedProducts.length > 0 && !
                            bulkProcessing,
                        'bg-gray-400 dark:bg-gray-600 cursor-not-allowed': selectedProducts.length === 0 ||
                            bulkProcessing
                    }">
                    <svg x-show="bulkProcessing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                            stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                        </path>
                    </svg>
                    <span
                        x-text="bulkProcessing ? i18n.processing : i18n.addSelected.replace(':count', selectedProducts.length)"></span>
                </button>
                <div
                    class="flex space-x-1 border border-gray-300 dark:border-gray-600 rounded-md p-0.5 bg-gray-100 dark:bg-gray-700">
                    <button type="button" @click="viewMode = 'list'"
                        :class="{ 'bg-white dark:bg-gray-800 shadow-sm text-indigo-700 dark:text-indigo-400': viewMode === 'list', 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200': viewMode !== 'list' }"
                        class="px-3 py-1 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 dark:focus:ring-offset-gray-800 transition-colors duration-150"
                        aria-label="{{ __('admin.list_view') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
                        </svg>
                    </button>
                    <button type="button" @click="viewMode = 'grid'"
                        :class="{ 'bg-white dark:bg-gray-800 shadow-sm text-indigo-700 dark:text-indigo-400': viewMode === 'grid', 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200': viewMode !== 'grid' }"
                        class="px-3 py-1 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 dark:focus:ring-offset-gray-800 transition-colors duration-150"
                        aria-label="{{ __('admin.grid_view') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25A2.25 2.25 0 0113.5 8.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <div id="bulk-action-feedback" class="mb-4 text-sm text-gray-700 dark:text-gray-300"></div>
        <div id="asin-not-found-feedback" class="mb-4 text-sm text-yellow-700 dark:text-yellow-500"></div>


        <div id="loading-indicator" style="display: none;" class="text-center py-10">
            <svg class="animate-spin h-8 w-8 text-indigo-600 dark:text-indigo-400 mx-auto"
                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                </circle>
                <path class="opacity-75" fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                </path>
            </svg>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400" x-text="i18n.loading"></p>
        </div>

        <div id="search-results-container">
            <div id="search-results-list" x-show="viewMode === 'list'" class="space-y-4" x-cloak style="display: none;">
            </div>
            <div id="search-results-grid" x-show="viewMode === 'grid'"
                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" x-cloak></div>
            <div id="search-results-message" class="mt-4 text-gray-700 dark:text-gray-300 text-center py-6">
                <p x-text="i18n.initialMessage"></p>
            </div>
        </div>
    </div> {{-- End Alpine Component --}}
@endsection

@push('scripts')
    <script>
        function productSearchPageManager(config) {
            return {
                searchMode: 'keyword',
                viewMode: 'grid',
                selectedProducts: [],
                selectAll: false,
                productsAvailable: false,
                bulkProcessing: false,
                allProductAsinsOnPage: [],
                i18n: config.i18n,
                flashMessage: {
                    show: false,
                    message: '',
                    type: 'info'
                },

                init() {
                    this.initSingleAddHandler();
                },

                showFlash(message, type = 'info', duration = 5000) {
                    this.flashMessage.show = true;
                    this.flashMessage.message = message;
                    this.flashMessage.type = type;
                    setTimeout(() => {
                        this.flashMessage.show = false;
                    }, duration);
                },

                clearFeedback() {
                    document.getElementById('bulk-action-feedback').innerHTML = '';
                    document.getElementById('asin-not-found-feedback').innerHTML = '';
                    document.getElementById('search-results-message').innerHTML = ''; // Clear search results message
                },

                handleKeywordSearch() {
                    this.executeSearch(
                        `{{ route('admin.product-search.execute') }}?${new URLSearchParams(new FormData(document.getElementById('product-search-form'))).toString()}`
                    );
                },

                handleAsinSearch() {
                    this.clearFeedback(); // Clear previous messages
                    const form = document.getElementById('asin-lookup-form');
                    const formData = new FormData(form);
                    const asinsText = formData.get('asins');

                    if (!asinsText) {
                        document.getElementById('search-results-message').innerHTML =
                            `<p class="text-red-600 dark:text-red-400">{{ __('admin.asins_label') }} {{ __('admin.required_field') }}</p>`;
                        return;
                    }

                    // Split by newlines, then by commas, then filter out empty strings and trim whitespace
                    const rawAsins = asinsText.split(/[\n,]/).map(asin => asin.trim()).filter(asin => asin);

                    const validAsins = [];
                    const invalidAsins = [];
                    const asinRegex = /^[A-Z0-9]{10}$/; // Basic ASIN format validation

                    rawAsins.forEach(asin => {
                        if (asinRegex.test(asin)) {
                            validAsins.push(asin);
                        } else {
                            invalidAsins.push(asin);
                        }
                    });

                    if (invalidAsins.length > 0) {
                        document.getElementById('search-results-message').innerHTML =
                            `<p class="text-red-600 dark:text-red-400">${this.i18n.invalidAsinFormat.replace(':asins', escapeHtml(invalidAsins.join(', ')))}</p>`;
                        this.productsAvailable = false;
                        document.getElementById('loading-indicator').style.display = 'none';
                        document.getElementById('search-results-message').style.display = 'block';
                        return;
                    }

                    if (validAsins.length === 0) {
                        document.getElementById('search-results-message').innerHTML =
                            `<p class="text-yellow-600 dark:text-yellow-400">${this.i18n.noResults}</p>`;
                        this.productsAvailable = false;
                        document.getElementById('loading-indicator').style.display = 'none';
                        document.getElementById('search-results-message').style.display = 'block';
                        return;
                    }


                    formData.delete('asins'); // Remove the original textarea value
                    validAsins.forEach(asin => formData.append('asins[]', asin));

                    this.executeSearch(`{{ route('admin.product-search.by-asins') }}`, true, formData);
                },

                executeSearch(requestUrl, isAsinSearch = false, postData = null) {
                    document.getElementById('search-results-list').innerHTML = '';
                    document.getElementById('search-results-grid').innerHTML = '';
                    this.clearFeedback();

                    const loadingIndicator = document.getElementById('loading-indicator');
                    const resultsMessageDiv = document.getElementById('search-results-message');
                    loadingIndicator.style.display = 'block';
                    resultsMessageDiv.style.display = 'none';

                    const fetchOptions = {
                        method: (isAsinSearch && postData) ? 'POST' : 'GET',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        ...((isAsinSearch && postData) && {
                            body: postData
                        })
                    };

                    fetch(requestUrl, fetchOptions)
                        .then(response => response.json().catch(() => response.text().then(text => {
                            throw new Error(`Server returned non-JSON response: ${text}`)
                        })).then(data => ({
                            ok: response.ok,
                            status: response.status,
                            data
                        })))
                        .then(({
                            ok,
                            status,
                            data
                        }) => {
                            if (!ok) {
                                // Specific handling for validation errors from the backend
                                if (status === 422 && data.errors) {
                                    let errorMessages = [];
                                    for (const key in data.errors) {
                                        errorMessages = errorMessages.concat(data.errors[key]);
                                    }
                                    const formattedError = errorMessages.join('<br>');
                                    resultsMessageDiv.innerHTML =
                                        `<p class="text-red-600 dark:text-red-400">${formattedError}</p>`;
                                } else {
                                    const error = new Error(data?.message || `Server Error: ${status}`);
                                    error.data = data;
                                    throw error;
                                }
                            } else {
                                const products = data.products || [];
                                if (!products.length) {
                                    resultsMessageDiv.innerHTML = `<p>${this.i18n.noResults}</p>`;
                                    this.productsAvailable = false;
                                } else {
                                    const listDiv = document.getElementById('search-results-list');
                                    const gridDiv = document.getElementById('search-results-grid');
                                    this.allProductAsinsOnPage = products.map(p => p.asin).filter(Boolean);
                                    products.forEach(product => {
                                        if (!product?.asin) return;
                                        listDiv.appendChild(this.renderListItem(product));
                                        gridDiv.appendChild(this.renderGridCard(product));
                                    });
                                    this.productsAvailable = true;
                                }
                                if (isAsinSearch && data.notFoundAsins?.length) {
                                    document.getElementById('asin-not-found-feedback').innerHTML =
                                        `<p>${this.i18n.asinsNotFound.replace(':asins', data.notFoundAsins.join(', '))}</p>`;
                                }
                            }
                        })
                        .catch(error => {
                            // Catch any errors not handled by the specific 422 check
                            resultsMessageDiv.innerHTML =
                                `<p class="text-red-600 dark:text-red-400">${this.i18n.searchFailed.replace(':message', escapeHtml(error.message || 'Unknown error'))}</p>`;
                            if (error.data) {
                                const detail = typeof error.data === 'object' ? JSON.stringify(error.data, null, 2) :
                                    error.data;
                                resultsMessageDiv.innerHTML +=
                                    `<pre class="text-xs text-left mt-2 p-2 bg-red-50 dark:bg-gray-700 border border-red-200 dark:border-red-800 rounded text-red-800 dark:text-red-300 overflow-auto max-h-32">${escapeHtml(detail)}</pre>`;
                            }
                            this.productsAvailable = false;
                        })
                        .finally(() => {
                            loadingIndicator.style.display = 'none';
                            resultsMessageDiv.style.display = this.productsAvailable ? 'none' : 'block';
                            this.resetSelection();
                        });
                },

                async bulkAddToInventory() {
                    if (this.selectedProducts.length === 0 || this.bulkProcessing) return;
                    this.bulkProcessing = true;

                    this.showFlash(this.i18n.bulkProcessing.replace(':count', this.selectedProducts.length), 'info',
                        10000);

                    const productsToAdd = this.selectedProducts.map(asin => {
                        const card = document.querySelector(`.product-card[data-asin="${asin}"]`);
                        return card ? {
                            asin: asin,
                            name: card.dataset.name,
                            image_url: card.dataset.imageUrl,
                            product_url: card.dataset.productUrl,
                            description: card.dataset.description,
                            price: card.dataset.price ? parseFloat(card.dataset.price) : null
                        } : null;
                    }).filter(Boolean);

                    try {
                        const response = await fetch('{{ route('admin.internal-products.bulk-store-from-search') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                    'content')
                            },
                            body: JSON.stringify({
                                products: productsToAdd
                            })
                        });
                        const data = await response.json();
                        if (!response.ok) throw data;

                        let successCount = data.added_count || 0;
                        let existCount = (data.errors || []).filter(e => e.error.includes('already been taken')).length;

                        if (successCount > 0) {
                            this.showFlash(this.i18n.bulkCompleted.replace(':added', successCount).replace(':updated',
                                0).replace(':failed', existCount), 'success');
                        } else if (existCount > 0) {
                            this.showFlash(this.i18n.productExists, 'warning');
                        }

                        (data.errors || []).forEach(err => {
                            this.updateCardStatus(err.asin, 'exists');
                        });
                        (data.added_asins || []).forEach(asin => {
                            this.updateCardStatus(asin, 'added');
                        });

                    } catch (error) {
                        this.showFlash(error.message || 'An unknown error occurred during bulk processing.', 'error');
                    } finally {
                        this.bulkProcessing = false;
                        this.resetSelection();
                    }
                },

                updateCardStatus(asin, status) {
                    document.querySelectorAll(`.product-card[data-asin="${asin}"]`).forEach(card => {
                        const button = card.querySelector('.add-product-svg-button');
                        if (!button) return;
                        button.disabled = true;

                        if (status === 'added') {
                            button.classList.add('bg-green-100', 'dark:bg-green-900/50');
                            button.title = this.i18n.productAdded;
                            button.querySelector('svg').innerHTML =
                                '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />';
                        } else if (status === 'exists') {
                            button.classList.add('bg-yellow-100', 'dark:bg-yellow-800/50', 'text-yellow-600',
                                'dark:text-yellow-400');
                            button.title = this.i18n.productExists;
                            button.querySelector('svg').innerHTML =
                                '<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />';
                        }
                    });
                },

                toggleSelectAll() {
                    this.selectedProducts = this.selectAll ? [...this.allProductAsinsOnPage] : [];
                },
                updateSelectedProducts(event, asin) {
                    if (event.target.checked) {
                        if (!this.selectedProducts.includes(asin)) this.selectedProducts.push(asin);
                    } else {
                        this.selectedProducts = this.selectedProducts.filter(p => p !== asin);
                    }
                    this.updateSelectAllState();
                },
                updateSelectAllState() {
                    this.selectAll = this.allProductAsinsOnPage.length > 0 && this.selectedProducts.length === this
                        .allProductAsinsOnPage.length;
                },
                resetSelection() {
                    this.selectedProducts = [];
                    this.selectAll = false;
                },

                // Updated initSingleAddHandler with better validation and error handling
                initSingleAddHandler() {
                    const resultsContainer = document.getElementById('search-results-container');
                    resultsContainer.addEventListener('click', (event) => {
                        const button = event.target.closest('.add-product-svg-button');
                        if (!button || button.disabled) return;

                        const card = button.closest('.product-card');
                        const asin = card.dataset.asin;

                        // Validate ASIN before making the request
                        if (!asin || !/^[A-Z0-9]{10}$/i.test(asin)) {
                            this.showFlash(
                                `Invalid ASIN format: ${asin}. ASIN must be exactly 10 alphanumeric characters.`,
                                'error');
                            return;
                        }

                        const productData = {
                            asin: asin,
                            name: card.dataset.name,
                            image_url: card.dataset.imageUrl,
                            product_url: card.dataset.productUrl,
                            description: card.dataset.description,
                            price: card.dataset.price ? parseFloat(card.dataset.price) : null
                        };

                        // Log the data being sent for debugging
                        console.log('Sending product data:', productData);

                        button.disabled = true;
                        button.classList.add('processing', 'opacity-50', 'cursor-not-allowed');
                        card.classList.add('ring-2', 'ring-indigo-300', 'dark:ring-indigo-600');

                        fetch('{{ route('admin.internal.products.store') }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Accept': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                        .getAttribute('content')
                                },
                                body: JSON.stringify(productData)
                            })
                            .then(res => {
                                console.log('Response status:', res.status);
                                return res.json().then(data => {
                                    console.log('Response data:', data);
                                    return {
                                        ok: res.ok,
                                        status: res.status,
                                        data
                                    };
                                });
                            })
                            .then(({
                                ok,
                                status,
                                data
                            }) => {
                                if (!ok) {
                                    console.error('Server error:', status, data);
                                    throw data;
                                }
                                this.showFlash(data.message || this.i18n.productAdded, 'success');
                                card.classList.replace('ring-indigo-300', 'ring-green-500');
                                button.querySelector('svg').innerHTML =
                                    '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />';
                                button.classList.add('bg-green-100', 'dark:bg-green-900/50');
                                button.title = this.i18n.productAdded;
                            })
                            .catch(error => {
                                console.error('Catch block error:', error);
                                const errorMessage = error?.errors?.asin?.[0] || error?.message ||
                                    'Unknown error';
                                if (errorMessage.includes('has already been taken')) {
                                    this.showFlash(this.i18n.productExists, 'warning');
                                    card.classList.replace('ring-indigo-300', 'ring-yellow-500');
                                    button.querySelector('svg').innerHTML =
                                        '<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />';
                                    button.classList.add('bg-yellow-100', 'dark:bg-yellow-800/50',
                                        'text-yellow-600', 'dark:text-yellow-400');
                                    button.title = this.i18n.productExists;
                                } else {
                                    this.showFlash(this.i18n.failedToAdd.replace(':error', errorMessage),
                                        'error');
                                    card.classList.replace('ring-indigo-300', 'ring-red-500');
                                    button.disabled = false;
                                    button.title = this.i18n.failedToAdd.replace(':error', escapeHtml(
                                        errorMessage));
                                }
                            })
                            .finally(() => {
                                button.classList.remove('processing', 'opacity-50', 'cursor-not-allowed');
                                setTimeout(() => card.classList.remove('ring-2', 'ring-green-500',
                                    'ring-yellow-500', 'ring-red-500'), 3000);
                            });
                    });
                },

                renderListItem(product) {
                    const imageUrl = product?.includedDataTypes?.IMAGES?.[0]?.medium?.url;
                    const title = product?.title || this.i18n.noTitle;
                    const asin = product?.asin || 'N/A';
                    const productUrl = product?.url || '#';
                    const offer = product?.includedDataTypes?.OFFERS?.[0];
                    const priceAmount = offer?.price?.value?.amount;
                    const currencyCode = offer?.price?.value?.currencyCode || 'USD';
                    const availability = offer?.availability;
                    const description = product?.productDescription || product?.title || '';

                    // Validate ASIN before proceeding
                    if (!asin || !/^[A-Z0-9]{10}$/i.test(asin)) {
                        console.warn('Invalid or missing ASIN for product:', product);
                        return document.createElement('div'); // Return empty div for invalid products
                    }

                    let priceHtml =
                        `<span class="text-sm text-gray-500 dark:text-gray-400">${this.i18n.not_available_short}</span>`;
                    if (typeof priceAmount === 'number') priceHtml =
                        `<span class="font-semibold text-gray-900 dark:text-white">${escapeHtml(new Intl.NumberFormat(undefined, { style: 'currency', currency: currencyCode }).format(priceAmount))}</span>`;
                    let availabilityHtml =
                        `<span class="text-gray-500 dark:text-gray-400">${this.i18n.unknownStatus}</span>`;
                    if (availability) availabilityHtml =
                        `<span class="${availability.toLowerCase().includes('in stock') ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}">${escapeHtml(availability)}</span>`;

                    const svgButtonHtml =
                        `<button type="button" class="add-product-svg-button text-green-600 dark:text-green-400 p-1 rounded-full hover:bg-green-100 dark:hover:bg-green-900/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition ml-auto flex-shrink-0" title="${this.i18n.addToDb.replace(':title', escapeHtml(title))}" data-asin="${escapeHtml(asin)}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 pointer-events-none"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></button>`;

                    const listItem = document.createElement('div');
                    listItem.className =
                        'product-card product-list-item flex items-start space-x-4 p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm';
                    listItem.dataset.asin = asin;
                    listItem.dataset.name = title;
                    listItem.dataset.imageUrl = imageUrl || '';
                    listItem.dataset.productUrl = productUrl;
                    listItem.dataset.description = description;
                    listItem.dataset.price = typeof priceAmount === 'number' ? priceAmount.toString() : '';

                    listItem.innerHTML = `
                        <div class="flex-shrink-0 pt-1"> <input type="checkbox" class="product-select-checkbox h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 bg-white dark:bg-gray-700" value="${escapeHtml(asin)}" x-model="selectedProducts" @change="updateSelectAllState"></div>
                        <div class="flex-shrink-0 w-16 h-16 bg-gray-50 dark:bg-gray-700 rounded flex items-center justify-center border dark:border-gray-600 overflow-hidden">${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(title)}" class="max-h-full max-w-full object-contain">` : `<div class="p-1 text-gray-400 dark:text-gray-500">${placeholderSvg}</div>`}</div>
                        <div class="flex-grow min-w-0">
                            <h3 class="text-sm font-medium text-gray-900 dark:text-white truncate"><a href="${productUrl}" target="_blank" rel="noopener noreferrer" class="hover:text-indigo-600 dark:hover:text-indigo-400" title="${escapeHtml(title)}">${escapeHtml(title)}</a></h3>
                            <p class="text-xs text-gray-500 dark:text-gray-400">ASIN: ${escapeHtml(asin)}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">${this.i18n.priceLabel}: ${priceHtml}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">${this.i18n.statusLabel}: ${availabilityHtml}</p>
                        </div>
                        ${svgButtonHtml}`;
                    return listItem;
                },

                renderGridCard(product) {
                    const imageUrl = product?.includedDataTypes?.IMAGES?.[0]?.medium?.url;
                    const title = product?.title || this.i18n.noTitle;
                    const asin = product?.asin || 'N/A';
                    const productUrl = product?.url || '#';
                    const badgesData = product?.badges;
                    const rating = product?.customerReviewsSummary?.starRating;
                    const ratingCount = product?.customerReviewsSummary?.numberOfRatings;
                    const offer = product?.includedDataTypes?.OFFERS?.[0];
                    const priceAmount = offer?.price?.value?.amount;
                    const currencyCode = offer?.price?.value?.currencyCode || 'USD';
                    const priceType = offer?.price?.priceType;
                    const quantityTiers = offer?.price?.quantityPrice?.quantityPriceTiers;
                    const description = product?.productDescription || product?.title || '';

                    // Validate ASIN before proceeding
                    if (!asin || !/^[A-Z0-9]{10}$/i.test(asin)) {
                        console.warn('Invalid or missing ASIN for product:', product);
                        return document.createElement('div'); // Return empty div for invalid products
                    }

                    let badgesHtml = '';
                    if (badgesData?.length) badgesHtml =
                        `<div class="absolute top-2 right-2 p-1 flex flex-col gap-1 z-10">${badgesData.map(b => b.fragment?.title ? `<span class="inline-block whitespace-nowrap rounded bg-orange-600 px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm">${escapeHtml(b.fragment.title)}</span>` : '').join('')}</div>`;

                    const imageHtml = `
                        <div class="h-40 flex items-center justify-center flex-shrink-0 relative overflow-hidden border-b border-gray-200 dark:border-gray-700 p-2 bg-white dark:bg-gray-900">
                            <div class="absolute top-2 left-2 z-20"><input type="checkbox" class="product-select-checkbox h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500 bg-white dark:bg-gray-700 bg-opacity-75 dark:bg-opacity-75" value="${escapeHtml(asin)}" x-model="selectedProducts" @change="updateSelectAllState"></div>
                            ${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(title)}" class="max-h-full max-w-full object-contain">` : `<div class="h-full w-full bg-gray-50 dark:bg-gray-800 flex items-center justify-center rounded text-gray-400 dark:text-gray-500">${placeholderSvgLarge}</div>`}
                            ${badgesHtml}
                        </div>`;

                    let priceHtml = `<div class="mb-2 h-[46px]"></div>`;
                    if (typeof priceAmount === 'number') {
                        priceHtml =
                            `<p class="text-lg font-bold text-gray-900 dark:text-white my-1">${escapeHtml(new Intl.NumberFormat(undefined, { style: 'currency', currency: currencyCode }).format(priceAmount))}${priceType === 'BUSINESS' ? `<span class="text-xs font-normal text-gray-500 dark:text-gray-400 ml-1">${this.i18n.businessPriceLabel}</span>` : ''}</p>`;
                        priceHtml += quantityTiers?.length > 1 ?
                            `<p class="text-xs text-green-700 dark:text-green-500 -mt-1 mb-2">${this.i18n.quantityDiscounts}</p>` :
                            `<div class="mb-2 h-[18px]"></div>`;
                    }

                    let ratingsHtml = `<div class="mb-2 h-[20px]"></div>`;
                    if (typeof rating === 'number' && rating > 0) {
                        const stars = Array.from({
                            length: 5
                        }, (_, i) => rating >= i + 1 ? '★' : (rating >= i + 0.5 ? '★' : '☆')).join('');
                        const countText = typeof ratingCount === 'number' ? ` (${ratingCount.toLocaleString()})` : '';
                        ratingsHtml =
                            `<div class="flex items-center mt-1 mb-2 h-[20px]"><div class="text-sm text-yellow-400" aria-label="${this.i18n.starRatingAria.replace(':rating', rating.toFixed(1))}">${stars.replace(/☆/g, '<span class="text-gray-300 dark:text-gray-600">☆</span>')}</div><span class="ml-1 text-xs text-gray-500 dark:text-gray-400">${escapeHtml(rating.toFixed(1))}${escapeHtml(countText)}</span></div>`;
                    }

                    const svgButtonHtml =
                        `<button type="button" class="add-product-svg-button text-green-600 dark:text-green-400 p-1 rounded-full hover:bg-green-100 dark:hover:bg-green-900/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition" title="${this.i18n.addToDb.replace(':title', escapeHtml(title))}" data-asin="${escapeHtml(asin)}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 pointer-events-none"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></button>`;

                    const card = document.createElement('div');
                    card.className =
                        'product-card border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm bg-white dark:bg-gray-800 overflow-hidden flex flex-col';
                    card.dataset.asin = asin;
                    card.dataset.name = title;
                    card.dataset.imageUrl = imageUrl || '';
                    card.dataset.productUrl = productUrl;
                    card.dataset.description = description;
                    card.dataset.price = typeof priceAmount === 'number' ? priceAmount.toString() : '';

                    card.innerHTML = `${imageHtml}
                        <div class="p-3 flex-grow flex flex-col justify-between">
                            <div>
                                <h3 class="text-sm font-semibold text-gray-800 dark:text-white mb-1 leading-snug h-12"><a href="${productUrl}" target="_blank" rel="noopener noreferrer" class="hover:text-indigo-600 dark:hover:text-indigo-400 line-clamp-3" title="${escapeHtml(title)}">${escapeHtml(title)}</a></h3>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">ASIN: ${escapeHtml(asin)}</p>
                                ${priceHtml}
                                ${ratingsHtml}
                            </div>
                            <div class="mt-auto pt-2 flex justify-between items-center">
                                <a href="${productUrl}" target="_blank" rel="noopener noreferrer" class="text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-medium">${this.i18n.viewOnAmazon} &rarr;</a>
                                ${svgButtonHtml}
                            </div>
                        </div>`;
                    return card;
                },

                initSingleAddHandler() {
                    const resultsContainer = document.getElementById('search-results-container');
                    resultsContainer.addEventListener('click', (event) => {
                        const button = event.target.closest('.add-product-svg-button');
                        if (!button || button.disabled) return;

                        const card = button.closest('.product-card');
                        const productData = {
                            asin: card.dataset.asin,
                            name: card.dataset.name,
                            image_url: card.dataset.imageUrl,
                            product_url: card.dataset.productUrl,
                            description: card.dataset.description,
                            price: card.dataset.price ? parseFloat(card.dataset.price) : null
                        };

                        button.disabled = true;
                        button.classList.add('processing', 'opacity-50', 'cursor-not-allowed');
                        card.classList.add('ring-2', 'ring-indigo-300', 'dark:ring-indigo-600');

                        fetch('{{ route('admin.internal.products.store') }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Accept': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                        .getAttribute('content')
                                },
                                body: JSON.stringify(productData)
                            })
                            .then(res => res.json().then(data => ({
                                ok: res.ok,
                                status: res.status,
                                data
                            })))
                            .then(({
                                ok,
                                status,
                                data
                            }) => {
                                if (!ok) throw data;
                                this.showFlash(data.message || this.i18n.productAdded, 'success');
                                card.classList.replace('ring-indigo-300', 'ring-green-500');
                                button.querySelector('svg').innerHTML =
                                    '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />';
                                button.classList.add('bg-green-100', 'dark:bg-green-900/50');
                                button.title = this.i18n.productAdded;
                            })
                            .catch(error => {
                                const errorMessage = error?.errors?.asin?.[0] || error?.message ||
                                    'Unknown error';
                                if (errorMessage.includes('has already been taken')) {
                                    this.showFlash(this.i18n.productExists, 'warning');
                                    card.classList.replace('ring-indigo-300', 'ring-yellow-500');
                                    button.querySelector('svg').innerHTML =
                                        '<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />';
                                    button.classList.add('bg-yellow-100', 'dark:bg-yellow-800/50',
                                        'text-yellow-600', 'dark:text-yellow-400');
                                    button.title = this.i18n.productExists;
                                } else {
                                    this.showFlash(this.i18n.failedToAdd.replace(':error', errorMessage),
                                        'error');
                                    card.classList.replace('ring-indigo-300', 'ring-red-500');
                                    button.disabled = false;
                                    button.title = this.i18n.failedToAdd.replace(':error', escapeHtml(
                                        errorMessage));
                                }
                            })
                            .finally(() => {
                                button.classList.remove('processing', 'opacity-50', 'cursor-not-allowed');
                                setTimeout(() => card.classList.remove('ring-2', 'ring-green-500',
                                    'ring-yellow-500', 'ring-red-500'), 3000);
                            });
                    });
                }
            };
        }

        function escapeHtml(unsafe) {
            if (typeof unsafe !== 'string') return '';
            return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        const placeholderSvg =
            `<svg class="h-8 w-8 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>`;
        const placeholderSvgLarge =
            `<svg class="h-12 w-12 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>`;
    </script>
@endpush