MikrotikManager/app/(main)/ip-ranges/page.tsx

"use client"

import { useMemo, useState } from "react"
import { PageHeader } from "@/components/page-header"
import { DataTable } from "@/components/data-table"
import { FileImportDialog } from "@/components/file-import-dialog"
import { ipRanges as mockIpRanges } from "@/lib/data"
import { Button } from "@/components/ui/button"
import { UploadIcon, DownloadIcon, PlusIcon, FilterIcon, LoaderCircleIcon } from "lucide-react"
import { useDataSource } from "@/lib/data-source"
import { useEvoBGP } from "@/lib/evobgp-context"
import { cn } from "@/lib/utils"
import { toast } from "sonner"

export default function IpRangesPage() {
  const { mode } = useDataSource()
  const { enabled, snapshot, loading, error } = useEvoBGP()
  const [importOpen, setImportOpen] = useState(false)

  const useEvoCatalog = mode === "live" && enabled

  const rows = useMemo(() => {
    if (!useEvoCatalog) return mockIpRanges
    if (loading && !snapshot) return []
    return snapshot?.ipRanges ?? []
  }, [useEvoCatalog, loading, snapshot])

  return (
    <div className="flex flex-col h-full">
      <PageHeader
        crumbs={[{ label: "Данные" }, { label: "IP-диапазоны" }]}
        actions={
          <>
            <Button variant="outline" size="sm" onClick={() => setImportOpen(true)}>
              <UploadIcon className="size-4" />Импорт
            </Button>
            <Button variant="outline" size="sm"><DownloadIcon className="size-4" />Экспорт</Button>
            <Button size="sm"><PlusIcon className="size-4" />Добавить диапазон</Button>
          </>
        }
      />
      <div className="flex-1 overflow-y-auto p-6">
        <div className="flex flex-col gap-4">
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">IP-диапазоны</h1>
            <p className="text-sm text-muted-foreground mt-1">
              CIDR-блоки, отправляемые в address-list MikroTik по всем настроенным фильтрам
            </p>
            {useEvoCatalog && (
              <p className={cn(
                "text-xs mt-2 flex items-center gap-1.5",
                error ? "text-destructive" : "text-muted-foreground",
              )}>
                {loading && <LoaderCircleIcon className="size-3.5 animate-spin shrink-0" />}
                {error
                  ? `EvoBGP: ${error}`
                  : snapshot?.fetchedAt
                    ? `Источник: EvoBGP, обновлено ${new Date(snapshot.fetchedAt).toLocaleString("ru-RU")}`
                    : loading ? "Загрузка EvoBGP…" : "EvoBGP"}
              </p>
            )}
          </div>
          <DataTable
            data={rows}
            isLoading={useEvoCatalog && loading && !snapshot}
            searchPlaceholder="Поиск по CIDR, ASN…"
            searchKeys={["cidr", "asn", "country", "filter"]}
            columns={[
              {
                key: "cidr",
                label: "CIDR",
                render: (d) => <span className="font-mono font-medium">{d.cidr}</span>,
              },
              {
                key: "asn",
                label: "ASN",
                render: (d) => <span className="font-mono text-xs text-muted-foreground">{d.asn}</span>,
              },
              {
                key: "country",
                label: "Страна",
                render: (d) => <span className="text-xs border border-border rounded px-2 py-0.5">{d.country}</span>,
              },
              {
                key: "purpose",
                label: "Назначение",
                render: (d) => <span className="text-xs border border-border rounded px-2 py-0.5">{d.purpose}</span>,
              },
              {
                key: "filter",
                label: "Фильтр",
                render: (d) => (
                  <span className="inline-flex items-center gap-1 text-xs bg-muted rounded px-2 py-0.5">
                    <FilterIcon className="size-3 text-muted-foreground" />{d.filter}
                  </span>
                ),
              },
              {
                key: "updated",
                label: "Обновлён",
                render: (d) => <span className="text-xs text-muted-foreground">{d.updated}</span>,
              },
              {
                key: "enabled",
                label: "Статус",
                render: (d) => (
                  <span className={`text-xs font-medium ${d.enabled ? "text-emerald-600" : "text-muted-foreground"}`}>
                    {d.enabled ? "Активен" : "Отключён"}
                  </span>
                ),
              },
            ]}
          />
        </div>
      </div>
      <FileImportDialog
        open={importOpen}
        onOpenChange={setImportOpen}
        title="Импорт IP-диапазонов"
        description="Загрузите CSV или JSON со списком CIDR-блоков"
        accept=".csv,.json,text/csv,application/json"
        onImport={async (files) => {
          toast.info(`Выбран файл: ${files[0]?.name ?? "—"}`)
        }}
      />
    </div>
  )
}