{% extends "dcim/interface.html" %}
{% load helpers %}
{% load static %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title d-flex align-items-center">Interface Live Data
            {% if has_permission != False %}
                <img id="id_wait_for_jobexecution" src="{% static 'img/ajax-loader.gif' %}" alt="Loading..." style="width: 1.5em; height: 1.5em; vertical-align: left; margin-left: 20px;">
            {% endif %}
        </h3>
        {% if has_permission != False %}
            <div id="id_livedata-info" style="margin-left: 20px;">
                Fetching live data from the device. Please wait...
            </div>
        {% endif %}
    </div>
    <div class="card-body">
        <input type="hidden" id="jobresult-pk" name="jobresult-pk" value="">
        <input type="hidden" id="jobresult-response" name="jobresult-response" value="">
        <input type="hidden" id="results" name="results" value="">
        {% if has_permission == True %}
            <div id="id_refresh_live_interface_data"></div>
        {% else %}
            <div class="alert alert-warning" role="alert">
                <p>Permission denied to fetch live data.</p>
                <p>Ask your administrator to grant permission to fetch live data</p>
                <ul>
                    <li>dcim.can_interact for device content type</li>
                    <li>extras.run_job</li>
                </ul>
            </div>
        {% endif %}
    </div>
</div>
{% endblock content %}

{% block javascript %}
{{ block.super }}
{% if has_permission != False %}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const csrftoken = '{{ csrf_token }}';
            var jobresultPk = document.getElementById("jobresult-pk").value;

            function handleHttpError(response) {
                if (!response.ok) {
                    switch (response.status) {
                        case 403:
                            throw new Error('Permission denied (403). You do not have the permission "can_interact" for "dcim.device". Contact your administrator.');
                        case 404:
                            throw new Error('Resource not found (404). The requested interface may not exist.');
                        case 500:
                            throw new Error('Server error (500). Please try again later.');
                        case 502:
                        case 503:
                            throw new Error('Service unavailable. The server is temporarily down.');
                        default:
                            throw new Error(`HTTP Error ${response.status}: ${response.statusText}`);
                    }
                }
                return response;
            }

            function displayError(message) {
                document.getElementById("id_wait_for_jobexecution").style.display = 'none';
                document.getElementById("id_refresh_live_interface_data").innerHTML = `
                    <div class="alert alert-danger" role="alert">
                        <strong>Error:</strong> ${message}
                    </div>`;
            }

            if (jobresultPk === "") {
                fetch("{% url 'plugins-api:nautobot_app_livedata-api:livedata-query-intf-api' pk=object.pk %}", {
                    method: 'GET',
                    headers: {
                        'X-CSRFToken': csrftoken,
                    },
                })
                .then(handleHttpError)
                .then(response => response.json())
                .then(data => {
                    jobresultPk = data.jobresult_id;
                    document.getElementById("jobresult-pk").value = data.jobresult_id;
                    document.getElementById("id_livedata-info").innerHTML = `
                        <div class="text-end">
                            <a href='/extras/job-results/${data.jobresult_id}/' target='_blank' class="btn btn-info btn-sm">
                                Show Job Result
                            </a>
                        </div>`;
                })
                .catch(error => {
                    console.error('Error fetching live data:', error);
                    displayError(error.message);
                });
            }

            // Timer to check jobresult-pk and fetch job result
            const intervalId = setInterval(function() {
                if (document.getElementById("jobresult-pk").value === "") {
                    return;
                }
                const jobresultPk = document.getElementById("jobresult-pk").value;
                if (jobresultPk) {
                    fetch(`/api/extras/job-results/${jobresultPk}/`, {
                        method: 'GET',
                        headers: {
                            'X-CSRFToken': csrftoken,
                        },
                    })
                    .then(handleHttpError)
                    .then(response => response.json())
                    .then(jobResultData => {
                        if (jobResultData.status.value === "SUCCESS") {
                            document.getElementById("jobresult-response").value = JSON.stringify(jobResultData);
                            if (jobResultData.result) {
                                let resultContent = "";
                                jobResultData.result.forEach(result => {
                                    resultContent += `<p><pre><strong style="font-size: 1.4em;">${result.command}</strong><br><span style="font-size: 1.2em;">${result.stdout}</span></pre>`;
                                    if (result.stderr) {
                                        resultContent += `<pre><strong style="font-size: 1.4em;">Error: </strong><span style="font-size: 1.2em;">${result.stderr}</span></pre>`;
                                    }
                                });
                                document.getElementById("id_wait_for_jobexecution").style.display = 'none';
                                document.getElementById("id_refresh_live_interface_data").innerHTML = resultContent;
                                clearInterval(intervalId);
                            }
                        } else if (jobResultData.status.value === "STARTED" || jobResultData.status.value === "RUNNING" || jobResultData.status.value === "PENDING") {
                            // Show job result button when job is in progress
                            document.getElementById("id_livedata-info").innerHTML = `
                                <div class="text-end">
                                    <a href='/extras/job-results/${jobresultPk}/' target='_blank' class="btn btn-info btn-sm">
                                        Show Job Result
                                    </a>
                                </div>`;
                        } else if (jobResultData.status.value === "FAILURE") {
                            displayError("Failed to fetch live data from the device.");
                            clearInterval(intervalId);
                        } else if (jobResultData.status.value === "REVOKED") {
                            displayError("Job was cancelled or revoked.");
                            clearInterval(intervalId);
                        }
                        // Continue polling for PENDING, STARTED, RUNNING states
                    })
                    .catch(error => {
                        console.error('Error fetching job result:', error);
                        displayError(error.message);
                        clearInterval(intervalId);
                    });
                }
            }, 3000);
        });
    </script>
{% endif %}
{% endblock javascript %}