import { Outlet, NavLink } from "react-router-dom";
import { useSelector } from "react-redux";
import { cn } from "@/lib/utils";
import { isMac } from "@/utils/os";

import LogoSvg from "@/assets/svg/logo.svg?react";
import AnonymousSvg from "@/assets/svg/layout/anonymous.svg?react";
import TitleSvg from "@/assets/svg/layout/title.svg?react";

import ChevronDownSvg from "@/assets/svg/layout/chevron-down.svg?react";
import Decentralized from "@/assets/svg/layout/decentralized.svg?react";
import PoolSvg from "@/assets/svg/layout/pool.svg?react";
import HomeSvg from "@/assets/svg/layout/home.svg?react";
import AntiDarkAnalysisNetworkSvg from "@/assets/svg/layout/anti-dark-analysis-network.svg?react";
import "./index.scss";

import type { RootState } from "@/store";

export default function Layout() {
  const [_, setActive] = useState(0);
  const { coreVersion } = useSelector(
    (state: RootState) => state.serviceReducer
  );

  const navList = [
    {
      id: "new-home",
      title: "首页",
      icon: <HomeSvg className="w-5 h-5" />,
    },
    {
      id: "home",
      title: "去中心化的弹性网络",
      icon: <Decentralized className="w-5 h-5" />,
    },
    {
      id: "anti-forensics-forwarding",
      title: "面向溯源对抗的数据转发",
      icon: <PoolSvg className="w-5 h-5" />,
    },
    {
      id: "anti-dark-analysis-network",
      title: "抗暗特征分析的隐匿网络应用",
      icon: <AntiDarkAnalysisNetworkSvg className="w-5 h-5" />,
    },
    // {
    //   id: 'proxies',
    //   title: '节点池',
    //   icon: <PoolSvg className="w-5 h-5" />,
    // },
  ];

  const handleClickMenu = (index: number) => {
    setActive(index);
  };

  return (
    <div data-tauri-drag-region className="layout flex">
      <div
        data-tauri-drag-region
        className={cn(
          "px-2 py-3  select-none side w-[240px] h-full  overflow-hidden flex flex-col gap-y-3 flex-shrink-0 relative",
          isMac && "mt-6"
        )}
      >
        <header className="flex items-center">
          <LogoSvg className="w-8 h-8" />
          <div className="ml-[9px] flex flex-col items-center justify-center">
            <TitleSvg />
            <AnonymousSvg />
            {/* <span className="text-white text-[18px] font-bold tracking-wide">匿名反溯源网络系统</span> */}
            {/* <span className="text-white text-[8px] font-medium">Anonymous anti traceability network system</span> */}
          </div>
        </header>
        <nav className="flex flex-col flex-1 gap-y-2">
          {navList.map((item, index) => {
            return (
              <NavLink
                key={item.id}
                to={"/" + item.id}
                className={({ isActive }) =>
                  cn(
                    "pl-[11px] py-2 flex items-center gap-2 rounded text-white text-sm",
                    isActive && "bg-[#213265] "
                  )
                }
                onClick={() => handleClickMenu(index)}
              >
                {item.icon}
                <span>{item.title}</span>
              </NavLink>
            );
          })}
        </nav>
        <footer className="h-[55px] p-4 items-center gap-2 inline-flex absolute left-4 bottom-[20px]">
          <div className="w-[156px] text-white/40 text-sm font-normal leading-tight">
            <div>版本:{coreVersion || "v0.0.1"}</div>
            {/* <div>环境：DEV</div> */}
          </div>
          <ChevronDownSvg fill="rgba(255, 255, 255, 0.4)" />
        </footer>
      </div>
      <main className="flex-1 bg-white mt-10 mb-1 mr-1 rounded-xl overflow-y-hidden overflow-x-auto w-full scrollbar-visible">
        <div className="min-w-[1693px] h-full">
          <Outlet />
        </div>
      </main>
    </div>
  );
}