{% extends "base.html" %}
{% block title %}Settings - Janus{% endblock %}
{% block settings_active %}bg-gray-700 text-white{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-white mb-6">Settings</h1>

<div class="space-y-4 max-w-2xl">
    <!-- Dashboard Login -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <h2 class="text-lg font-bold text-white mb-1">Dashboard Login</h2>
        <p class="text-gray-400 text-sm mb-4">
            Set a username and password for remote dashboard access over HTTP/Tailscale.
            {% if dashboard_password_set %}
            Current user: <span class="text-gray-200 font-mono">{{ dashboard_username }}</span>
            {% else %}
            Not configured yet.
            {% endif %}
        </p>
        <form hx-post="/dashboard/api/settings/credentials" hx-target="#credentials-status" class="space-y-3">
            <div>
                <label class="block text-gray-400 text-sm mb-1">Username</label>
                <input type="text" name="username" required autocomplete="username"
                       value="{{ dashboard_username }}"
                       class="w-full bg-gray-900 text-white rounded-lg px-3 py-2 border border-gray-700 text-sm">
            </div>
            <div>
                <label class="block text-gray-400 text-sm mb-1">Password</label>
                <input type="password" name="password" required minlength="8" autocomplete="new-password"
                       placeholder="{% if dashboard_password_set %}New password{% else %}At least 8 characters{% endif %}"
                       class="w-full bg-gray-900 text-white rounded-lg px-3 py-2 border border-gray-700 text-sm">
            </div>
            <div>
                <label class="block text-gray-400 text-sm mb-1">Confirm Password</label>
                <input type="password" name="password_confirm" required minlength="8" autocomplete="new-password"
                       class="w-full bg-gray-900 text-white rounded-lg px-3 py-2 border border-gray-700 text-sm">
            </div>
            <div class="flex items-center gap-3">
                <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-4 py-2 text-sm font-medium transition-colors">
                    Save Credentials
                </button>
                <span id="credentials-status" class="text-sm text-green-400"></span>
            </div>
        </form>
    </div>

    <!-- API Key Requirement -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-lg font-bold text-white">Require API Key</h2>
                <p class="text-gray-400 text-sm mt-1">When enabled, all requests must include a valid Janus API key. Takes effect immediately.</p>
            </div>
            {% set rak = settings.server_require_api_key or ('true' if config.server.require_api_key else 'false') %}
            <button hx-post="/dashboard/api/settings" hx-target="this" hx-swap="none"
                    hx-vals='js:{key: "server_require_api_key", value: settingsApiKeyRequired ? "false" : "true"}'
                    onclick="var newVal = !settingsApiKeyRequired; settingsApiKeyRequired = newVal; settingsApiKeyToggleUpdate(this, newVal)"
                    class="{{ 'bg-green-600 text-white' if rak == 'true' else 'bg-gray-700 text-gray-400' }} rounded-lg px-4 py-2 text-sm font-medium transition-colors">
                {{ 'Required' if rak == 'true' else 'Not Required' }}
            </button>
        </div>
    </div>

    <!-- Server Info -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <h2 class="text-lg font-bold text-white mb-4">Server</h2>
        <div class="space-y-2">
            <div class="flex justify-between">
                <span class="text-gray-400 text-sm">Host</span>
                <span class="text-gray-300 text-sm font-mono">{{ config.server.host }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-400 text-sm">Port</span>
                <span class="text-gray-300 text-sm font-mono">{{ config.server.port }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-400 text-sm">Data Directory</span>
                <span class="text-gray-300 text-sm font-mono">{{ config.server.data_dir }}</span>
            </div>
        </div>
    </div>

    <!-- Config Keys -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <h2 class="text-lg font-bold text-white mb-4">Stored Settings</h2>
        {% if settings %}
        <div class="space-y-2">
            {% for key, value in settings.items() %}
            <div class="flex justify-between">
                <span class="text-gray-400 text-sm">{{ key }}</span>
                <span class="text-gray-300 text-sm font-mono">{{ value }}</span>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-gray-500 text-sm">No settings stored in the database.</p>
        {% endif %}
    </div>

    <!-- Export Config -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-lg font-bold text-white">Export Config</h2>
                <p class="text-gray-400 text-sm mt-1">Download the current DB state as a YAML config file. Provider API keys are included in plaintext.</p>
            </div>
            <a href="/dashboard/api/export" download
               class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-500 transition-colors">Download YAML</a>
        </div>
    </div>

    <!-- Danger Zone -->
    <div class="bg-gray-800 rounded-xl p-6 border border-red-900">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-lg font-bold text-red-400">Danger Zone</h2>
                <p class="text-gray-400 text-sm mt-1">Reset providers, combos, pricing, and settings to the values in your config.yaml. API keys and usage history are preserved.</p>
            </div>
            <button hx-post="/dashboard/api/reset" hx-target="this" hx-swap="none"
                    hx-confirm="This will clear all providers, combos, pricing, and settings, then re-seed from config.yaml. Continue?"
                    onclick="setTimeout(function(){ location.reload(); }, 500)"
                    class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-red-600 text-white hover:bg-red-500 transition-colors">Reset to Defaults</button>
        </div>
    </div>
</div>

<script>
var settingsApiKeyRequired = {{ 'true' if rak == 'true' else 'false' }};

function settingsApiKeyToggleUpdate(btn, on) {
    btn.className = on
        ? 'bg-green-600 text-white rounded-lg px-4 py-2 text-sm font-medium transition-colors'
        : 'bg-gray-700 text-gray-400 rounded-lg px-4 py-2 text-sm font-medium transition-colors';
    btn.textContent = on ? 'Required' : 'Not Required';
}
</script>
{% endblock %}