{% extends 'base/layout.html' %}

{% block title %}Running config{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="h3 mb-0">
        <i class="mdi mdi-console text-warning"></i> Running configuration
        <span id="hostname-badge" class="badge bg-secondary ms-2">{{ hostname }}</span>
    </h1>
    <div id="repo-summary" class="text-muted"></div>
</div>

<div id="error-banner" class="alert alert-warning d-none">
    <i class="mdi mdi-alert"></i> <span id="error-text"></span>
</div>

{# Loading state #}
<div id="loading-state" class="row">
    <div class="col-md-8">
        <div class="card mb-3">
            <div class="card-header"><strong>Running configuration</strong></div>
            <div class="card-body text-center py-5 text-muted">
                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                Loading running config from device...
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header"><strong>Change history</strong></div>
            <div class="card-body text-center py-5 text-muted">
                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                Loading git history...
            </div>
        </div>
    </div>
</div>

{# Loaded state (hidden until ready) #}
<div id="loaded-state" class="row d-none">
    <div class="col-md-8">
        <div class="card mb-3">
            <div class="card-header"><strong>Running configuration</strong></div>
            <div class="card-body p-0">
                <div id="config-error" class="alert alert-danger m-3 d-none">
                    <i class="mdi mdi-alert-circle"></i> <span id="config-error-text"></span>
                </div>
                <pre id="running-config" class="mb-0 p-3 d-none"><code></code></pre>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header"><strong>Change history</strong></div>
            <div id="git-history" class="card-body p-2">
                <p class="text-muted">No commits found for this file.</p>
            </div>
        </div>
    </div>
</div>

<script>
const STATUS_URL = "{% url 'plugins:config_officer:running_config_status' config_job_id=config_job_id repo_job_id=repo_job_id %}";
const POLL_INTERVAL = 1000;
const MAX_POLLS = 60;
let polls = 0;

function showError(msg) {
    document.getElementById("error-banner").classList.remove("d-none");
    document.getElementById("error-text").textContent = msg;
}

function renderDiff(diff, hash) {
    if (!diff) return '<div class="card-body py-1 px-2 text-muted"><small>no diff</small></div>';
    const escaped = diff.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
    if (diff.length > 1000) {
        return `
            <div class="card-body py-1 px-2">
                <button type="button" class="btn btn-link btn-sm p-0"
                    data-bs-toggle="collapse" data-bs-target="#diff-${hash}">
                    Show / hide diff
                </button>
            </div>
            <div id="diff-${hash}" class="collapse">
                <pre class="mb-0 p-2 text-info"><samp>${escaped}</samp></pre>
            </div>`;
    }
    return `<pre class="mb-0 p-2 text-info"><samp>${escaped}</samp></pre>`;
}

function renderHistory(repoState) {
    const commits = (repoState.commits || []).slice().reverse();
    if (!commits.length) {
        return '<p class="text-muted">No commits found for this file.</p>';
    }
    return commits.map(c => `
        <div class="card mb-2 border-secondary">
            <div class="card-header py-1 px-2 d-flex justify-content-between">
                <small class="text-success">${c.date}</small>
                <small class="text-muted font-monospace">${c.hash.slice(0,8)}</small>
            </div>
            ${renderDiff(c.diff, c.hash)}
        </div>`).join("");
}

function applyResult(data) {
    document.getElementById("loading-state").classList.add("d-none");
    document.getElementById("loaded-state").classList.remove("d-none");

    // Running config
    if (data.running_config) {
        const pre = document.getElementById("running-config");
        pre.querySelector("code").textContent = data.running_config;
        pre.classList.remove("d-none");
    } else {
        const err = document.getElementById("config-error");
        err.classList.remove("d-none");
        document.getElementById("config-error-text").textContent =
            "Error reading running config from worker.";
    }

    // Repo summary
    const rs = data.repo_state;
    if (rs.commits_count) {
        document.getElementById("repo-summary").innerHTML = `
            <i class="mdi mdi-source-branch"></i>
            <strong>${rs.commits_count}</strong> change(s) since ${rs.first_commit_date}.
            Last change: <span class="text-success">${rs.last_commit_date}</span>`;
    }

    if (rs.error) showError("Git error: " + rs.error);

    document.getElementById("git-history").innerHTML = renderHistory(rs);
}

function poll() {
    if (polls++ > MAX_POLLS) {
        showError("Timeout waiting for worker response.");
        document.getElementById("loading-state").classList.add("d-none");
        document.getElementById("loaded-state").classList.remove("d-none");
        return;
    }

    fetch(STATUS_URL)
        .then(r => r.json())
        .then(data => {
            if (data.failed) {
                showError("Worker job failed — check RQ logs.");
                return;
            }
            if (!data.ready) {
                setTimeout(poll, POLL_INTERVAL);
                return;
            }
            applyResult(data);
        })
        .catch(() => setTimeout(poll, POLL_INTERVAL));
}

poll();
</script>

{% endblock %}