---
import type { MarkdownHeading } from "astro";
import { Icon } from "astro-icon/components";

import { siteConfig } from "@/config";
import {
    BANNER_HEIGHT,
    MAIN_PANEL_OVERLAPS_BANNER_HEIGHT,
} from "@constants/constants";
import { widgetManager } from "@utils/widget";
import IconifyLoader from "@components/common/iconifyLoader.astro";
import Navbar from "@components/navbar.astro";
import FullscreenWallpaper from "@components/fullscreenWallpaper.astro";
import Banner from "@components/banner.astro";
import Sidebar from "@components/sidebar.astro";
import Footer from "@components/footer.astro";
import TocButton from "@components/tocButton.astro";
import BackToTopButton from "@components/back2TopButton.astro";
import BaseLayout from "./base.astro";
import "@styles/grid.css";

/**
 * Wallpaper
 */

interface Props {
    title?: string;
    banner?: string;
    description?: string;
    lang?: string;
    setOGTypeArticle?: boolean;
    postSlug?: string;
    headings?: MarkdownHeading[];
}

const {
    title,
    banner,
    description,
    lang,
    setOGTypeArticle,
    postSlug,
    headings = [],
} = Astro.props;
const hasBannerCredit = siteConfig.wallpaper.mode === "banner" && siteConfig.wallpaper.banner?.credit?.enable;
const hasBannerLink = !!siteConfig.wallpaper.banner?.credit?.url;

// 检查是否为首页
const isHomePage = Astro.url.pathname === "/" || Astro.url.pathname === "";

// 计算主内容区域位置
const mainPanelTop = siteConfig.wallpaper.mode === "banner"
    ? `calc(${BANNER_HEIGHT}vh - ${MAIN_PANEL_OVERLAPS_BANNER_HEIGHT}rem)`
    : "5.5rem";

// 当banner被禁用时，主内容区域应该始终从顶栏下面开始
const finalMainPanelTop = siteConfig.wallpaper.mode === "banner" ? mainPanelTop : "5.5rem";

// 检查是否应该启用半透明效果
const shouldEnableTransparency = siteConfig.wallpaper.mode === "banner" || siteConfig.wallpaper.mode === "fullscreen";

// 为组件添加半透明效果的CSS类
const transparentClass = shouldEnableTransparency ? "wallpaper-transparent" : "";

/**
 * Sidebar
 */

// 检查侧边栏是否启用，动态调整网格布局
const {
    hasLeftSidebar,
    hasRightSidebar,
    hasAnyComponents,
    gridCols,
    leftSidebarClass,
    rightSidebarClass,
    mainContentClass,
    mobileFooterClass,
    middleSidebarClass,
} = widgetManager.getGridLayout(headings);
---

<BaseLayout
    title={title}
    banner={banner}
    description={description}
    lang={lang}
    setOGTypeArticle={setOGTypeArticle}
    postSlug={postSlug}
>
    <!-- 全局图标加载器 -->
    <IconifyLoader />

    <!-- Navbar -->
    <slot slot="head" name="head" />
    <div
        id="top-row"
        class="z-50 pointer-events-none relative transition-all duration-600 max-w-(--page-width) px-0 md:px-4 mx-auto"
        class:list={[""]}
    >
        <div
            id="navbar-wrapper"
            class="pointer-events-auto sticky top-0 transition-all"
        >
            <Navbar />
        </div>
    </div>

    <!-- 全屏壁纸 - 总是渲染但通过CSS控制可见性 -->
    <FullscreenWallpaper
        config={siteConfig.wallpaper}
        class={siteConfig.wallpaper.mode === "fullscreen" ? "" : "hidden"}
    />

    <!-- 为全屏壁纸模式添加body类 -->
    {
        shouldEnableTransparency && (
            <script>
                document.body.classList.add('wallpaper-transparent');
            </script>
        )
    }

    <!-- Banner - 总是渲染但通过CSS控制可见性 -->
    <Banner
        config={siteConfig.wallpaper}
        isHomePage={isHomePage}
        class={siteConfig.wallpaper.mode === "banner" ? "" : "hidden"}
    />

    <!-- Main content -->
    <div
        class={`absolute w-full z-30 pointer-events-none transition-all duration-600 ${siteConfig.wallpaper.mode !== "banner" ? "no-banner-layout" : ""} ${transparentClass}`}
        style={`top: ${finalMainPanelTop}`}
    >
        <div
            class="relative max-w-(--page-width) mx-auto pointer-events-auto"
        >
            <div
                    id="main-grid"
                    class={`transition-all duration-600 w-full left-0 right-0 grid ${gridCols} grid-rows-[auto] mx-auto gap-4 px-0 md:px-4 ${!hasAnyComponents ? "mobile-no-sidebar" : ""} ${(hasLeftSidebar || hasRightSidebar) ? "mobile-both-sidebar" : ""}`}
                >
                <!-- Banner image credit -->
                {
                    hasBannerCredit && (
                        <a
                            href={siteConfig.wallpaper.banner?.credit?.url}
                            id="banner-credit"
                            target="_blank"
                            rel="noopener"
                            aria-label="Visit image source"
                            class:list={[
                                "group onload-animation-up transition-all absolute flex justify-center items-center rounded-full " +
                                    "px-3 right-4 -top-13 bg-black/60 hover:bg-black/70 h-9",
                                {
                                    "hover:pr-9 active:bg-black/80":
                                        hasBannerLink,
                                },
                            ]}
                        >
                            <Icon
                                class="text-white/75 text-[1.25rem] mr-1"
                                name="material-symbols:copyright-outline-rounded"
                            />
                            <div class="text-white/75 text-xs">
                                {siteConfig.wallpaper.banner?.credit?.text}
                            </div>
                            <Icon
                                class:list={[
                                    "transition absolute text-[oklch(0.75_0.14_var(--hue))] right-4 text-[0.75rem] opacity-0",
                                    {
                                        "group-hover:opacity-100":
                                            hasBannerLink,
                                    },
                                ]}
                                name="fa6-solid:arrow-up-right-from-square"
                            />
                        </a>
                    )
                }

                <div class="contents lg:contents md:flex md:flex-col md:col-start-1 md:row-start-1 md:gap-4">
                    {
                        hasLeftSidebar ? (
                            <Sidebar
                                id="left-sidebar"
                                side="left"
                                class={`${leftSidebarClass} ${transparentClass} onload-animation-up`}
                                headings={headings}
                            />
                        ) : (
                            <div id="left-sidebar" class="hidden"></div>
                        )
                    }
                    {
                        hasRightSidebar ? (
                            <Sidebar
                                id="right-sidebar"
                                side="right"
                                class={`${rightSidebarClass} ${transparentClass} onload-animation-up`}
                                headings={headings}
                            />
                        ) : (
                            <div id="right-sidebar" class="hidden"></div>
                        )
                    }
                </div>

                <main
                    id="swup-container"
                    class={`${mainContentClass} transition-swup-fade`}
                >
                    <div id="grid-class-carrier" data-grid-class={gridCols} class="hidden"></div>
                    <div
                        id="content-wrapper"
                        class="onload-animation-up transition-leaving"
                    >
                        <slot />
                        <div
                            class="footer col-span-2 onload-animation-up hidden lg:block transition-swup-fade"
                        >
                            <Footer />
                        </div>
                    </div>
                </main>

                <div class={middleSidebarClass}>
                    <Sidebar
                        id="mobile-sidebar"
                        side="middle"
                        class={`${transparentClass} onload-animation-up`}
                        headings={headings}
                    />
                </div>

                <div class={mobileFooterClass}>
                    <Footer />
                </div>

            </div>
        </div>
    </div>

    <TocButton />

    <BackToTopButton />

</BaseLayout>