{# Reusable AAP deployment form.
   Required context:
     deploy_target    – "skill" or "collection"
     deploy_name      – skill name or collection FQCN
     collection_fqcn  – (optional) collection FQCN for EE warning
     deploy_action    – POST URL (e.g. /api/aap/deploy-skill)
     aap_configured   – bool, injected by middleware
#}
<div class="pf-v6-c-card" style="margin-top:1rem;" id="aap-deploy-card">
    <div class="pf-v6-c-card__header">
        <h3 class="pf-v6-c-card__header-main" style="margin:0;">Deploy to AAP</h3>
    </div>
    <div class="pf-v6-c-card__body">

        <div style="margin-bottom:1rem;padding:0.75rem 1rem;border-radius:var(--pf-t--global--border--radius--small);background:var(--pf-t--global--background--color--secondary--default);border-left:4px solid var(--pf-t--global--color--brand--default);">
            <p style="margin:0 0 0.25rem;font-weight:600;">
                {% if aap_configured %}
                &#9989; AAP Controller connected
                {% else %}
                Production deployment path
                {% endif %}
            </p>
            <p style="margin:0;font-size:0.875rem;color:var(--pf-t--global--text--color--subtle);">
                {% if aap_configured %}
                Deploying this {% if deploy_target == "collection" %}collection{% else %}skill{% endif %} will create
                {% if deploy_target == "collection" %}one Job Template per module skill{% else %}a Job Template{% endif %}
                in your AAP Controller{% if jt_name_prefix is defined and jt_name_prefix %}, each named with prefix <code>{{ jt_name_prefix }}</code>{% endif %}.
                Playbooks are automatically pushed to the
                selected Project's git repo and synced before the Job Template is created.
                {% else %}
                Ansible Automation Platform (AAP) is the recommended way to run generated skills in production.
                <span style="display:block;margin-top:0.5rem;">
                    Visit the <a href="/aap">AAP settings page</a> to configure your controller connection.
                </span>
                {% endif %}
            </p>
        </div>

        {% if aap_configured %}
        <form id="aap-deploy-form" action="{{ deploy_action }}" method="POST">
            {% if deploy_target == "skill" %}
            <input type="hidden" name="skill_name" value="{{ deploy_name }}">
            {% elif deploy_target == "collection" %}
            <input type="hidden" name="collection" value="{{ deploy_name }}">
            {% endif %}
            {% if collection_fqcn %}
            <input type="hidden" name="collection_fqcn" value="{{ collection_fqcn }}">
            {% endif %}

            {# Job Template Name (skill only) #}
            {% if deploy_target == "skill" %}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="jt-name">
                    <span class="pf-v6-c-form__label-text">Job Template Name</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <input type="text" id="jt-name" name="job_template_name"
                           value="{{ deploy_name | replace('_', '-') }}" required>
                </span>
                <small class="pf-v6-c-helper-text__item" style="color:var(--pf-t--global--text--color--subtle);margin-top:0.25rem;display:block;">
                    Created in AAP as
                    <code>{% if jt_name_prefix is defined and jt_name_prefix %}{{ jt_name_prefix }}{% endif %}{{ deploy_name | replace('_', '-') }}</code>
                    (change prefix on the <a href="/aap">AAP settings</a> page).
                </small>
            </div>
            {% endif %}

            {# Project #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="aap-project">
                    <span class="pf-v6-c-form__label-text">Project</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <select id="aap-project" name="project_id" required>
                        <option value="">Loading...</option>
                    </select>
                </span>
                <small class="pf-v6-c-helper-text__item" style="color:var(--pf-t--global--text--color--subtle);margin-top:0.25rem;display:block;">
                    The playbook will be pushed to this Project's git repo automatically.
                    Ensure AnsibleClaw has write access (SSH key or HTTPS credentials).
                </small>
            </div>

            {# Playbook Path #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="playbook-path">
                    <span class="pf-v6-c-form__label-text">Playbook Path (in Project repo)</span>
                </label>
                <span class="pf-v6-c-form-control">
                    {% if deploy_target == "skill" %}
                    <input type="text" id="playbook-path" name="playbook_path"
                           value="skills/{{ deploy_name }}/assets/playbook.yml" required>
                    {% else %}
                    <input type="text" id="playbook-path" name="playbook_path"
                           value="" placeholder="(leave empty for default paths)">
                    {% endif %}
                </span>
            </div>

            {# Execution Environment #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="aap-ee">
                    <span class="pf-v6-c-form__label-text">Execution Environment</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <select id="aap-ee" name="ee_id">
                        <option value="">Loading...</option>
                    </select>
                </span>
                {% if collection_fqcn %}
                <small class="pf-v6-c-helper-text__item" style="color:var(--pf-t--global--text--color--subtle);margin-top:0.25rem;display:block;">
                    Ensure the selected EE includes <code>{{ collection_fqcn }}</code>
                </small>
                {% endif %}
            </div>

            {# Inventory #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="aap-inventory">
                    <span class="pf-v6-c-form__label-text">Inventory</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <select id="aap-inventory" name="inventory_id">
                        <option value="">Loading...</option>
                    </select>
                </span>
            </div>

            {# Credential #}
            <div class="pf-v6-c-form__group" style="margin-bottom:0.75rem;">
                <label class="pf-v6-c-form__label" for="aap-credential">
                    <span class="pf-v6-c-form__label-text">Credential (Machine)</span>
                </label>
                <span class="pf-v6-c-form-control">
                    <select id="aap-credential" name="credential_id">
                        <option value="">Loading...</option>
                    </select>
                </span>
            </div>

            <div style="display:flex;gap:0.5rem;align-items:center;">
                <button type="submit" class="pf-v6-c-button pf-m-primary" id="btn-aap-deploy">
                    {% if deploy_target == "collection" %}Deploy Collection to AAP{% else %}Deploy to AAP{% endif %}
                </button>
            </div>
        </form>

        <div id="aap-deploy-result" class="ac-aap-stream-result"></div>
        {% endif %}

    </div>
</div>

{% if aap_configured %}
<script>
(function() {
    function populateSelect(selectId, data) {
        var sel = document.getElementById(selectId);
        if (!sel) return;
        sel.innerHTML = '';
        if (data.error) {
            sel.innerHTML = '<option value="">Error: ' + data.error + '</option>';
            return;
        }
        var items = data.items || [];
        var defaultName = (data.default || '').toLowerCase();
        if (selectId !== 'aap-project') {
            var empty = document.createElement('option');
            empty.value = '';
            empty.textContent = '-- none --';
            sel.appendChild(empty);
        }
        for (var i = 0; i < items.length; i++) {
            var opt = document.createElement('option');
            opt.value = items[i].id;
            opt.textContent = items[i].name;
            if (items[i].name.toLowerCase() === defaultName) {
                opt.selected = true;
            }
            sel.appendChild(opt);
        }
    }

    fetch('/api/aap/resources')
        .then(function(r) { return r.json(); })
        .then(function(all) {
            populateSelect('aap-project', all.projects || {});
            populateSelect('aap-ee', all.execution_environments || {});
            populateSelect('aap-inventory', all.inventories || {});
            populateSelect('aap-credential', all.credentials || {});
        })
        .catch(function() {
            ['aap-project','aap-ee','aap-inventory','aap-credential'].forEach(function(id) {
                var s = document.getElementById(id);
                if (s) s.innerHTML = '<option value="">Failed to load</option>';
            });
        });

    var form = document.getElementById('aap-deploy-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            var resultDiv = document.getElementById('aap-deploy-result');
            var btn = document.getElementById('btn-aap-deploy');
            btn.disabled = true;
            resultDiv.innerHTML = '';

            fetch(form.action, { method: 'POST', body: new FormData(form) })
                .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;
                });
        });
    }
})();
</script>
{% endif %}