import { useEffect, useRef, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { PanelLeftOpen, PanelLeftClose } from "lucide-react";

import { getStoredAuth } from "@/core/auth";
import { isWujieEnv } from "@/core/embed/wujie";
import {
  defaultExpandedIds,
  menuItemContainsPath,
  menuItemMatchesPath,
  type MenuItem,
} from "@/core/page-layout/sidebar-menu";
import { useSidebarMenuItems } from "@/core/page-layout/use-sidebar-menu";
import './page-sdebar.css'

type PageSidebarDarkProps = {
  /** 是否收起（true 时只渲染左下角浮动入口，sidebar 主体隐藏） */
  collapsed: boolean;
  onToggleCollapsed: () => void;
  /** 全局 Header 隐藏时，侧边栏从视口顶部开始占满高度。 */
  headerHidden?: boolean;
};

export function PageSidebarDark({
  collapsed,
  onToggleCollapsed,
  headerHidden = false,
}: PageSidebarDarkProps) {
  const isAdmin = getStoredAuth()?.system_role === "admin";
  const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
  const inWujieEnv = isWujieEnv();
  // defaultExpandedIds 是共享的 ReadonlySet，复制一份给 useState（避免外部突变）
  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set(defaultExpandedIds));
  const navigate = useNavigate();
  const { pathname } = useLocation();

  // pathname 变化时取消任何未触发的 hover 关闭计时（cleanup 在卸载时也跑）
  useEffect(() => {
    return () => {
      if (hoverCloseTimerRef.current !== null) {
        window.clearTimeout(hoverCloseTimerRef.current);
      }
    };
  }, []);

  const handleNavHoverEnter = (id: string) => {
    if (hoverCloseTimerRef.current !== null) {
      window.clearTimeout(hoverCloseTimerRef.current);
      hoverCloseTimerRef.current = null;
    }
    setHoveredTopId(id);
  };

  const scheduleNavPanelClose = () => {
    if (hoverCloseTimerRef.current !== null) {
      window.clearTimeout(hoverCloseTimerRef.current);
    }
    hoverCloseTimerRef.current = window.setTimeout(() => {
      setHoveredTopId(null);
      hoverCloseTimerRef.current = null;
    }, 180);
  };

  const hasActiveChild = (item: MenuItem): boolean => menuItemContainsPath(item, pathname);

  // lazy init：仅在首次 render 计算一次 active id；之后由下面的 useEffect 跟随 pathname 同步
  const [activeTopId, setActiveTopId] = useState<string>(
    () => visibleMenuItems.find(hasActiveChild)?.id ?? visibleMenuItems[0]?.id ?? "qa-center",
  );
  const [hoveredTopId, setHoveredTopId] = useState<string | null>(null);
  const hoverCloseTimerRef = useRef<number | null>(null);

  useEffect(() => {
    const matchedTopItem = visibleMenuItems.find(hasActiveChild);
    if (matchedTopItem) {
      setActiveTopId(matchedTopItem.id);
    }
    // 不在导航时强制关闭 flyout：flyout 绝对定位在 group 盒子之外，强制关闭后鼠标
    // 仍停在 flyout 区域却收不到 group 的 mouseenter，导致连续点击第二个任务时面板
    // 消失且不回来。开合只交给 hover（mouseleave 有 180ms 宽限），即可连续点选。
  }, [pathname, visibleMenuItems]);

  const toggleExpanded = (id: string) => {
    setExpandedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  const findFirstRoutePath = (items?: MenuItem[]): string | null => {
    if (!items?.length) {
      return null;
    }

    for (const child of items) {
      if (child.path) {
        return child.path;
      }
      const nestedPath = findFirstRoutePath(child.children);
      if (nestedPath) {
        return nestedPath;
      }
    }

    return null;
  };

  const handleTopItemClick = (item: MenuItem) => {
    setActiveTopId(item.id);

    if (item.children?.length) {
      const firstPath = findFirstRoutePath(item.children);
      if (firstPath) {
        navigate(firstPath);
      }
      return;
    }

    if (item.path) {
      navigate(item.path);
    }
  };

  const handleSecondItemClick = (item: MenuItem) => {
    const path = item.path ?? findFirstRoutePath(item.children);
    if (path) {
      navigate(path);
    }
  };

  const handleMenuItemClick = (item: MenuItem) => {
    if (item.children?.length) {
      toggleExpanded(item.id);
      return;
    }

    if (item.path) {
      navigate(item.path);
    }
  };

  const activeTopItem =
    visibleMenuItems.find((item) => item.id === activeTopId) ??
    visibleMenuItems.find(hasActiveChild) ??
    visibleMenuItems[0];
  const sidebarMenuItemsToRender = inWujieEnv
    ? visibleMenuItems
    : activeTopItem?.children ?? [];
  const isSidebarItemActive = (item: MenuItem) =>
    inWujieEnv
      ? item.id === activeTopId
      : item.path || item.aliasPaths?.length
        ? menuItemMatchesPath(item, pathname)
        : menuItemContainsPath(item, pathname);
  const handleSidebarItemClick = (item: MenuItem) => {
    if (inWujieEnv) {
      handleTopItemClick(item);
      return;
    }

    handleSecondItemClick(item);
  };
  const getSidebarLabelClassName = (label: string) => {
    if (!inWujieEnv && Array.from(label.trim()).length === 4) {
      return "item-nav__label item-nav__label--four-char";
    }

    return "item-nav__label";
  };

  const renderFlyoutMenu = (items: MenuItem[], level = 0) => (
    <div className={`sidebar-flyout-list sidebar-flyout-list--level-${level}`}>
      {items.map((item) => {
        const hasChildren = !!item.children?.length;
        const isExpanded = expandedIds.has(item.id);
        const isSelected = item.path || item.aliasPaths?.length
          ? menuItemMatchesPath(item, pathname)
          : hasActiveChild(item);

        return (
          <div
            key={item.id}
            className={`sidebar-flyout-node sidebar-flyout-node--level-${level} ${hasChildren ? "sidebar-flyout-node--has-children" : ""} ${isExpanded ? "sidebar-flyout-node--expanded" : ""}`}
          >
            <button
              type="button"
              className={`sidebar-flyout-item ${isSelected ? "sidebar-flyout-item--active" : ""} ${hasChildren ? "sidebar-flyout-item--parent" : "sidebar-flyout-item--leaf"}`}
              onClick={() => handleMenuItemClick(item)}
            >
              {hasChildren ? <span className="sidebar-flyout-arrow" aria-hidden="true" /> : null}
              <span className="sidebar-flyout-label">{item.label}</span>
            </button>
            {hasChildren && isExpanded ? renderFlyoutMenu(item.children ?? [], level + 1) : null}
          </div>
        );
      })}
    </div>
  );

  // 收起时主侧栏不占宽度，保留左下角入口以便随时恢复。
  if (collapsed) {
    return (
      <button
        type="button"
        title="展开侧边栏"
        aria-label="展开侧边栏"
        className="sidebar-collapse-btn sidebar-collapse-btn--floating"
        onClick={onToggleCollapsed}
      >
        <PanelLeftOpen className="sidebar-collapse-btn__icon" aria-hidden="true" />
        <span className="sidebar-collapse-btn__label">展开面板</span>
      </button>
    );
  }

  return (
    <aside
      className={`sidebar-contnet ${inWujieEnv ? "" : "sidebar-contnet--top-submenu"} ${
        headerHidden ? "sidebar-contnet--header-hidden" : ""
      }`}
    >
      <div className="sidebar-contents">
        {sidebarMenuItemsToRender.map((item) => (
          <div
            key={item.id}
            className="item-nav-group"
            onMouseEnter={inWujieEnv ? () => handleNavHoverEnter(item.id) : undefined}
            onMouseLeave={inWujieEnv ? scheduleNavPanelClose : undefined}
          >
            {inWujieEnv && item.children?.length ? (
              <div
                className={`item-nav-content ${hoveredTopId === item.id ? "item-nav-content--visible" : ""}`}
              >
                {renderFlyoutMenu(item.children)}
              </div>
            ) : null}
            <div className="item-nav-wrap">
              <button
                type="button"
                className={`item-nav ${isSidebarItemActive(item) ? "item-nav-active" : ""} ${hoveredTopId === item.id ? "item-nav-hovered" : ""}`}
                onClick={() => handleSidebarItemClick(item)}
              >
                <span className={getSidebarLabelClassName(item.label)}>{item.label}</span>
              </button>
              {inWujieEnv && item.children?.length && hoveredTopId === item.id ? (
                <span className="item-nav-hover-bridge" aria-hidden="true" />
              ) : null}
            </div>
          </div>
        ))}

        <button
          type="button"
          title="收起侧边栏"
          aria-label="收起侧边栏"
          className="sidebar-collapse-btn sidebar-collapse-btn--inline"
          onClick={onToggleCollapsed}
        >
          <PanelLeftClose className="sidebar-collapse-btn__icon" aria-hidden="true" />
          <span className="sidebar-collapse-btn__label">收起面板</span>
        </button>
      </div>
    </aside>
  );
}