{% extends "base.html" %}
{% import "components.html" as components %}

{% block title %}{{ crate::i18n::t("settings-title", lang) }} - Remotto Console{% endblock %}

{% block content %}
<div class="flex h-screen">
    <!-- Sidebar -->
    {% call components::sidebar("settings", lang) %}

    <!-- Main Content -->
    <main class="flex-1 overflow-auto md:ml-0 bg-slate-900">
        {% call components::header(crate::i18n::t("settings-title", lang), username, lang) %}

        <div class="px-8 pt-8 pb-4">
            <!-- Tabs Navigation -->
            <div class="flex border-b border-slate-700">
                <button onclick="switchTab('license')" id="tab-btn-license"
                    class="tab-btn px-6 py-3 text-sm font-semibold border-b-2 border-primary-500 text-white">
                    {{ crate::i18n::t("settings-tab-license", lang) }}
                </button>
                <!-- Auto Login Tab Removed -->
                <button onclick="switchTab('users')" id="tab-btn-users"
                    class="tab-btn px-6 py-3 text-sm font-semibold text-slate-400 hover:text-white border-b-2 border-transparent">
                    {{ crate::i18n::t("settings-tab-users", lang) }}
                </button>
                <button onclick="switchTab('ldap')" id="tab-btn-ldap"
                    class="tab-btn px-6 py-3 text-sm font-semibold text-slate-400 hover:text-white border-b-2 border-transparent">
                    {{ crate::i18n::t("settings-tab-ldap", lang) }}
                </button>
                <button onclick="switchTab('email')" id="tab-btn-email"
                    class="tab-btn px-6 py-3 text-sm font-semibold text-slate-400 hover:text-white border-b-2 border-transparent">
                    {{ crate::i18n::t("settings-tab-email", lang) }}
                </button>

            </div>
        </div>

        <div class="p-8 pt-4">
            <!-- License Tab -->
            <div id="tab-content-license" class="space-y-8">
                <!-- Current License Status -->
                <div class="glass rounded-xl border border-white/10 p-8">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
                        <h3 class="text-lg font-semibold">{{ crate::i18n::t("license-current", lang) }}</h3>

                        <!-- Organization name hidden -->
                        <div id="license-org-display" class="hidden">
                            <span class="text-slate-400 text-sm mr-2">{{ crate::i18n::t("license-organization", lang)
                                }}:</span>
                            <span class="text-white font-medium">{{ org }}</span>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="text-center">
                            <p class="text-slate-400 text-sm mb-2">{{ crate::i18n::t("license-type", lang) }}</p>
                            {% if is_demo %}
                            <span
                                class="inline-flex items-center px-4 py-2 rounded-full bg-yellow-500/20 text-yellow-400 font-semibold">
                                {{ crate::i18n::t("dashboard-demo", lang) }}
                            </span>
                            {% else %}
                            <span
                                class="inline-flex items-center px-4 py-2 rounded-full bg-green-500/20 text-green-400 font-semibold">
                                {{ crate::i18n::t("dashboard-production", lang) }}
                            </span>
                            {% endif %}
                        </div>

                        <div class="text-center">
                            <p class="text-slate-400 text-sm mb-2">{{ crate::i18n::t("license-registered-devices", lang)
                                }}</p>
                            <p class="text-3xl font-bold">
                                {% if max_devices >= 9999 %}
                                <span class="text-white">{{ device_count }}</span>
                                <span class="text-slate-500">/</span>
                                <span class="text-slate-400">{{ crate::i18n::t("license-unlimited-devices", lang) }}</span>
                                {% else %}
                                {% if device_count >= max_devices %}
                                <span class="text-red-400">{{ device_count }}</span>
                                {% else %}
                                <span class="text-white">{{ device_count }}</span>
                                {% endif %}
                                <span class="text-slate-500">/</span>
                                <span class="text-slate-400">{{ max_devices }}</span>
                                {% endif %}
                            </p>
                        </div>

                        <div class="text-center">
                            <p class="text-slate-400 text-sm mb-2">{{ crate::i18n::t("license-validity-term", lang) }}
                            </p>
                            {% if !valid_from.is_empty() %}
                            <p class="text-xl font-semibold">{{ valid_from }} ~ {{ valid_until }}</p>
                            {% else %}
                            <p class="text-xl font-semibold text-slate-500">{{ crate::i18n::t("license-unlimited", lang)
                                }}</p>
                            {% endif %}
                        </div>
                    </div>


                </div>

                <!-- Import License -->
                <div class="glass rounded-xl border border-white/10 p-8">
                    <h3 class="text-lg font-semibold mb-6">{{ crate::i18n::t("license-import", lang) }}</h3>

                    <form id="license-upload-form" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                crate::i18n::t("license-key", lang) }}</label>
                            <input type="file" id="license-file" accept=".key,.txt" class="hidden"
                                onchange="handleLicenseFile(this)">
                            <input type="hidden" id="license-key-value" name="key">

                            <div class="flex flex-col md:flex-row gap-3">
                                <button type="button" onclick="document.getElementById('license-file').click()"
                                    class="w-full md:w-auto px-6 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg font-medium transition-all flex items-center justify-center gap-2">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                                    </svg>
                                    <span id="license-filename">{{ crate::i18n::t("common-select-file", lang) }}</span>
                                </button>
                                <button type="submit" id="license-submit-btn" disabled
                                    class="w-full md:w-auto px-6 py-2 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 disabled:from-slate-600 disabled:to-slate-600 disabled:cursor-not-allowed rounded-lg font-semibold transition-all">
                                    {{ crate::i18n::t("common-import", lang) }}
                                </button>
                            </div>
                        </div>
                        <div id="license-result" class="hidden mt-4 p-4 rounded-lg"></div>
                    </form>

                    <script>
                        function handleLicenseFile(input) {
                            if (input.files && input.files[0]) {
                                const file = input.files[0];
                                document.getElementById('license-filename').textContent = file.name;

                                const reader = new FileReader();
                                reader.onload = function (e) {
                                    document.getElementById('license-key-value').value = e.target.result.trim();
                                    document.getElementById('license-submit-btn').disabled = false;
                                };
                                reader.readAsText(file);
                            }
                        }

                        document.getElementById('license-upload-form').addEventListener('submit', async function (e) {
                            e.preventDefault();
                            const key = document.getElementById('license-key-value').value;
                            const resultDiv = document.getElementById('license-result');
                            const submitBtn = document.getElementById('license-submit-btn');

                            // Localized error messages
                            const errorMessages = {
                                'LICENSE_INVALID': '{{ crate::i18n::t("error-license-invalid", lang) }}',
                                'LICENSE_EXPIRED': '{{ crate::i18n::t("error-license-expired", lang) }}',
                                'LICENSE_LIMIT': '{{ crate::i18n::t("error-license-limit", lang) }}',
                                'DB_ERROR': '{{ crate::i18n::t("error-db", lang) }}',
                                'INTERNAL': '{{ crate::i18n::t("error-internal", lang) }}'
                            };

                            submitBtn.disabled = true;
                            submitBtn.textContent = 'インポート中...';

                            try {
                                const response = await fetch('/admin/api/license/import', {
                                    method: 'POST',
                                    headers: { 'Content-Type': 'application/json' },
                                    body: JSON.stringify({ key: key })
                                });

                                const data = await response.json();

                                if (response.ok) {
                                    resultDiv.className = 'mt-4 p-4 rounded-lg bg-green-900/50 border border-green-500 text-green-300';

                                    // Format validity period
                                    let validStr = '{{ crate::i18n::t("license-unlimited", lang) }}';
                                    if (data.valid_from && data.valid_until) {
                                        const fromDate = new Date(data.valid_from * 1000).toLocaleDateString('{{ lang }}' === 'ja' ? 'ja-JP' : 'en-US');
                                        const untilStr = data.valid_until >= 9999999999 ? '{{ crate::i18n::t("license-permanent", lang) }}' : new Date(data.valid_until * 1000).toLocaleDateString('{{ lang }}' === 'ja' ? 'ja-JP' : 'en-US');
                                        validStr = fromDate + ' ~ ' + untilStr;
                                    }

                                    resultDiv.innerHTML = `✅ {{ crate::i18n::t("license-import-success", lang) }}<br>` +
                                        `{{ crate::i18n::t("license-registered-devices", lang) }}: ${data.max_devices >= 9999 ? '{{ crate::i18n::t("license-unlimited-devices", lang) }}' : data.max_devices}<br>` +
                                        `{{ crate::i18n::t("license-validity-term", lang) }}: ${validStr}`;
                                    resultDiv.classList.remove('hidden');

                                    // Dynamically update the license status display
                                    updateLicenseDisplay(data);

                                    // Reset form
                                    document.getElementById('license-file').value = '';
                                    document.getElementById('license-filename').textContent = '{{ crate::i18n::t("common-select-file", lang) }}';
                                    document.getElementById('license-key-value').value = '';
                                    submitBtn.textContent = '{{ crate::i18n::t("common-import", lang) }}';
                                } else {
                                    // Use localized message based on error code
                                    const errorMsg = errorMessages[data.code] || data.error || '{{ crate::i18n::t("license-import-failed", lang) }}';
                                    throw new Error(errorMsg);
                                }
                            } catch (err) {
                                resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-900/50 border border-red-500 text-red-300';
                                resultDiv.textContent = '❌ ' + err.message;
                                resultDiv.classList.remove('hidden');
                                submitBtn.disabled = false;
                                submitBtn.textContent = '{{ crate::i18n::t("common-import", lang) }}';
                            }
                        });

                        function updateLicenseDisplay(data) {
                            // Update license type badge
                            const typeContainer = document.querySelector('#tab-content-license .grid > div:first-child');
                            if (typeContainer) {
                                typeContainer.innerHTML = `
                                    <p class="text-slate-400 text-sm mb-2">{{ crate::i18n::t("license-type", lang) }}</p>
                                    <span class="inline-flex items-center px-4 py-2 rounded-full bg-green-500/20 text-green-400 font-semibold">
                                        {{ crate::i18n::t("dashboard-production", lang) }}
                                    </span>
                                `;
                            }

                            // Update device count
                            const deviceContainer = document.querySelector('#tab-content-license .grid > div:nth-child(2) p:last-child');
                            if (deviceContainer) {
                                const maxLabel = data.max_devices >= 9999 ? '{{ crate::i18n::t("license-unlimited-devices", lang) }}' : data.max_devices;
                                deviceContainer.innerHTML = `
                                    <span class="text-white">{{ device_count }}</span>
                                    <span class="text-slate-500">/</span>
                                    <span class="text-slate-400">${maxLabel}</span>
                                `;
                            }

                            // Update validity period
                            const validContainer = document.querySelector('#tab-content-license .grid > div:nth-child(3) p:last-child');
                            if (validContainer) {
                                let validStr = '{{ crate::i18n::t("license-unlimited", lang) }}';
                                if (data.valid_from && data.valid_until) {
                                    const fromDate = new Date(data.valid_from * 1000).toLocaleDateString('ja-JP');
                                    const untilStr = data.valid_until >= 9999999999 ? '永久' : new Date(data.valid_until * 1000).toLocaleDateString('ja-JP');
                                    validStr = fromDate + ' ~ ' + untilStr;
                                }
                                validContainer.textContent = validStr;
                            }

                            // Organization name kept hidden
                        }
                    </script>
                </div>
            </div>

            <!-- LDAP Tab -->
            <div id="tab-content-ldap" class="space-y-8 hidden">
                {% if is_demo %}
                <!-- Feature Lock Overlay for Trial -->
                <div class="glass rounded-xl border border-white/10 p-12 text-center">
                    <div class="flex flex-col items-center justify-center gap-4">
                        <div class="w-20 h-20 rounded-full bg-slate-700/50 flex items-center justify-center">
                            <svg class="w-10 h-10 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-slate-300">{{ crate::i18n::t("ldap-locked-title", lang) }}</h3>
                        <p class="text-slate-400 max-w-md">{{ crate::i18n::t("ldap-locked-desc", lang) }}</p>
                    </div>
                </div>
                {% else %}
                <div class="glass rounded-xl border border-white/10 p-8">
                    <h3 class="text-lg font-semibold mb-6">{{ crate::i18n::t("ldap-title", lang) }}</h3>
                    <form action="/admin/api/settings/ldap" method="POST" id="ldap-form">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div class="md:col-span-2">
                                <label class="flex items-center space-x-3 cursor-pointer">
                                    <input type="checkbox" name="enabled" value="true" {% if ldap.enabled %}checked{%
                                        endif %}
                                        class="w-5 h-5 rounded border-slate-600 bg-slate-800 text-primary-600 focus:ring-primary-500">
                                    <span class="text-slate-300 font-medium">{{ crate::i18n::t("ldap-enable", lang)
                                        }}</span>
                                </label>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("ldap-host", lang) }}</label>
                                <input type="text" name="host" value="{{ ldap.host }}"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm"
                                    placeholder="ldap.example.com">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("ldap-port", lang) }}</label>
                                <input type="number" name="port" value="{{ ldap.port }}"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm"
                                    placeholder="389">
                            </div>

                            <div class="md:col-span-2">
                                <label class="flex items-center space-x-3 cursor-pointer">
                                    <input type="checkbox" name="use_ssl" value="true" {% if ldap.use_ssl %}checked{%
                                        endif %}
                                        class="w-5 h-5 rounded border-slate-600 bg-slate-800 text-primary-600 focus:ring-primary-500">
                                    <span class="text-slate-300 font-medium">{{ crate::i18n::t("ldap-use-ssl", lang)
                                        }}</span>
                                </label>
                            </div>

                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("ldap-base-dn", lang) }}</label>
                                <input type="text" name="base_dn" value="{{ ldap.base_dn }}"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm"
                                    placeholder="ou=People,dc=example,dc=com">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("ldap-bind-user", lang) }}</label>
                                <input type="text" name="bind_user" value="{{ ldap.bind_user }}"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm"
                                    placeholder="cn=admin,dc=example,dc=com">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("ldap-bind-password", lang) }}</label>
                                <input type="password" name="bind_password" value="{{ ldap.bind_password }}"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm">
                            </div>

                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("ldap-user-filter", lang) }}</label>
                                <input type="text" name="user_filter" value="{{ ldap.user_filter }}"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm font-mono"
                                    placeholder="(uid={username})">
                                <p class="text-xs text-slate-500 mt-1">{{ crate::i18n::t("ldap-user-filter-hint", lang)
                                    }}</p>
                            </div>

                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("ldap-allowed-group", lang) }}</label>
                                <input type="text" name="allowed_group" value="{{ ldap.allowed_group.as_deref().unwrap_or("") }}"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm font-mono"
                                    placeholder="{{ crate::i18n::t("ldap-allowed-group-placeholder", lang) }}">
                                <p class="text-xs text-slate-500 mt-1">{{ crate::i18n::t("ldap-allowed-group-hint", lang) }}</p>
                            </div>

                        </div>

                        <div class="flex justify-end gap-3">
                            <button type="button" onclick="testLdapConnection()"
                                class="px-6 py-2 bg-slate-700 hover:bg-slate-600 border border-slate-500 rounded-lg text-white font-medium transition-colors">
                                {{ crate::i18n::t("ldap-test-connection", lang) }}
                            </button>
                            <button type="submit"
                                class="px-6 py-2 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all">
                                {{ crate::i18n::t("ldap-save", lang) }}
                            </button>
                        </div>
                    </form>
                </div>

                <!-- LDAP Account Sync -->
                <div class="glass rounded-xl border border-white/10 p-8">
                    <h3 class="text-lg font-semibold mb-2">{{ crate::i18n::t("ldap-sync-title", lang) }}</h3>
                    <p class="text-slate-400 text-sm mb-6">{{ crate::i18n::t("ldap-sync-desc", lang) }}</p>
                    <div class="flex items-center justify-end gap-4">
                        <button type="button" onclick="syncLdapUsers()"
                            id="ldap-sync-btn"
                            class="px-6 py-2 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all">
                            {{ crate::i18n::t("ldap-sync-btn", lang) }}
                        </button>
                    </div>
                </div>
                {% endif %}
            </div>

            <div id="tab-content-email" class="space-y-8 hidden">
                {% if is_demo %}
                <!-- Feature Lock Overlay for Trial -->
                <div class="glass rounded-xl border border-white/10 p-12 text-center">
                    <div class="flex flex-col items-center justify-center gap-4">
                        <div class="w-20 h-20 rounded-full bg-slate-700/50 flex items-center justify-center">
                            <svg class="w-10 h-10 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-slate-300">{{ crate::i18n::t("email-locked-title", lang) }}</h3>
                        <p class="text-slate-400 max-w-md">{{ crate::i18n::t("email-locked-desc", lang) }}</p>
                    </div>
                </div>
                {% else %}
                <div class="glass rounded-xl border border-white/10 p-8">
                    <h3 class="text-lg font-semibold mb-6">{{ crate::i18n::t("email-settings-title", lang) }}</h3>
                    <form id="email-form" class="space-y-6">
                        <div class="md:col-span-2">
                            <label class="flex items-center space-x-3 cursor-pointer">
                                <input type="checkbox" name="enabled" id="email-enabled"
                                    class="w-5 h-5 rounded border-slate-600 bg-slate-800 text-primary-600 focus:ring-primary-500">
                                <span class="text-slate-300 font-medium">{{ crate::i18n::t("email-enable", lang)
                                    }}</span>
                            </label>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("email-smtp-host", lang) }}</label>
                                <input type="text" name="smtp_host" id="email-smtp-host"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm"
                                    placeholder="smtp.example.com">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("email-smtp-port", lang) }}</label>
                                <input type="number" name="smtp_port" id="email-smtp-port" value="587"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm"
                                    placeholder="587">
                            </div>
                        </div>

                        <div class="flex gap-6">
                            <label class="flex items-center space-x-3 cursor-pointer">
                                <input type="checkbox" name="use_ssl" id="email-use-ssl"
                                    class="w-5 h-5 rounded border-slate-600 bg-slate-800 text-primary-600 focus:ring-primary-500">
                                <span class="text-slate-300 font-medium">{{ crate::i18n::t("email-use-ssl", lang)
                                    }}</span>
                            </label>
                            <label class="flex items-center space-x-3 cursor-pointer">
                                <input type="checkbox" name="use_tls" id="email-use-tls" checked
                                    class="w-5 h-5 rounded border-slate-600 bg-slate-800 text-primary-600 focus:ring-primary-500">
                                <span class="text-slate-300 font-medium">{{ crate::i18n::t("email-use-tls", lang)
                                    }}</span>
                            </label>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("email-username", lang) }}</label>
                                <input type="text" name="username" id="email-username"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm"
                                    placeholder="user@example.com">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("email-password", lang) }}</label>
                                <input type="password" name="password" id="email-password"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("email-from-name", lang) }}</label>
                                <input type="text" name="from_name" id="email-from-name"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm"
                                    placeholder="Remotto System">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("email-from-address", lang) }}</label>
                                <input type="email" name="from_email" id="email-from-email"
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm"
                                    placeholder="noreply@example.com">
                            </div>
                        </div>

                        <div class="flex justify-end gap-3 pt-4 border-t border-white/10">
                            <button type="button" onclick="testEmailConnection()"
                                class="px-6 py-2 bg-slate-700 hover:bg-slate-600 border border-slate-500 rounded-lg text-white font-medium transition-colors">
                                {{ crate::i18n::t("email-test-send", lang) }}
                            </button>
                            <button type="button" onclick="saveEmailSettings()"
                                class="px-6 py-2 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all">
                                {{ crate::i18n::t("common-save", lang) }}
                            </button>
                        </div>
                    </form>
                </div>
                {% endif %}
            </div>

            <!-- Users Tab -->
            <div id="tab-content-users" class="space-y-6 hidden">
                <div class="grid grid-cols-1 gap-8">
                    <!-- Create User -->
                    <div class="glass rounded-xl border border-white/10 p-8 h-fit">
                        <h3 class="text-lg font-semibold mb-6 flex items-center gap-2">
                            <svg class="w-5 h-5 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                            </svg>
                            {{ crate::i18n::t("users-create", lang) }}
                        </h3>
                        <form id="create-user-form" onsubmit="createUser(event)" class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("users-username", lang) }}</label>
                                <input type="text" name="username" required
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm"
                                    placeholder='{{ crate::i18n::t("settings-placeholder-alphanumeric", lang) }}'>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("users-password", lang) }}</label>
                                <input type="password" name="password" id="create-password" required
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{
                                    crate::i18n::t("users-password-confirm", lang) }}</label>
                                <input type="password" name="password_confirm" id="create-password-confirm" required
                                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm">
                            </div>
                            <div class="flex justify-end">
                                <button type="submit"
                                    class="px-6 py-2 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all">
                                    {{ crate::i18n::t("common-create", lang) }}
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- User List -->
                    <div class="glass rounded-xl border border-white/10 p-8">
                        <h3 class="text-lg font-semibold mb-6 flex items-center gap-2">
                            <svg class="w-5 h-5 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                            {{ crate::i18n::t("users-list", lang) }}
                        </h3>
                        <div id="user-list" class="space-y-2">
                            {% for user in users %}
                            <div data-username="{{ user.username }}"
                                class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-8 h-8 rounded-full bg-gradient-to-br from-slate-600 to-slate-700 flex items-center justify-center text-xs font-bold text-white">
                                        {{ user.username.chars().next().unwrap() }}
                                    </div>
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <div class="font-medium">{{ user.username }}</div>
                                            {% if user.is_ldap %}
                                            <span
                                                class="px-2 py-0.5 rounded text-[10px] bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">LDAP</span>
                                            {% else %}
                                            <span
                                                class="px-2 py-0.5 rounded text-[10px] bg-slate-500/20 text-slate-300 border border-slate-500/30">{{ crate::i18n::t("users-local", lang) }}</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                {% if user.username != "admin" %}
                                <div class="flex gap-2">
                                    {% if !user.is_ldap %}
                                    <button onclick="openPasswordModal('{{ user.username }}')"
                                        class="text-slate-400 hover:text-cyan-400 p-2 transition"
                                        title="{{ crate::i18n::t("users-change-password", lang) }}">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                                        </svg>
                                    </button>
                                    {% endif %}
                                    <button onclick="deleteUser('{{ user.username }}')"
                                        class="text-slate-400 hover:text-red-400 p-2 transition"
                                        title="{{ crate::i18n::t("common-delete", lang) }}">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                </div>
                                {% else %}
                                <button onclick="openPasswordModal('{{ user.username }}')"
                                    class="text-slate-400 hover:text-cyan-400 p-2 transition"
                                    title="{{ crate::i18n::t("users-change-password", lang) }}">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                                    </svg>
                                </button>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Auto Login Tab Content Removed -->
    </main>
</div>

<!-- CSV Preview Modal Removed -->

<!-- Password Change Modal -->
<div id="password-modal"
    class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
    <div class="glass rounded-2xl p-8 border border-white/10 w-full max-w-md mx-4 flex flex-col">
        <h3 class="text-xl font-semibold mb-4">{{ crate::i18n::t("users-change-password", lang) }}</h3>
        <p class="text-slate-400 text-sm mb-4">
            <span id="pw-username" class="text-white font-bold"></span>
        </p>

        <div class="space-y-4 mb-6">
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("users-new-password", lang) }}</label>
                <input type="password" id="pw-new"
                    placeholder='{{ crate::i18n::t("settings-placeholder-new-password", lang) }}'
                    class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("users-password-confirm", lang) }}</label>
                <input type="password" id="pw-confirm"
                    placeholder='{{ crate::i18n::t("users-password-confirm", lang) }}'
                    class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm">
            </div>
        </div>

        <div class="flex gap-4">
            <button onclick="closePasswordModal()"
                class="flex-1 py-3 px-4 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors">
                {{ crate::i18n::t("common-cancel", lang) }}
            </button>
            <button onclick="changePassword()"
                class="flex-1 py-3 px-4 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all">
                {{ crate::i18n::t("common-change", lang) }}
            </button>
        </div>
    </div>
</div>

<script>
    const i18n = {
        createFailed: '{{ crate::i18n::t("users-create-failed", lang) }}',
        deleteFailed: '{{ crate::i18n::t("users-delete-failed", lang) }}',
        userCreated: '{{ crate::i18n::t("users-created", lang) }}',
        passwordChanged: '{{ crate::i18n::t("users-password-changed", lang) }}',
        passwordMismatch: '{{ crate::i18n::t("users-password-mismatch", lang) }}',
        changeFailed: '{{ crate::i18n::t("users-password-failed", lang) }}',
        connectionSuccess: '{{ crate::i18n::t("ldap-test-success", lang) }}',
        connectionFailed: '{{ crate::i18n::t("ldap-test-failed", lang) }}',
        importFailed: '{{ crate::i18n::t("error-operation-failed", lang) }}',
        error: '{{ crate::i18n::t("error-generic", lang) }}',
        emailSaved: '{{ crate::i18n::t("email-save-success", lang) }}',
        emailTestSuccess: '{{ crate::i18n::t("email-test-success", lang) }}',
        emailTestFailed: '{{ crate::i18n::t("email-test-failed", lang) }}',
        ldapSyncSuccess: '{{ crate::i18n::t("ldap-sync-success", lang) }}',
        ldapSyncFailed: '{{ crate::i18n::t("ldap-sync-failed", lang) }}'
    };

    function switchTab(tabName) {
        const btnLicense = document.getElementById('tab-btn-license');
        const btnLdap = document.getElementById('tab-btn-ldap');
        const btnEmail = document.getElementById('tab-btn-email');
        const btnUsers = document.getElementById('tab-btn-users');
        const contentLicense = document.getElementById('tab-content-license');
        const contentLdap = document.getElementById('tab-content-ldap');
        const contentEmail = document.getElementById('tab-content-email');
        const contentUsers = document.getElementById('tab-content-users');

        const activeClass = "border-primary-500 text-white".split(" ");
        const inactiveClass = "text-slate-400 hover:text-white border-transparent".split(" ");

        function activate(btn, content) {
            if (btn) {
                btn.classList.add(...activeClass);
                btn.classList.remove(...inactiveClass);
            }
            if (content) content.classList.remove('hidden');
        }

        function deactivate(btn, content) {
            if (btn) {
                btn.classList.remove(...activeClass);
                btn.classList.add(...inactiveClass);
            }
            if (content) content.classList.add('hidden');
        }

        // Reset all
        deactivate(btnLicense, contentLicense);
        deactivate(btnLdap, contentLdap);
        deactivate(btnEmail, contentEmail);
        deactivate(btnUsers, contentUsers);

        if (tabName === 'license') {
            activate(btnLicense, contentLicense);
        } else if (tabName === 'ldap') {
            activate(btnLdap, contentLdap);
        } else if (tabName === 'email') {
            activate(btnEmail, contentEmail);
        } else if (tabName === 'users') {
            activate(btnUsers, contentUsers);
        }

        // Save tab state in URL hash (without triggering page reload)
        if (history.replaceState) {
            history.replaceState(null, null, '#' + tabName);
        } else {
            location.hash = tabName;
        }
    }

    // Restore tab from URL hash on page load
    document.addEventListener('DOMContentLoaded', function() {
        const hash = window.location.hash.replace('#', '');
        if (hash && ['license', 'ldap', 'email', 'users'].includes(hash)) {
            switchTab(hash);
        }
    });

    async function createUser(event) {
        event.preventDefault();
        const form = event.target;
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        // Password confirmation check
        const password = document.getElementById('create-password').value;
        const confirmPassword = document.getElementById('create-password-confirm').value;
        if (password !== confirmPassword) {
            showNotification(i18n.passwordMismatch, 'error');
            return;
        }

        try {
            const response = await fetch('/admin/api/users', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            const result = await response.json();

            if (result.ok) {
                showNotification(i18n.userCreated, "success");
                // Add new user to list without reload
                addUserToList(data.username, false);
                form.reset();
            } else {
                showNotification(i18n.createFailed, 'error');
            }
        } catch (error) {
            showNotification(i18n.error, 'error');
        }
    }

    // Helper function to add user to list dynamically
    function addUserToList(username, isLdap) {
        const userList = document.getElementById('user-list');
        if (!userList) return;

        const initial = username.charAt(0).toLowerCase();
        const localLabel = '{{ crate::i18n::t("users-local", lang) }}';
        const changePwTitle = '{{ crate::i18n::t("users-change-password", lang) }}';
        const deleteTitle = '{{ crate::i18n::t("common-delete", lang) }}';

        const labelHtml = isLdap 
            ? '<span class="px-2 py-0.5 rounded text-[10px] bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">LDAP</span>'
            : `<span class="px-2 py-0.5 rounded text-[10px] bg-slate-500/20 text-slate-300 border border-slate-500/30">${localLabel}</span>`;

        const userHtml = `
            <div data-username="${username}" class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-slate-600 to-slate-700 flex items-center justify-center text-xs font-bold text-white">
                        ${initial}
                    </div>
                    <div>
                        <div class="flex items-center gap-2">
                            <div class="font-medium">${username}</div>
                            ${labelHtml}
                        </div>
                    </div>
                </div>
                <div class="flex gap-2">
                    ${!isLdap ? `
                    <button onclick="openPasswordModal('${username}')"
                        class="text-slate-400 hover:text-cyan-400 p-2 transition"
                        title="${changePwTitle}">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                        </svg>
                    </button>
                    ` : ''}
                    <button onclick="deleteUser('${username}')"
                        class="text-slate-400 hover:text-red-400 p-2 transition"
                        title="${deleteTitle}">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </div>
            </div>
        `;
        userList.insertAdjacentHTML('beforeend', userHtml);
    }

    async function deleteUser(username) {
        showConfirm('Delete User', username + '?', async () => {
            try {
                const response = await fetch(`/admin/api/users/${username}`, {
                    method: 'DELETE'
                });
                const result = await response.json();

                if (result.ok) {
                    showNotification("User deleted", "success");
                    // Remove user from list without reload
                    const userRow = document.querySelector(`[data-username="${username}"]`);
                    if (userRow) {
                        userRow.remove();
                    }
                } else {
                    showNotification(i18n.deleteFailed, 'error');
                }
            } catch (error) {
                showNotification(i18n.error, 'error');
            }
        });
    }

    let currentPwUser = '';
    function openPasswordModal(username) {
        currentPwUser = username;
        document.getElementById('pw-username').textContent = username;
        document.getElementById('pw-new').value = '';
        document.getElementById('password-modal').classList.remove('hidden');
    }

    function closePasswordModal() {
        document.getElementById('password-modal').classList.add('hidden');
        document.getElementById('pw-new').value = '';
        document.getElementById('pw-confirm').value = '';
        currentPwUser = '';
    }

    async function changePassword() {
        if (!currentPwUser) return;
        const newPass = document.getElementById('pw-new').value;
        const confirmPass = document.getElementById('pw-confirm').value;
        if (!newPass) return;

        // Password confirmation check
        if (newPass !== confirmPass) {
            showNotification(i18n.passwordMismatch, 'error');
            return;
        }

        try {
            const response = await fetch(`/admin/api/users/${currentPwUser}/password`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ password: newPass })
            });
            const result = await response.json();

            if (result.ok) {
                showNotification(i18n.passwordChanged, 'success');
                closePasswordModal();
            } else {
                showNotification(i18n.changeFailed, 'error');
            }
        } catch (error) {
            showNotification(i18n.error, 'error');
        }
    }



    async function testLdapConnection() {
        const form = document.getElementById('ldap-form');
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        // Handle checkboxes explicitly
        data.enabled = form.querySelector('[name="enabled"]').checked;
        data.use_ssl = form.querySelector('[name="use_ssl"]').checked;
        // Convert port to number
        data.port = parseInt(data.port, 10) || 389;

        try {
            const response = await fetch('/admin/api/settings/ldap/test', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            const result = await response.json();

            if (result.ok) {
                showNotification(i18n.connectionSuccess, 'success');
            } else {
                showNotification(i18n.connectionFailed, 'error');
            }
        } catch (error) {
            showNotification(i18n.error, 'error');
        }
    }

    async function syncLdapUsers() {
        const btn = document.getElementById('ldap-sync-btn');

        btn.disabled = true;
        btn.classList.add('opacity-60', 'cursor-not-allowed');

        try {
            const response = await fetch('/admin/api/settings/ldap/sync', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            });
            const result = await response.json();

            if (result.ok) {
                showNotification(i18n.ldapSyncSuccess, 'success');
            } else {
                showNotification(i18n.ldapSyncFailed + ': ' + (result.message ?? ''), 'error');
            }
        } catch (error) {
            showNotification(i18n.error, 'error');
        } finally {
            btn.disabled = false;
            btn.classList.remove('opacity-60', 'cursor-not-allowed');
        }
    }





    // Email Settings Functions
    async function loadEmailSettings() {
        try {
            const response = await fetch('/admin/api/settings/email');
            if (response.ok) {
                const data = await response.json();
                document.getElementById('email-enabled').checked = data.enabled || false;
                document.getElementById('email-smtp-host').value = data.smtp_host || '';
                document.getElementById('email-smtp-port').value = data.smtp_port || 587;
                document.getElementById('email-use-ssl').checked = data.use_ssl || false;
                document.getElementById('email-use-tls').checked = data.use_tls !== false;
                document.getElementById('email-username').value = data.username || '';
                document.getElementById('email-password').value = data.password || '';
                document.getElementById('email-from-name').value = data.from_name || '';
                document.getElementById('email-from-email').value = data.from_email || '';
            }
        } catch (error) {
            console.error('Failed to load email settings:', error);
        }
    }

    async function saveEmailSettings() {
        const data = {
            enabled: document.getElementById('email-enabled').checked,
            smtp_host: document.getElementById('email-smtp-host').value,
            smtp_port: parseInt(document.getElementById('email-smtp-port').value) || 587,
            use_ssl: document.getElementById('email-use-ssl').checked,
            use_tls: document.getElementById('email-use-tls').checked,
            username: document.getElementById('email-username').value,
            password: document.getElementById('email-password').value,
            from_name: document.getElementById('email-from-name').value,
            from_email: document.getElementById('email-from-email').value
        };

        try {
            const response = await fetch('/admin/api/settings/email', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            if (response.ok) {
                showNotification(i18n.emailSaved, 'success');
            } else {
                showNotification(i18n.error, 'error');
            }
        } catch (error) {
            showNotification(i18n.error, 'error');
        }
    }

    async function testEmailConnection() {
        const data = {
            enabled: document.getElementById('email-enabled').checked,
            smtp_host: document.getElementById('email-smtp-host').value,
            smtp_port: parseInt(document.getElementById('email-smtp-port').value) || 587,
            use_ssl: document.getElementById('email-use-ssl').checked,
            use_tls: document.getElementById('email-use-tls').checked,
            username: document.getElementById('email-username').value,
            password: document.getElementById('email-password').value,
            from_name: document.getElementById('email-from-name').value,
            from_email: document.getElementById('email-from-email').value
        };

        try {
            const response = await fetch('/admin/api/settings/email/test', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            const result = await response.json();
            if (result.ok) {
                showNotification(i18n.emailTestSuccess, 'success');
            } else {
                showNotification(i18n.emailTestFailed + ': ' + (result.message || ''), 'error');
            }
        } catch (error) {
            showNotification(i18n.error, 'error');
        }
    }

    // Load email settings on tab switch
    const originalSwitchTab = switchTab;
    switchTab = function (tabName) {
        originalSwitchTab(tabName);
        if (tabName === 'email') {
            loadEmailSettings();
        }
    };


</script>
{% endblock %}