{% extends 'mastery/base.html' %}
{% load i18n %}
{% load humanize %}
{% load l10n %}
{% load static %}
{% load skill_render %}

{% block details %}
<div class="container mt-4" id="mastery-skills-page">
    <div
        id="mastery-skills-messages"
        class="position-fixed bottom-0 end-0 p-3 d-flex flex-column gap-2"
        style="z-index: 1080; width: min(26rem, calc(100vw - 1rem));"
        aria-live="polite"
        aria-atomic="true"
    ></div>
    <div id="mastery-skills-editor">
        {% include "mastery/partials/fitting_skills_editor.html" %}
    </div>
</div>

<style>
    .skill-group-card {
        transition: transform 0.12s ease, box-shadow 0.12s ease;
    }

    .skill-group-card:hover {
        transform: translateY(-1px);
        box-shadow: var(--bs-box-shadow-sm);
    }

    .skill-group-card .group-table-wrap {
        max-height: 520px;
        overflow: auto;
    }

    .skill-group-card .group-skills-table th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .skill-group-card .group-skills-table .edit-rec-col {
        width: 190px;
        white-space: nowrap;
    }

    .rec-edit-form {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex-wrap: nowrap;
    }

    .rec-level-select {
        min-width: 108px;
        max-width: 108px;
    }

    .rec-set-btn {
        white-space: nowrap;
    }

    .skill-group-card .group-skills-table .is-blacklisted-row td {
        padding-top: 0.28rem;
        padding-bottom: 0.28rem;
    }

    .skill-group-card .group-skills-table .is-blacklisted-row .small {
        font-size: 0.76rem;
    }

    .skill-group-card .group-skills-table .skill-name-text {
        font-size: 0.88rem;
        line-height: 1.15;
    }

    .skill-group-card .group-skills-table .skill-title-row {
        margin-bottom: 0.2rem !important;
    }

    .skill-group-card .group-skills-table .skill-meta-row {
        font-size: 0.74rem;
        line-height: 1.1;
    }

    .skill-group-card .group-skills-table .skill-meta-badge {
        font-size: 0.68rem;
        font-weight: 600;
        padding: 0.22rem 0.4rem;
    }

    .skill-group-card .group-skills-table .skill-help-badge {
        font-size: 0.68rem;
        padding: 0.18rem 0.38rem;
    }

    .btn-icon {
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    @keyframes group-card-flash {
        0% {
            box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.45);
            transform: translateY(-1px);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
            transform: translateY(0);
        }
    }

    .skill-group-card.is-updated {
        animation: group-card-flash 0.9s ease-out;
    }

</style>

<script>
    (() => {
        const page = document.getElementById("mastery-skills-page");
        const editor = document.getElementById("mastery-skills-editor");
        const messages = document.getElementById("mastery-skills-messages");

        if (!page || !editor || !messages) {
            return;
        }

        const initTooltips = (root) => {
            if (!window.jQuery || !window.jQuery.fn || !window.jQuery.fn.tooltip) {
                return false;
            }

            const $root = window.jQuery(root || document);
            const $targets = $root.find('[data-bs-tooltip="aa-mastery"]');

            if ($root.is('[data-bs-tooltip="aa-mastery"]')) {
                $targets.add($root).tooltip();
                return true;
            }

            $targets.tooltip();
            return true;
        };

        const initTooltipsWhenReady = (root) => {
            if (initTooltips(root)) {
                return;
            }

            let attempts = 0;
            const maxAttempts = 20;

            const retry = () => {
                attempts += 1;
                if (initTooltips(root) || attempts >= maxAttempts) {
                    return;
                }

                window.setTimeout(retry, 100);
            };

            retry();
        };

        const renderFallbackMessage = (message, level = "danger") => {
            if (!message) {
                messages.innerHTML = "";
                return;
            }

            messages.innerHTML = `
                <div class="alert alert-${level} alert-dismissible fade show shadow-sm" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;
        };

        const setFormBusy = (form, isBusy) => {
            form.classList.toggle("opacity-75", isBusy);
            form.querySelectorAll("button, select, input, textarea").forEach((element) => {
                if (element.type === "hidden") {
                    return;
                }

                if (isBusy) {
                    element.dataset.ajaxWasDisabled = element.disabled ? "1" : "0";
                    element.disabled = true;
                    return;
                }

                const wasDisabled = element.dataset.ajaxWasDisabled === "1";
                if (!wasDisabled) {
                    element.disabled = false;
                }
                delete element.dataset.ajaxWasDisabled;
            });
        };

        const closeParentModal = (form) => {
            const modal = form.closest(".modal");
            if (!modal) {
                return;
            }

            modal.querySelector('[data-bs-dismiss="modal"]')?.click();
        };

        const dismissAlert = (alertElement) => {
            if (window.bootstrap && typeof window.bootstrap.Alert === "function") {
                window.bootstrap.Alert.getOrCreateInstance(alertElement).close();
                return;
            }
            alertElement.querySelector(".btn-close")?.click();
        };

        const scheduleAlertsDismiss = () => {
            messages.querySelectorAll(".alert").forEach((alertElement) => {
                window.setTimeout(() => {
                    if (messages.contains(alertElement)) {
                        dismissAlert(alertElement);
                    }
                }, 5000);
            });
        };

        const animateGroupCard = (groupKey) => {
            if (!groupKey) {
                return;
            }

            const groupContainer = editor.querySelector(`[data-group-key="${groupKey}"]`);
            const card = groupContainer ? groupContainer.querySelector(".skill-group-card") : null;
            if (!card) {
                return;
            }

            card.classList.remove("is-updated");
            // Force a reflow so the animation can replay after each refresh.
            void card.offsetWidth;
            card.classList.add("is-updated");
        };

        const submitForm = async (form) => {
            const formData = new FormData(form);
            const actionUrl = form.getAttribute("action") || form.action;
            const method = (form.getAttribute("method") || form.method || "POST").toUpperCase();
            const groupKey = formData.get("_group_key");

            if (!actionUrl) {
                renderFallbackMessage("Unable to determine the form action.", "danger");
                return;
            }

            setFormBusy(form, true);

            try {
                const response = await fetch(actionUrl, {
                    method,
                    body: formData,
                    credentials: "same-origin",
                    headers: {
                        "X-Requested-With": "XMLHttpRequest",
                        "Accept": "application/json",
                    },
                });

                const contentType = response.headers.get("content-type") || "";
                const payload = contentType.includes("application/json")
                    ? await response.json()
                    : null;

                if (!response.ok) {
                    renderFallbackMessage(
                        payload && payload.message ? payload.message : "Unable to update the fitting skills.",
                        "danger",
                    );
                    return;
                }

                closeParentModal(form);

                if (payload && typeof payload.html === "string") {
                    editor.innerHTML = payload.html;
                    initTooltipsWhenReady(editor);
                    animateGroupCard(groupKey);
                }

                if (payload && typeof payload.messages_html === "string") {
                    messages.innerHTML = payload.messages_html;
                    scheduleAlertsDismiss();
                } else if (payload && payload.message) {
                    renderFallbackMessage(payload.message, payload.message_level || "success");
                    scheduleAlertsDismiss();
                } else {
                    messages.innerHTML = "";
                }
            } catch (_error) {
                renderFallbackMessage("Unable to update the fitting skills.", "danger");
                scheduleAlertsDismiss();
            } finally {
                setFormBusy(form, false);
            }
        };

        page.addEventListener("submit", (event) => {
            const form = event.target;

            if (!(form instanceof HTMLFormElement)) {
                return;
            }

            if (!editor.contains(form)) {
                return;
            }

            const method = (form.getAttribute("method") || form.method || "GET").toUpperCase();
            if (method !== "POST") {
                return;
            }

            event.preventDefault();
            submitForm(form);
        });

        initTooltipsWhenReady(page);
    })();
</script>

{% endblock %}