"use client"

import { useCallback, useEffect, useRef, useMemo, useState, Suspense } from "react"
import { useSearchParams } from "next/navigation"
import { readRecursiveUrl, patchRecursiveUrl, type RecursiveUrlPatch, type RecursiveUrlState } from "@/lib/recursive-route-url-state"
import { PageHeader } from "@/components/page-header"
import {
  RecursiveRoutesDataGrid,
  type RecursiveRouteGroup,
} from "@/components/data-grids/recursive-routes-data-grid"
import { FormField, SectionTitle } from "@/components/form-kit"
import { DataPageCard } from "@/components/data-page-card"
import { Frame, FramePanel } from "@/components/reui/frame"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { StatusDot } from "@/components/status-dot"
import { Flag } from "@/components/flag"
import { useDataSource } from "@/lib/data-source"
import { can } from "@/lib/auth"
import { recursiveReadSchema, recursiveReceiptSchema, recursiveGatewaysSchema, recursiveServersSchema, type RecursiveRouteRow } from "@/lib/recursive-route-response"
import { cn } from "@/lib/utils"
import { servers as mockServers, type Server } from "@/lib/data"
import { PlusIcon, TrashIcon, SearchIcon, XIcon, CheckIcon, AlertCircleIcon, RefreshCwIcon, HistoryIcon, AlertTriangleIcon } from "lucide-react"
import { toast } from "sonner"
import { requestJson } from "@/shared/api/http-client"
import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
import { ConfigHistorySheet } from "@/components/config-history-sheet"
import { parseConfigRevisions, type ConfigRevisionDto } from "@/lib/config-revisions"
import { type ServerTileItem } from "@/components/server-tile-rail"

interface BackendServer {
  id: number
  name: string
  host: string
  type: "jump-host" | "exit-node" | "home-router"
  site: string
  country: string
  asn: string
  enabled: boolean
  status: "online" | "offline" | "degraded" | null
  latency: number | null
}

interface GatewayOption {
  id: string
  name: string
  ip: string
  status: "active" | "inactive" | "unknown"
}

const COUNTRY_OPTIONS = [
  { code: "RU", label: "Россия" }, { code: "DE", label: "Германия" },
  { code: "NL", label: "Нидерланды" }, { code: "SG", label: "Сингапур" },
  { code: "FI", label: "Финляндия" }, { code: "SE", label: "Швеция" },
  { code: "FR", label: "Франция" }, { code: "GB", label: "Великобритания" },
  { code: "PL", label: "Польша" }, { code: "US", label: "США" },
  { code: "UA", label: "Украина" }, { code: "TR", label: "Турция" },
  { code: "JP", label: "Япония" }, { code: "HK", label: "Гонконг" },
  { code: "KZ", label: "Казахстан" }, { code: "BY", label: "Беларусь" },
  { code: "LT", label: "Литва" }, { code: "LV", label: "Латвия" },
  { code: "EE", label: "Эстония" }, { code: "CZ", label: "Чехия" },
  { code: "AT", label: "Австрия" }, { code: "CH", label: "Швейцария" },
  { code: "NO", label: "Норвегия" },
]

type RouteGroup = RecursiveRouteGroup

function makeApiFetch(backendUrl: string) {
  return async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
    return requestJson<T>(backendUrl, path, init)
  }
}

function mapBackendServer(s: BackendServer): Omit<Server, "status"> & { status: Server["status"] | null } {
  return {
    id: String(s.id),
    name: s.name || s.host,
    host: s.host,
    model: "—",
    os: "—",
    site: s.site,
    country: s.country || "UN",
    asn: s.asn,
    type: s.type,
    enabled: s.enabled,
    status: s.status,
    latency: s.latency != null ? Math.round(s.latency) : null,
    sessions: 0,
  }
}

interface RouteForm {
  dstAddress: string
  routingTable: string
  comment: string
  endpoints: RouteEndpointForm[]
}

interface RouteEndpointForm {
  id: string
  disabled: boolean
  gateway: string
  distance: number
  scope: number | null
  targetScope: number | null
  checkGateway: string
  country: string
}

const newEndpoint = (): RouteEndpointForm => ({
  id: `ep-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
  disabled: false,
  gateway: "",
  distance: 1,
  scope: null,
  targetScope: null,
  checkGateway: "ping",
  country: "",
})

const emptyForm = (): RouteForm => ({
  dstAddress: "",
  routingTable: "main",
  comment: "",
  endpoints: [newEndpoint()],
})

function EndpointCountryField({ value, onChange }: { value: string; onChange: (v: string) => void }) {
  const [query, setQuery] = useState("")
  const q = query.trim().toUpperCase()
  const visible = q.length === 0
    ? COUNTRY_OPTIONS
    : COUNTRY_OPTIONS.filter(c => c.code.startsWith(q) || c.label.toLowerCase().includes(query.trim().toLowerCase()))

  return (
    <div className="flex flex-col gap-2">
      <label className="text-sm font-medium">Страна</label>
      <div className="flex items-center gap-2">
        <div className="relative flex-1">
          <Input placeholder="Поиск или код (RU, DE…)" value={query}
            onChange={e => {
              const v = e.target.value.toUpperCase().slice(0, 3)
              setQuery(v)
              if (v.length === 2) {
                const match = COUNTRY_OPTIONS.find(c => c.code === v)
                if (match) onChange(match.code)
                else onChange(v)
              }
            }}
            className="font-mono pr-10 h-8 text-sm" />
          {value && (
            <span className="absolute right-2.5 top-1/2 -translate-y-1/2">
              <Flag code={value} size={20} />
            </span>
          )}
        </div>
        {value && (
          <span className="text-sm font-mono text-muted-foreground shrink-0">
            {COUNTRY_OPTIONS.find(c => c.code === value)?.label ?? value}
          </span>
        )}
      </div>
      <div className="grid grid-cols-5 gap-1.5 max-h-40 overflow-y-auto pr-0.5">
        {visible.map(c => (
          <button key={c.code} type="button"
            onClick={() => { onChange(c.code); setQuery("") }}
            title={`${c.code} · ${c.label}`}
            className={cn(
              "flex flex-col items-center gap-1 px-1 py-2 rounded-lg border text-[10px] transition-all",
              value === c.code
                ? "border-primary bg-primary/5 ring-1 ring-primary/30 font-semibold text-primary"
                : "border-border hover:border-muted-foreground/40 hover:bg-muted/40 text-muted-foreground",
            )}>
            <Flag code={c.code} size={24} />
            <span className="font-mono leading-none">{c.code}</span>
          </button>
        ))}
      </div>
    </div>
  )
}

function RouteSheet({
  open, mode, initial, onSave, onClose, gateways, busy, saveError,
}: {
  open: boolean
  mode: "create" | "edit"
  initial: RouteForm
  onSave: (v: RouteForm) => Promise<boolean>
  onClose: () => void
  gateways: GatewayOption[]
  busy: boolean
  saveError: string | null
}) {
  const [form, setForm] = useState<RouteForm>(initial)
  const [error, setError] = useState<string | null>(null)

  // eslint-disable-next-line react-hooks/set-state-in-effect
  useEffect(() => { setForm(initial); setError(null) }, [initial, open])
  const set = <K extends keyof RouteForm>(k: K, v: RouteForm[K]) => setForm(f => ({ ...f, [k]: v }))
  const setEp = <K extends keyof RouteEndpointForm>(id: string, k: K, v: RouteEndpointForm[K]) =>
    setForm(f => ({ ...f, endpoints: f.endpoints.map(ep => ep.id === id ? { ...ep, [k]: v } : ep) }))

  const saveLock = useRef(false)
  async function handleSave() {
    if (busy || saveLock.current) return
    if (!form.dstAddress.trim()) { setError("Dst Address обязателен"); return }
    if (form.endpoints.length === 0) { setError("Добавь хотя бы одну конечную точку"); return }
    if (form.endpoints.some(ep => !ep.gateway.trim())) { setError("У каждой конечной точки должен быть Gateway"); return }
    if (!form.routingTable.trim()) { setError("Укажите таблицу маршрутизации"); return }
    if (form.endpoints.some(ep => [ep.distance, ep.scope, ep.targetScope].some(value => value !== null && (!Number.isInteger(value) || value < 0 || value > 255)))) { setError("Distance, Scope и T.Scope должны быть целыми числами от 0 до 255"); return }
    setError(null)
    saveLock.current = true
    try { await onSave(form) } finally { saveLock.current = false }
  }

  return (
    <Sheet open={open} onOpenChange={v => { if (!v && !busy && !saveLock.current) onClose() }}>
      <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0" showCloseButton={false}>
        <SheetHeader className="px-5 pt-5 pb-4 border-b shrink-0">
          <div className="flex items-start justify-between gap-2">
            <div>
              <SheetTitle className="text-base">{mode === "create" ? "Новый маршрут" : "Редактировать маршрут"}</SheetTitle>
              <SheetDescription className="text-xs mt-0.5">Рекурсивный статический маршрут</SheetDescription>
            </div>
            <Button variant="ghost" size="icon-sm" disabled={busy} aria-label="Закрыть форму маршрута" onClick={onClose} className="shrink-0 mt-0.5"><XIcon className="size-4" /></Button>
          </div>
        </SheetHeader>
        <fieldset disabled={busy} className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-6 py-5 flex flex-col gap-5">
          <div className="flex flex-col gap-4">
            <SectionTitle>Основные</SectionTitle>
            <FormField label="Dst Address" required hint="Например 8.8.8.8/32 или 1.1.1.0/24">
              <Input className="font-mono h-9" placeholder="8.8.8.8/32" value={form.dstAddress} onChange={(e) => set("dstAddress", e.target.value)} />
            </FormField>
          </div>

          <div className="flex flex-col gap-4">
            <SectionTitle>Конечные точки</SectionTitle>
            <div className="flex flex-col gap-3">
              {form.endpoints.map((ep, idx) => (
                <div key={ep.id} className="rounded-lg border border-border bg-muted/20 p-3 flex flex-col gap-3">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                      Endpoint {idx + 1}{ep.disabled ? " · отключён" : ""}
                    </span>
                    <button
                      type="button"
                      onClick={() => setForm(f => ({ ...f, endpoints: f.endpoints.filter(x => x.id !== ep.id) }))}
                      className="text-muted-foreground hover:text-destructive transition-colors"
                      aria-label={`Удалить конечную точку ${idx + 1}`}
                      disabled={form.endpoints.length <= 1}
                    >
                      <TrashIcon className="size-3.5" />
                    </button>
                  </div>

                  <EndpointCountryField value={ep.country} onChange={(v) => setEp(ep.id, "country", v)} />

                  <FormField label="Gateway" required hint="Можно выбрать карточкой ниже или ввести вручную в формате ip%gateway">
                    <Input className="font-mono h-9" placeholder="1.2.3.4%GW-NAME" value={ep.gateway} onChange={(e) => setEp(ep.id, "gateway", e.target.value)} />
                  </FormField>

                  <div className="grid grid-cols-2 gap-2">
                    <FormField label="Distance (приоритет)">
                      <Input type="number" className="h-9" value={ep.distance} onChange={(e) => setEp(ep.id, "distance", Number(e.target.value))} />
                    </FormField>
                    <FormField label="Check Gateway">
                      <Input className="h-9 font-mono" placeholder="ping" value={ep.checkGateway} onChange={(e) => setEp(ep.id, "checkGateway", e.target.value)} />
                    </FormField>
                  </div>

                  <div className="grid grid-cols-2 gap-2">
                    <FormField label="Scope">
                      <Input type="number" className="h-9" value={ep.scope ?? ""} onChange={(e) => setEp(ep.id, "scope", e.target.value ? Number(e.target.value) : null)} />
                    </FormField>
                    <FormField label="T.Scope">
                      <Input type="number" className="h-9" value={ep.targetScope ?? ""} onChange={(e) => setEp(ep.id, "targetScope", e.target.value ? Number(e.target.value) : null)} />
                    </FormField>
                  </div>

                  <div className="flex flex-col gap-1.5 max-h-[180px] overflow-y-auto overflow-x-hidden pr-1">
              {gateways.map((g) => {
                const value = `${g.ip}%${g.name}`
                const selected = ep.gateway === value
                return (
                  <button
                    key={`${ep.id}-${g.id}`}
                    type="button"
                    onClick={() => setEp(ep.id, "gateway", value)}
                    className={cn(
                      "text-left rounded-lg border px-3 py-2.5 transition-all",
                      selected
                        ? "border-primary bg-primary/5 ring-1 ring-primary/30"
                        : "border-border hover:border-muted-foreground/40 hover:bg-muted/40",
                    )}
                  >
                    <div className="flex items-center gap-2">
                      <span className={cn("size-1.5 rounded-full shrink-0", g.status === "active" ? "bg-success" : "bg-muted-foreground")} />
                      <span className="font-mono text-xs font-semibold flex-1 truncate">{g.name}</span>
                      <span className="text-xs text-muted-foreground">{g.status === "active" ? "Активный маршрут" : g.status === "inactive" ? "Неактивный маршрут" : "Статус неизвестен"}</span>
                      {selected && <CheckIcon className="size-3.5 text-primary shrink-0" />}
                    </div>
                    <div className="mt-1.5 grid grid-cols-[auto_auto_1fr] items-start gap-2 text-[11px] text-muted-foreground font-mono">
                      <span className="text-muted-foreground/50 break-all">{g.ip}</span>
                      <span className="text-muted-foreground/30">→</span>
                      <span className={cn("min-w-0 break-all whitespace-normal leading-tight", selected ? "text-primary font-medium" : "")}>
                        {value}
                      </span>
                    </div>
                  </button>
                )
              })}
                  </div>
                </div>
              ))}
              <Button type="button" variant="outline" size="sm" className="w-fit gap-1.5" onClick={() => setForm(f => ({ ...f, endpoints: [...f.endpoints, newEndpoint()] }))}>
                <PlusIcon className="size-3.5" />Добавить endpoint
              </Button>
              {gateways.length === 0 && (
                <div className="rounded-md border border-dashed p-4 text-center text-sm text-muted-foreground">
                  Нет доступных шлюзов на выбранном роутере.
                </div>
              )}
            </div>
          </div>

          <div className="flex flex-col gap-4">
            <SectionTitle>Параметры</SectionTitle>
            <FormField label="Routing Table"><Input className="h-9 font-mono" value={form.routingTable} onChange={(e) => set("routingTable", e.target.value)} /></FormField>
            <FormField label="Комментарий">
              <Input className="h-9" value={form.comment} onChange={(e) => set("comment", e.target.value)} />
            </FormField>
          </div>
          {saveError && <p role="alert" className="text-sm text-destructive">{saveError}</p>}
          {busy && <p role="status" className="text-sm text-muted-foreground">Ожидание подтверждения роутера…</p>}
          {error && <div className="flex items-center gap-2 text-sm text-destructive bg-destructive/10 border border-destructive/20 px-3 py-2 rounded-md"><AlertCircleIcon className="size-4 shrink-0" />{error}</div>}
        </fieldset>
        <SheetFooter className="px-6 py-4 border-t shrink-0 gap-2">
          <Button type="button" variant="outline" disabled={busy} onClick={onClose} className="flex-1">Отмена</Button>
          <Button type="button" disabled={busy} onClick={() => void handleSave()} className="flex-1"><CheckIcon className="size-4" />{mode === "create" ? "Добавить" : "Сохранить"}</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

function TypeChip({ type }: { type: "jump-host" | "exit-node" | "home-router" }) {
  return (
    <span className={cn(
      "inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold border shrink-0",
      type === "home-router" ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20" :
      type === "jump-host"
        ? "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20"
        : "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20",
    )}>
      {type === "jump-host" ? "JH" : type === "home-router" ? "HR" : "EN"}
    </span>
  )
}

export default function RecursiveRoutesPage() {
  return <Suspense fallback={<p role="status" className="p-6 text-sm text-muted-foreground">Загрузка маршрутов…</p>}><RecursiveRoutesRoute /></Suspense>
}

function RecursiveRoutesRoute() {
  const { mode, backendUrl } = useDataSource()
  const params = useSearchParams(), context = readRecursiveUrl(new URLSearchParams(params.toString()))
  const sourceKey = JSON.stringify([mode, backendUrl])
  const pendingSources = useRef(new Set<string>())
  const [pending, setPending] = useState<string[]>([])
  const [readVersions, setReadVersions] = useState<Record<string, number>>({})
  const beginWrite = useCallback(() => {
    if (pendingSources.current.has(sourceKey)) return false
    pendingSources.current.add(sourceKey); setPending([...pendingSources.current]); return true
  }, [sourceKey])
  const endWrite = useCallback(() => {
    pendingSources.current.delete(sourceKey); setPending([...pendingSources.current])
    setReadVersions(versions => ({ ...versions, [sourceKey]: (versions[sourceKey] ?? 0) + 1 }))
  }, [sourceKey])
  const patchUrl = useCallback((patch: RecursiveUrlPatch, replace = false) => {
    const url = new URL(window.location.href); url.search = patchRecursiveUrl(url.searchParams, patch).toString()
    const target = url.pathname + url.search + url.hash
    if (replace) window.history.replaceState(null, "", target); else window.history.pushState(null, "", target)
  }, [])
  return <RecursiveRoutesContent key={JSON.stringify([mode, backendUrl, context.serverId, context.error])} mode={mode} backendUrl={backendUrl} context={context} patchUrl={patchUrl} beginWrite={beginWrite} endWrite={endWrite} sharedBusy={pending.includes(sourceKey)} readVersion={readVersions[sourceKey] ?? 0} />
}

function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrite, endWrite, sharedBusy, readVersion }: {
  beginWrite: () => boolean; endWrite: () => void; sharedBusy: boolean; readVersion: number
  mode: string; backendUrl: string; context: RecursiveUrlState; patchUrl: (patch: RecursiveUrlPatch, replace?: boolean) => void
}) {
  const isLive = mode === "live"
  const apiFetch = useMemo(() => makeApiFetch(backendUrl), [backendUrl])

  const [servers, setServers] = useState<Array<Omit<Server, "status"> & { status: Server["status"] | null }>>([])
  const [selectedServerId, setSelectedServerId] = useState<string>(context.serverId ?? "")
  const [rows, setRows] = useState<RecursiveRouteRow[]>([])
  const [busy, setBusy] = useState<"load" | "apply" | null>(null)
  const search = context.q
  const setSearch = (q: string) => patchUrl({ q }, true)
  const [sheetOpen, setSheetOpen] = useState(false)
  const [sheetMode, setSheetMode] = useState<"create" | "edit">("create")
  const [sheetInitial, setSheetInitial] = useState<RouteForm>(emptyForm())
  const [editingGroupKey, setEditingGroupKey] = useState<string | null>(null)
  const [gatewayOptions, setGatewayOptions] = useState<GatewayOption[]>([])
  const expandedGroupKey = context.route && context.table ? JSON.stringify([context.route.toLowerCase(), context.table]) : null
  const [opError, setOpError] = useState<string | null>(null)
  const [liveStale, setLiveStale] = useState(true)
  const [routeOwner, setRouteOwner] = useState("")
  const [readAt, setReadAt] = useState<string | null>(null)
  const [writeAt, setWriteAt] = useState<string | null>(null)
  const [saveError, setSaveError] = useState<string | null>(null)
  const [gatewayError, setGatewayError] = useState<string | null>(null)
  const historyEpoch = useRef(0)
  const alive = useRef(false)
  const readEpoch = useRef(0), gatewayEpoch = useRef(0), writeLock = useRef(false)
  useEffect(() => {
    alive.current = true
    return () => { alive.current = false }
  }, [])
  const [historyOpen, setHistoryOpen] = useState(false)
  const [historyLoading, setHistoryLoading] = useState(false)
  const [historyError, setHistoryError] = useState<string | null>(null)
  const [historyRestoring, setHistoryRestoring] = useState(false)
  const [revisions, setRevisions] = useState<ConfigRevisionDto[]>([])
  /** В live не дергаем API с id мока (srv1…) пока не подтянули /api/servers */
  const [liveServerListReady, setLiveServerListReady] = useState(false)
  const [inventoryTick, setInventoryTick] = useState(0)

  useEffect(() => {
    if (!isLive) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setLiveServerListReady(true)
      setServers(mockServers)
      setSelectedServerId(mockServers[0]?.id ?? "")
      setRows([])
      return
    }
    setLiveServerListReady(false)
    let active = true
    apiFetch<unknown>("/api/servers")
      .then((data) => {
        if (!active) return
        const parsed = recursiveServersSchema.safeParse(data)
        if (!parsed.success) throw new Error("Некорректный список устройств в ответе API")
        const mapped = parsed.data.map(s => mapBackendServer({ ...s, type: s.type ?? "exit-node", site: s.site ?? "", asn: s.asn ?? "", status: s.status ?? null, latency: s.latency ?? null }))
        setServers(mapped)
        setSelectedServerId(context.serverId ?? mapped[0]?.id ?? "")
        if (!context.serverId && !context.error && mapped[0]) patchUrl({ serverId: mapped[0].id }, true)
      })
      .catch(error => {
        if (!active) return
        setOpError(error instanceof Error ? error.message : "Не удалось загрузить устройства")
        setServers([])
        setSelectedServerId("")
      })
      .finally(() => {
        if (active) setLiveServerListReady(true)
      })
    return () => { active = false }
  }, [isLive, apiFetch, inventoryTick, context.serverId, context.error, patchUrl])

  const loadRoutes = useCallback(async () => {
    if (!isLive || !liveServerListReady || !selectedServerId || context.error || !servers.some(s => s.id === selectedServerId) || writeLock.current) return
    const epoch = ++readEpoch.current
    setOpError(null); setBusy("load"); setLiveStale(true)
    try {
      const parsed = recursiveReadSchema.safeParse(await apiFetch<unknown>(`/api/recursive-routes/catalog?serverId=${encodeURIComponent(selectedServerId)}`))
      if (!parsed.success) throw new Error("Некорректный снимок маршрутов в ответе API")
      const res = parsed.data
      if (String(res.serverId) !== selectedServerId) throw new Error("Маршруты принадлежат другому устройству")
      if (!alive.current || epoch !== readEpoch.current) return
      setRows(res.routes); setRouteOwner(selectedServerId); setLiveStale(res.stale)
      if (res.live) setReadAt(new Date().toISOString())
      else setOpError(res.error ?? "Роутер недоступен")
    } catch (error) {
      if (!alive.current || epoch !== readEpoch.current) return
      setLiveStale(true); setOpError(error instanceof Error ? error.message : "Не удалось загрузить маршруты")
    } finally {
      if (alive.current && epoch === readEpoch.current) setBusy(null)
    }
  }, [isLive, liveServerListReady, selectedServerId, apiFetch, context.error, servers])

  const loadGateways = useCallback(async () => {
    if (!isLive || !liveServerListReady || !selectedServerId || context.error || !servers.some(s => s.id === selectedServerId)) return
    const epoch = ++gatewayEpoch.current
    try {
      const parsed = recursiveGatewaysSchema.safeParse(await apiFetch<unknown>(`/api/recursive-routes/gateways/catalog?serverId=${encodeURIComponent(selectedServerId)}`))
      if (!parsed.success) throw new Error("Некорректный список шлюзов в ответе API")
      const res = parsed.data
      if (String(res.serverId) !== selectedServerId) throw new Error("Шлюзы принадлежат другому устройству")
      if (!alive.current || epoch !== gatewayEpoch.current) return
      setGatewayOptions(res.gateways); setGatewayError(null)
    } catch (error) {
      if (!alive.current || epoch !== gatewayEpoch.current) return
      setGatewayOptions([]); setGatewayError(error instanceof Error ? error.message : "Не удалось загрузить шлюзы")
    }
  }, [isLive, liveServerListReady, selectedServerId, apiFetch, context.error, servers])

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    void loadRoutes(); void loadGateways()
    const reads = readEpoch, gateways = gatewayEpoch
    return () => { reads.current++; gateways.current++ }
  }, [loadRoutes, loadGateways, readVersion])

  const applyRoutes = useCallback(async (next: RecursiveRouteRow[]) => {
    if (!isLive || !selectedServerId || liveStale || routeOwner !== selectedServerId || busy !== null || sharedBusy || writeLock.current || !can("mm:network:write")) return false
    if (!beginWrite()) return false
    writeLock.current = true; readEpoch.current++
    setOpError(null); setSaveError(null); setBusy("apply")
    try {
      const raw = await apiFetch<unknown>("/api/recursive-routes", { method: "PUT", body: JSON.stringify({ serverId: selectedServerId, routes: next }) })
      const parsed = recursiveReceiptSchema.safeParse(raw)
      if (!parsed.success || String(parsed.data.serverId) !== selectedServerId || parsed.data.pushedRoutes !== next.length) throw new Error("Сервер не подтвердил применение маршрутов")
      if (!alive.current) return false
      setRows(parsed.data.routes); setLiveStale(false); setWriteAt(new Date().toISOString())
      toast.success("Маршруты применены на роутер")
      return true
    } catch (error) {
      if (!alive.current) return false
      const message = error instanceof Error ? error.message : "Не удалось применить маршруты на роутер"
      setOpError(message); setSaveError(message); setLiveStale(true); toast.error(message)
      return false
    } finally {
      writeLock.current = false
      endWrite()
      if (alive.current) setBusy(null)
    }
  }, [isLive, selectedServerId, routeOwner, liveStale, busy, sharedBusy, apiFetch, beginWrite, endWrite])

  useEffect(() => () => { historyEpoch.current += 1 }, [selectedServerId, backendUrl, isLive])

  const loadRevisions = useCallback(async () => {
    if (!isLive || !selectedServerId) return
    const epoch = ++historyEpoch.current
    setHistoryLoading(true)
    setHistoryError(null)
    try {
      const res = await apiFetch<unknown>(
        `/api/recursive-routes/revisions?serverId=${encodeURIComponent(selectedServerId)}`,
      )
      if (epoch !== historyEpoch.current) return
      setRevisions(parseConfigRevisions(res, selectedServerId, "recursive-routes"))
    } catch (error) {
      if (epoch !== historyEpoch.current) return
      setHistoryError(error instanceof Error ? error.message : "Не удалось загрузить историю")
    } finally {
      if (epoch === historyEpoch.current) setHistoryLoading(false)
    }
  }, [isLive, selectedServerId, apiFetch])

  const restoreRevision = useCallback(async (id: string) => {
    if (!isLive || !selectedServerId || !servers.some(s => s.id === selectedServerId && s.enabled) || writeLock.current || busy !== null || sharedBusy || !can("mm:network:write")) throw new Error("Восстановление сейчас недоступно")
    if (!beginWrite()) throw new Error("Другая операция ещё выполняется")
    writeLock.current = true; readEpoch.current++
    setHistoryRestoring(true); setBusy("apply")
    try {
      const raw = await apiFetch<unknown>(`/api/recursive-routes/revisions/${encodeURIComponent(id)}/restore`, { method: "POST", body: JSON.stringify({ serverId: selectedServerId }) })
      const parsed = recursiveReceiptSchema.safeParse(raw)
      if (!parsed.success || String(parsed.data.serverId) !== selectedServerId) throw new Error("Сервер не подтвердил восстановление")
      if (!alive.current) return
      setRows(parsed.data.routes); setRouteOwner(selectedServerId); setLiveStale(false); setWriteAt(new Date().toISOString())
      toast.success("Версия применена на роутер"); await loadRevisions()
    } catch (error) {
      if (alive.current) { setLiveStale(true); setOpError(error instanceof Error ? error.message : "Не удалось восстановить маршруты") }
      throw error
    } finally {
      writeLock.current = false
      endWrite()
      if (alive.current) { setHistoryRestoring(false); setBusy(null) }
    }
  }, [isLive, selectedServerId, servers, busy, sharedBusy, apiFetch, loadRevisions, beginWrite, endWrite])

  function groupKeyOf(row: RecursiveRouteRow): string {
    return JSON.stringify([row.dstAddress.trim().toLowerCase(), row.routingTable.trim()])
  }
  function openCreate() {
    if (mutationsLocked) return
    setSaveError(null)
    setSheetMode("create")
    setEditingGroupKey(null)
    setSheetInitial(emptyForm())
    setSheetOpen(true)
  }
  function openEdit(group: RouteGroup) {
    if (mutationsLocked) return
    setSaveError(null)
    const endpoints = rows.filter(row => groupKeyOf(row) === group.key)
    setSheetMode("edit")
    setEditingGroupKey(group.key)
    setSheetInitial({
      dstAddress: group.dstAddress,
      routingTable: group.routingTable,
      comment: group.comment,
      endpoints: endpoints.map(ep => ({
        id: ep.id,
        disabled: ep.disabled,
        gateway: ep.gateway,
        distance: ep.distance,
        scope: ep.scope,
        targetScope: ep.targetScope,
        checkGateway: ep.checkGateway,
        country: ep.country || "",
      })),
    })
    setSheetOpen(true)
  }
  async function handleSaveSheet(v: RouteForm) {
    const toRow = (ep: RouteEndpointForm, id: string): RecursiveRouteRow => ({
      id,
      dstAddress: v.dstAddress,
      gateway: ep.gateway,
      distance: ep.distance,
      scope: ep.scope,
      targetScope: ep.targetScope,
      routingTable: v.routingTable,
      checkGateway: ep.checkGateway,
      comment: v.comment,
      disabled: ep.disabled,
      country: ep.country || "",
    })
    let next: RecursiveRouteRow[]
    if (sheetMode === "create") {
      const base = `new-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`
      const expanded = v.endpoints.map((ep, i) => toRow(ep, `${base}-${i}`))
      next = [...rows, ...expanded]
    } else if (editingGroupKey) {
      const kept = rows.filter(r => groupKeyOf(r) !== editingGroupKey)
      const base = `edit-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`
      const expanded = v.endpoints.map((ep, i) => toRow(ep, `${base}-${i}`))
      next = [...kept, ...expanded]
    } else {
      return false
    }
    const saved = await applyRoutes(next)
    if (saved && alive.current) setSheetOpen(false)
    return saved
  }

  const contextError = context.error ?? (isLive && liveServerListReady && context.serverId && !servers.some(s => s.id === context.serverId) ? "Устройство из ссылки недоступно" : null)
  const hasRouteSnapshot = routeOwner === selectedServerId && (!liveStale || rows.length > 0)
  const currentServer = servers.find(s => s.id === selectedServerId)
  const mutationsLocked = Boolean(contextError) || !isLive || busy !== null || sharedBusy || liveStale || routeOwner !== selectedServerId || !servers.some(s => s.id === selectedServerId && s.enabled) || !can("mm:network:write")
  const rrRailItems = useMemo<ServerTileItem[]>(() => (
    servers.map((s) => ({
      id: s.id,
      name: s.name,
      host: s.host,
      site: s.site,
      country: s.country,
      status: s.status ?? undefined,
      type: s.type,
      enabled: s.enabled,
    }))
  ), [servers])
  const filteredRows = useMemo(() => {
    const q = search.trim().toLowerCase()
    if (!q) return rows
    return rows.filter(r =>
      r.dstAddress.toLowerCase().includes(q) ||
      r.gateway.toLowerCase().includes(q) ||
      r.routingTable.toLowerCase().includes(q) ||
      r.comment.toLowerCase().includes(q),
    )
  }, [rows, search])
  const groupedRoutes = useMemo(() => {
    const map = new Map<string, RouteGroup>()
    for (const r of filteredRows) {
      const key = groupKeyOf(r)
      const ex = map.get(key)
      if (ex) {
        ex.endpoints.push(r)
        if (!ex.comment && r.comment) ex.comment = r.comment
      }
      else map.set(key, {
        key,
        dstAddress: r.dstAddress,
        routingTable: r.routingTable,
        comment: r.comment,
        endpoints: [r],
      })
    }
    return [...map.values()]
  }, [filteredRows])

  return (
    <>
    <ServerRailLayout
      items={rrRailItems}
      selectedId={selectedServerId}
      onSelect={id => {
        if (writeLock.current || sharedBusy || id === selectedServerId) return
        readEpoch.current++; gatewayEpoch.current++; historyEpoch.current++
        setSelectedServerId(id); setRows([]); setRouteOwner(""); setLiveStale(true); setBusy(null)
        setGatewayOptions([]); setGatewayError(null); setOpError(null); setSaveError(null)
        setReadAt(null); setWriteAt(null); setSheetOpen(false); setHistoryOpen(false); setRevisions([]); setHistoryError(null)
        patchUrl({ serverId: id, route: null, table: null })
      }}
      preserveSelection={true}
      showAll={false}
      showCount={false}
      loading={isLive && !liveServerListReady}
      header={
        <PageHeader
          crumbs={[{ label: "Управление" }, { label: "Рекурсивные маршруты" }]}
          actions={
            <>
              <ServerRailMobileButton />
              {isLive && (
                <>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => { if (!servers.length) setInventoryTick(t => t + 1); else { void loadRoutes(); void loadGateways() } }}
                    disabled={busy !== null}
                    title="Прочитать маршруты с роутера"
                  >
                    <RefreshCwIcon className={cn("size-4", busy === "load" && "animate-spin")} />
                    Обновить
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      setHistoryOpen(true)
                      void loadRevisions()
                    }}
                    disabled={busy !== null}
                  >
                    <HistoryIcon className="size-4" />
                    История
                  </Button>
                </>
              )}
              <Button size="sm" onClick={openCreate} disabled={mutationsLocked}>
                <PlusIcon className="size-4" />Добавить
              </Button>
            </>
          }
        />
      }
      banner={
        <div className="border-b px-4 py-3 flex items-center gap-3 flex-wrap shrink-0 md:px-6">
          <div className="relative min-w-[200px] max-w-xs flex-1">
            <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground pointer-events-none" />
            <Input aria-label="Поиск маршрутов" className="pl-8 h-8 text-sm" placeholder="Dst, gateway, table, comment…"
              value={search} onChange={(e) => setSearch(e.target.value)} />
            {search && (
              <button type="button" aria-label="Сбросить поиск маршрутов" onClick={() => setSearch("")}
                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
                <XIcon className="size-3.5" />
              </button>
            )}
          </div>
          <div className="flex items-center gap-1.5 text-xs">
            <span className="text-muted-foreground">Всего маршрутов</span>
            <span className="font-semibold tabular-nums">{hasRouteSnapshot ? rows.length : "—"}</span>
          </div>
          <p className="text-xs text-muted-foreground ml-auto">
            {!hasRouteSnapshot ? "Количество неизвестно" : filteredRows.length !== rows.length ? `${filteredRows.length} из ${rows.length} маршрутов` : `${rows.length} маршрутов`}
          </p>
          {sharedBusy && busy !== "apply" && <p role="status" className="w-full text-sm text-muted-foreground">Операция предыдущего контекста ещё выполняется. Изменения заблокированы до ответа API.</p>}
          {contextError && <p role="alert" className="w-full text-sm text-warning">{contextError}. Выберите устройство или сбросьте ссылку. <Button type="button" variant="outline" size="sm" onClick={() => patchUrl({ serverId: null, q: null, route: null, table: null })}>Сбросить контекст маршрутов</Button></p>}
          {expandedGroupKey && !liveStale && !groupedRoutes.some(group => group.key === expandedGroupKey) && <p role="status" className="w-full text-sm text-muted-foreground">Маршрут из ссылки отсутствует в текущем срезе. <Button type="button" variant="outline" size="sm" onClick={() => patchUrl({ route: null, table: null })}>Закрыть маршрут</Button></p>}
          {(opError || saveError) && (
            <div className="w-full text-xs text-destructive bg-destructive/10 border border-destructive/20 rounded-md px-3 py-2" role="alert">
              {opError || saveError}
            </div>
          )}
          {isLive && readAt && <p role="status" className="w-full text-xs text-muted-foreground">Успешный ответ получен {new Date(readAt).toLocaleTimeString("ru-RU")}. Время получения браузером, не измерения RouterOS.</p>}
          {isLive && writeAt && <p role="status" className="w-full text-xs text-muted-foreground">Запись подтверждена {new Date(writeAt).toLocaleTimeString("ru-RU")}.</p>}
          {isLive && gatewayError && <p role="status" className="w-full text-xs text-warning">Шлюзы не загружены: {gatewayError}. Адрес можно ввести вручную.</p>}
          {isLive && liveStale && (
            <div className="w-full text-xs text-amber-700 dark:text-amber-400 bg-amber-500/10 border border-amber-500/20 rounded-md px-3 py-2 flex items-center gap-2">
              <AlertTriangleIcon className="size-3.5 shrink-0" />
              {routeOwner === selectedServerId ? "Последний снимок; актуальное состояние не подтверждено." : "Данные маршрутов пока неизвестны."} Изменения заблокированы.
            </div>
          )}
        </div>
      }
    >
        {!isLive ? (
          <Frame dense className="w-full">
            <FramePanel className="p-6 text-sm text-muted-foreground">
              Раздел работает в режиме &quot;Живые данные&quot;. Переключи источник данных в настройках.
            </FramePanel>
          </Frame>
        ) : (
          <DataPageCard>
            {currentServer && (
              <div className="flex items-center gap-2.5 px-5 py-3 border-b bg-muted/10">
                {currentServer.status ? <StatusDot status={currentServer.status} pulse={currentServer.status === "online"} /> : <span className="text-xs text-muted-foreground">Состояние неизвестно</span>}
                <Flag code={currentServer.country} size={16} />
                <span className="font-mono text-sm font-semibold">{currentServer.name}</span>
                <TypeChip type={currentServer.type} />
                <code className="text-[11px] font-mono text-muted-foreground">{currentServer.host}</code>
                <span className="text-xs text-muted-foreground">{currentServer.asn}</span>
                {currentServer.latency !== null && (
                  <span className={cn(
                    "text-xs font-mono",
                    currentServer.latency > 60 ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground",
                  )}>{currentServer.latency}мс</span>
                )}
                <div className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
                  <span>{hasRouteSnapshot ? rows.length + " маршрутов" : "Количество неизвестно"}</span>
                </div>
              </div>
            )}

            <RecursiveRoutesDataGrid
              emptyTitle={liveStale ? "Маршруты пока неизвестны" : search ? "Нет маршрутов по текущему поиску" : undefined}
              groups={groupedRoutes.map((g) => ({ ...g, id: g.key }))}
              expandedKey={expandedGroupKey}
              onExpandedChange={key => {
                const group = groupedRoutes.find(group => group.key === key)
                patchUrl({ route: group?.dstAddress ?? null, table: group?.routingTable ?? null })
              }}
              mutationsDisabled={mutationsLocked}
              onEdit={openEdit}
              onDelete={(g) => {
                if (mutationsLocked) return
                void applyRoutes(rows.filter((r) => groupKeyOf(r) !== g.key))
              }}
            />
            <button onClick={openCreate} disabled={mutationsLocked}
              className="w-full flex items-center gap-2 px-5 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors border-t disabled:opacity-50">
              <PlusIcon className="size-3.5" />
              Добавить маршрут
            </button>
          </DataPageCard>
        )}
    </ServerRailLayout>

      <RouteSheet
        busy={busy !== null}
        saveError={saveError}
        open={sheetOpen}
        mode={sheetMode}
        initial={sheetInitial}
        onSave={handleSaveSheet}
        onClose={() => { if (!writeLock.current) setSheetOpen(false) }}
        gateways={gatewayOptions}
      />

      <ConfigHistorySheet
        open={historyOpen}
        onOpenChange={v => { if (!v) historyEpoch.current += 1; setHistoryOpen(v) }}
        loadError={historyError}
        onRetry={() => { void loadRevisions() }}
        title="История маршрутов"
        itemLabel="маршрутов"
        revisions={revisions}
        loading={historyLoading}
        restoreDisabled={!can("mm:network:write") || !currentServer?.enabled || (busy !== null || sharedBusy) && !historyRestoring}
        restoring={historyRestoring}
        onRestore={restoreRevision}
      />
    </>
  )
}