{% load static %}
{% if announcements %}
<div id="helpapp-announcement-root" class="helpapp-announcement-root">

    <!-- Floating button -->
    <button type="button" id="helpapp-announcement-toggle"
        class="fixed bottom-24 right-6 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-white border border-slate-200 text-slate-700 shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
        aria-haspopup="dialog" aria-expanded="false" aria-controls="helpapp-announcement-panel">
        🔔
        <span
            class="absolute -top-1 -right-1 inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-red-500 px-1 text-[11px] font-bold text-white">
            {{ announcements|length }}
        </span>
    </button>

    <!-- Slide-over panel -->
    <div id="helpapp-announcement-panel" role="dialog" aria-modal="true" aria-label="Announcements"
        class="fixed inset-y-0 right-0 z-50 w-full sm:w-96 bg-white shadow-2xl transform translate-x-full transition-transform duration-200 flex flex-col">

        <!-- Header -->
        <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200">
            <h2 class="font-semibold" style="color: var(--helpapp-primary)">
                🔔 Announcements
            </h2>

            <button type="button" id="helpapp-announcement-close"
                class="text-slate-400 hover:text-slate-600 text-xl leading-none" aria-label="Close announcements panel">
                &times;
            </button>
        </div>

        <!-- Content -->
        <div class="flex-1 overflow-y-auto px-5 py-4 space-y-4">

            {% for item in announcements %}
            <div class="rounded-2xl border p-4 shadow-sm {% if item.level == 'info' %}bg-blue-50 border-blue-200{% elif item.level == 'warning' %}bg-yellow-50 border-yellow-200{% elif item.level == 'success' %} bg-green-50 border-green-200 {% elif item.level == 'danger' %} bg-red-50 border-red-200 {% else %}bg-slate-50 border-slate-200{% endif %}">
                <div class="flex items-start justify-between">
                    <div>
                        <h3 class="mt-2 text-base font-bold text-slate-900">
                            {{ item.title }}
                        </h3>
                    </div>

                    {% if item.dismissible %}
                    <button class="announcement-close text-slate-400 hover:text-slate-700" data-id="{{ item.id }}">
                        ✕
                    </button>
                    {% endif %}
                </div>

                <div class="mt-3 prose prose-sm max-w-none text-slate-600">
                    {{ item.message|safe }}
                </div>

                {% if item.articles.exists %}
                <div class="mt-4 border-t border-slate-100 pt-3">
                    <h4 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
                        Related Articles
                    </h4>

                    <div class="space-y-1">
                        {% for article in item.articles.all %}
                        <a href="{{ article.get_absolute_url }}"
                            class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 transition {% if item.level == 'info' %}bg-blue-100 border-blue-200{% elif item.level == 'warning' %}bg-yellow-100 border-yellow-200{% elif item.level == 'success' %} bg-green-100 border-green-200 {% elif item.level == 'danger' %} bg-red-100 border-red-200 {% else %}bg-slate-100 border-slate-200{% endif %} hover:text-taupe-600">
                            📄 {{ article.title }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

            </div>
            {% endfor %}

        </div>
    </div>

    <!-- Backdrop -->
    <div id="helpapp-announcement-backdrop" class="fixed inset-0 bg-slate-900/30 z-40 hidden"></div>

</div>

<script>
    (function () {
        const toggle = document.getElementById("helpapp-announcement-toggle");
        const panel = document.getElementById("helpapp-announcement-panel");
        const closeBtn = document.getElementById("helpapp-announcement-close");
        const backdrop = document.getElementById("helpapp-announcement-backdrop");

        function openPanel() {
            panel.classList.remove("translate-x-full");
            backdrop.classList.remove("hidden");
            toggle.setAttribute("aria-expanded", "true");
        }

        function closePanel() {
            panel.classList.add("translate-x-full");
            backdrop.classList.add("hidden");
            toggle.setAttribute("aria-expanded", "false");
        }

        toggle.addEventListener("click", openPanel);
        closeBtn.addEventListener("click", closePanel);
        backdrop.addEventListener("click", closePanel);

        document.querySelectorAll(".announcement-close").forEach(function (btn) {
            btn.addEventListener("click", function () {
                const id = btn.dataset.id;
                localStorage.setItem("announcement_" + id, "hidden");
                btn.closest(".rounded-2xl").remove();
            });
        });
    })();
</script>
{% endif %}