EvoBGP/apps/web/src/components/settings/sections-settings-tab.tsx

import { Link } from '@tanstack/react-router'
import {
  ActivityIcon,
  KeyRoundIcon,
  SlidersHorizontalIcon,
} from 'lucide-react'
import { Fragment } from 'react'

import { SettingsCard } from '@/components/settings/settings-card'
import { Badge } from '@/components/reui/badge'
import { Button } from '@evobgp/ui/components/button'
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from '@evobgp/ui/components/item'

const ADMIN_SECTIONS = [
  {
    id: 'tenant-settings',
    to: '/settings' as const,
    search: { tab: 'bird' as const },
    title: 'Параметры арендатора',
    description: 'BIRD, ревизии, файловые логи и дополнительные ключи /v1/settings.',
    icon: <SlidersHorizontalIcon aria-hidden="true" />,
    badge: { label: 'оператор', variant: 'warning-light' as const },
  },
  {
    id: 'access',
    to: '/access' as const,
    search: undefined,
    title: 'Права доступа',
    description: 'API-ключи арендатора, роли и управление доступом.',
    icon: <KeyRoundIcon aria-hidden="true" />,
    badge: { label: 'оператор', variant: 'warning-light' as const },
  },
  {
    id: 'monitoring',
    to: '/monitoring' as const,
    search: undefined,
    title: 'Мониторинг',
    description: 'Метрики, состояние задач и наблюдаемость плоскости управления.',
    icon: <ActivityIcon aria-hidden="true" />,
    badge: { label: 'просмотр+', variant: 'info-light' as const },
  },
] as const

export function SectionsSettingsTab() {
  return (
    <div className="flex flex-col gap-6">
      <SettingsCard
        title="Разделы плоскости управления"
        description="Параметры арендатора и операции — отдельно от настроек браузера"
      >
        <ItemGroup className="gap-0">
          {ADMIN_SECTIONS.map((section, index) => (
            <Fragment key={section.id}>
              {index > 0 ? <ItemSeparator className="my-0" /> : null}
              <Item className="min-h-0 min-w-0 flex-wrap items-center gap-4 px-5 py-3.5">
                <ItemMedia className="self-center!">
                  <Item className="bg-muted/60 border-background flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] [&_svg]:size-4 [&_svg]:opacity-60">
                    {section.icon}
                  </Item>
                </ItemMedia>

                <ItemContent className="min-w-0 justify-center gap-0.5 self-center">
                  <ItemTitle className="flex min-w-0 flex-wrap items-center gap-2 leading-5">
                    {section.title}
                    <Badge variant={section.badge.variant} size="xs">
                      {section.badge.label}
                    </Badge>
                  </ItemTitle>
                  <ItemDescription className="leading-5">{section.description}</ItemDescription>
                </ItemContent>

                <ItemActions className="shrink-0 justify-end self-center">
                  <Button
                    variant="outline"
                    size="sm"
                    render={
                      section.to === '/settings' ? (
                        <Link to="/settings" search={{ tab: 'bird' }} />
                      ) : (
                        <Link to={section.to} />
                      )
                    }
                  >
                    Открыть
                  </Button>
                </ItemActions>
              </Item>
            </Fragment>
          ))}
        </ItemGroup>
      </SettingsCard>
    </div>
  )
}