MikrotikManager/components/app-sidebar.tsx

"use client"

import * as React from "react"
import { useTheme } from "@/components/theme-provider"
import { NavMain, type NavGroup } from "@/components/nav-main"
import { SearchIcon } from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarRail,
} from "@/components/ui/sidebar"
import {
  RouterIcon,
  LayoutDashboardIcon,
  ActivityIcon,
  MapIcon,
  HeartPulseIcon,
  GlobeIcon,
  NetworkIcon,
  LayersIcon,
  TagIcon,
  ServerIcon,
  FilterIcon,
  ShieldIcon,
  HardDriveIcon,
  RouteIcon,
  GitForkIcon,
  GitMergeIcon,
  TerminalIcon,
  SettingsIcon,
  DatabaseIcon,
  CableIcon,
  ScanLineIcon,
  BellIcon,
  SunIcon,
  MoonIcon,
  ShieldCheckIcon,
  BoxIcon,
  BadgeCheckIcon,
} from "lucide-react"
import { useDataSource } from "@/lib/data-source"
import { useEvoBGP } from "@/lib/evobgp-context"
import {
  formatSidebarBadgeCount,
  mockSidebarBadgesByUrl,
  type SidebarCountsDto,
} from "@/lib/sidebar-badges"
import { formatAppVersionLabel, getAppVersion } from "@/lib/app-version"

// ─── Command palette trigger button ──────────────────────────────────────────

function CommandPaletteButton() {
  function trigger() {
    window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true, bubbles: true }))
  }
  return (
    <button
      onClick={trigger}
      className="group-data-[collapsible=icon]:hidden mx-2 mb-1 flex items-center gap-2 px-2.5 py-1.5 rounded-md border border-sidebar-border/60 bg-sidebar-accent/30 hover:bg-sidebar-accent text-sidebar-foreground/50 hover:text-sidebar-foreground text-xs transition-colors w-[calc(100%-1rem)]"
    >
      <SearchIcon className="size-3 shrink-0" />
      <span className="flex-1 text-left">Поиск…</span>
      <span className="font-mono text-[10px] border border-sidebar-border/60 rounded px-1 py-0.5">⌘K</span>
    </button>
  )
}

type NavItemBase = { title: string; url: string; icon: React.ReactNode }

const navStructure: { label: string; items: NavItemBase[] }[] = [
  {
    label: "Обзор",
    items: [
      { title: "Дашборд", url: "/dashboard", icon: <LayoutDashboardIcon /> },
      { title: "Трафик", url: "/traffic", icon: <ActivityIcon /> },
      { title: "Карта сети", url: "/network-map", icon: <MapIcon /> },
      { title: "Мониторинг", url: "/uptime", icon: <HeartPulseIcon /> },
    ],
  },
  {
    label: "Данные",
    items: [
      { title: "Домены", url: "/domains", icon: <GlobeIcon /> },
      { title: "IP-диапазоны", url: "/ip-ranges", icon: <NetworkIcon /> },
      { title: "ASN", url: "/asns", icon: <LayersIcon /> },
      { title: "Communities", url: "/communities", icon: <TagIcon /> },
    ],
  },
  {
    label: "Управление",
    items: [
      { title: "Серверы", url: "/servers", icon: <ServerIcon /> },
      { title: "Фильтры", url: "/filters", icon: <FilterIcon /> },
      { title: "Рекурсивные маршруты", url: "/recursive-routes", icon: <RouteIcon /> },
      { title: "Firewall", url: "/firewall", icon: <ShieldIcon /> },
      { title: "WireGuard", url: "/wireguard", icon: <ShieldCheckIcon /> },
      { title: "GRE-туннели", url: "/gre", icon: <CableIcon /> },
      { title: "VXLAN", url: "/vxlan", icon: <NetworkIcon /> },
      { title: "Контейнеры", url: "/containers", icon: <BoxIcon /> },
      { title: "Сертификаты", url: "/certificates", icon: <BadgeCheckIcon /> },
      { title: "Бэкапы", url: "/backups", icon: <HardDriveIcon /> },
    ],
  },
  {
    label: "Инструменты",
    items: [
      { title: "Оптимизатор маршрутов", url: "/route-optimizer", icon: <RouteIcon /> },
      { title: "OSPF", url: "/ospf", icon: <GitForkIcon /> },
      { title: "BGP", url: "/bgp", icon: <GitMergeIcon /> },
      { title: "Диагностика", url: "/probes", icon: <ScanLineIcon /> },
      { title: "Терминал", url: "/terminal", icon: <TerminalIcon /> },
    ],
  },
  {
    label: "Система",
    items: [
      { title: "Оповещения", url: "/alerts", icon: <BellIcon /> },
      { title: "Сбор данных", url: "/data-collection", icon: <DatabaseIcon /> },
      { title: "Релизы", url: "/releases", icon: <BadgeCheckIcon /> },
      { title: "Настройки", url: "/settings", icon: <SettingsIcon /> },
    ],
  },
]

type LiveSidebarCounts = SidebarCountsDto & { greTunnels?: number }

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const { resolvedTheme, setTheme } = useTheme()
  const { mode, backendUrl, backendStatus } = useDataSource()
  const evo = useEvoBGP()
  const [mounted, setMounted] = React.useState(false)
  const [liveCounts, setLiveCounts] = React.useState<LiveSidebarCounts | null>(null)

  const mockBadges = React.useMemo(() => mockSidebarBadgesByUrl(), [])

  React.useEffect(() => {
    queueMicrotask(() => {
      setMounted(true)
    })
  }, [])

  React.useEffect(() => {
    if (mode !== "live" || backendStatus !== true) {
      setLiveCounts(null)
      return
    }
    let cancelled = false
    const load = async () => {
      try {
        const base = backendUrl.replace(/\/$/, "")
        const [cRes, gRes] = await Promise.all([
          fetch(`${base}/api/sidebar-counts`),
          fetch(`${base}/api/filters/gre-tunnels`),
        ])
        if (cancelled) return
        if (!cRes.ok) {
          setLiveCounts(null)
          return
        }
        const cJson = (await cRes.json()) as SidebarCountsDto
        let greN = 0
        if (gRes.ok) {
          const gJson = (await gRes.json()) as { tunnels?: unknown[] }
          greN = (gJson.tunnels ?? []).length
        }
        setLiveCounts({ ...cJson, greTunnels: greN })
      } catch {
        if (!cancelled) setLiveCounts(null)
      }
    }
    void load()
    const id = window.setInterval(load, 120_000)
    return () => {
      cancelled = true
      window.clearInterval(id)
    }
  }, [mode, backendStatus, backendUrl])

  const navGroups = React.useMemo((): NavGroup[] => {
    function badgeFor(url: string): string | undefined {
      if (mode !== "live") return mockBadges[url]
      if (backendStatus !== true) return undefined

      if (url === "/domains" || url === "/ip-ranges" || url === "/asns") {
        if (!evo.enabled) return mockBadges[url]
        if (!evo.snapshot) return undefined
        if (url === "/domains") return formatSidebarBadgeCount(evo.snapshot.domains.length)
        if (url === "/ip-ranges") return formatSidebarBadgeCount(evo.snapshot.ipRanges.length)
        return formatSidebarBadgeCount(evo.snapshot.asns.length)
      }

      if (!liveCounts) return undefined

      if (url === "/servers") return formatSidebarBadgeCount(liveCounts.servers)
      if (url === "/filters") return formatSidebarBadgeCount(liveCounts.filterRules)
      if (url === "/uptime") return formatSidebarBadgeCount(liveCounts.monitoringItems)
      if (url === "/gre") return formatSidebarBadgeCount(liveCounts.greTunnels ?? 0)

      if (url === "/wireguard" || url === "/containers" || url === "/certificates" || url === "/bgp") {
        return undefined
      }

      return undefined
    }

    return navStructure.map((g) => ({
      label: g.label,
      items: g.items.map((it) => ({
        title: it.title,
        url: it.url,
        icon: it.icon,
        badge: mounted ? badgeFor(it.url) : undefined,
      })),
    }))
  }, [mounted, mode, backendStatus, liveCounts, mockBadges, evo.enabled, evo.snapshot])

  const isDark = (resolvedTheme ?? "dark") === "dark"
  const appVersionLabel = formatAppVersionLabel(getAppVersion())

  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader>
        <div className="flex items-center gap-2.5 px-2 py-1.5 overflow-hidden">
          <div className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
            <RouterIcon className="size-4" />
          </div>
          <div className="flex flex-col leading-tight group-data-[collapsible=icon]:hidden">
            <span className="font-semibold text-sidebar-foreground text-sm tracking-tight">MikrotikManager</span>
            <span className="text-[10px] font-mono text-sidebar-foreground/40">{appVersionLabel}</span>
          </div>
        </div>
        <CommandPaletteButton />
      </SidebarHeader>
      <SidebarContent>
        <NavMain groups={navGroups} />
      </SidebarContent>
      <SidebarFooter>
        <div className="flex items-center gap-2 px-2 py-2 group-data-[collapsible=icon]:justify-center">
          <div className="size-7 rounded-full bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white text-[10px] font-semibold shrink-0">
            АК
          </div>
          <div className="flex flex-col leading-tight min-w-0 flex-1 group-data-[collapsible=icon]:hidden">
            <span className="text-[13px] font-medium text-sidebar-foreground truncate">а.коротаев</span>
            <span className="text-[11px] text-sidebar-foreground/50 truncate">admin@routerlists.io</span>
          </div>
          {mounted ? (
            <button
              type="button"
              onClick={() => setTheme(isDark ? "light" : "dark")}
              title={isDark ? "Светлая тема" : "Тёмная тема"}
              className="shrink-0 size-6 flex items-center justify-center rounded-md text-sidebar-foreground/50 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors group-data-[collapsible=icon]:hidden"
            >
              {isDark
                ? <SunIcon className="size-3.5" />
                : <MoonIcon className="size-3.5" />}
            </button>
          ) : (
            <span
              className="shrink-0 size-6 group-data-[collapsible=icon]:hidden"
              aria-hidden
            />
          )}
        </div>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}