{% extends "admin/base-admin.html" %}
{% block title %}Server Settings{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8 space-y-8">

    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Server Settings</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Configure Flask server parameters — applied live without restart.</p>
        </div>
        <button id="btn-clear-cache"
            class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-orange-500 hover:bg-orange-600 text-white text-sm font-semibold transition-all shadow-lg shadow-orange-500/20">
            <i class="fa fa-broom"></i> Clear Server Caches
        </button>
    </div>

    <!-- Flash messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

    <!-- Settings form -->
    <form id="server-settings-form" method="POST" action="{{ full_url('/admin/server-settings') }}" class="space-y-6">

        <!-- Upload Settings -->
        <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 overflow-hidden shadow-sm">
            <div class="px-6 py-4 bg-gradient-to-r from-blue-500/10 to-indigo-500/10 dark:from-blue-400/10 dark:to-indigo-400/10 border-b border-gray-200 dark:border-gray-800">
                <h2 class="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                    <i class="fa fa-upload text-blue-500"></i> Upload Limits
                </h2>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    Global server ceiling — per-plan limits in <a href="{{ full_url('/admin/plans') }}" class="text-primary underline">Subscription Plans</a> are further capped by this value.
                </p>
            </div>
            <div class="p-6 space-y-5">

                <!-- Max upload MB -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Global Max Upload Size (MB)
                        <span class="ml-1 text-xs text-gray-400 font-normal">(sets Flask MAX_CONTENT_LENGTH)</span>
                    </label>
                    <input type="number" name="server_max_upload_mb" min="1" max="102400"
                        value="{{ site.server_max_upload_mb|default('500') }}"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <p class="text-xs text-gray-400 mt-1">
                        Current effective limit: <strong class="text-gray-700 dark:text-gray-200">{{ server_max_mb }} MB</strong>.
                        If a user's plan allows more, this value still applies as the ceiling.
                    </p>
                </div>

                <!-- Plan effective limits table -->
                {% if plans %}
                <div class="mt-2">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Effective upload limit per plan (after cap):</p>
                    <div class="overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-700">
                        <table class="w-full text-sm">
                            <thead class="bg-gray-50 dark:bg-gray-800">
                                <tr>
                                    <th class="px-4 py-2.5 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Plan</th>
                                    <th class="px-4 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Plan Limit</th>
                                    <th class="px-4 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Effective Limit</th>
                                    <th class="px-4 py-2.5 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Capped?</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                {% for plan in plans %}
                                {% set plan_mb = plan.max_file_size_mb|int %}
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                                    <td class="px-4 py-2.5 font-medium text-gray-900 dark:text-gray-100">{{ plan.name }}</td>
                                    <td class="px-4 py-2.5 text-right text-gray-600 dark:text-gray-400">
                                        {% if plan_mb <= 0 %}Unlimited{% else %}{{ plan_mb }} MB{% endif %}
                                    </td>
                                    <td class="px-4 py-2.5 text-right font-semibold text-gray-900 dark:text-gray-100">{{ plan.effective_max_mb }} MB</td>
                                    <td class="px-4 py-2.5 text-center">
                                        {% if plan_mb > server_max_mb %}
                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-xs font-medium">
                                            <i class="fa fa-exclamation-triangle text-xs"></i> Capped
                                        </span>
                                        {% else %}
                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-xs font-medium">
                                            <i class="fa fa-check text-xs"></i> OK
                                        </span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- nginx notice -->
        <div class="flex gap-3 p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700">
            <div class="flex-shrink-0 mt-0.5">
                <i class="fa fa-triangle-exclamation text-amber-500 text-lg"></i>
            </div>
            <div class="text-sm text-amber-800 dark:text-amber-200 space-y-2">
                <p class="font-semibold">nginx also needs to be configured</p>
                <p>The setting above only controls Flask's internal limit. If your server runs nginx in front of Flask (typical in production), nginx has its own separate upload size limit — <strong>client_max_body_size</strong> — which defaults to just 1&nbsp;MB. Any file larger than that is rejected by nginx <em>before</em> Flask even sees the request, which causes the "File is too large" error regardless of what is set here.</p>
                <p>In your nginx site configuration block, set this to match or exceed the value above:</p>
                <pre class="mt-1 bg-amber-100 dark:bg-amber-900/40 rounded-lg px-4 py-3 text-xs font-mono whitespace-pre overflow-x-auto">server {
    ...
    client_max_body_size {{ (site.server_max_upload_mb|default('500'))|int + 100 }}m;  # Flask limit + 100 MB headroom
    ...
}</pre>
                <p>After editing, reload nginx: <code class="bg-amber-100 dark:bg-amber-900/40 px-1.5 py-0.5 rounded font-mono text-xs">sudo systemctl reload nginx</code></p>
            </div>
        </div>

        <!-- Gunicorn notice -->
        <div class="flex gap-3 p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700">
            <div class="flex-shrink-0 mt-0.5">
                <i class="fa fa-server text-blue-500 text-lg"></i>
            </div>
            <div class="text-sm text-blue-800 dark:text-blue-200 space-y-2">
                <p class="font-semibold">Gunicorn must be configured for long-running conversions</p>
                <p>Gunicorn's default worker timeout is only <strong>30 seconds</strong>. Any file conversion that takes longer will be forcefully killed mid-process, leaving the job stuck in "pending" forever. Use the bundled config file which sets a 1-hour timeout and restarts the background job thread after each worker fork.</p>
                <p>Start the production server with:</p>
                <pre class="mt-1 bg-blue-100 dark:bg-blue-900/40 rounded-lg px-4 py-3 text-xs font-mono whitespace-pre overflow-x-auto">gunicorn --config gunicorn.conf.py wsgi:application</pre>
                <p>The <code class="bg-blue-100 dark:bg-blue-900/40 px-1.5 py-0.5 rounded font-mono text-xs">gunicorn.conf.py</code> file in the project root sets <code class="bg-blue-100 dark:bg-blue-900/40 px-1.5 py-0.5 rounded font-mono text-xs">timeout = 3600</code>, <code class="bg-blue-100 dark:bg-blue-900/40 px-1.5 py-0.5 rounded font-mono text-xs">workers = 1</code>, and includes a <code class="bg-blue-100 dark:bg-blue-900/40 px-1.5 py-0.5 rounded font-mono text-xs">post_fork</code> hook so the conversion queue keeps running inside each worker process.</p>
            </div>
        </div>

        <!-- Session Settings -->
        <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 overflow-hidden shadow-sm">
            <div class="px-6 py-4 bg-gradient-to-r from-purple-500/10 to-pink-500/10 dark:from-purple-400/10 dark:to-pink-400/10 border-b border-gray-200 dark:border-gray-800">
                <h2 class="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                    <i class="fa fa-user-clock text-purple-500"></i> Session Lifetime
                </h2>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    How many days a logged-in session remains valid (sets PERMANENT_SESSION_LIFETIME).
                </p>
            </div>
            <div class="p-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Session Lifetime (days)
                </label>
                <input type="number" name="session_lifetime_days" min="1" max="365"
                    value="{{ site.session_lifetime_days|default('31') }}"
                    class="w-48 px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
            </div>
        </div>

        <!-- Compression Settings -->
        <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 overflow-hidden shadow-sm">
            <div class="px-6 py-4 bg-gradient-to-r from-orange-500/10 to-yellow-500/10 dark:from-orange-400/10 dark:to-yellow-400/10 border-b border-gray-200 dark:border-gray-800">
                <h2 class="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                    <i class="fa fa-compress-alt text-orange-500"></i> Response Compression (Gzip/Brotli)
                </h2>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    Flask-Compress settings for compressing HTML/CSS/JS responses.
                </p>
            </div>
            <div class="p-6 grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Compression Level
                        <span class="text-xs text-gray-400 font-normal ml-1">(1 = fast, 9 = max compression)</span>
                    </label>
                    <input type="number" name="compress_level" min="1" max="9"
                        value="{{ site.compress_level|default('6') }}"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Minimum Response Size to Compress (bytes)
                        <span class="text-xs text-gray-400 font-normal ml-1">(responses smaller than this are not compressed)</span>
                    </label>
                    <input type="number" name="compress_min_size" min="0"
                        value="{{ site.compress_min_size|default('500') }}"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                </div>
            </div>
        </div>

        <!-- Whisper / AI Transcription Settings -->
        <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 overflow-hidden shadow-sm">
            <div class="px-6 py-4 bg-gradient-to-r from-green-500/10 to-teal-500/10 dark:from-green-400/10 dark:to-teal-400/10 border-b border-gray-200 dark:border-gray-800">
                <h2 class="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                    <i class="fa fa-microphone text-green-500"></i> AI Transcription (Whisper)
                </h2>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    Controls which OpenAI Whisper model is used when transcribing audio/video to TXT, SRT, or VTT.
                    The <code class="font-mono bg-gray-100 dark:bg-gray-800 px-1 rounded">WHISPER_MODEL</code> environment variable overrides this setting.
                </p>
            </div>
            <div class="p-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Whisper Model Size
                    <span class="text-xs text-gray-400 font-normal ml-1">(larger = more accurate but slower &amp; uses more RAM)</span>
                </label>
                <select name="whisper_model"
                    class="w-56 px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                    {% for m in whisper_models %}
                    <option value="{{ m }}" {% if site.whisper_model|default('tiny') == m %}selected{% endif %}>{{ m }}</option>
                    {% endfor %}
                </select>
                <p class="text-xs text-gray-400 mt-2">
                    Models: <strong>tiny</strong> (fastest, ~1&nbsp;GB RAM) · <strong>base</strong> · <strong>small</strong> · <strong>medium</strong> · <strong>large</strong> (best accuracy, ~10&nbsp;GB RAM).
                    The first transcription will download the selected model automatically.
                </p>
            </div>
        </div>

        <!-- Save button -->
        <div class="flex items-center justify-end gap-3 pt-2">
            <a href="{{ full_url('/admin') }}"
               class="px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
                Cancel
            </a>
            <button type="submit"
                class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all shadow-lg shadow-primary/20">
                <i class="fa fa-save"></i> Save Settings
            </button>
        </div>
    </form>

</div>
{% endblock %}

{% block scripts %}
<script>
function setField(name, value) {
    var el = document.querySelector('[name="' + name + '"]');
    if (el) { el.value = value; }
}

// AJAX save
document.getElementById('server-settings-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var btn = this.querySelector('[type=submit]');
    var origText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>Saving...';

    fetch(this.action, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: new FormData(this)
    })
    .then(r => r.json())
    .then(data => {
        if (data.status === 'ok') {
            toastr.success(data.message || 'Settings saved.');
        } else {
            toastr.error(data.message || 'Error saving settings.');
        }
    })
    .catch(() => toastr.error('Network error.'))
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = origText;
    });
});

// Cache clear
document.getElementById('btn-clear-cache').addEventListener('click', function() {
    var btn = this;
    btn.disabled = true;
    btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> Clearing...';

    fetch('/admin/cache/clear', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.status === 'ok') {
            toastr.success(data.message || 'Cache cleared.');
        } else {
            toastr.error('Error clearing cache.');
        }
    })
    .catch(() => toastr.error('Network error.'))
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fa fa-broom mr-1"></i> Clear Server Caches';
    });
});
</script>
{% endblock %}