---
interface Props {
    id: string;
    label: string;
    checked?: boolean;
    title?: string;
}

const { id, label, checked = false, title = "" } = Astro.props;
---

<button
    type="button"
    class:list={["tui-toggle", { active: checked }]}
    id={id}
    data-checked={checked ? "true" : "false"}
    title={title}
>
    <span class="tui-toggle-label">{label}</span>
</button>

<style>
    .tui-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid rgba(255, 103, 0, 0.3);
        color: var(--text-color);
        font-family: inherit;
        font-size: 11px;
        padding: 2px 8px;
        cursor: pointer;
        opacity: 0.5;
        transition: all 0.15s;
        user-select: none;
        min-width: 3ch;
        text-align: center;
    }

    .tui-toggle:hover {
        opacity: 0.8;
        background: rgba(255, 103, 0, 0.1);
    }

    .tui-toggle.active {
        background: var(--text-color);
        color: #000;
        opacity: 1;
        font-weight: bold;
        border-color: var(--text-color);
    }

    .tui-toggle-label {
        font-weight: bold;
    }
</style>

<script>
    // Use a WeakSet to track initialized toggles (prevents duplicate listeners)
    const initializedToggles = new WeakSet<Element>();

    function initToggles() {
        document.querySelectorAll(".tui-toggle").forEach((toggle) => {
            // Skip if already initialized
            if (initializedToggles.has(toggle)) return;
            initializedToggles.add(toggle);

            const btn = toggle as HTMLButtonElement;

            btn.addEventListener("click", function (e) {
                e.preventDefault();
                e.stopPropagation();

                const isChecked = this.dataset.checked === "true";
                const newState = !isChecked;

                // Update visual state
                this.dataset.checked = String(newState);
                this.classList.toggle("active", newState);

                // Dispatch custom event that bubbles
                this.dispatchEvent(
                    new CustomEvent("toggle-change", {
                        detail: { checked: newState },
                        bubbles: true,
                        composed: true,
                    }),
                );
            });
        });
    }

    // Initialize immediately and on DOMContentLoaded
    initToggles();
    document.addEventListener("DOMContentLoaded", initToggles);

    // Expose update function globally
    (window as any).updateToggleState = function (
        toggleId: string,
        newState: boolean,
    ) {
        const btn = document.getElementById(toggleId) as HTMLButtonElement;
        if (btn) {
            btn.dataset.checked = String(newState);
            btn.classList.toggle("active", newState);
        }
    };
</script>