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

{% block content %}
<style>
.janus-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    shrink: 0;
}
.janus-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.janus-toggle-track {
    position: relative;
    display: block;
    width: 2.75rem;
    height: 1.5rem;
    background-color: #4b5563;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
    pointer-events: none;
}
.janus-toggle-track::after {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: #fff;
    border-radius: 9999px;
    transition: transform 0.2s ease;
}
.janus-toggle input:checked + .janus-toggle-track {
    background-color: #2563eb;
}
.janus-toggle input:checked + .janus-toggle-track::after {
    transform: translateX(1.25rem);
}
.janus-toggle input:focus-visible + .janus-toggle-track {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}
</style>

<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 gap-4">
            <div class="flex-1 min-w-0">
                <h2 class="text-lg font-bold text-white">Require API Key</h2>
                <p class="text-gray-400 text-sm mt-1">
                    When enabled, all API requests must include a valid Janus API key. Takes effect immediately.
                </p>
                <p class="text-amber-400/90 text-xs mt-2">
                    Default is on. Keep enabled when this server is reachable on the network.
                </p>
            </div>
            <label class="janus-toggle">
                <input type="checkbox"
                       id="require-api-key-toggle"
                       {% if require_api_key_enabled %}checked{% endif %}
                       onclick="return confirmRequireApiKeyToggle(event, this)"
                       hx-post="/dashboard/api/settings"
                       hx-swap="none"
                       hx-trigger="change"
                       hx-on:htmx:config-request="event.detail.parameters.key='server_require_api_key'; event.detail.parameters.value=event.detail.elt.checked ? 'true' : 'false'">
                <span class="janus-toggle-track" aria-hidden="true"></span>
            </label>
        </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>
function confirmRequireApiKeyToggle(event, el) {
    if (!el.checked) {
        return true;
    }
    if (!confirm(
        "Disable API key requirement?\n\nAnyone who can reach this server can use your gateway without authentication."
    )) {
        event.preventDefault();
        return false;
    }
    if (!confirm(
        "FINAL WARNING: This machine is exposed on the network.\n\nDisabling API key auth leaves your gateway open to the internet. Are you absolutely sure?"
    )) {
        event.preventDefault();
        return false;
    }
    return true;
}
</script>
{% endblock %}