{% load lb_tags %}
{% load static %}

<c-vars
    :noGlobalCSS="False"
    :datastar="False"
    setThemeEndpoint=""
/>

{% if not noGlobalCSS %}
    {% lb_css_path as css_path %}
    <link rel="stylesheet" href="{% static css_path %}">
{% endif %}

{% comment %}
CSRF helper — used by reactive write actions (c-lbr.post/delete) and the theme
endpoint. Defined once whenever the reactive bundle loads (datastar prop OR a body
component pushed datastar.js onto the stack) or a theme endpoint is set.
{% endcomment %}
{% lb_stack_has "components" "labb/js/vendor/datastar.js" as lbr_bundle_active %}
{% if datastar or lbr_bundle_active or setThemeEndpoint %}
<script>
function labbGetCSRFToken() {
    const csrfInput = document.querySelector('input[name="csrfmiddlewaretoken"]');
    if (csrfInput?.value) return csrfInput.value;
    const match = document.cookie.split(';').map(c => c.trim()).find(c => c.startsWith('csrftoken='));
    return match ? decodeURIComponent(match.slice(10)) : '';
}
</script>
{% endif %}

{% if setThemeEndpoint %}
{{ setThemeEndpoint|json_script:"labb-set-theme-endpoint" }}
<script>

const LABB_THEME_COOKIE = 'labb_theme';
const LABB_THEME_ENDPOINT = JSON.parse(
    document.getElementById('labb-set-theme-endpoint').textContent
);

function labbWriteThemeCookie(theme) {
    document.cookie = LABB_THEME_COOKIE + '=' + encodeURIComponent(theme)
        + ';path=/;max-age=31536000;samesite=lax';
}

function labbReadThemeCookie() {
    const prefix = LABB_THEME_COOKIE + '=';
    const match = document.cookie.split(';').map(c => c.trim()).find(c => c.startsWith(prefix));
    return match ? decodeURIComponent(match.slice(prefix.length)) : null;
}

document.addEventListener('DOMContentLoaded', function () {
    const currentTheme = document.documentElement.getAttribute('data-theme') || '__system__';
    const controllers = document.querySelectorAll('input[type="checkbox"].theme-controller, input[type="radio"].theme-controller');

    function setTheme(theme) {
        if (theme && theme !== '__system__') {
            document.documentElement.setAttribute('data-theme', theme);
        } else {
            document.documentElement.removeAttribute('data-theme');
        }
    }

    // Keep every theme-controller group in sync with the active theme. daisyUI
    // applies themes globally via :root:has(.theme-controller:checked); if a page
    // has two groups (e.g. the topnav toggle and a demo strip) and they hold
    // different checked values, both :has() rules match and fight. Reflecting the
    // chosen theme in all controllers leaves exactly one value checked page-wide.
    function syncControllers(theme) {
        controllers.forEach(function (c) {
            c.checked = c.type === 'checkbox'
                ? (theme !== '__system__' && c.value === theme)
                : c.value === theme;
        });
    }

    function revert(controller) {
        setTheme(currentTheme);
        labbWriteThemeCookie(currentTheme);
        if (controller.type === 'checkbox') {
            controller.checked = !controller.checked;
        } else {
            const selector = 'input[type="radio"].theme-controller'
                + '[value="' + CSS.escape(currentTheme) + '"]';
            const original = document.querySelector(selector);
            if (original) original.checked = true;
        }
    }

    window.addEventListener('pageshow', function (event) {
        const shown = document.documentElement.getAttribute('data-theme') || '__system__';
        const theme = event.persisted ? (labbReadThemeCookie() || shown) : shown;
        if (theme !== shown) setTheme(theme);
        syncControllers(theme);
    });

    controllers.forEach(function (controller) {
        controller.checked = controller.value === currentTheme;

        controller.addEventListener('change', function () {
            const newTheme = this.type === 'checkbox'
                ? (this.checked ? this.value : '__system__')
                : this.value;

            setTheme(newTheme);
            syncControllers(newTheme);
            labbWriteThemeCookie(newTheme);

            fetch(LABB_THEME_ENDPOINT, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': labbGetCSRFToken(),
                },
                body: 'theme=' + encodeURIComponent(newTheme),
            })
            .then(r => r.json())
            .then(data => { if (!data.success) revert(this); })
            .catch(() => revert(this));
        });
    });
});
</script>
{% endif %}

{% if datastar %}
{% lb_push_stack name="components" path="labb/js/lb-schema.js" mode="src" %}
{% lb_push_stack name="components" path="labb/js/vendor/datastar.js" mode="module" %}
{% endif %}

{% lb_load_stack name="components" %}

{{ slot }}