{# app/templates/admin/partials/letzshop-settings-tab.html #}
{# Settings tab for admin Letzshop management - API credentials and CSV URLs #}

<div class="grid gap-6 lg:grid-cols-2">
    <!-- API Configuration Card -->
    <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-6">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                Letzshop API Configuration
            </h3>

            <form @submit.prevent="saveCredentials()">
                <!-- API Key -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        API Key <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input
                            :type="showApiKey ? 'text' : 'password'"
                            x-model="settingsForm.api_key"
                            :placeholder="credentials ? credentials.api_key_masked : 'Enter Letzshop API key'"
                            class="block w-full px-3 py-2 pr-10 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
                        />
                        <button
                            type="button"
                            @click="showApiKey = !showApiKey"
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600"
                        >
                            <span x-html="$icon(showApiKey ? 'eye-off' : 'eye', 'w-4 h-4')"></span>
                        </button>
                    </div>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        Get your API key from the Letzshop merchant portal
                    </p>
                </div>

                <!-- Auto Sync -->
                <div class="mb-4">
                    <label class="flex items-center cursor-pointer">
                        <input
                            type="checkbox"
                            x-model="settingsForm.auto_sync_enabled"
                            class="form-checkbox h-5 w-5 text-purple-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:ring-purple-500"
                        />
                        <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-400">Enable Auto-Sync</span>
                    </label>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8">
                        Automatically import new orders periodically
                    </p>
                </div>

                <!-- Sync Interval -->
                <div class="mb-6" x-show="settingsForm.auto_sync_enabled">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        Sync Interval
                    </label>
                    <select
                        x-model="settingsForm.sync_interval_minutes"
                        class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                    >
                        <option value="15">Every 15 minutes</option>
                        <option value="30">Every 30 minutes</option>
                        <option value="60">Every hour</option>
                        <option value="120">Every 2 hours</option>
                        <option value="360">Every 6 hours</option>
                    </select>
                </div>

                <!-- Last Sync Info -->
                <div x-show="credentials" class="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Sync</h4>
                    <div class="grid gap-2 text-sm text-gray-600 dark:text-gray-400">
                        <p>
                            <span class="font-medium">Status:</span>
                            <span
                                class="ml-2 px-2 py-0.5 text-xs rounded-full"
                                :class="{
                                    'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300': credentials?.last_sync_status === 'success',
                                    'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300': credentials?.last_sync_status === 'partial',
                                    'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300': credentials?.last_sync_status === 'failed',
                                    'bg-gray-100 text-gray-700 dark:bg-gray-600 dark:text-gray-300': !credentials?.last_sync_status
                                }"
                                x-text="credentials?.last_sync_status || 'Never'"
                            ></span>
                        </p>
                        <p x-show="credentials?.last_sync_at">
                            <span class="font-medium">Time:</span>
                            <span class="ml-2" x-text="formatDate(credentials?.last_sync_at)"></span>
                        </p>
                        <p x-show="credentials?.last_sync_error" class="text-red-600 dark:text-red-400">
                            <span class="font-medium">Error:</span>
                            <span class="ml-2" x-text="credentials?.last_sync_error"></span>
                        </p>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex flex-wrap gap-3">
                    <button
                        type="submit"
                        :disabled="savingCredentials"
                        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                    >
                        <span x-show="!savingCredentials" x-html="$icon('save', 'w-4 h-4 mr-2')"></span>
                        <span x-show="savingCredentials" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                        <span x-text="savingCredentials ? 'Saving...' : 'Save Credentials'"></span>
                    </button>

                    <button
                        type="button"
                        @click="testConnection()"
                        :disabled="testingConnection || !letzshopStatus.is_configured"
                        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none disabled:opacity-50"
                    >
                        <span x-show="!testingConnection" x-html="$icon('lightning-bolt', 'w-4 h-4 mr-2')"></span>
                        <span x-show="testingConnection" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                        <span x-text="testingConnection ? 'Testing...' : 'Test Connection'"></span>
                    </button>

                    <button
                        type="button"
                        x-show="credentials"
                        @click="deleteCredentials()"
                        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-red-600 transition-colors duration-150 bg-white dark:bg-gray-800 border border-red-300 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none"
                    >
                        <span x-html="$icon('trash', 'w-4 h-4 mr-2')"></span>
                        Remove
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- CSV URLs Card -->
    <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-6">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                Letzshop CSV URLs
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
                Configure the CSV feed URLs for product imports. These URLs are used for quick-fill in the Products tab.
            </p>

            <form @submit.prevent="saveCsvUrls()">
                <!-- French CSV URL -->
                <div class="mb-4">
                    <label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        <span class="fi fi-fr mr-2"></span>
                        French CSV URL
                    </label>
                    <input
                        x-model="settingsForm.letzshop_csv_url_fr"
                        type="url"
                        placeholder="https://letzshop.lu/feeds/products_fr.csv"
                        class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
                    />
                </div>

                <!-- English CSV URL -->
                <div class="mb-4">
                    <label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        <span class="fi fi-gb mr-2"></span>
                        English CSV URL
                    </label>
                    <input
                        x-model="settingsForm.letzshop_csv_url_en"
                        type="url"
                        placeholder="https://letzshop.lu/feeds/products_en.csv"
                        class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
                    />
                </div>

                <!-- German CSV URL -->
                <div class="mb-6">
                    <label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        <span class="fi fi-de mr-2"></span>
                        German CSV URL
                    </label>
                    <input
                        x-model="settingsForm.letzshop_csv_url_de"
                        type="url"
                        placeholder="https://letzshop.lu/feeds/products_de.csv"
                        class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
                    />
                </div>

                <!-- Save Button -->
                <button
                    type="submit"
                    :disabled="savingCsvUrls"
                    class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                >
                    <span x-show="!savingCsvUrls" x-html="$icon('save', 'w-4 h-4 mr-2')"></span>
                    <span x-show="savingCsvUrls" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                    <span x-text="savingCsvUrls ? 'Saving...' : 'Save CSV URLs'"></span>
                </button>
            </form>

            <!-- Info Box -->
            <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                <div class="flex">
                    <span x-html="$icon('information-circle', 'w-5 h-5 text-blue-500 mr-2 flex-shrink-0')"></span>
                    <div class="text-sm text-blue-700 dark:text-blue-300">
                        <p class="font-medium">About CSV URLs</p>
                        <p class="mt-1">These URLs should point to the vendor's product feed on Letzshop. The feed is typically provided by Letzshop as part of the merchant integration.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>