{% extends "admin/layout.html" %}
{% block title %}Security - Admin{% endblock %}

{% block body %}
<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="text-security-title">{% trans %}Security{% endtrans %}</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Change your admin password{% endtrans %}</p>
    </div>

    <!-- Admin Login URL -->
    <!-- Admin Login URL -->
<div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 transition-theme">
    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">{% trans %}Admin Login URL{% endtrans %}</h2>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">{% trans %}Change the secret path for the admin login page (e.g.{% endtrans %} <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{% trans %}/admin-xyz123{% endtrans %}</code>{% trans %}). Keep it secret — anyone who knows this URL can attempt to log in.{% endtrans %}</p>
    
    <!-- Show current URL if set -->
    {% if current_settings and current_settings.get('admin_login_slug') %}
    <div class="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
        <p class="text-sm text-blue-700 dark:text-blue-300">
            <i class="fa fa-info-circle mr-1"></i>
            {% trans %}Current custom login URL:{% endtrans %} 
            <code class="font-mono font-bold">/{{website_url}}{{ current_settings.get('admin_login_slug') }}</code>
        </p>
    </div>
    {% endif %}
    
    <div class="mb-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
        <label class="flex items-center space-x-3 cursor-pointer">
            <input type="checkbox" id="disable_custom_login" name="disable_custom_login" 
                   {% if not current_settings.get('admin_login_slug') %}checked{% endif %}
                   class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Disable custom login URL{% endtrans %}</span>
        </label>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 ml-7">{% trans %}Check this to use the default /admin/login page instead{% endtrans %}</p>
    </div>
    
    <form id="login-url-form" class="space-y-4 max-w-md">
        <div id="url-field-container">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="new_login_url">{% trans %}New Login URL Path{% endtrans %}</label>
            <div class="flex items-center gap-2">
                <span class="text-sm text-gray-500 dark:text-gray-400">/</span>
                <input type="text" id="new_login_url" name="new_login_url" 
                       value="{{ current_settings.get('admin_login_slug', '') }}"
                       placeholder="{% trans %}admin-secret123{% endtrans %}" data-testid="input-login-url"
                       class="flex-1 px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
            </div>
            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{% trans %}Only letters, numbers, and hyphens. Minimum 6 characters.{% endtrans %}</p>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="confirm_admin_password_url">{% trans %}Confirm Admin Password{% endtrans %}</label>
            <input type="password" id="confirm_admin_password_url" name="confirm_admin_password" placeholder="{% trans %}Enter your current admin password{% endtrans %}" data-testid="input-confirm-password-url"
                class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
        </div>
        <div class="pt-2">
            <button type="submit" data-testid="button-change-login-url"
                class="px-6 py-3 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-semibold shadow-lg shadow-indigo-500/30 hover:shadow-xl transition-all duration-300">
                <i class="fa fa-link mr-2"></i>{% trans %}Update Login URL{% endtrans %}
            </button>
        </div>
    </form>
</div>
</div>
{% endblock %}

{% block page_scripts %}
<script>
$(function() {
    // Show/hide URL field based on checkbox
    function toggleUrlField() {
        if ($('#disable_custom_login').is(':checked')) {
            $('#new_login_url').closest('div').parent().hide(); // Hide the URL field container
        } else {
            $('#new_login_url').closest('div').parent().show(); // Show the URL field container
        }
    }
    
    // Initial state
    toggleUrlField();
    
    // Toggle on checkbox change
    $('#disable_custom_login').on('change', toggleUrlField);
    
    $('#login-url-form').on('submit', function(e) {
        e.preventDefault();
        
        var newUrl = $('#new_login_url').val().trim();
        var pass = $('#confirm_admin_password_url').val().trim();
        var disable = $('#disable_custom_login').is(':checked');
        
        // Password is always required
        if (!pass) { 
            toastr.error('Password is required.'); 
            return; 
        }
        
        // Validation logic with disable checkbox
        if (disable) {
            // If disabling, we don't need to validate the URL
            newUrl = '';
        } else {
            // If not disabling, validate URL as before
            if (!newUrl) {
                toastr.error('URL is required when not disabling.');
                return;
            }
            if (!/^[a-zA-Z0-9\-]{6,}$/.test(newUrl)) {
                toastr.error('URL must be at least 6 characters, letters/numbers/hyphens only.');
                return;
            }
        }
        
        var $btn = $(this).find('button[type="submit"]');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Saving...');
        
        $.ajax({
            url: '/admin/security/login-url',
            type: 'POST',
            data: { 
                new_login_url: newUrl, 
                confirm_admin_password: pass,
                disable_custom_login: disable ? '1' : '0'
            },
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                if (resp.status === 'ok') {
                    // Show the new path in the success message
                    if (resp.new_url) {
                        toastr.success(`Login URL updated. New path: /${resp.new_url}`);
                    } else {
                        toastr.success(resp.message || 'Custom login URL disabled. Using default /admin/login');
                    }
                    $('#login-url-form')[0].reset();
                    $('#disable_custom_login').prop('checked', false);
                    toggleUrlField(); // Update field visibility after reset
                } else {
                    toastr.error(resp.message || 'Failed to update login URL.');
                }
            },
            error: function(xhr) {
                var msg = 'An error occurred.';
                try { 
                    var d = JSON.parse(xhr.responseText); 
                    if (d.message) msg = d.message; 
                } catch(e) {}
                toastr.error(msg);
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="fa fa-link mr-2"></i>Update Login URL');
            }
        });
    });
});
</script>
{% endblock %}