{% extends "base.html" %}

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

{% block content %}
<div x-data="settingsPage()" x-init="init()">
    <!-- Header -->
    <div class="px-4 sm:px-0 flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Settings</h1>
            <p class="mt-2 text-sm text-gray-700">Configure authentication, OAuth providers, and system settings</p>
        </div>
    </div>

    <!-- Tabs -->
    <div class="mt-6 border-b border-gray-200">
        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
            <button @click="activeTab = 'auth'"
                    :class="activeTab === 'auth' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                <i class="fas fa-key mr-2"></i>Authentication
            </button>
            <button @click="activeTab = 'oauth'"
                    :class="activeTab === 'oauth' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                <i class="fas fa-shield-alt mr-2"></i>OAuth Providers
            </button>
            <button @click="activeTab = 'mail'"
                    :class="activeTab === 'mail' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                <i class="fas fa-envelope mr-2"></i>Mail
            </button>
            <button @click="activeTab = 'storage'"
                    :class="activeTab === 'storage' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                <i class="fas fa-database mr-2"></i>Storage
            </button>
        </nav>
    </div>

    <!-- Auth Settings Tab -->
    <div x-show="activeTab === 'auth'" class="mt-6">
        <div class="bg-white shadow sm:rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                    Authentication Settings
                </h3>
                <p class="text-sm text-gray-500 mb-6">Configure how users can authenticate to your application.</p>

                <div class="space-y-6">
                    <!-- Auth Methods -->
                    <div class="border-b border-gray-200 pb-6">
                        <h4 class="text-sm font-medium text-gray-900 mb-4">Authentication Methods</h4>
                        <div class="space-y-4">
                            <label class="flex items-center">
                                <input type="checkbox" x-model="authSettings.password_auth_enabled" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-3 text-sm text-gray-700">Password Authentication</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" x-model="authSettings.oauth_enabled" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-3 text-sm text-gray-700">OAuth2 Authentication</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" x-model="authSettings.otp_enabled" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-3 text-sm text-gray-700">OTP (Email Code) Authentication</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" x-model="authSettings.mfa_enabled" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-3 text-sm text-gray-700">Multi-Factor Authentication (MFA)</span>
                            </label>
                        </div>
                    </div>

                    <!-- OAuth Settings -->
                    <div class="border-b border-gray-200 pb-6">
                        <h4 class="text-sm font-medium text-gray-900 mb-4">OAuth Behavior</h4>
                        <div class="space-y-4">
                            <label class="flex items-center">
                                <input type="checkbox" x-model="authSettings.oauth_auto_create_user" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-3 text-sm text-gray-700">Auto-create user on first OAuth login</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" x-model="authSettings.oauth_link_by_email" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-3 text-sm text-gray-700">Link OAuth to existing user by email</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" x-model="authSettings.verification_required" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-3 text-sm text-gray-700">Require email verification</span>
                            </label>
                        </div>
                    </div>

                    <!-- Password Requirements -->
                    <div class="border-b border-gray-200 pb-6">
                        <h4 class="text-sm font-medium text-gray-900 mb-4">Password Requirements</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm text-gray-700">Minimum Length</label>
                                <input type="number" x-model.number="authSettings.password_min_length" min="4" max="32"
                                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                        </div>
                        <div class="mt-4 space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" x-model="authSettings.password_require_upper" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-3 text-sm text-gray-700">Require uppercase letter</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" x-model="authSettings.password_require_number" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-3 text-sm text-gray-700">Require number</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" x-model="authSettings.password_require_special" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-3 text-sm text-gray-700">Require special character</span>
                            </label>
                        </div>
                    </div>

                    <!-- Token Settings -->
                    <div>
                        <h4 class="text-sm font-medium text-gray-900 mb-4">Token Settings</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm text-gray-700">Access Token Expiry (hours)</label>
                                <input type="number" x-model.number="authSettings.token_expiry_hours" min="1" max="720"
                                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                            <div>
                                <label class="block text-sm text-gray-700">Refresh Token Expiry (days)</label>
                                <input type="number" x-model.number="authSettings.refresh_token_expiry_days" min="1" max="365"
                                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex justify-end">
                    <button @click="saveAuthSettings()" :disabled="saving"
                            class="inline-flex items-center px-4 py-2 border border-transparent 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 disabled:opacity-50">
                        <i class="fas fa-save mr-2"></i>
                        <span x-text="saving ? 'Saving...' : 'Save Settings'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- OAuth Providers Tab -->
    <div x-show="activeTab === 'oauth'" class="mt-6">
        <div class="bg-white shadow sm:rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex justify-between items-center mb-6">
                    <div>
                        <h3 class="text-lg leading-6 font-medium text-gray-900">OAuth Providers</h3>
                        <p class="mt-1 text-sm text-gray-500">Configure social login providers for your application.</p>
                    </div>
                    <button @click="showAddProvider = true"
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                        <i class="fas fa-plus mr-2"></i>Add Provider
                    </button>
                </div>

                <!-- Configured Providers -->
                <div class="space-y-4">
                    <template x-for="provider in configuredProviders" :key="provider.id">
                        <div class="border border-gray-200 rounded-lg p-4">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0">
                                        <span class="inline-flex items-center justify-center h-10 w-10 rounded-full"
                                              :class="provider.enabled ? 'bg-green-100' : 'bg-gray-100'">
                                            <i class="fab" :class="getProviderIcon(provider.provider_type)"></i>
                                        </span>
                                    </div>
                                    <div class="ml-4">
                                        <h4 class="text-sm font-medium text-gray-900" x-text="provider.name"></h4>
                                        <p class="text-xs text-gray-500" x-text="'Client ID: ' + provider.client_id"></p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <span :class="provider.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'"
                                          class="px-2 py-1 text-xs font-medium rounded-full"
                                          x-text="provider.enabled ? 'Enabled' : 'Disabled'"></span>
                                    <button @click="editProvider(provider)" class="text-indigo-600 hover:text-indigo-900">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button @click="deleteProvider(provider.id)" class="text-red-600 hover:text-red-900">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </template>

                    <div x-show="configuredProviders.length === 0" class="text-center py-12">
                        <i class="fas fa-shield-alt text-4xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">No OAuth providers configured yet.</p>
                        <button @click="showAddProvider = true" class="mt-4 text-indigo-600 hover:text-indigo-500">
                            Add your first provider
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mail Settings Tab -->
    <div x-show="activeTab === 'mail'" class="mt-6">
        <div class="bg-white shadow sm:rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Mail Settings</h3>
                <p class="text-sm text-gray-500 mb-6">Configure SMTP settings for sending emails.</p>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">SMTP Host</label>
                        <input type="text" x-model="mailSettings.smtp_host" placeholder="smtp.example.com"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">SMTP Port</label>
                        <input type="number" x-model.number="mailSettings.smtp_port" placeholder="587"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">SMTP Username</label>
                        <input type="text" x-model="mailSettings.smtp_user"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">SMTP Password</label>
                        <input type="password" x-model="mailSettings.smtp_password"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">From Email</label>
                        <input type="email" x-model="mailSettings.from_email" placeholder="noreply@example.com"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">From Name</label>
                        <input type="text" x-model="mailSettings.from_name" placeholder="FastCMS"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                </div>

                <div class="mt-6 flex justify-end">
                    <button @click="saveMailSettings()" :disabled="saving"
                            class="inline-flex items-center px-4 py-2 border border-transparent 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 disabled:opacity-50">
                        <i class="fas fa-save mr-2"></i>Save Mail Settings
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Storage Settings Tab -->
    <div x-show="activeTab === 'storage'" class="mt-6">
        <div class="bg-white shadow sm:rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Storage Settings</h3>
                <p class="text-sm text-gray-500 mb-6">Configure file storage settings.</p>

                <div class="space-y-6">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Storage Type</label>
                            <select x-model="storageSettings.type"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                <option value="local">Local Storage</option>
                                <option value="s3">Amazon S3 / S3-Compatible</option>
                                <option value="azure">Azure Blob Storage</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Max File Size (bytes)</label>
                            <input type="number" x-model.number="storageSettings.max_file_size"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <p class="mt-1 text-xs text-gray-500">Default: 10MB (10485760 bytes)</p>
                        </div>
                    </div>

                    <!-- S3 Settings -->
                    <div x-show="storageSettings.type === 's3'" class="border-t border-gray-200 pt-6">
                        <h4 class="text-sm font-medium text-gray-900 mb-4">S3 Configuration</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Bucket Name</label>
                                <input type="text" x-model="storageSettings.s3_bucket" placeholder="my-bucket"
                                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Region</label>
                                <input type="text" x-model="storageSettings.s3_region" placeholder="us-east-1"
                                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Access Key ID</label>
                                <input type="text" x-model="storageSettings.s3_access_key"
                                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Secret Access Key</label>
                                <input type="password" x-model="storageSettings.s3_secret_key"
                                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700">Custom Endpoint (Optional)</label>
                                <input type="text" x-model="storageSettings.s3_endpoint" placeholder="https://s3.example.com"
                                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                <p class="mt-1 text-xs text-gray-500">For S3-compatible services like MinIO, DigitalOcean Spaces, etc.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Azure Settings -->
                    <div x-show="storageSettings.type === 'azure'" class="border-t border-gray-200 pt-6">
                        <h4 class="text-sm font-medium text-gray-900 mb-4">Azure Blob Storage Configuration</h4>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Container Name</label>
                                <input type="text" x-model="storageSettings.azure_container" placeholder="my-container"
                                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Connection String (Recommended)</label>
                                <input type="password" x-model="storageSettings.azure_connection_string"
                                       placeholder="DefaultEndpointsProtocol=https;AccountName=..."
                                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                <p class="mt-1 text-xs text-gray-500">Found in Azure Portal > Storage Account > Access Keys</p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-md">
                                <p class="text-xs text-gray-600 mb-2"><strong>Or use Account Name + Key:</strong></p>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Account Name</label>
                                        <input type="text" x-model="storageSettings.azure_account_name"
                                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Account Key</label>
                                        <input type="password" x-model="storageSettings.azure_account_key"
                                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex justify-end">
                    <button @click="saveStorageSettings()" :disabled="saving"
                            class="inline-flex items-center px-4 py-2 border border-transparent 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 disabled:opacity-50">
                        <i class="fas fa-save mr-2"></i>Save Storage Settings
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Provider Modal -->
    <div x-show="showAddProvider" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showAddProvider = false"></div>

            <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                        <span x-text="editingProvider ? 'Edit Provider' : 'Add OAuth Provider'"></span>
                    </h3>

                    <div class="space-y-4">
                        <!-- Provider Type -->
                        <div x-show="!editingProvider">
                            <label class="block text-sm font-medium text-gray-700">Provider Type</label>
                            <select x-model="newProvider.provider_type" @change="updateProviderName()"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                <option value="">Select a provider...</option>
                                <template x-for="type in availableProviderTypes" :key="type.type">
                                    <option :value="type.type" x-text="type.name"></option>
                                </template>
                            </select>
                        </div>

                        <!-- Display Name -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Display Name</label>
                            <input type="text" x-model="newProvider.name"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        </div>

                        <!-- Client ID -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Client ID</label>
                            <input type="text" x-model="newProvider.client_id" required
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        </div>

                        <!-- Client Secret -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Client Secret</label>
                            <input type="password" x-model="newProvider.client_secret" :required="!editingProvider"
                                   :placeholder="editingProvider ? '(unchanged)' : ''"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        </div>

                        <!-- Enabled -->
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" x-model="newProvider.enabled" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-2 text-sm text-gray-700">Enabled</span>
                            </label>
                        </div>

                        <!-- Redirect URL Info -->
                        <div class="bg-blue-50 p-3 rounded-md">
                            <p class="text-xs text-blue-800">
                                <strong>Redirect URL:</strong>
                                <code class="bg-blue-100 px-1 rounded" x-text="window.location.origin + '/api/v1/oauth/' + (newProvider.provider_type || 'PROVIDER') + '/callback'"></code>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
                    <button @click="saveProvider()" :disabled="saving"
                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm disabled:opacity-50">
                        <span x-text="saving ? 'Saving...' : (editingProvider ? 'Update' : 'Add Provider')"></span>
                    </button>
                    <button @click="closeProviderModal()" type="button"
                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function settingsPage() {
    return {
        activeTab: 'auth',
        saving: false,
        showAddProvider: false,
        editingProvider: null,

        authSettings: {
            password_auth_enabled: true,
            otp_enabled: false,
            mfa_enabled: false,
            oauth_enabled: true,
            oauth_auto_create_user: true,
            oauth_link_by_email: true,
            password_min_length: 8,
            password_require_upper: false,
            password_require_number: false,
            password_require_special: false,
            token_expiry_hours: 24,
            refresh_token_expiry_days: 7,
            verification_required: false,
        },

        mailSettings: {
            smtp_host: '',
            smtp_port: 587,
            smtp_user: '',
            smtp_password: '',
            from_email: '',
            from_name: 'FastCMS',
        },

        storageSettings: {
            type: 'local',
            max_file_size: 10485760,
            // S3 settings
            s3_bucket: '',
            s3_region: '',
            s3_access_key: '',
            s3_secret_key: '',
            s3_endpoint: '',
            // Azure settings
            azure_container: '',
            azure_connection_string: '',
            azure_account_name: '',
            azure_account_key: '',
        },

        configuredProviders: [],
        availableProviderTypes: [],

        newProvider: {
            provider_type: '',
            name: '',
            client_id: '',
            client_secret: '',
            enabled: true,
        },

        async init() {
            await Promise.all([
                this.loadAuthSettings(),
                this.loadMailSettings(),
                this.loadStorageSettings(),
                this.loadProviderTypes(),
                this.loadConfiguredProviders(),
            ]);
        },

        async loadAuthSettings() {
            try {
                const data = await apiRequest('/settings/auth');
                if (data) {
                    Object.keys(this.authSettings).forEach(key => {
                        if (data[key] !== undefined) {
                            this.authSettings[key] = data[key].value;
                        }
                    });
                }
            } catch (e) {
                console.log('No auth settings found, using defaults');
            }
        },

        async loadMailSettings() {
            try {
                const data = await apiRequest('/settings/mail');
                if (data) {
                    Object.keys(this.mailSettings).forEach(key => {
                        if (data[key] !== undefined) {
                            this.mailSettings[key] = data[key].value;
                        }
                    });
                }
            } catch (e) {
                console.log('No mail settings found, using defaults');
            }
        },

        async loadStorageSettings() {
            try {
                const data = await apiRequest('/settings/storage');
                if (data) {
                    Object.keys(this.storageSettings).forEach(key => {
                        if (data[key] !== undefined) {
                            this.storageSettings[key] = data[key].value;
                        }
                    });
                }
            } catch (e) {
                console.log('No storage settings found, using defaults');
            }
        },

        async loadProviderTypes() {
            try {
                this.availableProviderTypes = await apiRequest('/oauth/providers/types');
            } catch (e) {
                console.error('Failed to load provider types:', e);
            }
        },

        async loadConfiguredProviders() {
            try {
                this.configuredProviders = await apiRequest('/oauth/providers');
            } catch (e) {
                console.error('Failed to load configured providers:', e);
            }
        },

        updateProviderName() {
            const type = this.availableProviderTypes.find(t => t.type === this.newProvider.provider_type);
            if (type) {
                this.newProvider.name = type.name;
            }
        },

        getProviderIcon(type) {
            const icons = {
                'google': 'fa-google',
                'github': 'fa-github',
                'microsoft': 'fa-microsoft',
                'facebook': 'fa-facebook',
                'twitter': 'fa-twitter',
                'discord': 'fa-discord',
                'apple': 'fa-apple',
                'gitlab': 'fa-gitlab',
                'bitbucket': 'fa-bitbucket',
                'linkedin': 'fa-linkedin',
            };
            return icons[type] || 'fa-key';
        },

        editProvider(provider) {
            this.editingProvider = provider;
            this.newProvider = {
                provider_type: provider.provider_type,
                name: provider.name,
                client_id: provider.client_id,
                client_secret: '',
                enabled: provider.enabled,
            };
            this.showAddProvider = true;
        },

        closeProviderModal() {
            this.showAddProvider = false;
            this.editingProvider = null;
            this.newProvider = {
                provider_type: '',
                name: '',
                client_id: '',
                client_secret: '',
                enabled: true,
            };
        },

        async saveProvider() {
            if (!this.newProvider.provider_type || !this.newProvider.client_id) {
                showToast('Please fill in all required fields', 'error');
                return;
            }

            if (!this.editingProvider && !this.newProvider.client_secret) {
                showToast('Client secret is required', 'error');
                return;
            }

            this.saving = true;
            try {
                const data = {...this.newProvider};
                if (this.editingProvider && !data.client_secret) {
                    delete data.client_secret;
                }

                if (this.editingProvider) {
                    await apiRequest(`/oauth/providers/${this.editingProvider.id}`, {
                        method: 'PATCH',
                        body: JSON.stringify(data),
                    });
                    showToast('Provider updated successfully', 'success');
                } else {
                    await apiRequest('/oauth/providers', {
                        method: 'POST',
                        body: JSON.stringify(data),
                    });
                    showToast('Provider added successfully', 'success');
                }

                await this.loadConfiguredProviders();
                this.closeProviderModal();
            } catch (e) {
                showToast(e.message || 'Failed to save provider', 'error');
            } finally {
                this.saving = false;
            }
        },

        async deleteProvider(id) {
            if (!confirm('Are you sure you want to delete this provider?')) return;

            try {
                await apiRequest(`/oauth/providers/${id}`, { method: 'DELETE' });
                showToast('Provider deleted successfully', 'success');
                await this.loadConfiguredProviders();
            } catch (e) {
                showToast(e.message || 'Failed to delete provider', 'error');
            }
        },

        async saveAuthSettings() {
            this.saving = true;
            try {
                for (const [key, value] of Object.entries(this.authSettings)) {
                    await apiRequest('/settings', {
                        method: 'POST',
                        body: JSON.stringify({
                            key: key,
                            value: value,
                            category: 'auth',
                        }),
                    });
                }
                showToast('Auth settings saved successfully', 'success');
            } catch (e) {
                showToast(e.message || 'Failed to save settings', 'error');
            } finally {
                this.saving = false;
            }
        },

        async saveMailSettings() {
            this.saving = true;
            try {
                for (const [key, value] of Object.entries(this.mailSettings)) {
                    await apiRequest('/settings', {
                        method: 'POST',
                        body: JSON.stringify({
                            key: key,
                            value: value,
                            category: 'mail',
                        }),
                    });
                }
                showToast('Mail settings saved successfully', 'success');
            } catch (e) {
                showToast(e.message || 'Failed to save settings', 'error');
            } finally {
                this.saving = false;
            }
        },

        validateStorageSettings() {
            const errors = [];
            const s = this.storageSettings;

            if (s.type === 's3') {
                if (!s.s3_bucket || !s.s3_bucket.trim()) {
                    errors.push('S3 Bucket Name is required');
                }
                if (!s.s3_region || !s.s3_region.trim()) {
                    errors.push('S3 Region is required');
                }
                if (!s.s3_access_key || !s.s3_access_key.trim()) {
                    errors.push('S3 Access Key ID is required');
                }
                if (!s.s3_secret_key || !s.s3_secret_key.trim()) {
                    errors.push('S3 Secret Access Key is required');
                }
            }

            if (s.type === 'azure') {
                if (!s.azure_container || !s.azure_container.trim()) {
                    errors.push('Azure Container Name is required');
                }
                // Either connection string OR (account name + account key) must be provided
                const hasConnectionString = s.azure_connection_string && s.azure_connection_string.trim();
                const hasAccountCredentials = (s.azure_account_name && s.azure_account_name.trim()) &&
                                              (s.azure_account_key && s.azure_account_key.trim());

                if (!hasConnectionString && !hasAccountCredentials) {
                    errors.push('Azure requires either Connection String or both Account Name and Account Key');
                }
            }

            return errors;
        },

        async saveStorageSettings() {
            // Validate required fields
            const validationErrors = this.validateStorageSettings();
            if (validationErrors.length > 0) {
                validationErrors.forEach(error => showToast(error, 'error'));
                return;
            }

            this.saving = true;
            try {
                for (const [key, value] of Object.entries(this.storageSettings)) {
                    await apiRequest('/settings', {
                        method: 'POST',
                        body: JSON.stringify({
                            key: key,
                            value: value,
                            category: 'storage',
                        }),
                    });
                }
                showToast('Storage settings saved successfully', 'success');
            } catch (e) {
                showToast(e.message || 'Failed to save settings', 'error');
            } finally {
                this.saving = false;
            }
        },
    };
}
</script>
{% endblock %}