{% extends "base.html" %}
{% block title %}Settings — nanio-orchestrator{% endblock %}
{% block content %}
<h1>Settings</h1>

<div id="settings-toast" class="hidden" style="
    position:fixed;top:68px;right:1.5rem;z-index:200;
    padding:0.6rem 1.1rem;border-radius:6px;font-size:0.9rem;font-weight:500;
    background:var(--bg-card);border:1px solid var(--border);
    box-shadow:0 4px 16px rgba(0,0,0,0.4);transition:opacity 0.3s;
"></div>

<div id="settings-loading" class="empty">Loading…</div>
<div id="settings-error" class="hidden">
    <div class="card">
        <span class="badge warn">Error</span>
        <span id="settings-error-msg"></span>
    </div>
</div>

<div id="settings-restart-banner" class="hidden card" style="
    border-left:3px solid var(--warn);margin-bottom:1.2rem;
    display:flex;align-items:center;gap:0.8rem;flex-wrap:wrap;
">
    <span style="color:var(--warn);font-size:1.1rem">⚠</span>
    <span id="settings-restart-msg">Changes written to config file. <strong>Restart the service</strong> for them to take effect.</span>
    <button id="settings-restart-btn" class="btn btn-sm" onclick="restartService()" style="margin-left:auto">Restart Now</button>
</div>

<div id="settings-body" class="hidden"></div>
{% endblock %}

{% block scripts %}
<script>
const CATEGORIES = [
    ["Core",       ["host","port","api_key","log_level","session_ttl"]],
    ["Database",   ["db_path","db_backup_path","db_backup_interval","db_backup_rotate"]],
    ["Security",   ["secret"]],
    ["S3",         ["s3_access_key","s3_secret_key","s3_proxy_port","bucket_sync_interval"]],
    ["Nginx",      ["nginx_config_dir","drift_interval"]],
    ["Migrations", ["rclone_path","migration_max_parallel","migration_bandwidth_limit","migration_checkers","migration_transfers"]],
];

const DESCRIPTIONS = {
    host:                      "Bind address",
    port:                      "Listen port",
    api_key:                   "API authentication key",
    log_level:                 "Log level (debug/info/warning/error)",
    session_ttl:               "Web UI session duration (seconds)",
    db_path:                   "SQLite database file path",
    db_backup_path:            "Backup path (default: db_path + .bak)",
    db_backup_interval:        "Seconds between timed backups",
    db_backup_rotate:          "Number of backup copies to keep",
    secret:                    "Fernet key for credential encryption",
    s3_access_key:             "Global S3 access key",
    s3_secret_key:             "Global S3 secret key",
    s3_proxy_port:             "Internal S3 listing proxy port",
    bucket_sync_interval:      "Seconds between bucket syncs",
    nginx_config_dir:          "Root directory for generated configs",
    drift_interval:            "Seconds between drift checks",
    rclone_path:               "Path to rclone binary",
    migration_max_parallel:    "Max concurrent migrations",
    migration_bandwidth_limit: "rclone --bwlimit value (e.g. 50M)",
    migration_checkers:        "rclone --checkers value",
    migration_transfers:       "rclone --transfers value",
};

const SECRET_KEYS = new Set(["api_key","secret","s3_access_key","s3_secret_key"]);

// Keys whose values should be treated as editable (excludes meta)
const READONLY_KEYS = new Set(["config_file","dev_mode"]);

function isSecret(key) { return SECRET_KEYS.has(key); }

function escapeHtml(s) {
    return String(s ?? "")
        .replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")
        .replace(/"/g,"&quot;").replace(/'/g,"&#39;");
}

// ── Toast ─────────────────────────────────────────────────────────────────────

let _toastTimer = null;
function showToast(msg, ok = true) {
    const el = document.getElementById("settings-toast");
    el.textContent = msg;
    el.style.borderColor = ok ? "var(--ok)" : "var(--error)";
    el.style.color = ok ? "var(--ok)" : "var(--error)";
    el.classList.remove("hidden");
    el.style.opacity = "1";
    clearTimeout(_toastTimer);
    _toastTimer = setTimeout(() => { el.style.opacity = "0"; setTimeout(() => el.classList.add("hidden"), 320); }, 3000);
}

// ── Inline editing state ──────────────────────────────────────────────────────

const _currentValues = {};   // key → current display value (masked for secrets)

function renderValue(key, val) {
    if (val === null || val === undefined || val === "") {
        return `<span class="badge warn">unset</span>`;
    }
    if (isSecret(key)) {
        return `<code class="hash">${escapeHtml(val)}</code>`;
    }
    return `<code>${escapeHtml(val)}</code>`;
}

function rowId(key) { return `sr-${key}`; }
function valueId(key) { return `sv-${key}`; }
function editAreaId(key) { return `se-${key}`; }
function inputId(key) { return `si-${key}`; }

function renderRow(key, val, desc) {
    _currentValues[key] = val;
    const secret = isSecret(key);
    return `
    <tr id="${rowId(key)}">
        <td style="width:220px"><code>${escapeHtml(key)}</code></td>
        <td>
            <span id="${valueId(key)}">${renderValue(key, val)}</span>
            <span id="${editAreaId(key)}" class="hidden" style="display:none;gap:0.4rem;align-items:center">
                <input
                    id="${inputId(key)}"
                    type="${secret ? 'password' : 'text'}"
                    style="font-family:var(--mono);font-size:0.85rem;padding:3px 7px;
                           background:var(--bg-hover);border:1px solid var(--border);
                           border-radius:4px;color:var(--text);width:300px"
                    autocomplete="off"
                    spellcheck="false"
                />
                ${secret ? `<button class="btn btn-xs" type="button" onclick="toggleReveal('${key}')" title="Show/hide">👁</button>` : ""}
                <button class="btn btn-xs btn-primary" onclick="saveSetting('${key}')">Save</button>
                <button class="btn btn-xs" onclick="cancelEdit('${key}')">Cancel</button>
            </span>
        </td>
        <td style="color:var(--text-muted)">${escapeHtml(desc)}</td>
        <td style="width:60px;text-align:right">
            <button class="btn btn-xs" id="edit-btn-${key}" onclick="startEdit('${key}')">Edit</button>
        </td>
    </tr>`;
}

function startEdit(key) {
    const valEl   = document.getElementById(valueId(key));
    const editEl  = document.getElementById(editAreaId(key));
    const inputEl = document.getElementById(inputId(key));
    const btnEl   = document.getElementById(`edit-btn-${key}`);

    valEl.classList.add("hidden");
    editEl.classList.remove("hidden");
    editEl.style.display = "inline-flex";
    btnEl.classList.add("hidden");

    // Pre-fill: for secrets the masked value is not the real value,
    // so we leave the input empty so the operator types a new one.
    inputEl.value = isSecret(key) ? "" : (_currentValues[key] ?? "");
    inputEl.focus();
}

function cancelEdit(key) {
    const valEl  = document.getElementById(valueId(key));
    const editEl = document.getElementById(editAreaId(key));
    const btnEl  = document.getElementById(`edit-btn-${key}`);
    valEl.classList.remove("hidden");
    editEl.style.display = "none";
    btnEl.classList.remove("hidden");
}

function toggleReveal(key) {
    const inp = document.getElementById(inputId(key));
    inp.type = inp.type === "password" ? "text" : "password";
}

async function saveSetting(key) {
    const inputEl = document.getElementById(inputId(key));
    const value = inputEl.value;

    const saveBtn = inputEl.closest("span").querySelector(".btn-primary");
    saveBtn.disabled = true;
    saveBtn.textContent = "Saving…";

    try {
        const res = await fetch(`/api/config/settings/${encodeURIComponent(key)}`,
            fetchOpts("PUT", { value }));
        const data = await res.json();
        if (!res.ok) {
            showToast("Error: " + (data.detail || res.statusText), false);
            return;
        }

        // Update display value
        _currentValues[key] = data.value;
        document.getElementById(valueId(key)).innerHTML = renderValue(key, data.value);

        cancelEdit(key);
        showToast(`${key} updated — restart required`, true);
        const banner = document.getElementById("settings-restart-banner");
        banner.classList.remove("hidden");
        banner.style.display = "flex";
    } catch (err) {
        showToast("Network error: " + err.message, false);
    } finally {
        saveBtn.disabled = false;
        saveBtn.textContent = "Save";
    }
}

// ── Service restart ──────────────────────────────────────────────────────────

async function restartService() {
    const btn = document.getElementById("settings-restart-btn");
    const msg = document.getElementById("settings-restart-msg");
    btn.disabled = true;
    btn.textContent = "Restarting…";
    msg.textContent = "Restart in progress…";

    try {
        const res = await fetch("/api/config/settings/restart", fetchOpts("POST"));
        if (!res.ok) {
            const err = await res.json().catch(() => ({}));
            showToast("Restart failed: " + (err.detail || res.statusText), false);
            btn.disabled = false;
            btn.textContent = "Restart Now";
            msg.textContent = "Changes written to config file. Restart the service for them to take effect.";
            return;
        }
    } catch (err) {
        // Network error is expected if restart is extremely fast; continue polling
    }

    // Poll until the service responds again
    msg.textContent = "Waiting for service to come back online…";
    let attempts = 0;
    const maxAttempts = 30;  // 30 × 2 s = 60 s timeout
    const poll = setInterval(async () => {
        attempts++;
        if (attempts > maxAttempts) {
            clearInterval(poll);
            showToast("Service did not respond within 60 s — check server logs.", false);
            btn.disabled = false;
            btn.textContent = "Restart Now";
            msg.textContent = "Changes written to config file. Restart the service for them to take effect.";
            return;
        }
        try {
            const res = await fetch("/api/config/settings", fetchOpts("GET"));
            if (res.ok) {
                clearInterval(poll);
                showToast("Service restarted — settings are now active.", true);
                location.reload();
            }
        } catch (_) {
            // still restarting, keep polling
        }
    }, 2000);
}

// Enter key submits, Escape cancels
document.addEventListener("keydown", (e) => {
    if (!e.target.matches("input[id^='si-']")) return;
    const key = e.target.id.slice(3);
    if (e.key === "Enter")  { e.preventDefault(); saveSetting(key); }
    if (e.key === "Escape") { e.preventDefault(); cancelEdit(key); }
});

// ── Load ──────────────────────────────────────────────────────────────────────

async function loadSettings() {
    const loadingEl = document.getElementById("settings-loading");
    const errorEl   = document.getElementById("settings-error");
    const bodyEl    = document.getElementById("settings-body");

    try {
        const res = await fetch("/api/config/settings", fetchOpts("GET"));
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();

        let html = "";

        for (const [cat, keys] of CATEGORIES) {
            html += `<div class="card" style="margin-bottom:1.2rem">`;
            html += `<h3 style="margin-top:0;margin-bottom:0.8rem">${escapeHtml(cat)}</h3>`;
            html += `<table><thead><tr>
                <th style="width:220px">Setting</th>
                <th>Value</th>
                <th>Description</th>
                <th style="width:60px"></th>
            </tr></thead><tbody>`;
            for (const key of keys) {
                if (!(key in data)) continue;
                html += renderRow(key, data[key], DESCRIPTIONS[key] || "");
            }
            html += `</tbody></table></div>`;
        }

        // Meta row (read-only)
        html += `<div class="card" style="margin-bottom:1.2rem">`;
        html += `<h3 style="margin-top:0;margin-bottom:0.8rem">Meta</h3>`;
        html += `<table><tbody>`;
        html += `<tr><td style="width:220px"><code>config_file</code></td><td><code>${escapeHtml(String(data.config_file ?? ""))}</code></td><td style="color:var(--text-muted)">Active config file path</td><td></td></tr>`;
        html += `<tr><td><code>dev_mode</code></td><td>${data.dev_mode ? '<span class="badge dev">DEV</span>' : '<span class="badge ok">production</span>'}</td><td style="color:var(--text-muted)">Runtime mode</td><td></td></tr>`;
        html += `</tbody></table></div>`;

        bodyEl.innerHTML = html;
        loadingEl.classList.add("hidden");
        bodyEl.classList.remove("hidden");

    } catch (err) {
        loadingEl.classList.add("hidden");
        document.getElementById("settings-error-msg").textContent = err.message;
        errorEl.classList.remove("hidden");
    }
}

loadSettings();
</script>
{% endblock %}