import React, { useState, useEffect } from "react";
import { TabBar } from "antd-mobile";
import { PieOutline, UserOutline } from "antd-mobile-icons";
import { HomeOutlined, TeamOutlined } from "@ant-design/icons";
import { useLocation, useNavigate } from "react-router-dom";

const tabs = [
  {
    key: "home",
    title: "首页",
    icon: <HomeOutlined />,
    path: "/",
  },
  {
    key: "scene",
    title: "场景获客",
    icon: <TeamOutlined />,
    path: "/scenarios",
  },
  {
    key: "work",
    title: "工作台",
    icon: <PieOutline />,
    path: "/workspace",
  },
  {
    key: "mine",
    title: "我的",
    icon: <UserOutline />,
    path: "/mine",
  },
];

// 需要展示菜单的路由白名单（可根据实际业务调整）
const menuPaths = ["/", "/scenarios", "/workspace", "/mine"];

const MeauMobile: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [activeKey, setActiveKey] = useState("home");

  // 根据当前路由自动设置 activeKey，支持嵌套路由
  useEffect(() => {
    const found = tabs.find((tab) =>
      tab.path === "/"
        ? location.pathname === "/"
        : location.pathname.startsWith(tab.path)
    );
    if (found) setActiveKey(found.key);
  }, [location.pathname]);

  // 判断当前路由是否需要展示菜单
  const showMenu = menuPaths.some((path) =>
    path === "/"
      ? location.pathname === "/"
      : location.pathname.startsWith(path)
  );
  if (!showMenu) return null;

  return (
    <TabBar
      style={{ background: "#fff" }}
      activeKey={activeKey}
      onChange={(key) => {
        setActiveKey(key);
        const tab = tabs.find((t) => t.key === key);
        if (tab && tab.path) navigate(tab.path);
      }}
    >
      {tabs.map((item) => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  );
};

export default MeauMobile;