{% extends 'generic/_base.html' %}
{% load buttons %}
{% load helpers %}
{% load render_table from django_tables2 %}
{% load i18n %}

{% block title %}{% trans "Ingestion Logs" %}{% endblock %}

{% block content %}

{% if netbox_to_diode_user_error %}
<div class="alert alert-danger mt-3" role="alert">
    <h4 class="alert-heading">{% trans "Error" %}</h4>
    <p>{{ netbox_to_diode_user_error }}</p>
</div>
{% elif ingestion_logs_error %}
<div class="alert alert-danger mt-3" role="alert">
    <h4 class="alert-heading">{% trans "Error" %}</h4>
    <p>{{ ingestion_logs_error.status_code }}: {{ ingestion_logs_error.details }}</p>
</div>
{% else %}
<div>
    <div class="row mb-3">
        <div class="col col-md-12">
            <div class="card p-3">
                <div class="row d-flex flex-wrap justify-content-evenly">
                    <div class="w-auto p-0">
                        <canvas id="ingestions-queued"></canvas>
                        <div class="text-center metric-label">Queued</div>
                    </div>
                    <div class="w-auto p-0">
                        <canvas id="ingestions-reconciled"></canvas>
                        <div class="text-center metric-label">Changes</div>
                    </div>
                    <div class="w-auto p-0">
                        <canvas id="ingestions-failed"></canvas>
                        <div class="text-center metric-label">Failed</div>
                    </div>
                    <div class="w-auto p-0">
                        <canvas id="ingestions-no-changes"></canvas>
                        <div class="text-center metric-label">No Changes</div>
                    </div>
                    <div class="w-auto p-0">
                        <canvas id="ingestions-total"></canvas>
                        <div class="text-center metric-label">Total</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col col-md-12">
            <div class="card">
                <div class="table-responsive">
                    {% render_table ingestion_logs_table 'diode/ingestion_logs_table.html' %}
                    {% if ingestion_logs_table.data %}
                        {% include 'diode/ingestion_logs_paginator.html' with next_page_token=next_page_token total_count=total_count %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function drawGauge(ctx, value, color) {
        const pixelRatio = window.devicePixelRatio || 1;
        const width = ctx.canvas.parentElement.querySelector('div.metric-label').clientWidth;
        const height = width/2;

        // Scale the canvas
        ctx.canvas.width = width * pixelRatio;
        ctx.canvas.height = height * pixelRatio;
        ctx.canvas.style.width = `${width}px`;
        ctx.canvas.style.height = `${height}px`;
        ctx.scale(pixelRatio, pixelRatio);

        const startAngle = Math.PI;
        const endAngle = 2 * Math.PI;
        const radius = 80;
        const centerX = width / 2;
        const centerY = height;
        const totalIngestions = {{ ingestion_metrics.total }};

        // Clear the canvas
        ctx.clearRect(0, 0, width, height);

        // Draw the background arc
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, startAngle, endAngle);
        ctx.lineWidth = 20;
        ctx.strokeStyle = '#e0e0e0';
        ctx.stroke();

        // Draw the foreground arc
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, startAngle, startAngle + (value / totalIngestions) * Math.PI);
        ctx.lineWidth = 20;
        ctx.strokeStyle = color || '#007bff';
        ctx.stroke();

        // Detect dark mode
        const body = document.querySelector('body');
        const isDarkMode = body.hasAttribute('data-bs-theme') && body.getAttribute('data-bs-theme') === 'dark';

        // Draw the text
        ctx.font = '18px Arial';
        ctx.fillStyle = isDarkMode ? '#FFF' : '#000';
        ctx.textAlign = 'center';
        ctx.fillText(value, centerX, centerY - 10);
    }

    document.addEventListener('DOMContentLoaded', function() {
        function redrawMetrics() {
            drawGauge(document.getElementById('ingestions-queued').getContext('2d'), {{ ingestion_metrics.queued }}, '#FFFF00');
            drawGauge(document.getElementById('ingestions-reconciled').getContext('2d'), {{ ingestion_metrics.reconciled }}, '#4CAF50');
            drawGauge(document.getElementById('ingestions-failed').getContext('2d'), {{ ingestion_metrics.failed }}, '#FF0000');
            drawGauge(document.getElementById('ingestions-no-changes').getContext('2d'), {{ ingestion_metrics.no_changes }}, '#40E0D0');
            drawGauge(document.getElementById('ingestions-total').getContext('2d'), {{ ingestion_metrics.total }}, '#0D6EFD');
        }

        redrawMetrics()

        // Observe changes to the data-bs-theme attribute on the body tag
        const body = document.querySelector('body');
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.attributeName === 'data-bs-theme') {
                    redrawMetrics();
                }
            });
        });

        observer.observe(body, { attributes: true });
        window.addEventListener('resize', function() {
            redrawMetrics()
        });
    });
</script>
{% endif %}

{% endblock content %}