@namespace MidrandBooks.Components.Layout
@using Microsoft.AspNetCore.Components
@inject IJSRuntime JSRuntime

<dialog id="components-reconnect-modal" data-nosnippet class="fixed inset-0 w-screen h-screen m-0 p-0 border-0 bg-transparent z-[99999] overflow-hidden flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
    <!-- Dark Frosted Jacket Layer -->
    <div class="absolute inset-0 bg-slate-950/60 backdrop-blur-md cursor-wait z-[1] animate-in fade-in duration-300"></div>

    <!-- Centered Content Wrapper -->
    <div class="reconnect-content relative z-[2] flex flex-col items-center gap-6 text-center text-slate-100 max-w-sm px-6">

        <!-- Waveform Animation -->
        <svg class="waveform-svg text-violet-400" viewBox="0 0 54 50" width="60" height="60" xmlns="http://www.w3.org/2000/svg">
            <rect class="bar bar-1" x="2" y="15" width="4" height="20" rx="2" fill="currentColor" />
            <rect class="bar bar-2" x="14" y="5" width="4" height="40" rx="2" fill="currentColor" />
            <rect class="bar bar-3" x="26" y="20" width="4" height="10" rx="2" fill="currentColor" />
            <rect class="bar bar-4" x="38" y="10" width="4" height="30" rx="2" fill="currentColor" />
            <rect class="bar bar-5" x="50" y="18" width="4" height="14" rx="2" fill="currentColor" />
        </svg>

        <!-- Message Body -->
        <div class="sync-message-body font-mono uppercase text-xs tracking-widest text-slate-300 space-y-2">
            <span class="components-reconnect-first-attempt-visible hidden">
                Losing signal...
            </span>

            <span class="components-reconnect-repeated-attempt-visible hidden">
                reconnecting in <span id="components-seconds-to-next-attempt" class="font-bold text-violet-400">0</span>s...
            </span>

            <span class="components-reconnect-failed-visible text-rose-400 font-semibold hidden">
                Playback disconnected.
            </span>

            <span class="components-pause-visible hidden">
                Reading layout paused.
            </span>

            <span class="components-resume-failed-visible text-rose-400 font-semibold hidden">
                State alignment broken.
            </span>
        </div>

        <!-- Glass Action Buttons -->
        <div class="sync-action-node flex items-center justify-center gap-3">
            <button id="components-reconnect-button" class="btn-glass-action hidden px-4 py-2.5 bg-white/5 border border-white/10 hover:bg-white/10 text-white font-mono uppercase text-[10px] tracking-widest rounded-xl transition-all items-center gap-2 cursor-pointer shadow-lg hover:scale-102 hover:border-violet-500/30">
                <span>Retry Sync</span>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67" />
                </svg>
            </button>
            <button id="components-resume-button" class="btn-glass-action hidden px-4 py-2.5 bg-white/5 border border-white/10 hover:bg-white/10 text-white font-mono uppercase text-[10px] tracking-widest rounded-xl transition-all items-center gap-2 cursor-pointer shadow-lg hover:scale-102 hover:border-violet-500/30">
                <span>Reload Session</span>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="23 4 23 10 17 10"></polyline>
                    <polyline points="1 20 1 14 7 14"></polyline>
                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                </svg>
            </button>
        </div>

    </div>
</dialog>

<style>
/* --- Show the modal smoothly when Blazor attaches state classes --- */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    opacity: 1 !important;
    pointer-events: all !important;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none !important;
}

/* --- SVG Waveform Animation --- */
#components-reconnect-modal .bar {
    transform-origin: center;
    animation: reconnectWavePulse 1.2s ease-in-out infinite alternate;
}

#components-reconnect-modal .bar-1 { animation-delay: 0.0s; }
#components-reconnect-modal .bar-2 { animation-delay: 0.3s; }
#components-reconnect-modal .bar-3 { animation-delay: 0.6s; }
#components-reconnect-modal .bar-4 { animation-delay: 0.2s; }
#components-reconnect-modal .bar-5 { animation-delay: 0.5s; }

@@keyframes reconnectWavePulse {
    0% {
        transform: scaleY(0.3);
        opacity: 0.5;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* Stop the waveform if the connection completely fails */
#components-reconnect-modal.components-reconnect-failed .bar,
#components-reconnect-modal.components-reconnect-rejected .bar,
#components-reconnect-modal.components-reconnect-paused .bar {
    animation: none !important;
    transform: scaleY(0.1) !important;
    opacity: 0.3 !important;
}

/* --- Display Mechanics Matrix Controllers --- */
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: inline-block !important;
}

#components-reconnect-modal.components-reconnect-failed .btn-glass-action,
#components-reconnect-modal.components-reconnect-paused .btn-glass-action,
#components-reconnect-modal.components-reconnect-resume-failed .btn-glass-action {
    display: inline-flex !important;
}
</style>

<script>
(function() {
    function initReconnectModal() {
        const reconnectModal = document.getElementById("components-reconnect-modal");
        if (!reconnectModal) {
            setTimeout(initReconnectModal, 100);
            return;
        }

        reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);

        const retryButton = document.getElementById("components-reconnect-button");
        if (retryButton) {
            retryButton.addEventListener("click", retry);
        }

        const resumeButton = document.getElementById("components-resume-button");
        if (resumeButton) {
            resumeButton.addEventListener("click", resume);
        }

        function handleReconnectStateChanged(event) {
            if (event.detail.state === "show") {
                reconnectModal.showModal();
            } else if (event.detail.state === "hide") {
                reconnectModal.close();
            } else if (event.detail.state === "failed") {
                document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
            } else if (event.detail.state === "rejected") {
                location.reload();
            }
        }

        async function retry() {
            document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);

            try {
                if (window.Blazor) {
                    const successful = await window.Blazor.reconnect();
                    if (!successful) {
                        const resumeSuccessful = await window.Blazor.resumeCircuit();
                        if (!resumeSuccessful) {
                            location.reload();
                        } else {
                            reconnectModal.close();
                        }
                    }
                }
            } catch (err) {
                document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
            }
        }

        async function resume() {
            try {
                if (window.Blazor) {
                    const successful = await window.Blazor.resumeCircuit();
                    if (!successful) {
                        location.reload();
                    }
                }
            } catch {
                reconnectModal.classList.replace("components-reconnect-paused", "components-reconnect-resume-failed");
            }
        }

        async function retryWhenDocumentBecomesVisible() {
            if (document.visibilityState === "visible") {
                await retry();
            }
        }
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", initReconnectModal);
    } else {
        initReconnectModal();
    }
})();
</script>