{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block extra_css %}
<link href="{% static 'css/dist/styles.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">{% trans "Settings" %}</h1>

    <form method="post">
        {% csrf_token %}

        <div class="flex flex-col gap-6">

        <!-- Public Sharing Domain -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-1">{% trans "Public Sharing Domain" %}</h2>
            <p class="text-sm text-gray-500 mb-4">
                {% trans "Domain (with protocol) used for public file sharing links. Leave blank to use the same domain as the app." %}
                <br>
                <span class="font-mono text-xs text-gray-400">{% trans "Example:" %} https://go.example.com</span>
            </p>
            <input
                type="url"
                name="public_sharing_domain"
                id="public_sharing_domain"
                value="{{ site_settings.public_sharing_domain }}"
                placeholder="https://go.example.com"
                class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
            {% if site_settings.public_sharing_domain %}
            <p class="mt-2 text-xs text-green-600">
                {% trans "Active. Public links will use:" %}
                <span class="font-mono">{{ site_settings.public_sharing_domain }}/public/files/…</span>
            </p>
            {% else %}
            <p class="mt-2 text-xs text-gray-400">
                {% trans "Not set. Public links will use the app's own domain." %}
            </p>
            {% endif %}
        </div>

        <!-- Screenshot Worker Concurrency -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-1">{% trans "Max Concurrent Screenshot Jobs" %}</h2>
            <p class="text-sm text-gray-500 mb-4">
                {% trans "Maximum number of Chromium browser instances running simultaneously for screenshots. Reduce this if the container runs out of memory (OOM)." %}
            </p>
            <div class="flex items-center gap-3">
                <input
                    type="number"
                    name="max_concurrent_screenshot_jobs"
                    id="max_concurrent_screenshot_jobs"
                    value="{{ site_settings.max_concurrent_screenshot_jobs }}"
                    min="1"
                    max="20"
                    class="w-32 border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                <span class="text-sm text-gray-400">{% trans "instances" %}</span>
            </div>
            <p class="mt-2 text-xs text-gray-400">{% trans "Recommended: 1–3 for containers with limited RAM." %}</p>
        </div>

        <!-- Schedule Pending Pages Interval -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-1">{% trans "Page Processing Interval" %}</h2>
            <p class="text-sm text-gray-500 mb-4">
                {% trans "How often (in seconds) the scheduler checks for pending pages and queues them for metadata extraction." %}
            </p>
            <div class="flex items-center gap-3">
                <input
                    type="number"
                    name="schedule_pending_pages_interval"
                    id="schedule_pending_pages_interval"
                    value="{{ site_settings.schedule_pending_pages_interval }}"
                    min="10"
                    max="3600"
                    class="w-32 border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                <span class="text-sm text-gray-400">{% trans "seconds" %}</span>
            </div>
            <p class="mt-2 text-xs text-gray-400">{% trans "Default: 120. Range: 10–3600. Changes take effect immediately." %}</p>
        </div>

        <!-- Schedule Pending Screenshots Interval -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-1">{% trans "Screenshot Retry Interval" %}</h2>
            <p class="text-sm text-gray-500 mb-4">
                {% trans "How often (in seconds) the scheduler checks for stuck or pending screenshots and retries them." %}
            </p>
            <div class="flex items-center gap-3">
                <input
                    type="number"
                    name="schedule_pending_screenshots_interval"
                    id="schedule_pending_screenshots_interval"
                    value="{{ site_settings.schedule_pending_screenshots_interval }}"
                    min="10"
                    max="3600"
                    class="w-32 border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                <span class="text-sm text-gray-400">{% trans "seconds" %}</span>
            </div>
            <p class="mt-2 text-xs text-gray-400">{% trans "Default: 120. Range: 10–3600. Changes take effect immediately." %}</p>
        </div>

        </div><!-- /grid -->

        <div class="flex justify-end mt-6">
            <button
                type="submit"
                style="background:#1d4ed8;color:#fff;padding:.5rem 1.5rem;border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;"
                onmouseover="this.style.background='#1e40af'"
                onmouseout="this.style.background='#1d4ed8'"
            >
                {% trans "Save Settings" %}
            </button>
        </div>
    </form>

    <!-- Shared Posts Management -->
    <div class="bg-white rounded-lg shadow p-6 mt-6"
         x-data="sharedPostsMgr()"
         x-init="init()">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h2 class="text-lg font-semibold text-gray-700">{% trans "Shared Posts" %}</h2>
                <p class="text-sm text-gray-500 mt-0.5">{% trans "Posts currently accessible via public links. Disable to return to 404." %}</p>
            </div>
            <button x-show="posts.length > 0" @click="revokeAll()"
                    :disabled="busy"
                    class="flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-600 border border-red-200 rounded-md hover:bg-red-50 disabled:opacity-50 transition">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                </svg>
                {% trans "Revoke All" %}
            </button>
        </div>

        <!-- Empty state -->
        <div x-show="posts.length === 0 && !loading" class="py-6 text-center text-sm text-gray-400">
            {% trans "No posts are currently shared publicly." %}
        </div>

        <!-- Loading -->
        <div x-show="loading" class="py-6 text-center text-sm text-gray-400">
            {% trans "Loading…" %}
        </div>

        <!-- List -->
        <ul x-show="!loading" class="divide-y divide-gray-100">
            <template x-for="post in posts" :key="post.id">
                <li class="flex items-center gap-3 py-3">
                    <div class="flex-1 min-w-0">
                        <a :href="'/ui/posts/' + post.id + '/'"
                           class="font-medium text-gray-800 hover:text-blue-600 text-sm truncate block" x-text="post.title"></a>
                        <a :href="post.publicUrl" target="_blank"
                           class="text-xs text-gray-400 hover:text-gray-600 font-mono" x-text="post.publicUrl"></a>
                    </div>
                    <button @click="revoke(post)" :disabled="busy"
                            class="flex-shrink-0 flex items-center gap-1 px-2.5 py-1 text-xs text-red-600 border border-red-200 rounded hover:bg-red-50 disabled:opacity-50 transition">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                        {% trans "Revoke" %}
                    </button>
                </li>
            </template>
        </ul>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
function sharedPostsMgr() {
    return {
        posts: [],
        loading: false,
        busy: false,
        init() {
            {% for p in public_posts %}
            this.posts.push({
                id: {{ p.pk }},
                title: '{{ p.title|escapejs }}',
                publicUrl: window.location.origin + '{% url "public-post" p.pk %}',
            });
            {% endfor %}
        },
        async _toggle(postId, enable) {
            const csrf = document.cookie.match(/csrftoken=([^;]+)/)?.[1] || '';
            await fetch('/ui/posts/' + postId + '/share/', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrf },
                body: JSON.stringify({ enable }),
            });
        },
        async revoke(post) {
            this.busy = true;
            try {
                await this._toggle(post.id, false);
                this.posts = this.posts.filter(p => p.id !== post.id);
            } finally {
                this.busy = false;
            }
        },
        async revokeAll() {
            if (!confirm('{% trans "Revoke public access for all shared posts?" %}')) return;
            this.busy = true;
            try {
                await Promise.all(this.posts.map(p => this._toggle(p.id, false)));
                this.posts = [];
            } finally {
                this.busy = false;
            }
        },
    };
}
</script>
{% endblock %}