EvoBGP/apps/web/src/routes/_auth/modules/index.tsx

import { Link, createFileRoute } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { Boxes, Plus, RefreshCw } from 'lucide-react'

import { Button } from '@evobgp/ui/components/button'
import { Card, CardContent, CardHeader, CardTitle } from '@evobgp/ui/components/card'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@evobgp/ui/components/table'
import { Badge } from '@/components/reui/badge'

import { PageHeader } from '@/components/page-header'
import { QueryState } from '@/components/query-state'
import { TableSkeleton } from '@/components/skeletons'
import { TruncatedText } from '@/components/truncated-text'
import { modulesListQueryOptions } from '@/queries/modules'
import type { ModuleRow } from '@/types/api'

export const Route = createFileRoute('/_auth/modules/')({
  component: ModulesListComponent,
})

function ModulesListComponent() {
  const query = useQuery(modulesListQueryOptions())

  return (
    <div className="flex flex-col gap-6">
      <PageHeader
        title="Модули"
        description="Маршрутные списки: AS, CDN, домены, IP-диапазоны"
        actions={
          <>
            <Button
              variant="outline"
              size="sm"
              onClick={() => query.refetch()}
              disabled={query.isFetching}
            >
              <RefreshCw className={query.isFetching ? 'animate-spin' : ''} />
              Обновить
            </Button>
          </>
        }
      />

      <Card>
        <CardHeader className="flex flex-row items-center justify-between border-b py-3">
          <CardTitle className="text-base">Все модули</CardTitle>
          <Button size="sm" render={<Link to="/modules/new" />}>
            <Plus />
            Создать
          </Button>
        </CardHeader>
        <CardContent className="p-0">
          <QueryState
            data={query.data?.items}
            isLoading={query.isLoading}
            isError={query.isError}
            error={query.error}
            empty={query.data?.items?.length === 0}
            emptyTitle="Нет модулей"
            emptyDescription="Создайте первый модуль (AS, CDN, домены, IP)."
            skeleton={<TableSkeleton rows={6} cols={5} />}
            onRetry={() => query.refetch()}
          >
            {(items) => <ModulesTable items={items} />}
          </QueryState>
        </CardContent>
      </Card>
    </div>
  )
}

function ModulesTable({ items }: { items: ModuleRow[] }) {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Название</TableHead>
          <TableHead>Тип</TableHead>
          <TableHead>Приоритет</TableHead>
          <TableHead>Состояние</TableHead>
          <TableHead>Обновлено</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {items.map((m) => (
          <TableRow
            key={m.id}
            className="cursor-pointer hover:bg-muted/40"
            onClick={() => (window.location.href = `/modules/${m.id}`)}
          >
            <TableCell className="font-medium">
              <div className="flex items-center gap-2">
                <Boxes className="size-4 text-muted-foreground" />
                <TruncatedText className="max-w-[280px]">{m.name}</TruncatedText>
              </div>
            </TableCell>
            <TableCell>
              <Badge variant="outline">{m.type}</Badge>
            </TableCell>
            <TableCell className="font-mono text-sm tabular-nums">{m.priority}</TableCell>
            <TableCell>
              {m.enabled ? (
                <Badge variant="success">включён</Badge>
              ) : (
                <Badge variant="secondary">выключен</Badge>
              )}
            </TableCell>
            <TableCell className="text-xs text-muted-foreground">
              {m.last_refreshed_at ? new Date(m.last_refreshed_at).toLocaleString('ru-RU') : '—'}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}