{# app/templates/admin/settings.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
{% from 'shared/macros/headers.html' import page_header_refresh %}
{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
{% from 'shared/macros/inputs.html' import number_stepper %}
{% from 'shared/macros/modals.html' import confirm_modal, confirm_modal_dynamic %}

{% block title %}Platform Settings{% endblock %}

{% block alpine_data %}adminSettings(){% endblock %}

{% block content %}
{{ page_header_refresh('Platform Settings') }}

{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}

{{ error_state('Error', show_condition='error') }}

<!-- Settings Categories Tabs -->
{% call tabs_nav() %}
    {{ tab_button('display', 'Display', icon='view-grid') }}
    {{ tab_button('logging', 'Logging', icon='document-text') }}
    {{ tab_button('email', 'Email', icon='mail') }}
    {{ tab_button('shipping', 'Shipping', icon='truck') }}
    {{ tab_button('system', 'System', icon='cog') }}
    {{ tab_button('security', 'Security', icon='shield-check') }}
    {{ tab_button('notifications', 'Notifications', icon='bell') }}
{% endcall %}

<!-- Display Settings Tab -->
<div x-show="activeTab === 'display'" x-transition>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
            Display Configuration
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
            Configure how data is displayed across the admin interface.
        </p>

        <!-- Rows Per Page Setting -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Default Rows Per Page
            </label>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">
                Set the default number of rows shown in tables across the admin interface.
            </p>
            <div class="flex items-center gap-3">
                <template x-for="option in [10, 20, 50, 100]" :key="option">
                    <button
                        @click="displaySettings.rows_per_page = option"
                        class="px-4 py-2 text-sm font-medium rounded-lg border transition-colors"
                        :class="displaySettings.rows_per_page === option
                            ? 'bg-purple-600 text-white border-purple-600 dark:bg-purple-500 dark:border-purple-500'
                            : 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'"
                        x-text="option"
                    ></button>
                </template>
            </div>
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                This setting applies to: Orders, Products, Customers, Inventory, and other tables.
            </p>
        </div>

        <!-- Info Box -->
        <div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
            <div class="flex items-start">
                <span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 mr-3 flex-shrink-0')"></span>
                <div class="text-sm text-blue-800 dark:text-blue-200">
                    <p class="font-medium mb-1">When does this take effect?</p>
                    <p>Changes to the rows per page setting will apply immediately to all admin tables when refreshed.</p>
                </div>
            </div>
        </div>

        <!-- Save Button -->
        <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
            <button
                @click="saveDisplaySettings()"
                :disabled="saving"
                class="px-6 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 disabled:cursor-not-allowed"
            >
                <span x-show="!saving">Save Display Settings</span>
                <span x-show="saving">Saving...</span>
            </button>
        </div>
    </div>
</div>

<!-- Logging Settings Tab -->
<div x-show="activeTab === 'logging'" x-transition>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
            Logging Configuration
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
            Configure application logging behavior, file rotation, and retention policies.
        </p>

        <!-- Log Level -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Log Level
            </label>
            <select
                x-model="logSettings.log_level"
                class="block w-full md:w-1/2 px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
            >
                <option value="DEBUG">DEBUG - Detailed information for diagnosing problems</option>
                <option value="INFO">INFO - General informational messages</option>
                <option value="WARNING">WARNING - Warning messages</option>
                <option value="ERROR">ERROR - Error messages</option>
                <option value="CRITICAL">CRITICAL - Critical errors only</option>
            </select>
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                Changes take effect immediately without restart.
            </p>
        </div>

        <!-- File Rotation Settings -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Max File Size (MB)
                </label>
                {{ number_stepper(model='logSettings.log_file_max_size_mb', min=1, max=1000, step=10, label='Max File Size') }}
                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                    Log file will rotate when it reaches this size.
                </p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Backup File Count
                </label>
                {{ number_stepper(model='logSettings.log_file_backup_count', min=0, max=50, step=1, label='Backup File Count') }}
                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                    Number of rotated backup files to keep.
                </p>
            </div>
        </div>

        <!-- Database Retention -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Database Log Retention (Days)
            </label>
            {{ number_stepper(model='logSettings.db_log_retention_days', min=1, max=365, step=7, label='Retention Days') }}
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                Logs older than this will be automatically deleted from database.
            </p>
        </div>

        <!-- Logging Toggles -->
        <div class="space-y-4 mb-6">
            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div>
                    <p class="font-medium text-gray-700 dark:text-gray-200">File Logging</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Write logs to rotating files on disk</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" x-model="logSettings.file_logging_enabled" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
                </label>
            </div>

            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div>
                    <p class="font-medium text-gray-700 dark:text-gray-200">Database Logging</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Store WARNING/ERROR/CRITICAL logs in database for searching</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" x-model="logSettings.db_logging_enabled" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
                </label>
            </div>
        </div>

        <!-- Save Button -->
        <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
            <p class="text-sm text-gray-600 dark:text-gray-400">
                <span x-html="$icon('information-circle', 'inline w-4 h-4 mr-1')"></span>
                File rotation settings require application restart to take effect.
            </p>
            <button
                @click="saveLogSettings()"
                :disabled="saving"
                class="px-6 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 disabled:cursor-not-allowed"
            >
                <span x-show="!saving">Save Logging Settings</span>
                <span x-show="saving">Saving...</span>
            </button>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="mt-8">
        <div class="mb-8 p-6 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <h4 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                Quick Actions
            </h4>
            <div class="flex flex-wrap gap-3">
                <a
                    href="/admin/logs"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium 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"
                >
                    <span x-html="$icon('document-text', 'w-4 h-4 mr-2')"></span>
                    View Logs
                </a>
                <button
                    @click="showCleanupLogsModal = true"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:shadow-outline-gray"
                >
                    <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
                    Cleanup Old Logs
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Email Settings Tab -->
<div x-show="activeTab === 'email'" x-transition>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                Platform Email Configuration
            </h3>
            <!-- Edit/Cancel buttons -->
            <div class="flex items-center gap-2">
                <template x-if="!emailEditMode">
                    <button
                        @click="enableEmailEditing()"
                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600"
                    >
                        <span x-html="$icon('pencil', 'w-4 h-4 inline mr-1')"></span>
                        Edit Settings
                    </button>
                </template>
                <template x-if="emailEditMode">
                    <button
                        @click="cancelEmailEditing()"
                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600"
                    >
                        Cancel
                    </button>
                </template>
            </div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
            Configure the platform's email settings for system emails (billing, subscriptions, admin notifications).
            Store emails use each store's own email settings.
        </p>

        <!-- Current Status -->
        <div class="mb-6 p-4 rounded-lg" :class="emailSettings.is_configured ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800' : 'bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800'">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <template x-if="emailSettings.is_configured">
                        <div class="flex items-center">
                            <span x-html="$icon('check-circle', 'w-5 h-5 text-green-600 dark:text-green-400 mr-2')"></span>
                            <span class="text-green-800 dark:text-green-300 font-medium">Email configured</span>
                        </div>
                    </template>
                    <template x-if="!emailSettings.is_configured">
                        <div class="flex items-center">
                            <span x-html="$icon('exclamation-triangle', 'w-5 h-5 text-yellow-600 dark:text-yellow-400 mr-2')"></span>
                            <span class="text-yellow-800 dark:text-yellow-300 font-medium">Email not fully configured</span>
                        </div>
                    </template>
                </div>
                <template x-if="emailSettings.has_db_overrides">
                    <span class="px-2 py-1 text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded">
                        Database overrides active
                    </span>
                </template>
            </div>
        </div>

        <!-- ===== READ-ONLY VIEW ===== -->
        <template x-if="!emailEditMode">
            <div>
                <!-- Provider Selection (Read-only) -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Email Provider
                    </label>
                    <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
                        <template x-for="provider in ['smtp', 'sendgrid', 'mailgun', 'ses', 'debug']" :key="provider">
                            <div
                                class="p-3 border-2 rounded-lg text-center"
                                :class="emailSettings.provider === provider
                                    ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/30'
                                    : 'border-gray-200 dark:border-gray-600'"
                            >
                                <div class="text-sm font-medium text-gray-700 dark:text-gray-300 capitalize" x-text="provider === 'ses' ? 'Amazon SES' : provider"></div>
                                <template x-if="emailSettings.provider === provider">
                                    <span x-html="$icon('check-circle', 'w-4 h-4 text-purple-600 dark:text-purple-400 mx-auto mt-1')"></span>
                                </template>
                            </div>
                        </template>
                    </div>
                </div>

                <!-- Current Settings (Read-only) -->
                <div class="space-y-4">
                    <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 border-b dark:border-gray-600 pb-2">
                        Current Configuration
                    </h4>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">From Email</label>
                            <div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" x-text="emailSettings.from_email || 'Not configured'"></div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">From Name</label>
                            <div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" x-text="emailSettings.from_name || 'Not configured'"></div>
                        </div>
                        <template x-if="emailSettings.provider === 'smtp'">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Host</label>
                                <div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" x-text="emailSettings.smtp_host || 'Not configured'"></div>
                            </div>
                        </template>
                        <template x-if="emailSettings.provider === 'smtp'">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Port</label>
                                <div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" x-text="emailSettings.smtp_port || 'Not configured'"></div>
                            </div>
                        </template>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Debug Mode</label>
                            <div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm" :class="emailSettings.debug ? 'text-yellow-600 dark:text-yellow-400' : 'text-gray-700 dark:text-gray-300'" x-text="emailSettings.debug ? 'Enabled (emails logged, not sent)' : 'Disabled'"></div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Sending</label>
                            <div class="px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm" :class="emailSettings.enabled ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'" x-text="emailSettings.enabled ? 'Enabled' : 'Disabled'"></div>
                        </div>
                    </div>
                </div>

                <!-- Info Box -->
                <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                    <div class="flex items-start">
                        <span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 mr-3 flex-shrink-0')"></span>
                        <div class="text-sm text-blue-800 dark:text-blue-200">
                            <p class="font-medium mb-1">Configuration Priority</p>
                            <p>Settings can be configured via environment variables (.env) or overridden in the database using the Edit button above. Database settings take priority over .env values.</p>
                        </div>
                    </div>
                </div>

                <!-- Reset to .env button (only show if DB overrides exist) -->
                <template x-if="emailSettings.has_db_overrides">
                    <div class="mt-4">
                        <button
                            @click="showResetEmailModal = true"
                            :disabled="saving"
                            class="px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 bg-white dark:bg-gray-700 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50"
                        >
                            <span x-html="$icon('refresh', 'w-4 h-4 inline mr-1')"></span>
                            Reset to .env Defaults
                        </button>
                    </div>
                </template>
            </div>
        </template>

        <!-- ===== EDIT MODE ===== -->
        <template x-if="emailEditMode">
            <div>
                <!-- Provider Selection (Editable) -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Email Provider
                    </label>
                    <select
                        x-model="emailForm.provider"
                        class="block w-full md:w-1/2 px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
                    >
                        <option value="smtp">SMTP</option>
                        <option value="sendgrid">SendGrid</option>
                        <option value="mailgun">Mailgun</option>
                        <option value="ses">Amazon SES</option>
                    </select>
                </div>

                <!-- Common Settings -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">From Email *</label>
                        <input
                            type="email"
                            x-model="emailForm.from_email"
                            placeholder="noreply@yourplatform.com"
                            class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
                        />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">From Name *</label>
                        <input
                            type="text"
                            x-model="emailForm.from_name"
                            placeholder="Your Platform"
                            class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
                        />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Reply-To Email</label>
                        <input
                            type="email"
                            x-model="emailForm.reply_to"
                            placeholder="support@yourplatform.com"
                            class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
                        />
                    </div>
                </div>

                <!-- SMTP Settings -->
                <template x-if="emailForm.provider === 'smtp'">
                    <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg mb-6">
                        <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">SMTP Settings</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Host</label>
                                <input type="text" x-model="emailForm.smtp_host" placeholder="smtp.example.com" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Port</label>
                                <input type="number" x-model="emailForm.smtp_port" placeholder="587" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Username</label>
                                <input type="text" x-model="emailForm.smtp_user" placeholder="username" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Password</label>
                                <input type="password" x-model="emailForm.smtp_password" placeholder="Enter new password" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave blank to keep existing</p>
                            </div>
                            <div class="flex items-center gap-4">
                                <label class="flex items-center">
                                    <input type="checkbox" x-model="emailForm.smtp_use_tls" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
                                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Use TLS</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" x-model="emailForm.smtp_use_ssl" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
                                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Use SSL</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </template>

                <!-- SendGrid Settings -->
                <template x-if="emailForm.provider === 'sendgrid'">
                    <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg mb-6">
                        <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">SendGrid Settings</h4>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API Key</label>
                            <input type="password" x-model="emailForm.sendgrid_api_key" placeholder="Enter API key" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave blank to keep existing</p>
                        </div>
                    </div>
                </template>

                <!-- Mailgun Settings -->
                <template x-if="emailForm.provider === 'mailgun'">
                    <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg mb-6">
                        <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Mailgun Settings</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API Key</label>
                                <input type="password" x-model="emailForm.mailgun_api_key" placeholder="Enter API key" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave blank to keep existing</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Domain</label>
                                <input type="text" x-model="emailForm.mailgun_domain" placeholder="mg.yourdomain.com" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
                            </div>
                        </div>
                    </div>
                </template>

                <!-- SES Settings -->
                <template x-if="emailForm.provider === 'ses'">
                    <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg mb-6">
                        <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Amazon SES Settings</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Access Key ID</label>
                                <input type="password" x-model="emailForm.aws_access_key_id" placeholder="Enter access key" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Secret Access Key</label>
                                <input type="password" x-model="emailForm.aws_secret_access_key" placeholder="Enter secret key" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Region</label>
                                <select x-model="emailForm.aws_region" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600">
                                    <option value="us-east-1">US East (N. Virginia)</option>
                                    <option value="us-west-2">US West (Oregon)</option>
                                    <option value="eu-west-1">EU (Ireland)</option>
                                    <option value="eu-central-1">EU (Frankfurt)</option>
                                    <option value="ap-southeast-1">Asia Pacific (Singapore)</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </template>

                <!-- Behavior Settings -->
                <div class="flex items-center gap-6 mb-6">
                    <label class="flex items-center">
                        <input type="checkbox" x-model="emailForm.enabled" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Enable email sending</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" x-model="emailForm.debug" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Debug mode (log only, don't send)</span>
                    </label>
                </div>

                <!-- Save Button -->
                <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
                    <button
                        @click="saveEmailSettings()"
                        :disabled="saving"
                        class="px-6 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 disabled:cursor-not-allowed"
                    >
                        <span x-show="!saving">Save Email Settings</span>
                        <span x-show="saving">Saving...</span>
                    </button>
                </div>
            </div>
        </template>

        <!-- Test Email -->
        <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
            <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Send Test Email</h4>
            <div class="flex items-center gap-3">
                <input
                    type="email"
                    x-model="testEmailAddress"
                    placeholder="test@example.com"
                    class="flex-1 px-4 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-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
                />
                <button
                    @click="sendTestEmail()"
                    :disabled="!testEmailAddress || sendingTestEmail"
                    class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    <span x-show="!sendingTestEmail">Send Test</span>
                    <span x-show="sendingTestEmail">Sending...</span>
                </button>
            </div>
            <!-- Local feedback for test email -->
            <template x-if="testEmailError">
                <div class="mt-3 p-3 bg-red-100 border-2 border-red-500 rounded-lg">
                    <p class="text-sm text-red-700 font-medium" x-text="testEmailError"></p>
                </div>
            </template>
            <template x-if="testEmailSuccess">
                <div class="mt-3 p-3 bg-green-100 border-2 border-green-500 rounded-lg">
                    <p class="text-sm text-green-700 font-medium" x-text="testEmailSuccess"></p>
                </div>
            </template>
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                Send a test email to verify the platform email configuration is working.
            </p>
        </div>
    </div>
</div>

<!-- Shipping Settings Tab -->
<div x-show="activeTab === 'shipping'" x-transition>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
            Shipping & Carrier Configuration
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
            Configure shipping carrier label URL prefixes. These are used to generate shipping label download links.
        </p>

        <!-- Carrier Label URL Settings -->
        <div class="space-y-6">
            <!-- Greco (Letzshop default) -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    <span class="flex items-center gap-2">
                        <span class="px-2 py-0.5 text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded">Greco</span>
                        Label URL Prefix
                    </span>
                </label>
                <input
                    type="url"
                    x-model="shippingSettings.carrier_greco_label_url"
                    placeholder="https://dispatchweb.fr/Tracky/Home/"
                    class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
                />
                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                    The shipment number will be appended to this URL. Default for Letzshop: <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">https://dispatchweb.fr/Tracky/Home/</code>
                </p>
            </div>

            <!-- Colissimo -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    <span class="flex items-center gap-2">
                        <span class="px-2 py-0.5 text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded">Colissimo</span>
                        Label URL Prefix
                    </span>
                </label>
                <input
                    type="url"
                    x-model="shippingSettings.carrier_colissimo_label_url"
                    placeholder="https://www.laposte.fr/outils/suivre-vos-envois?code="
                    class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
                />
                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                    Enter the tracking URL prefix for Colissimo shipments.
                </p>
            </div>

            <!-- XpressLogistics -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    <span class="flex items-center gap-2">
                        <span class="px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">XpressLogistics</span>
                        Label URL Prefix
                    </span>
                </label>
                <input
                    type="url"
                    x-model="shippingSettings.carrier_xpresslogistics_label_url"
                    placeholder="https://tracking.xpresslogistics.com/"
                    class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"
                />
                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                    Enter the tracking URL prefix for XpressLogistics shipments.
                </p>
            </div>
        </div>

        <!-- Info Box -->
        <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
            <div class="flex items-start">
                <span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 mr-3 flex-shrink-0')"></span>
                <div class="text-sm text-blue-800 dark:text-blue-200">
                    <p class="font-medium mb-1">How label URLs work</p>
                    <p>When viewing an order, the system will combine the URL prefix with the shipment number to create a downloadable label link.</p>
                    <p class="mt-1">Example: <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">https://dispatchweb.fr/Tracky/Home/</code> + <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">H74683403433</code></p>
                </div>
            </div>
        </div>

        <!-- Save Button -->
        <div class="flex items-center justify-end pt-6 mt-6 border-t border-gray-200 dark:border-gray-700">
            <button
                @click="saveShippingSettings()"
                :disabled="saving"
                class="px-6 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 disabled:cursor-not-allowed"
            >
                <span x-show="!saving">Save Shipping Settings</span>
                <span x-show="saving">Saving...</span>
            </button>
        </div>
    </div>
</div>

<!-- System Settings Tab -->
<div x-show="activeTab === 'system'" x-transition>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
            System Configuration
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
            General system settings and configuration options.
        </p>
        <div class="text-center py-12 text-gray-500 dark:text-gray-400">
            <span x-html="$icon('cog', 'inline w-12 h-12 mb-4')"></span>
            <p>System settings coming soon...</p>
        </div>
    </div>
</div>

<!-- Security Settings Tab -->
<div x-show="activeTab === 'security'" x-transition>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
            Security Configuration
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
            Security and authentication settings.
        </p>
        <div class="text-center py-12 text-gray-500 dark:text-gray-400">
            <span x-html="$icon('shield-check', 'inline w-12 h-12 mb-4')"></span>
            <p>Security settings coming soon...</p>
        </div>
    </div>
</div>

<!-- Notifications Settings Tab -->
<div x-show="activeTab === 'notifications'" x-transition>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">
            Notification Settings
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
            Configure platform notification preferences and delivery channels.
        </p>

        <!-- Quick Link to Full Notifications Page -->
        <div class="mb-6 p-4 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
            <div class="flex items-start">
                <span x-html="$icon('information-circle', 'w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 mr-3 flex-shrink-0')"></span>
                <div>
                    <p class="text-sm text-purple-800 dark:text-purple-200">
                        For detailed notification management including templates and delivery logs, visit the full
                        <a href="/admin/notifications-settings" class="font-medium underline hover:text-purple-600">Notifications page</a>
                        in Platform Monitoring.
                    </p>
                </div>
            </div>
        </div>

        <!-- Email Notifications Toggle -->
        <div class="space-y-4 mb-6">
            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div>
                    <p class="font-medium text-gray-700 dark:text-gray-200">Email Notifications</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Send notification emails for important events</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" x-model="notificationSettings.email_enabled" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
                </label>
            </div>

            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div>
                    <p class="font-medium text-gray-700 dark:text-gray-200">In-App Notifications</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Show notifications in the admin interface</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" x-model="notificationSettings.in_app_enabled" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
                </label>
            </div>

            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div>
                    <p class="font-medium text-gray-700 dark:text-gray-200">Critical Alerts Only</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Only receive notifications for critical system events</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" x-model="notificationSettings.critical_only" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
                </label>
            </div>
        </div>

        <!-- Save Button -->
        <div class="flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
            <button
                @click="saveNotificationSettings()"
                :disabled="saving"
                class="px-6 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 disabled:cursor-not-allowed"
            >
                <span x-show="!saving">Save Notification Settings</span>
                <span x-show="saving">Saving...</span>
            </button>
        </div>
    </div>
</div>

<!-- Confirmation Modals -->
{{ confirm_modal(
    'resetEmailModal',
    'Reset Email Settings',
    'This will remove all database overrides and revert email configuration to .env defaults. Are you sure?',
    'resetEmailSettings()',
    'showResetEmailModal',
    'Reset to Defaults',
    'Cancel',
    'warning',
    'refresh'
) }}

{{ confirm_modal_dynamic(
    'cleanupLogsModal',
    'Cleanup Old Logs',
    "'This will permanently delete all logs older than ' + logSettings.db_log_retention_days + ' days. This action cannot be undone.'",
    'cleanupOldLogs()',
    'showCleanupLogsModal',
    'Delete Old Logs',
    'Cancel',
    'danger'
) }}

{% endblock %}

{% block extra_scripts %}
<script defer src="{{ url_for('core_static', path='admin/js/settings.js') }}"></script>
{% endblock %}
