---
import type { MarkdownHeading } from "astro";
import Profile from "@/components/content/Profile.astro";
import Advertisement from "@/components/widget/Advertisement.astro";
import Announcement from "@/components/widget/Announcement.astro";
import Calendar from "@/components/widget/Calendar.astro";
import Categories from "@/components/widget/Categories.astro";
import SidebarTOC from "@/components/widget/SidebarTOC.astro";
import SiteStats from "@/components/widget/SiteStats.astro";
import Tags from "@/components/widget/Tags.astro";
import type { WidgetComponentConfig } from "@/types/config";
import { widgetManager } from "@/utils/widget-manager";

interface Props {
	class?: string;
	headings?: MarkdownHeading[];
}

const { class: className, headings } = Astro.props;

// 获取配置的侧边栏位置
const sidebarPosition = widgetManager.getConfig().position;
const targetSidebar = sidebarPosition === "left" ? "left" : undefined;

// 获取配置的组件列表 - 根据 position 配置决定显示哪一侧
const topComponents = widgetManager.getComponentsByPosition(
	"top",
	targetSidebar,
);
const stickyComponents = widgetManager.getComponentsByPosition(
	"sticky",
	targetSidebar,
);

// 组件类型到ID的映射
const componentTypeToId = {
	stats: "site-stats",
	calendar: "calendar-widget",
	sidebarToc: "sidebar-toc",
	profile: "profile",
	announcement: "announcement",
	categories: "categories",
	tags: "tags",
	advertisement: "advertisement",
};

// 提取客户端需要的数据
const sidebarConfig = {
	shouldShowSidebar: {
		mobile: widgetManager.shouldShowSidebar("mobile"),
		tablet: widgetManager.shouldShowSidebar("tablet"),
		desktop: widgetManager.shouldShowSidebar("desktop"),
	},
	breakpoints: {
		mobile: 768,
		tablet: 1024,
		desktop: 1280,
	},
};

// 提取组件的 showOnPostPage 配置
const componentsConfig = (() => {
	const components =
		targetSidebar === "left"
			? widgetManager.getConfig().leftComponents
			: [
					...widgetManager.getConfig().leftComponents,
					...widgetManager.getConfig().rightComponents,
				];

	return components
		.filter((c) => c.enable)
		.map((c) => ({
			id: componentTypeToId[c.type as keyof typeof componentTypeToId],
			showOnPostPage: c.showOnPostPage ?? true,
		}));
})();

// 组件映射表
const componentMap = {
	profile: Profile,
	announcement: Announcement,
	categories: Categories,
	tags: Tags,
	sidebarToc: SidebarTOC,
	advertisement: Advertisement,
	stats: SiteStats,
	calendar: Calendar,
};

// 渲染组件的辅助函数
function renderComponent(
	component: WidgetComponentConfig,
	index: number,
	_components: WidgetComponentConfig[],
) {
	const ComponentToRender =
		componentMap[component.type as keyof typeof componentMap];
	if (!ComponentToRender) return null;

	// 使用配置的侧边栏位置，如果是 both 则默认为 left
	const sidebar = targetSidebar || "left";
	const componentClass = widgetManager.getComponentClass(
		component,
		sidebar,
		index,
	);
	const componentStyle = widgetManager.getComponentStyle(component, index);

	return {
		Component: ComponentToRender,
		props: {
			class: componentClass,
			style: componentStyle,
			headings: headings ?? [],
			configId: component.configId, // 传递configId给Advertisement组件
			...component.customProps,
		},
	};
}
---

<div id="sidebar" class:list={[className, "w-full"]}>
  <!-- 顶部固定组件区域 -->
  {
    topComponents.length > 0 && (
      <div class="flex flex-col w-full gap-4 mb-4">
        {topComponents.map((component, index) => {
          const renderData = renderComponent(component, index, topComponents);
          if (!renderData) return null;

          const { Component, props } = renderData;
          return <Component {...props} />;
        })}
      </div>
    )
  }

  <!-- 粘性组件区域 -->
  {
    stickyComponents.length > 0 && (
      <div
        id="sidebar-sticky"
        class="transition-all duration-700 flex flex-col w-full gap-4 sticky top-4"
      >
        {stickyComponents.map((component, index) => {
          const renderData = renderComponent(
            component,
            index,
            stickyComponents
          );
          if (!renderData) return null;

          const { Component, props } = renderData;
          return <Component {...props} />;
        })}
      </div>
    )
  }
</div>

<!-- 响应式样式和JavaScript -->
<style>
  /* 响应式断点样式 */
  @media (max-width: 768px) {
    #sidebar {
      display: var(--sidebar-mobile-display, block);
    }
  }

  @media (min-width: 769px) and (max-width: 1024px) {
    #sidebar {
      display: var(--sidebar-tablet-display, block);
    }
  }

  @media (min-width: 1025px) {
    #sidebar {
      display: var(--sidebar-desktop-display, block);
    }
  }
</style>

<script is:inline define:vars={{ sidebarConfig, componentsConfig }}>
  // 根据 showOnPostPage 配置控制组件显示
  function toggleComponentsVisibility() {
    const isPostPage = window.location.pathname.includes("/posts/");
    
    const sidebar = document.getElementById('sidebar');
    if (!sidebar) return;
    
    const widgets = sidebar.querySelectorAll('widget-layout');
    
    widgets.forEach((widget) => {
      const widgetId = widget.getAttribute('data-id');
      const componentConfig = componentsConfig.find(c => c.id === widgetId);
      
      if (componentConfig) {
        // 特殊处理：侧边栏TOC只在文章详情页显示
        if (widgetId === 'sidebar-toc') {
          widget.style.display = isPostPage ? '' : 'none';
        }
        // 其他组件的 showOnPostPage 含义：
        // true: 在文章页和非文章页都显示（默认行为）
        // false: 只在非文章页显示，文章页隐藏
        else if (isPostPage && !componentConfig.showOnPostPage) {
          widget.style.display = 'none';
        } else {
          widget.style.display = '';
        }
      }
    });
  }

  // 响应式布局管理
  class SidebarManager {
    constructor() {
      this.config = sidebarConfig;
      this.init();
    }

    init() {
      this.updateResponsiveDisplay();
      toggleComponentsVisibility();
      
      window.addEventListener("resize", () => this.updateResponsiveDisplay());

      // 监听SWUP内容替换事件
      if (typeof window !== "undefined" && window.swup) {
        window.swup.hooks.on("content:replace", () => {
          // 延迟执行以确保DOM已更新
          setTimeout(() => {
            this.updateResponsiveDisplay();
            toggleComponentsVisibility();
          }, 100);
        });
      }
    }

    updateResponsiveDisplay() {
      const breakpoints = this.config.breakpoints;
      const width = window.innerWidth;

      let deviceType;
      if (width < breakpoints.mobile) {
        deviceType = "mobile";
      } else if (width < breakpoints.tablet) {
        deviceType = "tablet";
      } else {
        deviceType = "desktop";
      }

      const shouldShow = this.config.shouldShowSidebar[deviceType];
      const sidebar = document.getElementById("sidebar");

      if (sidebar) {
        sidebar.style.setProperty(
          `--sidebar-${deviceType}-display`,
          shouldShow ? "block" : "none"
        );
      }
    }
  }

  // 页面加载时执行
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      toggleComponentsVisibility();
      new SidebarManager();
    });
  } else {
    toggleComponentsVisibility();
    new SidebarManager();
  }
</script>
