---
import { siteConfig } from "@/config";
import { i18n } from "@i18n/translation";
import I18nKey from "@i18n/i18nKey";


const config = siteConfig.loadingOverlay;
const showOverlay = config?.enable ?? true;
const showSpinner = config?.spinner?.enable ?? true;
const showTitle = config?.title?.enable ?? true;
const titleContent = config?.title?.content ?? i18n(I18nKey.loading);
const spinnerInterval = config?.spinner?.interval ?? 1.5;
const titleInterval = config?.title?.interval ?? 1.5;
---

{showOverlay && (
<div
    id="loading-overlay"
    class="fixed inset-0 z-100 flex items-center justify-center bg-(--page-bg) transition-opacity duration-600"
>
    <div class="flex flex-col items-center">
        <!-- loading icon -->
        {showSpinner && <div class="loading-spinner mb-4"></div>}
        <!-- loading title -->
        {showTitle && (
        <div
            class="loading-title text-(--primary) font-medium tracking-widest"
        >
            {titleContent}
        </div>
        )}
    </div>
</div>
)}

<style define:vars={{ spinnerInterval: `${spinnerInterval}s`, titleInterval: `${titleInterval}s` }}>
    @keyframes spin {
        0% {
            rotate: 0deg;
        }
        100% {
            rotate: 360deg;
        }
    }
    @keyframes spinner-glow {
        0%,
        100% {
            box-shadow: 0 0 12px var(--primary);
            border-top-color: var(--primary);
        }
        50% {
            box-shadow: 0 0 24px var(--primary);
            border-top-color: var(--primary);
        }
    }
    .loading-spinner {
        width: 48px;
        height: 48px;
        border: 3px solid color-mix(in oklch, var(--primary) 10%, transparent);
        border-top: 3px solid var(--primary);
        border-radius: 50%;
        animation:
            spin var(--spinnerInterval) linear infinite,
            spinner-glow var(--spinnerInterval) ease-in-out infinite;
    }

    @keyframes text-glow {
        0%,
        100% {
            opacity: 0.6;
            text-shadow: 0 0 12px var(--primary);
        }
        50% {
            opacity: 1;
            text-shadow: 0 0 24px var(--primary);
        }
    }
    .loading-title {
        animation: text-glow var(--titleInterval) ease-in-out infinite;
    }

    /* 手动触发淡出类 */
    #loading-overlay.fade-out {
        opacity: 0;
        pointer-events: none;
    }

    /* 当 html 移除 is-loading 类时，确保 overlay 隐藏 */
    :global(html:not(.is-loading)) #loading-overlay {
        opacity: 0;
        pointer-events: none;
    }
</style>