{% extends "base.html" %}

{% block content %}
<div class="mb-6 flex items-center justify-between">
    <div>
        <h1 class="text-3xl font-bold text-white uppercase">{{ scope }} Scope Editor</h1>
        <p class="dark:text-gray-400 text-gray-500 mt-2">Edit rules for the <span class="font-bold text-gray-200">{{ scope }}</span> scope (JSON format).</p>
    </div>
    <a href="/dashboard" class="dark:text-gray-400 text-gray-500 hover:text-white">&larr; Back to Dashboard</a>
</div>

<div class="dark:bg-gray-800 bg-gray-100 rounded-lg shadow border dark:border-gray-700 border-gray-200 p-6">
    <div id="alert-box" class="hidden mb-4 p-4 rounded-md text-sm"></div>
    <form id="editor-form" class="space-y-4">
        <div>
            <textarea id="json-editor" rows="20" class="w-full dark:bg-gray-900 bg-white dark:text-gray-100 text-gray-900 font-mono text-sm p-4 rounded-md border border-gray-600 focus:border-nyora focus:ring-1 focus:ring-nyora transition"></textarea>
        </div>
        <div class="flex justify-end">
            <button type="button" onclick="saveRules()" class="px-6 py-2 bg-nyora text-gray-900 font-medium rounded-md hover:bg-yellow-500 transition shadow-sm">Save Changes</button>
        </div>
    </form>
</div>

<script>
    const initialContent = {{ content | tojson | safe }};
    const textarea = document.getElementById('json-editor');
    const alertBox = document.getElementById('alert-box');
    const scope = "{{ scope }}";

    textarea.value = JSON.stringify(initialContent, null, 2);

    function showAlert(message, isError=false) {
        alertBox.textContent = message;
        alertBox.className = `mb-4 p-4 rounded-md text-sm font-medium ${isError ? 'bg-red-900 text-red-200 border border-red-700' : 'bg-green-900 text-green-200 border border-green-700'}`;
        alertBox.classList.remove('hidden');
        setTimeout(() => { alertBox.classList.add('hidden'); }, 4000);
    }

    async function saveRules() {
        let data;
        try {
            data = JSON.parse(textarea.value);
        } catch (e) {
            showAlert("Invalid JSON format. Please check syntax.", true);
            return;
        }

        try {
            const response = await fetch(`/api/admin/rules/${scope}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            if (response.ok) {
                showAlert("Rules successfully saved!");
            } else {
                showAlert("Error saving rules: " + response.statusText, true);
            }
        } catch(e) {
            showAlert("Network error.", true);
        }
    }
</script>
{% endblock %}