EvoBGP/apps/web/src/routes/_auth/directories.tsx

import { createFileRoute } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { BookText, Globe, Info, RefreshCw, Tags } from 'lucide-react'

import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
import { Badge } from '@evobgp/ui/components/badge'
import { Button } from '@evobgp/ui/components/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@evobgp/ui/components/table'

import { PageHeader } from '@/components/page-header'
import { QueryState } from '@/components/query-state'
import { SectionCards, type SectionCardItem } from '@/components/section-cards'
import { SectionCardsSkeleton, TableSkeleton } from '@/components/skeletons'
import { directoriesCommunitiesQueryOptions, directoriesDohQueryOptions } from '@/queries/directories'

export const Route = createFileRoute('/_auth/directories')({
  component: DirectoriesComponent,
})

function DirectoriesComponent() {
  const communitiesQ = useQuery(directoriesCommunitiesQueryOptions())
  const dohQ = useQuery(directoriesDohQueryOptions())

  const communities = communitiesQ.data?.items ?? []
  const dohProfiles = dohQ.data?.items ?? []
  const loading = communitiesQ.isLoading || dohQ.isLoading

  const items: SectionCardItem[] = [
    {
      label: 'Сообщества BGP',
      value: communities.length,
      icon: <Tags className="size-4" />,
      hint: 'теги префиксов в AS- и CDN-модулях',
    },
    {
      label: 'DoH профили',
      value: dohProfiles.length,
      icon: <Globe className="size-4" />,
      hint: 'резолвинг доменных модулей',
    },
    {
      label: 'Справочники',
      value: 'Общие',
      icon: <BookText className="size-4" />,
      hint: 'используются всеми модулями tenant',
    },
  ]

  return (
    <div className="flex flex-col gap-6">
      <PageHeader
        title="Справочники"
        description="Сообщества BGP и DoH-профили для резолвинга доменов"
        actions={
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              void communitiesQ.refetch()
              void dohQ.refetch()
            }}
            disabled={loading}
          >
            <RefreshCw className={loading ? 'animate-spin' : ''} />
            Обновить
          </Button>
        }
      />

      <Alert className="border-info/30 bg-info/5">
        <Info className="text-info" />
        <AlertTitle>О справочниках</AlertTitle>
        <AlertDescription>
          Сообщества BGP используются в AS- и CDN-модулях для тегирования префиксов. DoH-профили — в
          доменных модулях для DNS-over-HTTPS резолвинга.
        </AlertDescription>
      </Alert>

      {loading ? <SectionCardsSkeleton count={3} /> : <SectionCards items={items} />}

      <Tabs defaultValue="communities">
        <TabsList>
          <TabsTrigger value="communities">Сообщества BGP</TabsTrigger>
          <TabsTrigger value="doh">DoH профили</TabsTrigger>
        </TabsList>

        <TabsContent value="communities" className="mt-4">
          <Card>
            <CardHeader className="border-b py-3">
              <CardTitle className="text-base">Сообщества BGP</CardTitle>
              <CardDescription>Теги для префиксов в фильтрах BIRD</CardDescription>
            </CardHeader>
            <CardContent className="p-0">
              <QueryState
                data={communities}
                isLoading={communitiesQ.isLoading}
                isError={communitiesQ.isError}
                error={communitiesQ.error}
                empty={communities.length === 0}
                emptyTitle="Нет сообществ"
                skeleton={<TableSkeleton rows={4} cols={3} />}
                onRetry={() => communitiesQ.refetch()}
              >
                {(items) => (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Название</TableHead>
                        <TableHead>Значение</TableHead>
                        <TableHead>Тип</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {items.map((c) => (
                        <TableRow key={c.id}>
                          <TableCell className="font-medium">{c.title}</TableCell>
                          <TableCell className="font-mono text-xs">{c.community}</TableCell>
                          <TableCell>
                            <Badge variant="outline">community</Badge>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                )}
              </QueryState>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="doh" className="mt-4">
          <Card>
            <CardHeader className="border-b py-3">
              <CardTitle className="text-base">DoH профили</CardTitle>
              <CardDescription>Резолверы DNS-over-HTTPS для доменных модулей</CardDescription>
            </CardHeader>
            <CardContent className="p-0">
              <QueryState
                data={dohProfiles}
                isLoading={dohQ.isLoading}
                isError={dohQ.isError}
                error={dohQ.error}
                empty={dohProfiles.length === 0}
                emptyTitle="Нет DoH профилей"
                skeleton={<TableSkeleton rows={4} cols={3} />}
                onRetry={() => dohQ.refetch()}
              >
                {(items) => (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Название</TableHead>
                        <TableHead>URL</TableHead>
                        <TableHead>По умолчанию</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {items.map((p) => (
                        <TableRow key={p.id}>
                          <TableCell className="font-medium">{p.name ?? p.url}</TableCell>
                          <TableCell className="font-mono text-xs">{p.url}</TableCell>
                          <TableCell>
                            <Badge variant="outline">—</Badge>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                )}
              </QueryState>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}