{% comment %}Shared countdown banner - handles both active_countdown and maintenance_countdown{% endcomment %}
{% load i18n static %}
{% if active_countdown or maintenance_countdown %}
    <link rel="stylesheet" type="text/css" href="{% static 'django_countdown/scss/countdown.css' %}"/>

    {% if active_countdown %}
        {# Regular countdown banner - shown to all users before maintenance starts #}
        <div class="countdown-banner hide-on-print">
            <div class="countdown-content">
                <span class="countdown-icon fi-alert"></span>
                <div class="countdown-text">
                    <div class="countdown-message">{{ active_countdown.message }}</div>
                    <div class="countdown-line">
                        {% trans "Scheduled maintenance is planned. The system will stop responding in:" %}
                        <span class="countdown-timer" id="countdown-timer"
                              data-target-time="{{ active_countdown.countdown_time.isoformat }}">
                            {% trans "Counting down…" %}
                        </span>
                    </div>
                    <div class="countdown-line countdown-line--strong">
                        {% trans "You can keep working, but remember to save your data regularly." %}
                        {% if active_countdown.maintenance_until %}
                            <br>
                            <span class="maintenance-duration">
                                {% blocktrans with minutes=active_countdown.maintenance_duration_minutes %}Estimated maintenance duration: {{ minutes }} minutes (actual time may vary).{% endblocktrans %}
                            </span>
                        {% else %}
                            <br>
                            <span class="maintenance-duration">
                                {% trans "Maintenance duration: indefinite — the site will stay blocked until an administrator unblocks it." %}
                            </span>
                        {% endif %}
                    </div>
                </div>
                <span class="countdown-icon fi-alert"></span>
            </div>
        </div>
    {% endif %}

    {% if maintenance_countdown %}
        {# Maintenance countdown banner - shown only to superusers during maintenance #}
        <div class="maintenance-banner hide-on-print">
            <div class="countdown-content">
                <span class="countdown-icon fi-wrench"></span>
                <span class="countdown-message">
                    {% blocktrans with msg=maintenance_countdown.message %}System under maintenance — {{ msg }}{% endblocktrans %}
                </span>
                {% if maintenance_countdown.maintenance_until %}
                    <span class="countdown-timer" id="maintenance-timer"
                          data-target-time="{{ maintenance_countdown.maintenance_until.isoformat }}">
                        {% trans "Counting down…" %}
                    </span>
                {% else %}
                    <span class="countdown-timer countdown-timer--indefinite">
                        {% trans "Indefinite — remove the countdown to unblock the site." %}
                    </span>
                {% endif %}
            </div>
        </div>
    {% endif %}

    <script>
        (function() {
            if (document.getElementById('grp-header')) {
                document.body.classList.add('has-countdown-banner');
            }

            var labels = {
                days: "{% trans 'days' %}",
                hours: "{% trans 'h' %}",
                minutes: "{% trans 'min' %}",
                seconds: "{% trans 'sec' %}",
                maintenanceRunning: "{% trans 'Maintenance running — page will refresh shortly' %}",
                maintenanceEnded: "{% trans 'Maintenance finished — please refresh' %}",
                endsIn: "{% trans 'Ends in:' %}"
            };

            function formatDistance(distance) {
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                var parts = [];
                if (days > 0) parts.push(days + " " + labels.days);
                if (hours > 0) parts.push(hours + " " + labels.hours);
                if (minutes > 0) parts.push(minutes + " " + labels.minutes);
                if (seconds >= 0) parts.push(seconds + " " + labels.seconds);
                return parts.join(" ");
            }

            {% if active_countdown %}
            var countdownTime = new Date("{{ active_countdown.countdown_time.isoformat }}").getTime();
            var timerElement = document.getElementById('countdown-timer');
            var regularCountdownInterval = null;

            function updateCountdown() {
                var now = new Date().getTime();
                var distance = countdownTime - now;

                if (distance < 0) {
                    timerElement.textContent = labels.maintenanceRunning;
                    if (regularCountdownInterval) {
                        clearInterval(regularCountdownInterval);
                    }
                    setTimeout(function() { window.location.reload(); }, 3000);
                    return;
                }

                timerElement.textContent = formatDistance(distance);
            }

            updateCountdown();
            regularCountdownInterval = setInterval(updateCountdown, 1000);
            {% endif %}

            {% if maintenance_countdown and maintenance_countdown.maintenance_until %}
            var maintenanceUntil = new Date("{{ maintenance_countdown.maintenance_until.isoformat }}").getTime();
            var maintenanceTimerElement = document.getElementById('maintenance-timer');
            var maintenanceCountdownInterval = null;

            function updateMaintenanceCountdown() {
                var now = new Date().getTime();
                var distance = maintenanceUntil - now;

                if (distance < 0) {
                    maintenanceTimerElement.textContent = labels.maintenanceEnded;
                    if (maintenanceCountdownInterval) {
                        clearInterval(maintenanceCountdownInterval);
                    }
                    setTimeout(function() { window.location.reload(); }, 3000);
                    return;
                }

                maintenanceTimerElement.textContent = labels.endsIn + " " + formatDistance(distance);
            }

            updateMaintenanceCountdown();
            maintenanceCountdownInterval = setInterval(updateMaintenanceCountdown, 1000);
            {% endif %}
        })();
    </script>
{% endif %}