{% 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>

    <!-- Sticky Client-Key Routing -->
    <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">Sticky Client-Key Routing</h2>
                <p class="text-gray-400 text-sm mt-1">
                    When enabled with <span class="text-gray-300">fill-first</span>, each Janus
                    API key is pinned to a stable upstream account (better cache hits, easier
                    per-key spend). With <span class="text-gray-300">round-robin</span> /
                    <span class="text-gray-300">sticky round-robin</span>, each Janus key still
                    rotates across the multi-key pool, just on its own staggered counter so
                    different clients start on different accounts.
                </p>
                <p class="text-gray-500 text-xs mt-2">
                    Requests without a Janus API key share the global rotation counter.
                </p>
            </div>
            <label class="janus-toggle">
                <input type="checkbox"
                       id="sticky-routing-toggle"
                       {% if sticky_client_key_routing_enabled %}checked{% endif %}
                       hx-post="/dashboard/api/settings"
                       hx-swap="none"
                       hx-trigger="change"
                       hx-on:htmx:config-request="event.detail.parameters.key='server_sticky_client_key_routing'; event.detail.parameters.value=event.detail.elt.checked ? 'true' : 'false'">
                <span class="janus-toggle-track" aria-hidden="true"></span>
            </label>
        </div>
    </div>

    <!-- Account Selection Strategy -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex-1 min-w-0">
            <h2 class="text-lg font-bold text-white">Account Selection Strategy</h2>
            <p class="text-gray-400 text-sm mt-1">
                How Janus picks among multiple accounts for the same model.
                <span class="text-gray-300">Fill-first</span> always uses the highest-priority
                available account; <span class="text-gray-300">round-robin</span> rotates every
                request; <span class="text-gray-300">sticky round-robin</span> stays on one account
                for a number of requests, then rotates.
            </p>
            <div class="flex flex-wrap items-end gap-4 mt-4">
                <div>
                    <label class="block text-gray-400 text-xs mb-1" for="account-strategy-select">
                        Strategy
                    </label>
                    <select id="account-strategy-select"
                            class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white"
                            hx-post="/dashboard/api/settings"
                            hx-swap="none"
                            hx-trigger="change"
                            hx-on:htmx:config-request="event.detail.parameters.key='server_account_strategy'; event.detail.parameters.value=event.detail.elt.value">
                        <option value="fill_first" {% if account_strategy == 'fill_first' %}selected{% endif %}>Fill first</option>
                        <option value="round_robin" {% if account_strategy == 'round_robin' %}selected{% endif %}>Round robin</option>
                        <option value="sticky_rr" {% if account_strategy == 'sticky_rr' %}selected{% endif %}>Sticky round robin</option>
                    </select>
                </div>
                <div>
                    <label class="block text-gray-400 text-xs mb-1" for="sticky-limit-input">
                        Sticky limit (requests before rotating)
                    </label>
                    <input id="sticky-limit-input"
                           type="number" min="1" max="1000"
                           value="{{ sticky_limit }}"
                           class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white w-32"
                           hx-post="/dashboard/api/settings"
                           hx-swap="none"
                           hx-trigger="change"
                           hx-on:htmx:config-request="event.detail.parameters.key='server_sticky_limit'; event.detail.parameters.value=event.detail.elt.value">
                </div>
            </div>
        </div>
    </div>

    <!-- Combo Routing -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex-1 min-w-0">
            <h2 class="text-lg font-bold text-white">Combo Routing</h2>
            <p class="text-gray-400 text-sm mt-1">
                How Janus routes requests across the models in a combo.
                <span class="text-gray-300">Fallback</span> tries each model in order until one
                succeeds; <span class="text-gray-300">round-robin</span> rotates across models
                (honoring the sticky limit below); <span class="text-gray-300">fusion</span> fans
                the request out to a panel of models and merges their answers with a judge model.
            </p>
            <div class="flex flex-wrap items-end gap-4 mt-4">
                <div>
                    <label class="block text-gray-400 text-xs mb-1" for="combo-strategy-select">
                        Strategy
                    </label>
                    <select id="combo-strategy-select"
                            class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white"
                            hx-post="/dashboard/api/settings"
                            hx-swap="none"
                            hx-trigger="change"
                            hx-on:htmx:config-request="event.detail.parameters.key='combo_strategy'; event.detail.parameters.value=event.detail.elt.value">
                        <option value="fallback" {% if combo_strategy == 'fallback' %}selected{% endif %}>Fallback</option>
                        <option value="round_robin" {% if combo_strategy == 'round_robin' %}selected{% endif %}>Round robin</option>
                        <option value="fusion" {% if combo_strategy == 'fusion' %}selected{% endif %}>Fusion</option>
                    </select>
                </div>
                <div>
                    <label class="block text-gray-400 text-xs mb-1" for="combo-sticky-limit-input">
                        Sticky limit (requests before rotating)
                    </label>
                    <input id="combo-sticky-limit-input"
                           type="number" min="1" max="1000"
                           value="{{ combo_sticky_limit }}"
                           class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white w-32"
                           hx-post="/dashboard/api/settings"
                           hx-swap="none"
                           hx-trigger="change"
                           hx-on:htmx:config-request="event.detail.parameters.key='combo_sticky_limit'; event.detail.parameters.value=event.detail.elt.value">
                </div>
            </div>

            <h3 class="text-sm font-bold text-gray-300 mt-6 mb-1">Fusion</h3>
            <p class="text-gray-500 text-xs mb-3">
                Only used when the strategy above is set to <span class="text-gray-400">fusion</span>.
            </p>
            <div class="flex flex-wrap items-end gap-4">
                <div>
                    <label class="block text-gray-400 text-xs mb-1" for="combo-fusion-judge-input">
                        Judge model
                    </label>
                    <input id="combo-fusion-judge-input"
                           type="text"
                           placeholder="prefix/model"
                           value="{{ combo_fusion_judge }}"
                           class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white w-48"
                           hx-post="/dashboard/api/settings"
                           hx-swap="none"
                           hx-trigger="change"
                           hx-on:htmx:config-request="event.detail.parameters.key='combo_fusion_judge'; event.detail.parameters.value=event.detail.elt.value">
                </div>
                <div>
                    <label class="block text-gray-400 text-xs mb-1" for="combo-fusion-min-panel-input">
                        Min panel size (default 2)
                    </label>
                    <input id="combo-fusion-min-panel-input"
                           type="number" min="1" max="20"
                           value="{{ combo_fusion_min_panel }}"
                           class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white w-32"
                           hx-post="/dashboard/api/settings"
                           hx-swap="none"
                           hx-trigger="change"
                           hx-on:htmx:config-request="event.detail.parameters.key='combo_fusion_min_panel'; event.detail.parameters.value=event.detail.elt.value">
                </div>
                <div>
                    <label class="block text-gray-400 text-xs mb-1" for="combo-fusion-grace-input">
                        Straggler grace (s, default 8)
                    </label>
                    <input id="combo-fusion-grace-input"
                           type="number" min="0" step="0.5" max="600"
                           value="{{ combo_fusion_straggler_grace_s }}"
                           class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white w-32"
                           hx-post="/dashboard/api/settings"
                           hx-swap="none"
                           hx-trigger="change"
                           hx-on:htmx:config-request="event.detail.parameters.key='combo_fusion_straggler_grace_s'; event.detail.parameters.value=event.detail.elt.value">
                </div>
                <div>
                    <label class="block text-gray-400 text-xs mb-1" for="combo-fusion-timeout-input">
                        Hard timeout (s, default 90)
                    </label>
                    <input id="combo-fusion-timeout-input"
                           type="number" min="1" step="1" max="3600"
                           value="{{ combo_fusion_hard_timeout_s }}"
                           class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white w-32"
                           hx-post="/dashboard/api/settings"
                           hx-swap="none"
                           hx-trigger="change"
                           hx-on:htmx:config-request="event.detail.parameters.key='combo_fusion_hard_timeout_s'; event.detail.parameters.value=event.detail.elt.value">
                </div>
            </div>
        </div>
    </div>

    <!-- Request Logging -->
    <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">Request Logging (Debug)</h2>
                <p class="text-gray-400 text-sm mt-1">
                    When enabled, full request and response bodies are captured to the local
                    database for troubleshooting. View them on the
                    <a href="/dashboard/request-logs" class="text-blue-400 hover:text-blue-300">Request Logs</a> page.
                </p>
                <p class="text-gray-500 text-xs mt-2">
                    Bodies are truncated at 64&nbsp;KB and only the most recent requests are kept
                    (configurable retention, default 500).
                    Logs may contain prompts and completions — leave off unless debugging.
                </p>
            </div>
            <label class="janus-toggle">
                <input type="checkbox"
                       id="request-logging-toggle"
                       {% if request_logging_enabled %}checked{% endif %}
                       hx-post="/dashboard/api/settings"
                       hx-swap="none"
                       hx-trigger="change"
                       hx-on:htmx:config-request="event.detail.parameters.key='server_request_logging'; event.detail.parameters.value=event.detail.elt.checked ? 'true' : 'false'">
                <span class="janus-toggle-track" aria-hidden="true"></span>
            </label>
        </div>
        <div class="mt-4">
            <label class="text-gray-400 text-sm">Retention (rows)</label>
            <input type="number" min="50" max="5000" value="{{ request_log_retention }}"
                   class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white w-32"
                   hx-post="/dashboard/api/settings" hx-swap="none" hx-trigger="change"
                   hx-on:htmx:config-request="event.detail.parameters.key='server_request_log_retention'; event.detail.parameters.value=event.detail.elt.value">
        </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."
    )) {
        el.checked = true;
        event.preventDefault();
        return false;
    }
    if (!confirm(
        "FINAL WARNING: This machine may be exposed on the network.\n\nDisabling API key auth leaves your gateway open. Are you absolutely sure?"
    )) {
        el.checked = true;
        event.preventDefault();
        return false;
    }
    return true;
}
</script>
{% endblock %}