/**
 * MainLayout - 主布局组件（Task 1.2）
 *
 * 三栏布局：左侧侧边栏 + 顶部导航栏 + 主内容区
 * - 侧边栏：240px 固定宽度，可折叠至 64px 图标栏
 * - 顶部导航：复用 Header 组件（68px 固定高度）
 * - 主内容区：自适应填充剩余空间
 * - 响应式：移动端（<768px）隐藏侧边栏
 *
 * 侧边栏/导航具体内容 deferred to Tasks 1.3, 1.4
 */
import React, { useState } from "react";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import AppLayout from "./AppLayout";
import Sidebar from "./Sidebar";
import "./MainLayout.css";

/** 侧边栏上下文 —— 子组件可读取折叠状态 */
export interface SidebarContextValue {
  collapsed: boolean;
}

// eslint-disable-next-line react-refresh/only-export-components
export const SidebarContext = React.createContext<SidebarContextValue>({
  collapsed: false,
});

const MainLayout: React.FC = () => {
  // 移动端默认折叠，桌面端默认展开
  const [collapsed, setCollapsed] = useState(() => window.innerWidth <= 768);

  const sidebar = (
    <>
      {/* 移动端遮罩层 —— 仅在侧边栏展开时由 CSS 显示 */}
      <div
        className="xx-sidebar-overlay"
        onClick={() => setCollapsed(true)}
        aria-hidden="true"
      />

      <aside
        className={`xx-app-sidebar${collapsed ? " xx-collapsed" : ""}`}
        aria-label="侧边栏"
      >
        <div className="xx-sidebar-toggle">
          <button
            type="button"
            onClick={() => setCollapsed((prev) => !prev)}
            aria-label={collapsed ? "展开侧边栏" : "收起侧边栏"}
          >
            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            <span className="xx-sidebar-toggle-label">
              {collapsed ? "展开" : "收起"}
            </span>
          </button>
        </div>

        {/* 侧边栏导航 */}
        <nav className="xx-sidebar-content" aria-label="侧边栏导航">
          <Sidebar />
        </nav>
      </aside>
    </>
  );

  return (
    <SidebarContext.Provider value={{ collapsed }}>
      <AppLayout sidebar={sidebar} />
    </SidebarContext.Provider>
  );
};

export default MainLayout;
