{% extends "base.html" %}
{% block title_suffix %} - AAP{% endblock %}

{% block content %}
<div class="ac-page-header">
    <h2>Ansible Automation Platform (AAP)</h2>
    <p>Dashboard, resources, and controller settings</p>
</div>

{# --- Connection status bar --- #}
<div class="pf-v6-c-card" style="margin-bottom:1.5rem;">
    <div class="pf-v6-c-card__body" style="padding:1rem 1.25rem;">
        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;">
            <div style="display:flex;align-items:center;gap:0.75rem;">
                {% if aap_connected %}
                <span style="display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:color-mix(in srgb, var(--pf-t--global--color--status--success--default) 15%, transparent);">
                    <span style="color:var(--pf-t--global--color--status--success--default);font-size:1rem;">&#9679;</span>
                </span>
                <div>
                    <div style="font-weight:600;font-size:1rem;">Connected</div>
                    <div style="color:var(--pf-t--global--text--color--subtle);font-size:0.8125rem;">{{ aap_settings.url }}</div>
                </div>
                {% elif aap_configured %}
                <span style="display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:color-mix(in srgb, var(--pf-t--global--color--status--warning--default) 15%, transparent);">
                    <span style="color:var(--pf-t--global--color--status--warning--default);font-size:1rem;">&#9679;</span>
                </span>
                <div>
                    <div style="font-weight:600;font-size:1rem;">Configured</div>
                    <div style="color:var(--pf-t--global--text--color--subtle);font-size:0.8125rem;">{{ aap_settings.url }} &mdash; not verified</div>
                </div>
                {% else %}
                <span style="display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--pf-t--global--background--color--secondary--default);">
                    <span style="color:var(--pf-t--global--text--color--subtle);font-size:1rem;">&#9675;</span>
                </span>
                <div>
                    <div style="font-weight:600;font-size:1rem;">Not configured</div>
                    <div style="color:var(--pf-t--global--text--color--subtle);font-size:0.8125rem;">Set Controller URL and token below to get started</div>
                </div>
                {% endif %}
            </div>
            {% if aap_configured %}
            <div style="display:flex;gap:0.75rem;align-items:center;">
                <a href="{{ aap_settings.url }}" target="_blank" class="pf-v6-c-button pf-m-secondary">Open AAP Console &nearr;</a>
                <button type="button" id="btn-aap-test-connection" class="pf-v6-c-button pf-m-tertiary">Test connection</button>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{# --- Ping result (separate card, hidden until triggered) --- #}
<div id="aap-ping-card" class="pf-v6-c-card" style="margin-bottom:1.5rem;display:none;">
    <div class="pf-v6-c-card__header" style="display:flex;align-items:center;justify-content:space-between;">
        <h3 class="pf-v6-c-card__header-main" style="margin:0;">Connection Test</h3>
        <button type="button" class="pf-v6-c-button pf-m-plain pf-m-small" onclick="document.getElementById('aap-ping-card').style.display='none';" title="Dismiss">&times;</button>
    </div>
    <div class="pf-v6-c-card__body">
        <div id="aap-ping-result" class="ac-aap-stream-result" style="max-height:12rem;overflow-y:auto;"></div>
    </div>
</div>

{% if aap_configured %}
{# --- Resource summary cards --- #}
<div id="aap-dashboard-section">
    <div style="display:flex;justify-content:flex-end;margin-bottom:1rem;">
        <button type="button" class="pf-v6-c-button pf-m-primary" id="btn-sync-dashboard" onclick="syncDashboard(this)">
            <span class="ac-sync-icon" style="display:inline-block;margin-right:0.4rem;font-size:0.9em;">&#x21bb;</span> Sync project
        </button>
    </div>
    <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:1.5rem;" id="aap-summary-cards">
        <div class="pf-v6-c-card">
            <div class="pf-v6-c-card__body" style="text-align:center;padding:1.5rem 1rem;">
                <div style="font-size:2.5rem;font-weight:700;line-height:1;" id="dash-project-count">&mdash;</div>
                <div style="font-size:0.875rem;color:var(--pf-t--global--text--color--subtle);margin-top:0.5rem;">Projects</div>
            </div>
        </div>
        <div class="pf-v6-c-card">
            <div class="pf-v6-c-card__body" style="text-align:center;padding:1.5rem 1rem;">
                <div style="font-size:2.5rem;font-weight:700;line-height:1;" id="dash-jt-count">&mdash;</div>
                <div style="font-size:0.875rem;color:var(--pf-t--global--text--color--subtle);margin-top:0.5rem;">Job Templates</div>
            </div>
        </div>
        <div class="pf-v6-c-card">
            <div class="pf-v6-c-card__body" style="text-align:center;padding:1.5rem 1rem;">
                <div style="font-size:2.5rem;font-weight:700;line-height:1;" id="dash-inv-count">&mdash;</div>
                <div style="font-size:0.875rem;color:var(--pf-t--global--text--color--subtle);margin-top:0.5rem;">Inventories</div>
            </div>
        </div>
        <div class="pf-v6-c-card">
            <div class="pf-v6-c-card__body" style="text-align:center;padding:1.5rem 1rem;">
                <div style="font-size:2.5rem;font-weight:700;line-height:1;" id="dash-ee-count">&mdash;</div>
                <div style="font-size:0.875rem;color:var(--pf-t--global--text--color--subtle);margin-top:0.5rem;">Execution Environments</div>
            </div>
        </div>
        <div class="pf-v6-c-card">
            <div class="pf-v6-c-card__body" style="text-align:center;padding:1.5rem 1rem;">
                <div style="font-size:2.5rem;font-weight:700;line-height:1;" id="dash-cred-count">&mdash;</div>
                <div style="font-size:0.875rem;color:var(--pf-t--global--text--color--subtle);margin-top:0.5rem;">Credentials</div>
            </div>
        </div>
    </div>

    {# --- Two-column layout for tables --- #}
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.5rem;">

        {# --- Projects table --- #}
        <div class="pf-v6-c-card">
            <div class="pf-v6-c-card__header" style="display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;">
                <h3 class="pf-v6-c-card__header-main" style="margin:0;font-size:1.05rem;">Projects</h3>
                <span id="dash-project-status" style="font-size:0.8125rem;color:var(--pf-t--global--text--color--subtle);">Loading&hellip;</span>
            </div>
            <div class="pf-v6-c-card__body" style="padding:0;">
                <div style="overflow-x:auto;">
                    <table class="pf-v6-c-table pf-m-grid-md" role="grid" style="font-size:0.875rem;">
                        <thead><tr>
                            <th style="padding:0.75rem 1.25rem;">Name</th>
                            <th style="padding:0.75rem 1rem;width:1%;"></th>
                        </tr></thead>
                        <tbody id="dash-projects-body">
                            <tr><td colspan="2" style="text-align:center;padding:2rem 1rem;color:var(--pf-t--global--text--color--subtle);">Loading&hellip;</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {# --- Job Templates table --- #}
        <div class="pf-v6-c-card">
            <div class="pf-v6-c-card__header" style="display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;">
                <h3 class="pf-v6-c-card__header-main" style="margin:0;font-size:1.05rem;">Job Templates</h3>
                <span id="dash-jt-status" style="font-size:0.8125rem;color:var(--pf-t--global--text--color--subtle);">Loading&hellip;</span>
            </div>
            <div class="pf-v6-c-card__body" style="padding:0;">
                <div style="padding:0.625rem 1.25rem;border-bottom:1px solid var(--pf-t--global--border--color--default);">
                    <label style="display:flex;align-items:center;gap:0.5rem;font-size:0.8125rem;cursor:pointer;color:var(--pf-t--global--text--color--subtle);">
                        <input type="checkbox" id="dash-jt-claw-only"> Show only AnsibleClaw templates
                    </label>
                </div>
                <div style="overflow-x:auto;">
                    <table class="pf-v6-c-table pf-m-grid-md" role="grid" style="font-size:0.875rem;">
                        <thead><tr>
                            <th style="padding:0.75rem 1.25rem;">Name</th>
                            <th style="padding:0.75rem 1rem;">Project</th>
                            <th style="padding:0.75rem 1rem;width:1%;"></th>
                        </tr></thead>
                        <tbody id="dash-jt-body">
                            <tr><td colspan="3" style="text-align:center;padding:2rem 1rem;color:var(--pf-t--global--text--color--subtle);">Loading&hellip;</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
{% endif %}

{# --- Settings Form Card (collapsible) --- #}
<div class="pf-v6-c-card" style="margin-bottom:1.5rem;">
    <div class="pf-v6-c-card__header" style="cursor:pointer;padding:1rem 1.25rem;" onclick="var b=document.getElementById('settings-body');var a=document.getElementById('settings-arrow');if(b.style.display==='none'){b.style.display='';a.textContent='\u25BC';}else{b.style.display='none';a.textContent='\u25B6';}">
        <h3 class="pf-v6-c-card__header-main" style="margin:0;display:flex;align-items:center;gap:0.5rem;font-size:1.05rem;">
            <span id="settings-arrow" style="font-size:0.75rem;">{% if aap_configured %}&#9654;{% else %}&#9660;{% endif %}</span>
            Controller Settings
        </h3>
    </div>
    <div class="pf-v6-c-card__body" id="settings-body" {% if aap_configured %}style="display:none;"{% endif %}>
        <form id="aap-settings-form"
              hx-post="/aap/settings"
              hx-target="#aap-settings-result"
              hx-swap="innerHTML"
              hx-indicator="#aap-save-spinner">

            {# Controller URL #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="aap-url">
                    <span class="pf-v6-c-form__label-text">Controller URL</span>
                    <span class="pf-v6-c-form__label-required" aria-hidden="true">*</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <input type="url" id="aap-url" name="url"
                           value="{{ aap_settings.url }}"
                           placeholder="https://aap.example.com">
                </span>
                {% if aap_sources.url == "env" %}
                <small class="pf-v6-c-helper-text__item" style="color:var(--pf-t--global--text--color--subtle);">
                    Currently set via <code>AAP_CONTROLLER_URL</code> env var (takes precedence)
                </small>
                {% endif %}
            </div>

            {# Token #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="aap-token">
                    <span class="pf-v6-c-form__label-text">Token</span>
                    <span class="pf-v6-c-form__label-required" aria-hidden="true">*</span>
                </label>
                <div style="display:flex;gap:0.5rem;align-items:center;">
                    <span class="pf-v6-c-form-control" style="flex:1;">
                        <input type="password" id="aap-token" name="token"
                               value="{{ aap_settings.token }}"
                               placeholder="OAuth2 bearer token"
                               autocomplete="off">
                    </span>
                    <button type="button" class="pf-v6-c-button pf-m-plain"
                            onclick="var t=document.getElementById('aap-token'); t.type = t.type==='password' ? 'text' : 'password'; this.textContent = t.type==='password' ? 'Show' : 'Hide';"
                            style="white-space:nowrap;">Show</button>
                </div>
                {% if aap_sources.token == "env" %}
                <small class="pf-v6-c-helper-text__item" style="color:var(--pf-t--global--text--color--subtle);">
                    Currently set via <code>AAP_CONTROLLER_TOKEN</code> env var (takes precedence)
                </small>
                {% endif %}
                <small class="pf-v6-c-helper-text__item" style="color:var(--pf-t--global--text--color--subtle);display:block;">
                    Generate a token in AAP under <strong>Users</strong> &rarr; your user &rarr; <strong>Tokens</strong> &rarr; <strong>Add</strong> (leave Application blank, set Scope to Write).
                </small>
            </div>

            {# Verify SSL #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label">
                    <span class="pf-v6-c-form__label-text">Verify SSL</span>
                </label>
                <label style="display:flex;align-items:center;gap:0.5rem;cursor:pointer;">
                    <input type="checkbox" name="verify_ssl" value="true"
                           {{ "checked" if aap_settings.verify_ssl in ("true", "1", "yes") else "" }}>
                    <span>Verify TLS certificates (disable for self-signed certs)</span>
                </label>
            </div>

            <hr style="margin:1rem 0;border-color:var(--pf-t--global--border--color--default);">
            <p style="margin:0 0 0.75rem;font-weight:600;font-size:0.875rem;color:var(--pf-t--global--text--color--subtle);">
                Defaults (optional)
            </p>

            {# Default Project #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.5rem;">
                <label class="pf-v6-c-form__label" for="aap-default-project">
                    <span class="pf-v6-c-form__label-text">Default Project</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <select id="aap-default-project" name="default_project">
                        <option value="{{ aap_settings.default_project }}" selected>
                            {{ aap_settings.default_project or "-- not set --" }}
                        </option>
                    </select>
                </span>
            </div>

            <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;">
                <button type="button" class="pf-v6-c-button pf-m-link pf-m-small" id="btn-refresh-aap"
                        onclick="refreshFromAAP()">
                    &#x21bb; Refresh from AAP
                </button>
                <span id="aap-defaults-status" style="font-size:0.8125rem;"></span>
            </div>

            {# Git Repo URL #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;" id="git-repo-group">
                <label class="pf-v6-c-form__label">
                    <span class="pf-v6-c-form__label-text">Git Repo URL</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <input type="text" id="aap-git-repo-url" name="default_scm_url" readonly
                           value="{{ aap_settings.default_scm_url }}"
                           placeholder="Select a project above"
                           style="background:var(--pf-t--global--background--color--secondary--default);cursor:default;">
                </span>
                <small class="pf-v6-c-helper-text__item" style="color:var(--pf-t--global--text--color--subtle);display:block;margin-top:0.25rem;">
                    SCM URL from the selected AAP project (saved with <strong>Save &amp; Test Connection</strong>). Playbooks are pushed here during deploy.
                </small>
                {% if aap_sources.default_scm_url == "env" %}
                <small class="pf-v6-c-helper-text__item" style="color:var(--pf-t--global--text--color--subtle);display:block;">
                    Active value may come from <code>AAP_DEFAULT_SCM_URL</code> env var.
                </small>
                {% endif %}
            </div>

            {# Default Organization #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="aap-default-org">
                    <span class="pf-v6-c-form__label-text">Default Organization</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <select id="aap-default-org" name="default_organization">
                        <option value="{{ aap_settings.default_organization }}" selected>
                            {{ aap_settings.default_organization or "-- not set --" }}
                        </option>
                    </select>
                </span>
            </div>

            {# Default Inventory #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="aap-default-inventory">
                    <span class="pf-v6-c-form__label-text">Default Inventory</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <select id="aap-default-inventory" name="default_inventory">
                        <option value="{{ aap_settings.default_inventory }}" selected>
                            {{ aap_settings.default_inventory or "-- not set --" }}
                        </option>
                    </select>
                </span>
            </div>

            {# Default Credential #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="aap-default-credential">
                    <span class="pf-v6-c-form__label-text">Default Credential</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <select id="aap-default-credential" name="default_credential">
                        <option value="{{ aap_settings.default_credential }}" selected>
                            {{ aap_settings.default_credential or "-- not set --" }}
                        </option>
                    </select>
                </span>
            </div>

            {# Default EE #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="aap-default-ee">
                    <span class="pf-v6-c-form__label-text">Default Execution Environment</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <select id="aap-default-ee" name="default_ee">
                        <option value="{{ aap_settings.default_ee }}" selected>
                            {{ aap_settings.default_ee or "-- not set --" }}
                        </option>
                    </select>
                </span>
            </div>

            {# Job Template name prefix #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="aap-jt-prefix">
                    <span class="pf-v6-c-form__label-text">Job Template name prefix</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <input type="text" id="aap-jt-prefix" name="job_template_prefix"
                           value="{{ aap_settings.job_template_prefix }}"
                           placeholder="AnsibleClaw: ">
                </span>
                <small class="pf-v6-c-helper-text__item" style="color:var(--pf-t--global--text--color--subtle);display:block;margin-top:0.25rem;">
                    Prepended to every Job Template name created by <strong>Deploy to AAP</strong> so admins can tell automation from manual JTs. Leave empty for no prefix.
                </small>
                {% if aap_sources.job_template_prefix == "env" %}
                <small class="pf-v6-c-helper-text__item" style="color:var(--pf-t--global--text--color--subtle);display:block;">
                    Overridden by <code>ANSIBLECLAW_JOB_TEMPLATE_PREFIX</code> env var.
                </small>
                {% endif %}
            </div>

            {# Save button #}
            <div style="display:flex;gap:0.75rem;align-items:center;margin-top:1rem;">
                <button type="submit" class="pf-v6-c-button pf-m-primary">
                    Save &amp; Test Connection
                </button>
                <span id="aap-save-spinner" class="htmx-indicator" aria-busy="true">Saving...</span>
            </div>
        </form>

        <div id="aap-settings-result" style="margin-top:1rem;"></div>

        <p style="margin-top:1rem;font-size:0.8125rem;color:var(--pf-t--global--text--color--subtle);">
            Settings are saved to <code>.ansibleclaw.yml</code> in the project root.
            Environment variables (<code>AAP_CONTROLLER_URL</code>, <code>AAP_CONTROLLER_TOKEN</code>,
            <code>ANSIBLECLAW_JOB_TEMPLATE_PREFIX</code>, etc.) take precedence when set.
        </p>
    </div>
</div>

<script>
/* ------------------------------------------------------------------ */
/* Streamed AAP connectivity test                                     */
/* ------------------------------------------------------------------ */
function runAapPingStream() {
    var card = document.getElementById('aap-ping-card');
    var resultDiv = document.getElementById('aap-ping-result');
    var btn = document.getElementById('btn-aap-test-connection');
    if (!resultDiv || !btn) return;
    card.style.display = '';
    resultDiv.innerHTML = '';
    btn.disabled = true;

    fetch('/aap/ping-stream')
        .then(function(response) {
            var reader = response.body.getReader();
            var decoder = new TextDecoder();
            function pump() {
                return reader.read().then(function(r) {
                    if (r.done) {
                        btn.disabled = false;
                        return;
                    }
                    resultDiv.innerHTML += decoder.decode(r.value, { stream: true });
                    resultDiv.scrollTop = resultDiv.scrollHeight;
                    return pump();
                });
            }
            return pump();
        })
        .catch(function() {
            resultDiv.innerHTML = '<span class="ac-error">Failed to reach server</span>';
            btn.disabled = false;
        });
}

(function() {
    var tbtn = document.getElementById('btn-aap-test-connection');
    if (tbtn) tbtn.addEventListener('click', runAapPingStream);
})();

/* ------------------------------------------------------------------ */
/* Dashboard: resource summary, projects table, JT table              */
/* ------------------------------------------------------------------ */
var _dashJTs = [];

function _escHtml(s) {
    var d = document.createElement('div');
    d.textContent = s;
    return d.innerHTML;
}

function _statusBadge(status) {
    var colors = {
        successful: 'var(--pf-t--global--color--status--success--default)',
        failed: 'var(--pf-t--global--color--status--danger--default)',
        error: 'var(--pf-t--global--color--status--danger--default)',
        pending: 'var(--pf-t--global--color--status--info--default)',
        running: 'var(--pf-t--global--color--status--info--default)',
        never_updated: 'var(--pf-t--global--text--color--subtle)',
    };
    var c = colors[status] || 'var(--pf-t--global--text--color--subtle)';
    var label = (status || 'unknown').replace(/_/g, ' ');
    return '<span style="display:inline-flex;align-items:center;gap:0.35rem;font-size:0.875rem;">'
         + '<span style="color:' + c + ';font-size:0.65rem;">&#9679;</span> ' + label + '</span>';
}

function renderProjectsTable(projects) {
    var body = document.getElementById('dash-projects-body');
    var status = document.getElementById('dash-project-status');
    if (!body) return;
    if (projects.length === 0) {
        body.innerHTML = '<tr><td colspan="2" style="text-align:center;padding:2.5rem 1rem;color:var(--pf-t--global--text--color--subtle);">No projects found</td></tr>';
        status.textContent = '0 projects';
        return;
    }
    status.textContent = projects.length + ' project' + (projects.length !== 1 ? 's' : '');
    var html = '';
    for (var i = 0; i < projects.length; i++) {
        var p = projects[i];
        var scm = p.scm_url
            ? '<div style="font-size:0.8em;color:var(--pf-t--global--text--color--subtle);margin-top:0.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22rem;"><code>' + _escHtml(p.scm_url) + '</code></div>'
            : '';
        html += '<tr>'
             +  '<td style="padding:0.75rem 1.25rem;"><strong>' + _escHtml(p.name) + '</strong>' + scm + '</td>'
             +  '<td style="padding:0.75rem 1rem;"><a href="' + _escHtml(p.url) + '" target="_blank" class="pf-v6-c-button pf-m-link pf-m-small pf-m-inline" style="white-space:nowrap;">Open&nbsp;&nearr;</a></td>'
             +  '</tr>';
    }
    body.innerHTML = html;
}

function renderJTTable(jts, clawOnly) {
    var body = document.getElementById('dash-jt-body');
    var status = document.getElementById('dash-jt-status');
    if (!body) return;

    var filtered = clawOnly ? jts.filter(function(j) { return j.is_claw; }) : jts;
    var clawCount = jts.filter(function(j) { return j.is_claw; }).length;
    status.textContent = filtered.length + ' of ' + jts.length + ' template' + (jts.length !== 1 ? 's' : '')
                       + (clawCount ? ' (' + clawCount + ' by AnsibleClaw)' : '');

    if (filtered.length === 0) {
        body.innerHTML = '<tr><td colspan="3" style="text-align:center;padding:2.5rem 1rem;color:var(--pf-t--global--text--color--subtle);">'
                       + (clawOnly ? 'No AnsibleClaw templates found' : 'No job templates found')
                       + '</td></tr>';
        return;
    }
    var html = '';
    for (var i = 0; i < filtered.length; i++) {
        var jt = filtered[i];
        var badge = jt.is_claw
            ? ' <span style="background:var(--pf-t--global--color--brand--default);color:#fff;font-size:0.7em;padding:0.15em 0.5em;border-radius:0.25rem;vertical-align:middle;margin-left:0.35rem;">Claw</span>'
            : '';
        html += '<tr>'
             +  '<td style="padding:0.75rem 1.25rem;"><strong>' + _escHtml(jt.name) + '</strong>' + badge + '</td>'
             +  '<td style="padding:0.75rem 1rem;color:var(--pf-t--global--text--color--subtle);">' + _escHtml(jt.project_name || '\u2014') + '</td>'
             +  '<td style="padding:0.75rem 1rem;"><a href="' + _escHtml(jt.url) + '" target="_blank" class="pf-v6-c-button pf-m-link pf-m-small pf-m-inline" style="white-space:nowrap;">Open&nbsp;&nearr;</a></td>'
             +  '</tr>';
    }
    body.innerHTML = html;
}

function loadDashboard(callback) {
    fetch('/api/aap/dashboard')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.error) {
                document.getElementById('dash-project-status').innerHTML = '<span class="ac-error">' + data.error + '</span>';
                if (callback) callback();
                return;
            }
            document.getElementById('dash-project-count').textContent = (data.projects || []).length;
            document.getElementById('dash-jt-count').textContent = (data.job_templates || []).length;
            document.getElementById('dash-inv-count').textContent = data.inventory_count || 0;
            document.getElementById('dash-ee-count').textContent = data.ee_count || 0;
            document.getElementById('dash-cred-count').textContent = data.credential_count || 0;

            renderProjectsTable(data.projects || []);

            _dashJTs = data.job_templates || [];
            var cb = document.getElementById('dash-jt-claw-only');
            renderJTTable(_dashJTs, cb && cb.checked);
            if (callback) callback();
        })
        .catch(function() {
            var s = document.getElementById('dash-project-status');
            if (s) s.innerHTML = '<span class="ac-error">Failed to load dashboard</span>';
            if (callback) callback();
        });
}

function syncDashboard(btn) {
    if (btn) btn.disabled = true;
    var icon = btn ? btn.querySelector('.ac-sync-icon') : null;
    if (icon) icon.style.animation = 'ac-spin 0.8s linear infinite';
    loadDashboard(function() {
        if (btn) btn.disabled = false;
        if (icon) icon.style.animation = '';
    });
}

(function() {
    var section = document.getElementById('aap-dashboard-section');
    if (section) loadDashboard();

    var cb = document.getElementById('dash-jt-claw-only');
    if (cb) cb.addEventListener('change', function() {
        renderJTTable(_dashJTs, cb.checked);
    });
})();

/* ------------------------------------------------------------------ */
/* Shared helpers                                                     */
/* ------------------------------------------------------------------ */
function populateSelect(selectId, items, autoSelectName) {
    var sel = document.getElementById(selectId);
    if (!sel) return;
    var currentVal = sel.value;
    sel.innerHTML = '';

    var empty = document.createElement('option');
    empty.value = '';
    empty.textContent = '-- not set --';
    sel.appendChild(empty);

    var target = (autoSelectName || '').toLowerCase();
    var matched = false;
    for (var i = 0; i < items.length; i++) {
        var opt = document.createElement('option');
        opt.value = items[i].name;
        opt.textContent = items[i].name;
        if (items[i].id !== undefined) opt.setAttribute('data-id', items[i].id);
        if (items[i].name === currentVal || items[i].name.toLowerCase() === target) {
            opt.selected = true;
            matched = true;
        }
        sel.appendChild(opt);
    }
    if (!matched && currentVal) {
        for (var j = 0; j < sel.options.length; j++) {
            if (sel.options[j].value === currentVal) {
                sel.options[j].selected = true;
                break;
            }
        }
    }
}

function clearDependentFields() {
    ['aap-default-org', 'aap-default-inventory', 'aap-default-credential', 'aap-default-ee'].forEach(function(id) {
        var sel = document.getElementById(id);
        if (sel) { sel.innerHTML = ''; var o = document.createElement('option'); o.value = ''; o.textContent = '-- not set --'; sel.appendChild(o); }
    });
    var repo = document.getElementById('aap-git-repo-url');
    if (repo) repo.value = '';
}

function saveForm(callback) {
    var form = document.getElementById('aap-settings-form');
    if (!form) return;
    fetch('/aap/settings', { method: 'POST', body: new FormData(form) })
        .then(function(r) { return r.text(); })
        .then(function(html) {
            var result = document.getElementById('aap-settings-result');
            if (result) result.innerHTML = html;
            if (callback) callback();
        })
        .catch(function() { if (callback) callback(); });
}

/* ------------------------------------------------------------------ */
/* Phase 1: Refresh — save URL+Token, fetch projects only             */
/* ------------------------------------------------------------------ */
function refreshFromAAP() {
    var status = document.getElementById('aap-defaults-status');
    var btn = document.getElementById('btn-refresh-aap');
    if (btn) btn.disabled = true;
    status.innerHTML = '<span style="color:var(--pf-t--global--text--color--subtle);">Saving connection settings\u2026</span>';

    var form = document.getElementById('aap-settings-form');
    if (!form) return;

    fetch('/aap/settings', { method: 'POST', body: new FormData(form) })
        .then(function(r) { return r.text(); })
        .then(function(html) {
            var result = document.getElementById('aap-settings-result');
            if (result) result.innerHTML = html;

            status.innerHTML = '<span style="color:var(--pf-t--global--text--color--subtle);">Fetching projects from AAP\u2026</span>';
            return fetch('/api/aap/projects-list');
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (btn) btn.disabled = false;
            if (data.error) {
                status.innerHTML = '<span class="ac-warning">\u26a0 ' + data.error + '</span>';
                return;
            }
            populateSelect('aap-default-project', data.items || [], '');
            clearDependentFields();
            var projSel = document.getElementById('aap-default-project');
            if (projSel && projSel.value) {
                var opt = projSel.options[projSel.selectedIndex];
                if (opt && opt.getAttribute('data-id')) {
                    onProjectSelected();
                    return;
                }
            }
            var count = (data.items || []).length;
            status.innerHTML = '<span class="ac-success">\u2713 ' + count + ' project' + (count !== 1 ? 's' : '') + ' loaded. Select one to populate the remaining fields.</span>';
        })
        .catch(function() {
            status.innerHTML = '<span class="ac-warning">\u26a0 Failed to reach server</span>';
            if (btn) btn.disabled = false;
        });
}

/* ------------------------------------------------------------------ */
/* Phase 2: Project selected — fetch context and auto-populate        */
/* ------------------------------------------------------------------ */
function onProjectSelected() {
    var projSel = document.getElementById('aap-default-project');
    var status = document.getElementById('aap-defaults-status');
    if (!projSel || !projSel.value) return;

    var selected = projSel.options[projSel.selectedIndex];
    var projectId = selected.getAttribute('data-id');
    if (!projectId) return;

    status.innerHTML = '<span style="color:var(--pf-t--global--text--color--subtle);">Loading project details\u2026</span>';

    fetch('/api/aap/project-context/' + projectId)
        .then(function(r) { return r.json(); })
        .then(function(ctx) {
            if (ctx.error) {
                status.innerHTML = '<span class="ac-warning">\u26a0 ' + ctx.error + '</span>';
                return;
            }

            var repo = document.getElementById('aap-git-repo-url');
            if (repo) repo.value = (ctx.project && ctx.project.scm_url) || '';

            var failed = [];
            var fields = [
                { id: 'aap-default-org',        key: 'organizations',           autoName: ctx.organization_name, label: 'Organizations' },
                { id: 'aap-default-inventory',   key: 'inventories',             autoName: '',                    label: 'Inventories' },
                { id: 'aap-default-credential',  key: 'credentials',             autoName: '',                    label: 'Credentials' },
                { id: 'aap-default-ee',          key: 'execution_environments',  autoName: ctx.ee_name || '',     label: 'EEs' },
            ];
            fields.forEach(function(f) {
                var d = ctx[f.key] || {};
                if (d.error) { failed.push(f.label); return; }
                populateSelect(f.id, d.items || [], f.autoName);
            });

            var parts = ['<span class="ac-success">\u2713 Defaults populated</span>'];
            if (failed.length) parts.push('<span class="ac-warning">\u26a0 ' + failed.join(', ') + ' unavailable</span>');
            status.innerHTML = parts.join(' &nbsp; ');

            saveForm(function() {
                status.innerHTML += ' &nbsp; <span class="ac-success">\u2713 Saved</span>';
                if (!failed.length) setTimeout(function(){ status.innerHTML = ''; }, 5000);
            });
        })
        .catch(function() {
            status.innerHTML = '<span class="ac-warning">\u26a0 Failed to load project context</span>';
        });
}

(function() {
    var projSel = document.getElementById('aap-default-project');
    if (projSel) projSel.addEventListener('change', onProjectSelected);
})();
</script>
{% endblock %}