<script setup>
import {NLayout, NLayoutHeader, NEl, NAlert, NSpin, NText} from "naive-ui";
import AppHeader from "./Components/AppHeader.vue";
import {useGlobalLoading} from "../Composables/useGlobalLoading.js";
import AppDialogManager from "../Components/AppDialogManager.vue";
import Noise from "../Components/Noise.vue";
import { useThemeVars } from "naive-ui";
import { computed } from "vue";
import Tour from "../Components/Tour/Tour.vue";
import AiAskWidget from "../Components/Ai/AiAskWidget.vue";
import { usePage } from "@inertiajs/vue3";

const {isGlobalLoading} = useGlobalLoading()
const themeVars = useThemeVars()

const pageProps = usePage().props

const blobBg = computed(() => {
    const p = themeVars.value.primaryColor
    const w = themeVars.value.warningColor
    const i = themeVars.value.infoColor
    return [
        `radial-gradient(circle 12vw at 50% -4%, color-mix(in srgb, ${p} 22%, transparent), transparent 100%)`,
        `radial-gradient(circle 16vw at 102% 52%, color-mix(in srgb, ${w} 24%, transparent), transparent 100%)`,
        `radial-gradient(circle 16vw at -4% 102%, color-mix(in srgb, ${i} 22%, transparent), transparent 100%)`,
    ].join(', ')
})
</script>

<template>
    <Noise />
    <AppDialogManager />
    <NLayout position="absolute">

        <NLayoutHeader style="height: 48px;" bordered>
            <AppHeader>
                <template #headerExtra>
                    <slot name="headerExtra" />
                </template>

                <template #headerSuffix>
                    <slot name="headerSuffix" />
                </template>
            </AppHeader>
        </NLayoutHeader>

        <Transition name="wait-alert">
            <NEl
                v-if="isGlobalLoading"
                class="wait-layer pointer-events-none fixed inset-x-0 top-[56px] z-[2600] flex justify-center px-3"
            >
                <NAlert
                    type="info"
                    :show-icon="false"
                    class="wait-banner w-full max-w-md"
                    style="
                            --n-color: color-mix(in srgb, var(--info-color) 12%, transparent);
                            --n-border: 1px solid color-mix(in srgb, var(--info-color) 36%, transparent);
                        "
                >
                    <div class="flex items-center justify-center gap-2.5 text-[13px] leading-none">
                        <NSpin :size="14" />
                        <NText depth="1" class="tracking-[0.1px]">Подождите, загружаем данные…</NText>
                    </div>
                </NAlert>
            </NEl>
        </Transition>

        <NEl class="pointer-events-none fixed inset-x-0 top-12 bottom-0 z-0">
            <div class="absolute inset-0" :style="`background: ${blobBg};`" />
            <div class="grid-overlay absolute inset-0 opacity-65" />
        </NEl>

        <NLayout
            has-sider
            position="absolute"
            class="top-12! bottom-0! relative overflow-hidden z-10"
            content-class="relative z-10"
            :native-scrollbar="false"
            style="--n-color: transparent;"
        >
            <!--                <NLayoutSider-->
            <!--                    :native-scrollbar="false"-->
            <!--                    width="290"-->
            <!--                    class="h-[100vh-48px]!"-->
            <!--                >-->
            <!--                    <SideMenu />-->
            <!--                </NLayoutSider>-->

            <NLayout style="--n-color: transparent;">
                <div>
                    <slot name="header" />
                </div>
                <slot />
            </NLayout>
        </NLayout>

    </NLayout>
    <AiAskWidget :period-start="pageProps.date ? pageProps.date[0] : null" :period-end="pageProps.date ? pageProps.date[1] : null" />
    <Tour />
</template>

<style scoped>
.wait-alert-enter-active,
.wait-alert-leave-active {
    transition: all 0.2s ease;
}

.wait-alert-enter-from,
.wait-alert-leave-to {
    opacity: 0;
    transform: translateY(-6px);
}

.wait-banner {
    box-shadow:
        0 10px 24px -18px color-mix(in srgb, var(--info-color) 55%, transparent),
        0 4px 12px -10px rgb(0 0 0 / 55%);
    backdrop-filter: blur(10px);
    border-radius: 10px;
}

:deep(.wait-banner .n-alert-body) {
    padding: 8px 12px;
}

:deep(.wait-banner .n-spin-body) {
    width: 14px;
    height: 14px;
}

/* If a modal is open, keep loading alert in modal visual context (not behind it). */
:global(body:has(.n-modal-container)) .wait-layer {
    top: 24px;
}
</style>
