import React, {
  useState,
  useCallback,
  useMemo,
  useEffect,
} from "react";
import { Layout, Menu, Breadcrumb, Tabs, Button, Dropdown, Space, Typography } from "antd";
import {
  ReloadOutlined,
  CloseOutlined,
  CloseCircleOutlined,
  DownOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from "@ant-design/icons";
import menuItems, {
  findMenuPath,
  getPageLabel,
  getOpenKeys,
  getSelectedKeys,
} from "./menuConfig";

const { Header, Sider, Content } = Layout;
const { Text } = Typography;

const TABS_KEY = "sim_layout_tabs";
const ACTIVE_KEY = "sim_layout_active";

/* ---- sessionStorage 持久化 ---- */
function loadState() {
  try {
    const tabs = JSON.parse(sessionStorage.getItem(TABS_KEY) || "[]");
    const activeKey = sessionStorage.getItem(ACTIVE_KEY) || "";
    return { tabs, activeKey };
  } catch {
    return { tabs: [], activeKey: "" };
  }
}

function saveState(tabs, activeKey) {
  sessionStorage.setItem(TABS_KEY, JSON.stringify(tabs));
  sessionStorage.setItem(ACTIVE_KEY, activeKey || "");
}

export default function SimulatedLayout({ children }) {
  const [collapsed, setCollapsed] = useState(false);
  const [state, setState] = useState(loadState);
  const currentPath = window.location.pathname;

  // 页面加载时自动将当前路径加入标签
  useEffect(() => {
    if (currentPath && !currentPath.endsWith("/container/")) {
      addTab(currentPath);
    }
  }, []); // 仅挂载时执行一次

  /* ---- 标签操作 ---- */
  const addTab = useCallback((path) => {
    setState((prev) => {
      if (prev.tabs.find((t) => t.key === path)) {
        // 已存在则仅更新 activeKey
        if (prev.activeKey !== path) {
          saveState(prev.tabs, path);
          return { ...prev, activeKey: path };
        }
        return prev;
      }
      const newTabs = [...prev.tabs, { key: path, label: getPageLabel(path) }];
      saveState(newTabs, path);
      return { tabs: newTabs, activeKey: path };
    });
  }, []);

  const navigateTo = useCallback((path) => {
    if (path !== currentPath) {
      window.location.href = path;
    }
  }, [currentPath]);

  const handleCloseTab = useCallback((targetKey) => {
    setState((prev) => {
      const idx = prev.tabs.findIndex((t) => t.key === targetKey);
      const newTabs = prev.tabs.filter((t) => t.key !== targetKey);
      if (newTabs.length === 0) {
        saveState([], "");
        return { tabs: [], activeKey: "" };
      }
      let newActive = prev.activeKey;
      if (targetKey === prev.activeKey) {
        newActive = newTabs[Math.max(0, idx - 1)]?.key || newTabs[0]?.key;
        navigateTo(newActive);
      }
      saveState(newTabs, newActive);
      return { tabs: newTabs, activeKey: newActive };
    });
  }, [navigateTo]);

  const handleCloseOthers = useCallback((targetKey) => {
    setState((prev) => {
      const target = prev.tabs.find((t) => t.key === targetKey);
      const newTabs = target ? [target] : [];
      saveState(newTabs, targetKey);
      if (targetKey !== currentPath) navigateTo(targetKey);
      return { tabs: newTabs, activeKey: targetKey };
    });
  }, [currentPath, navigateTo]);

  const handleCloseRight = useCallback((targetKey) => {
    setState((prev) => {
      const idx = prev.tabs.findIndex((t) => t.key === targetKey);
      if (idx === -1) return prev;
      const newTabs = prev.tabs.slice(0, idx + 1);
      saveState(newTabs, targetKey);
      return { tabs: newTabs, activeKey: targetKey };
    });
  }, []);

  const handleCloseAll = useCallback(() => {
    saveState([], "");
    setState({ tabs: [], activeKey: "" });
  }, []);

  const handleRefresh = useCallback(() => {
    window.location.reload();
  }, []);

  /* ---- 菜单事件 ---- */
  const handleMenuClick = useCallback(
    ({ key }) => {
      navigateTo(key);
    },
    [navigateTo],
  );

  const handleTabChange = useCallback(
    (key) => {
      navigateTo(key);
    },
    [navigateTo],
  );

  const handleTabEdit = useCallback(
    (targetKey, action) => {
      if (action === "remove") handleCloseTab(targetKey);
    },
    [handleCloseTab],
  );

  /* ---- 面包屑 ---- */
  const breadcrumbItems = useMemo(() => {
    const path = findMenuPath(currentPath);
    return path.map((item, idx) => ({
      title:
        idx === path.length - 1 ? (
          item.label
        ) : (
          <a onClick={() => handleMenuClick({ key: item.key })}>{item.label}</a>
        ),
      key: item.key,
    }));
  }, [currentPath, handleMenuClick]);

  /* ---- 菜单选中/展开 ---- */
  const selectedKeys = useMemo(() => getSelectedKeys(currentPath), [currentPath]);
  const defaultOpenKeys = useMemo(() => getOpenKeys(currentPath), [currentPath]);

  /* ---- 标签页右键菜单 ---- */
  const buildContextMenu = useCallback(
    (tabKey) => {
      const { tabs } = state;
      const isOnlyOne = tabs.length <= 1;
      const idx = tabs.findIndex((t) => t.key === tabKey);
      const hasRight = idx >= 0 && idx < tabs.length - 1;
      return {
        items: [
          {
            key: "refresh",
            icon: <ReloadOutlined />,
            label: "刷新当前标签",
          },
          {
            key: "close",
            icon: <CloseOutlined />,
            label: "关闭当前标签",
            disabled: isOnlyOne,
          },
          {
            key: "close-others",
            icon: <CloseCircleOutlined />,
            label: "关闭其他标签",
            disabled: isOnlyOne,
          },
          {
            key: "close-right",
            icon: <CloseOutlined />,
            label: "关闭右侧标签",
            disabled: !hasRight,
          },
          { type: "divider" },
          {
            key: "close-all",
            icon: <CloseCircleOutlined />,
            label: "关闭所有标签",
            disabled: tabs.length === 0,
          },
        ],
        onClick: ({ key }) => {
          switch (key) {
            case "refresh":
              handleRefresh();
              break;
            case "close":
              handleCloseTab(tabKey);
              break;
            case "close-others":
              handleCloseOthers(tabKey);
              break;
            case "close-right":
              handleCloseRight(tabKey);
              break;
            case "close-all":
              handleCloseAll();
              break;
          }
        },
      };
    },
    [state, handleRefresh, handleCloseTab, handleCloseOthers, handleCloseRight, handleCloseAll],
  );

  /* ---- 标签 label 渲染（带右键菜单） ---- */
  const renderTabLabel = useCallback(
    (tab) => (
      <Dropdown menu={buildContextMenu(tab.key)} trigger={["contextMenu"]}>
        <span style={{ display: "inline-block", padding: "0 8px", userSelect: "none" }}>
          {tab.label}
        </span>
      </Dropdown>
    ),
    [buildContextMenu],
  );

  const { tabs, activeKey } = state;
  const siderWidth = collapsed ? 64 : 220;

  return (
    <Layout style={{ minHeight: "100vh" }}>
      {/* ---- 侧边栏 ---- */}
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={setCollapsed}
        theme="dark"
        width={220}
        style={{
          overflow: "auto",
          height: "100vh",
          position: "fixed",
          left: 0,
          top: 0,
          bottom: 0,
          zIndex: 10,
        }}
      >
        <div
          style={{
            height: 48,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            color: "#fff",
            fontWeight: 700,
            fontSize: collapsed ? 15 : 17,
            borderBottom: "1px solid rgba(255,255,255,0.1)",
            letterSpacing: 1,
            flexShrink: 0,
          }}
        >
          {collapsed ? "证照" : "证照管理系统"}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={selectedKeys}
          defaultOpenKeys={defaultOpenKeys}
          onClick={handleMenuClick}
          items={menuItems}
          style={{ borderRight: 0 }}
        />
      </Sider>

      {/* ---- 右侧主体 ---- */}
      <Layout
        style={{
          marginLeft: siderWidth,
          transition: "margin-left 0.2s",
        }}
      >
        {/* ---- Header + 面包屑 + 操作按钮 ---- */}
        <Header
          style={{
            background: "#fff",
            padding: "0 16px",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            borderBottom: "1px solid #f0f0f0",
            height: 48,
          }}
        >
          <Space>
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
            />
            <Breadcrumb items={breadcrumbItems} />
          </Space>
          <Space>
            <Button
              type="text"
              icon={<ReloadOutlined />}
              onClick={handleRefresh}
            >
              刷新
            </Button>
            <Button
              type="text"
              icon={<CloseCircleOutlined />}
              onClick={handleCloseAll}
              disabled={tabs.length === 0}
            >
              关闭所有
            </Button>
            <Text type="secondary" style={{ fontSize: 12 }}>
              模拟布局·Dev
            </Text>
          </Space>
        </Header>

        {/* ---- 标签栏 ---- */}
        <div
          style={{
            background: "#fff",
            borderBottom: "1px solid #f0f0f0",
            padding: "4px 8px 0",
          }}
        >
          {tabs.length > 0 ? (
            <Tabs
              type="editable-card"
              hideAdd
              activeKey={activeKey}
              onChange={handleTabChange}
              onEdit={handleTabEdit}
              size="small"
              style={{ marginBottom: 0 }}
              items={tabs.map((tab) => ({
                key: tab.key,
                label: renderTabLabel(tab),
                closable: true,
              }))}
              tabBarExtraContent={
                <Dropdown
                  menu={{
                    items: [
                      {
                        key: "refresh",
                        icon: <ReloadOutlined />,
                        label: "刷新当前标签",
                      },
                      {
                        key: "close-others",
                        icon: <CloseOutlined />,
                        label: "关闭其他标签",
                        disabled: tabs.length <= 1,
                      },
                      {
                        key: "close-all",
                        icon: <CloseCircleOutlined />,
                        label: "关闭所有标签",
                        disabled: tabs.length === 0,
                      },
                    ],
                    onClick: ({ key }) => {
                      switch (key) {
                        case "refresh":
                          handleRefresh();
                          break;
                        case "close-others":
                          handleCloseOthers(activeKey);
                          break;
                        case "close-all":
                          handleCloseAll();
                          break;
                      }
                    },
                  }}
                  placement="bottomRight"
                >
                  <Button type="text" size="small" icon={<DownOutlined />} />
                </Dropdown>
              }
            />
          ) : (
            <div
              style={{
                height: 36,
                display: "flex",
                alignItems: "center",
                paddingLeft: 8,
                color: "#bbb",
                fontSize: 12,
              }}
            >
              暂无打开的标签页，请从左侧菜单选择页面
            </div>
          )}
        </div>

        {/* ---- 内容区 ---- */}
        <Content
          style={{
            margin: 0,
            minHeight: 280,
            position: "relative",
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  );
}