"use client"

import { toast } from "sonner"
import { Suspense, useEffect, useRef, useState, useMemo, useCallback } from "react"
import { useSearchParams } from "next/navigation"
import { readProbeSource } from "@/lib/probe-source"
import { readProbeUrl, patchProbeUrl } from "@/lib/probe-url"
import { PageHeader } from "@/components/page-header"
import { FormToggle } from "@/components/form-kit"
import { Frame, FramePanel } from "@/components/reui/frame"
import { OpsPanel } from "@/components/ops-panel"
import { DataPageCard } from "@/components/data-page-card"
import {
  ProbesScheduleDataGrid,
  type SchedRule,
  type SchedType,
} from "@/components/data-grids/probes-schedule-data-grid"
import {ProbesSpeedSchedule} from "@/components/probes-speed-schedule"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
import { type ServerTileItem } from "@/components/server-tile-rail"
import { servers, greTunnels, type GreTunnel, type Server } from "@/lib/data"
import { filtersGreResponseSchema } from "@/lib/filters-response"
import { can } from "@/lib/auth"
import { readProbeOutput, probeServersSchema } from "@/lib/probe-response"
import { useDataSource } from "@/lib/data-source"
import {
  PlayIcon, SquareIcon, CopyIcon, Trash2Icon, PlusIcon,
  ActivityIcon, RouteIcon, SearchIcon, NetworkIcon, RulerIcon,
  ZapIcon, CheckIcon, TerminalIcon,
  LoaderCircleIcon,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { requestJson } from "@/shared/api/http-client"

// ─── types ────────────────────────────────────────────────────────────────────

type DiagTool    = "ping" | "traceroute" | "bandwidth" | "dns" | "route" | "mtu"
type RunStatus = "running" | "done" | "error" | "cancelled"
type TraceProto  = "icmp" | "udp" | "tcp"
type DnsType     = "A" | "AAAA" | "MX" | "NS" | "TXT" | "CNAME" | "PTR"

interface OutputLine { text: string; kind: "normal" | "ok" | "err" | "dim" | "header" | "cmd" }

interface DiagTest {
  id: string
  tool: DiagTool
  status: RunStatus | "error"
  srcServerId: string
  srcServerName: string
  target: string
  command: string
  startedAt: number
  lines: OutputLine[]
  totalLines: number   // final line count — reveals progressively
  /** demo: симуляция в браузере; live: ответ MikroTik через бекенд */
  source?: "demo" | "live"
}

// SchedRule imported from probes-schedule-data-grid


// ─── tool metadata ────────────────────────────────────────────────────────────

const TOOL_META: Record<DiagTool, {
  label: string
  ros: string              // RouterOS tool path
  Icon: React.FC<{ className?: string }>
  color: string
  description: string
}> = {
  ping:       { label: "Ping",        ros: "/tool ping",           Icon: ActivityIcon, color: "text-info",     description: "Проверка связи и RTT" },
  traceroute: { label: "Traceroute",  ros: "/tool traceroute",     Icon: RouteIcon,    color: "text-info",  description: "Трассировка маршрута" },
  bandwidth:  { label: "BW-тест",    ros: "/tool bandwidth-test", Icon: ZapIcon,      color: "text-success", description: "Пропускная способность" },
  dns:        { label: "DNS",         ros: "DNS приложения",             Icon: SearchIcon,   color: "text-warning",   description: "DNS на хосте приложения" },
  route:      { label: "Маршрут",    ros: "/ip route lookup",     Icon: NetworkIcon,  color: "text-info",    description: "Поиск активного маршрута" },
  mtu:        { label: "MTU-тест",   ros: "/tool ping",           Icon: RulerIcon,    color: "text-warning",  description: "Определение MTU пути" },
}

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

async function copyProbeText(text:string){
 try{await navigator.clipboard.writeText(text);toast.success("Скопировано.")}
 catch{toast.error("Не удалось скопировать. Разрешите доступ к буферу обмена или выделите текст вручную.")}
}

function inferProbeLineKind(line: string): OutputLine["kind"] {
  const l = line.toLowerCase()
  if (l.includes("error:") || (l.includes("timeout") && l.includes("seq="))) return "err"
  if (l.includes("✓")) return "ok"
  if (l.startsWith(";;") || l.trim() === "") return "dim"
  if (/ADDRESS|QUESTION|bandwidth-test|^ping |lookup |MTU discovery/i.test(line)) return "header"
  return "normal"
}

function parseProbeOutput(text: string): OutputLine[] {
  const lines = text.split("\n").map(t => ({ text: t || " ", kind: inferProbeLineKind(t) }))
  return lines.length > 1000 ? [{ text: "Показаны последние 1000 строк; начало вывода сокращено.", kind: "dim" }, ...lines.slice(-1000)] : lines
}


// SpeedProbeApiRow imported from probes-speed-probes-data-grid

// ─── helpers ──────────────────────────────────────────────────────────────────

function jitter(base: number, pct = 0.15) {
  return Math.max(1, Math.round(base + (Math.random() - 0.5) * base * pct * 2))
}

function seededRng(seed: string) {
  let h = 0
  for (let i = 0; i < seed.length; i++) h = (Math.imul(31, h) + seed.charCodeAt(i)) | 0
  h = Math.abs(h)
  return (n = 233280) => { h = (h * 9301 + 49297) % n; return h / n }
}

function baseRtt(srcId: string, _target: string): number {
  const map: Record<string, number> = { srv1: 13, srv2: 11, srv3: 5, srv4: 8, srv5: 80, srv6: 8, srv7: 14 }
  return map[srcId] ?? 20
}

function randomIp(rng: () => number, base = "10.") {
  return `${base}${Math.floor(rng() * 255)}.${Math.floor(rng() * 255)}.${Math.floor(rng() * 255)}`
}

// ─── output generators ────────────────────────────────────────────────────────

function genPingOutput(target: string, srcId: string, count: number, size: number, _ttl: number): OutputLine[] {
  const rng  = seededRng(target + srcId)
  const base = baseRtt(srcId, target)
  const rtts: (number | null)[] = Array.from({ length: count }, () =>
    rng() < 0.04 ? null : jitter(base, 0.2),
  )
  const lines: OutputLine[] = [
    { text: `  SEQ HOST                                    SIZE TTL TIME   STATUS`, kind: "header" },
  ]
  rtts.forEach((rtt, i) => {
    lines.push({
      text: `  ${String(i).padStart(3)} ${target.padEnd(40)} ${String(size).padStart(4)} ${String(rtt ? 118 : 0).padStart(3)} ${rtt ? `${rtt}ms`.padStart(6) : "      "} ${rtt ? "" : "timeout"}`,
      kind: rtt ? "normal" : "err",
    })
  })
  const recv = rtts.filter(r => r !== null) as number[]
  const loss = Math.round((count - recv.length) / count * 100)
  lines.push({ text: "", kind: "dim" })
  lines.push({
    text: `  sent=${count} received=${recv.length} packet-loss=${loss}% min-rtt=${Math.min(...recv)}ms avg-rtt=${Math.round(recv.reduce((a, b) => a + b, 0) / recv.length)}ms max-rtt=${Math.max(...recv)}ms`,
    kind: loss === 0 ? "ok" : "err",
  })
  return lines
}

function genTraceOutput(target: string, srcId: string, proto: TraceProto, maxHops: number): OutputLine[] {
  const rng  = seededRng(target + srcId + proto)
  const base = baseRtt(srcId, target)
  const hopCount = Math.min(maxHops, 4 + Math.floor(rng() * 3))
  const lines: OutputLine[] = [
    { text: `  # ADDRESS                                    LOSS  SENT   LAST     AVG      BEST     WORST`, kind: "header" },
  ]
  for (let i = 1; i <= hopCount; i++) {
    const addr = i === 1 ? "10.200.0.2" : i === hopCount ? target : randomIp(rng, "95.213.")
    const frac  = i / hopCount
    const rtt1  = Math.round(base * frac * jitter(1, 0.1))
    const rtt2  = Math.round(base * frac * jitter(1, 0.08))
    const rtt3  = Math.round(base * frac * jitter(1, 0.12))
    const avg   = Math.round((rtt1 + rtt2 + rtt3) / 3)
    lines.push({
      text: `  ${String(i).padStart(2)} ${addr.padEnd(40)}   0%     3    ${`${rtt1}ms`.padStart(6)}  ${`${avg}ms`.padStart(6)}  ${`${Math.min(rtt1,rtt2,rtt3)}ms`.padStart(6)}  ${`${Math.max(rtt1,rtt2,rtt3)}ms`.padStart(6)}`,
      kind: i === hopCount ? "ok" : "normal",
    })
  }
  return lines
}

function genDnsOutput(target: string, srcId: string, type: DnsType): OutputLine[] {
  const rng = seededRng(target + srcId + type)
  const ttl = 300 - Math.floor(rng() * 200)
  const time = 5 + Math.floor(rng() * 20)
  const lines: OutputLine[] = [
    { text: `;; QUESTION SECTION:`, kind: "dim" },
    { text: `;; ${target}.     IN  ${type}`, kind: "dim" },
    { text: "", kind: "dim" },
    { text: `;; ANSWER SECTION:`, kind: "header" },
  ]
  const count = type === "A" ? 2 + Math.floor(rng() * 2) : 1
  for (let i = 0; i < count; i++) {
    let value = ""
    if (type === "A")     value = `142.250.${74 + Math.floor(rng() * 10)}.${Math.floor(rng() * 200)}`
    if (type === "AAAA")  value = `2001:db8::${Math.floor(rng() * 0xffff).toString(16)}`
    if (type === "MX")    value = `10 mail.${target}.`
    if (type === "NS")    value = `ns${i + 1}.${target}.`
    if (type === "TXT")   value = `"v=spf1 include:${target} ~all"`
    if (type === "CNAME") value = `${target}.cdn.example.com.`
    if (type === "PTR")   value = `${target}.in-addr.arpa.`
    lines.push({ text: `${target.padEnd(24)} ${String(ttl).padStart(5)}  IN  ${type.padEnd(5)} ${value}`, kind: "ok" })
  }
  lines.push({ text: "", kind: "dim" })
  lines.push({ text: `;; Query time: ${time} msec`, kind: "dim" })
  lines.push({ text: `;; SERVER: 1.1.1.1`, kind: "dim" })
  return lines
}

function genRouteOutput(target: string, srcId: string): OutputLine[] {
  const rng     = seededRng(target + srcId)
  const gw      = `10.200.0.${2 + Math.floor(rng() * 14)}`
  const iface   = ["gre-msk-fra", "gre-msk-ams", "gre-msk-spb"][Math.floor(rng() * 3)]
  const prefix  = target.split(".").slice(0, 3).join(".") + ".0/24"
  const asn     = [15169, 32934, 20940][Math.floor(rng() * 3)]
  const comm    = `65001:${100 + Math.floor(rng() * 4) * 100}`
  return [
    { text: `Flags: X - disabled, A - active, B - blackhole, U - unreachable`, kind: "dim" },
    { text: "", kind: "dim" },
    { text: ` #   DST-ADDRESS        PREF-SRC  GATEWAY         DISTANCE SCOPE TARGET-SCOPE`, kind: "header" },
    { text: ` 0 A ${prefix.padEnd(18)}           ${gw.padEnd(15)}      200    30           10`, kind: "ok" },
    { text: `     routing-table: main`, kind: "dim" },
    { text: `     bgp-as-path: ${asn}`, kind: "normal" },
    { text: `     bgp-communities: ${comm} ${asn}:5003`, kind: "normal" },
    { text: `     bgp-local-pref: 100`, kind: "dim" },
    { text: `     bgp-med: 0`, kind: "dim" },
    { text: `     bgp-origin: igp`, kind: "dim" },
    { text: `     bgp-nexthop: ${gw}`, kind: "dim" },
    { text: `     bgp-ext-communities: (nothing)`, kind: "dim" },
    { text: `     interface: ${iface}`, kind: "normal" },
    { text: `     gateway: ${gw}`, kind: "normal" },
    { text: "", kind: "dim" },
    { text: `1 route found`, kind: "ok" },
  ]
}

function genMtuOutput(target: string, srcId: string): OutputLine[] {
  const base     = baseRtt(srcId, target)
  const mtu      = [1476, 1472, 1468, 1400][Math.floor(Math.random() * 2)]  // common GRE MTUs
  const sizes    = [1500, 1492, mtu + 8, mtu + 4, mtu, mtu - 4]
  const lines: OutputLine[] = [
    { text: `MTU path discovery → ${target} (do-not-fragment ping)`, kind: "header" },
    { text: "", kind: "dim" },
    { text: `  SIZE   RESULT               RTT`, kind: "dim" },
  ]
  sizes.forEach(sz => {
    const pass = sz <= mtu
    const rtt  = pass ? jitter(base, 0.1) : null
    lines.push({
      text: `  ${String(sz).padStart(4)}   ${pass ? "✓ PASS" : "✗ FAIL (frag needed)"}  ${pass ? `${rtt}ms` : "—"}`,
      kind: pass ? "ok" : "err",
    })
  })
  lines.push({ text: "", kind: "dim" })
  lines.push({ text: `MTU discovered: ${mtu} bytes`, kind: "ok" })
  const overhead = 1500 - mtu
  lines.push({ text: `Overhead: ${overhead} bytes (GRE ${overhead >= 24 ? "+IPsec" : "no IPsec"})`, kind: "dim" })
  return lines
}

function genBwOutput(target: string, srcId: string, proto: string, duration: number): OutputLine[] {
  const base = [410, 580, 220, 680][Math.floor(Math.random() * 4)]
  seededRng(target + srcId)
  const lines: OutputLine[] = [
    { text: `         status: running`, kind: "dim" },
    { text: `      direction: both`, kind: "dim" },
    { text: `       protocol: ${proto.toUpperCase()}`, kind: "dim" },
    { text: `       duration: ${duration}s`, kind: "dim" },
    { text: "", kind: "dim" },
  ]
  for (let t = 2; t <= duration; t += 2) {
    const tx = jitter(base * 0.98, 0.08)
    const rx = jitter(base * 0.95, 0.09)
    lines.push({
      text: `  [${String(t).padStart(2)}s]  tx-current: ${tx}Mbps   rx-current: ${rx}Mbps`,
      kind: "normal",
    })
  }
  const txAvg = jitter(base * 0.97, 0.04)
  const rxAvg = jitter(base * 0.94, 0.04)
  lines.push({ text: "", kind: "dim" })
  lines.push({ text: `         status: done`, kind: "ok" })
  lines.push({ text: `  tx-total-average: ${txAvg}Mbps`, kind: "ok" })
  lines.push({ text: `  rx-total-average: ${rxAvg}Mbps`, kind: "ok" })
  return lines
}

// ─── command builder ──────────────────────────────────────────────────────────

/** RouterOS принимает в src-address только IPv4; FQDN подставлять нельзя. */
function isIpv4Literal(s: string): boolean {
  const t = s.trim()
  if (!/^\d{1,3}(\.\d{1,3}){3}$/.test(t)) return false
  return t.split(".").every(p => {
    const n = Number.parseInt(p, 10)
    return Number.isFinite(n) && n >= 0 && n <= 255
  })
}

/** Превью: IPv4 из API, иначе литерал host если уже IP, иначе плейсхолдер пока DNS не готов. */
function pickSrcAddressRos(host: string, resolvedLiveIpv4: string | null | undefined): string {
  if (isIpv4Literal(host)) return host.trim()
  if (resolvedLiveIpv4 === undefined) return "…"
  if (resolvedLiveIpv4 === null) return "?"
  return resolvedLiveIpv4
}

function buildCommand(
  serversList: Server[],
  tool: DiagTool, src: string, target: string,
  opts: { pingCount?: number; pingSize?: number; pingTtl?: number; traceProto?: TraceProto; traceMaxHops?: number; traceUseDns?: boolean; dnsType?: DnsType; mtuStart?: number; bwProto?: string; bwDuration?: number; bwTarget?: string },
  resolvedSrcIpv4?: string | null,
): string {
  const host = serversList.find(s => s.id === src)?.host ?? "?"
  const srcRos = pickSrcAddressRos(host, resolvedSrcIpv4)
  switch (tool) {
    case "ping":
      return `/tool ping address=${target} count=${opts.pingCount ?? 5} size=${opts.pingSize ?? 64} ttl=${opts.pingTtl ?? 64} src-address=${srcRos}`
    case "traceroute":
      return `/tool traceroute address=${target} max-hops=${opts.traceMaxHops ?? 30} protocol=${opts.traceProto ?? "icmp"} timeout=00:00:01 count=1 use-dns=${opts.traceUseDns ? "yes" : "no"} src-address=${srcRos}`
    case "bandwidth":
      return `/tool bandwidth-test address=${opts.bwTarget ?? target} duration=${opts.bwDuration ?? 10}s protocol=${opts.bwProto ?? "tcp"} direction=both`
    case "dns":
      return "DNS приложения: " + target + " · " + (opts.dnsType ?? "A") + " · резолвер хоста backend"
    case "route":
      return `/ip route lookup ip=${target}`
    case "mtu":
      return `/tool ping address=${target} do-not-fragment count=1 size=${opts.mtuStart ?? 1500} src-address=${srcRos}`
  }
}

// ─── small UI components ──────────────────────────────────────────────────────

function NativeSelect({ value, onChange, children, className, ariaLabel }: {
  value: string; onChange: (v: string) => void; children: React.ReactNode; className?: string; ariaLabel?: string
}) {
  return (
    <select aria-label={ariaLabel} value={value} onChange={e => onChange(e.target.value)}
      className={cn(
        "h-8 min-w-0 rounded-lg border border-input bg-background px-2.5 py-1 text-sm text-foreground",
        "transition-colors outline-none",
        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
        className,
      )}>
      {children}
    </select>
  )
}

function OptionLabel({ children, htmlFor }: { children: React.ReactNode; htmlFor?: string }) {
  if (htmlFor) return <label htmlFor={htmlFor} className="block text-xs font-medium text-muted-foreground mb-1">{children}</label>
  return <p className="text-[11px] font-medium text-muted-foreground mb-1">{children}</p>
}

function SegBtn<T extends string | number>({ value, current, onClick, children }: {
  value: T; current: T; onClick: (v: T) => void; children: React.ReactNode
}) {
  return (
    <button type="button" aria-pressed={value === current} onClick={() => onClick(value)}
      className={cn(
        "px-2.5 py-1 text-xs font-mono border-r last:border-r-0 border-input transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        value === current ? "bg-muted text-foreground font-semibold" : "text-muted-foreground hover:bg-muted/50",
      )}>
      {children}
    </button>
  )
}

// ─── terminal output ──────────────────────────────────────────────────────────

function TerminalOutput({ test }: { test: DiagTest }) {
 const ref=useRef<HTMLDivElement>(null),follow=useRef(true)
 const visible=test.lines.slice(0,test.totalLines)
 useEffect(()=>{if(ref.current&&follow.current)ref.current.scrollTop=ref.current.scrollHeight},[visible.length])
 return <div ref={ref} role="region" aria-label={"Вывод "+TOOL_META[test.tool].label+" · "+test.srcServerName} tabIndex={0}
  onScroll={()=>{const el=ref.current;if(el)follow.current=el.scrollHeight-el.scrollTop-el.clientHeight<32}}
  className="h-full min-h-0 overflow-auto rounded-lg bg-muted/30 border px-3 py-3 font-mono text-xs leading-relaxed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
  <div className="mb-2 text-muted-foreground [overflow-wrap:anywhere]">{test.source==="demo"?"Демо":test.tool==="dns"?"DNS приложения":test.srcServerName} · {test.command}</div>
  {visible.map((line,i)=><div key={i} className={cn("whitespace-pre-wrap [overflow-wrap:anywhere] leading-5",line.kind==="ok"&&"text-success",line.kind==="err"&&"text-destructive",line.kind==="dim"&&"text-muted-foreground",line.kind==="header"&&"text-foreground font-semibold",line.kind==="cmd"&&"text-warning",line.kind==="normal"&&"text-foreground")}>{line.text||" "}</div>)}
 </div>
}
// ─── uptime speed probes (live) ───────────────────────────────────────────────

// ─── schedule tab ─────────────────────────────────────────────────────────────

const INIT_RULES: SchedRule[] = [
  { id: "r1", srcId: "srv1", tunnelId: "gre1", type: "both",      intervalMin: 15, enabled: true,  lastRun: "3 мин назад", nextRunMin: 12 },
  { id: "r2", srcId: "srv1", tunnelId: "gre2", type: "ping",      intervalMin:  5, enabled: true,  lastRun: "1 мин назад", nextRunMin:  4 },
  { id: "r3", srcId: "srv7", tunnelId: "gre5", type: "bandwidth", intervalMin: 60, enabled: false, lastRun: "2ч назад",    nextRunMin: null },
]

function ScheduleTab({
  rules,
  setRules,
  serverOptions,
  tunnelsForServer,
  defaultSrc,
}: {
  rules: SchedRule[]
  setRules: React.Dispatch<React.SetStateAction<SchedRule[]>>
  serverOptions: Server[]
  tunnelsForServer: (serverId: string) => GreTunnel[]
  defaultSrc?: string
}) {
  const [showAdd, setShowAdd] = useState(false)
  const [addSrc,  setAddSrc]  = useState(defaultSrc ?? serverOptions[0]?.id ?? "srv1")
  const [selectedTunnel, setAddTun] = useState("")
  const [addType, setAddType] = useState<SchedType>("ping")
  const [addMin,  setAddMin]  = useState(10)
  const addTunnels = useMemo(() => tunnelsForServer(addSrc), [addSrc, tunnelsForServer])

  const addTun = addTunnels.some(t=>t.id===selectedTunnel) ? selectedTunnel : addTunnels[0]?.id ?? ""

  const tunnelName = (srcId: string, tunnelId: string) =>
    tunnelsForServer(srcId).find((t) => t.id === tunnelId)?.name

  return (
    <div className="flex flex-col gap-3">
      <DataPageCard>
        <ProbesScheduleDataGrid
          rules={rules}
          serverOptions={serverOptions}
          tunnelName={tunnelName}
          onToggleEnabled={(id, enabled) =>
            setRules((p) => p.map((r) => (r.id === id ? { ...r, enabled } : r)))
          }
          onDelete={(id) => setRules((p) => p.filter((r) => r.id !== id))}
        />
      </DataPageCard>
      {showAdd ? (
        <Frame dense className="w-full overflow-hidden">
          <FramePanel className="p-0 overflow-hidden">
          <div className="px-4 py-3 border-b flex items-center gap-2 text-sm font-medium">
            <PlusIcon aria-hidden="true" className="size-4 text-muted-foreground" />Новое правило
          </div>
          <div className="px-4 py-4 flex flex-wrap items-end gap-3">
            <div><OptionLabel>Сервер</OptionLabel>
              <NativeSelect ariaLabel="Устройство расписания" value={addSrc} onChange={value=>{setAddSrc(value);setAddTun("")}} className="min-w-[160px]">
                {serverOptions.filter(s => s.enabled).map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
              </NativeSelect>
            </div>
            <div><OptionLabel>GRE-туннель</OptionLabel>
              <NativeSelect ariaLabel="Туннель расписания" value={addTun} onChange={setAddTun} className="min-w-[150px]">
                {addTunnels.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
              </NativeSelect>
            </div>
            <div><OptionLabel>Тип</OptionLabel>
              <NativeSelect ariaLabel="Тип теста расписания" value={addType} onChange={v => setAddType(v as SchedType)}>
                <option value="ping">Ping</option>
                <option value="bandwidth">BW-тест</option>
                <option value="both">Ping + BW</option>
              </NativeSelect>
            </div>
            <div><OptionLabel>Интервал (мин)</OptionLabel>
              <Input type="number" min={1} max={1440} value={addMin}
                onChange={e => setAddMin(Math.max(1, parseInt(e.target.value) || 1))}
                className="w-20 font-mono text-sm" />
            </div>
            <Button size="sm" disabled={!addTunnels.length}
              onClick={() => {
                setRules(p => [...p, { id: `r${Date.now()}`, srcId: addSrc, tunnelId: addTun, type: addType, intervalMin: addMin, enabled: true, lastRun: null, nextRunMin: addMin }])
                setShowAdd(false)
              }}>
              <CheckIcon className="size-4" />Добавить
            </Button>
            <Button variant="outline" size="sm" onClick={() => setShowAdd(false)}>Отмена</Button>
          </div>
          </FramePanel>
        </Frame>
      ) : (
        <Button variant="outline" size="sm" className="w-fit" onClick={() => setShowAdd(true)}>
          <PlusIcon aria-hidden="true" className="size-4" />Добавить правило
        </Button>
      )}
    </div>
  )
}

// ─── page ─────────────────────────────────────────────────────────────────────

export default function ProbesPage() {
  return <Suspense fallback={<p role="status">Загрузка диагностики…</p>}><ProbesRoute /></Suspense>
}

function ProbesRoute() {
  const params = useSearchParams()
  const url = readProbeUrl(new URLSearchParams(params.toString()))
  const { mode, backendUrl, prefsHydrated } = useDataSource()
  if (url.error) return <div role="alert" aria-label="Ссылка диагностики" className="p-4 space-y-2"><p>{url.error}</p><Button type="button" variant="outline" onClick={() => window.history.replaceState(null, "", patchProbeUrl(new URLSearchParams(params.toString()), null) + window.location.hash)}>Сбросить контекст диагностики</Button></div>
  if (!prefsHydrated) return <p role="status">Загрузка настроек диагностики…</p>
  return <ProbesContent key={JSON.stringify([mode, backendUrl])} />
}

function ProbesContent() {
  const params = useSearchParams()
  const { server } = readProbeUrl(new URLSearchParams(params.toString()))
  const srcId = server ?? ""
  const selectServer = (id: string) => window.history.pushState(null, "", patchProbeUrl(new URLSearchParams(params.toString()), id || null) + window.location.hash)
  const { mode, backendUrl } = useDataSource()
  const canRead = can("mm:servers:read")
  const canRun = can("mm:servers:write")
  const canReadGre = can("mm:filters:read")
  const isLive = mode === "live"
  const apiFetch = useMemo(() => makeApiFetch(backendUrl), [backendUrl])

  const [liveServers, setLiveServers] = useState<Server[]>([])
  const [liveLoad, setLiveLoad]       = useState<"idle" | "loading" | "error">(() => (isLive ? "loading" : "idle"))
  const [catalogError, setCatalogError] = useState<string | null>(null)
  const [catalogRevision, setCatalogRevision] = useState(0)
  const [catalogReadAt, setCatalogReadAt] = useState<number | null>(null)
  const [greState, setGreState] = useState<{ id: string; state: "loading" | "ready" | "error"; error?: string } | null>(null)
  const [greRevision, setGreRevision] = useState(0)
  const [greByServer, setGreByServer] = useState<Record<string, GreTunnel[]>>({})

  const [tool,       setTool]       = useState<DiagTool>("ping")
  const [target,     setTarget]     = useState("8.8.8.8")
  const [pingCount,  setPingCount]  = useState(5)
  const [pingSize,   setPingSize]   = useState(64)
  const [pingTtl]                    = useState(64)
  const [traceProto, setTraceProto]  = useState<TraceProto>("icmp")
  const [traceUseDns, setTraceUseDns] = useState(false)
  const [traceHops]                  = useState(30)
  const [dnsType,    setDnsType]     = useState<DnsType>("A")
  const [bwChoice, setBwChoice] = useState<{ serverId: string; id: string } | null>(null)
  const [bwProto,    setBwProto]     = useState<"tcp" | "udp">("tcp")
  const [bwDuration, setBwDuration]  = useState(10)
  const [runBusy, setRunBusy]        = useState(false)
  /** В live: IPv4 для src-address (DNS A-запись к host API); undefined = грузим, null = не удалось */
  const [source, setSource] = useState<{ key: string; ipv4?: string | null; error?: string; loading: boolean } | null>(null)
  const [sourceRevision, setSourceRevision] = useState(0)

  useEffect(() => {
    if (!isLive || !canRead) return
    let cancelled = false
    const ctrl = new AbortController()
    queueMicrotask(() => { if (!cancelled) { setLiveLoad("loading"); setCatalogError(null) } })
    void apiFetch<unknown>("/api/servers", { signal: ctrl.signal })
      .then(raw => {
        const result = probeServersSchema.safeParse(raw)
        if (!result.success) throw new Error("Некорректный ответ API: каталог устройств не подтверждён.")
        if (cancelled) return
        setLiveServers(result.data.map(s => ({
          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 ?? "unknown",
          latency: s.latency != null ? Math.round(s.latency) : null, sessions: 0,
        })))
        setCatalogReadAt(Date.now())
        setLiveLoad("idle")
      })
      .catch(error => {
        if (cancelled) return
        setCatalogError(error instanceof Error ? error.message : "Не удалось прочитать устройства.")
        setLiveLoad("error")
      })
    return () => { cancelled = true; ctrl.abort() }
  }, [isLive, canRead, apiFetch, catalogRevision])

  const allServers = useMemo(() => {
    if (!isLive) return servers
    return liveServers
  }, [isLive, liveServers])

  const probeRailItems = useMemo<ServerTileItem[]>(() => (
    allServers.map((s) => ({
      id: s.id,
      name: s.name,
      host: s.host,
      site: s.site,
      country: s.country,
      status: s.status,
      type: s.type,
      enabled: s.enabled,
      selectable: s.enabled,
    }))
  ), [allServers])


  useEffect(() => {
    if (!isLive || !canReadGre || liveLoad !== "idle" || !allServers.some(s => s.id === srcId && s.enabled)) return
    let cancelled = false
    const ctrl = new AbortController()
    queueMicrotask(() => { if (!cancelled) setGreState({ id: srcId, state: "loading" }) })
    void apiFetch<unknown>("/api/filters/gre-tunnels?serverId=" + encodeURIComponent(srcId), { signal: ctrl.signal })
      .then(raw => {
        const result = filtersGreResponseSchema.safeParse(raw)
        if (!result.success || result.data.tunnels.some(tunnel => tunnel.serverId !== srcId)) throw new Error("Некорректный ответ API: GRE выбранного устройства не подтверждены.")
        if (cancelled) return
        setGreByServer(prev => ({ ...prev, [srcId]: result.data.tunnels }))
        setGreState({ id: srcId, state: "ready" })
      })
      .catch(error => {
        if (cancelled) return
        setGreState({ id: srcId, state: "error", error: error instanceof Error ? error.message : "Не удалось прочитать GRE." })
      })
    return () => { cancelled = true; ctrl.abort() }
  }, [isLive, canReadGre, liveLoad, allServers, srcId, apiFetch, greRevision])

  const tunnelsForSrc = useMemo(() => {
    if (isLive) return greByServer[srcId] ?? []
    return greTunnels.filter(t => t.serverId === srcId)
  }, [isLive, greByServer, srcId])


  // ── run state ──
  const [tests,   setTests]   = useState<DiagTest[]>([])
  const [tab,     setTab]     = useState<"history" | "schedule">("history")
  const [rules,   setRules]   = useState<SchedRule[]>(INIT_RULES)
  const nextId                = useRef(1)
  const targetRef = useRef<HTMLInputElement>(null)
  const runButtonRef = useRef<HTMLButtonElement>(null)
  /** Живой POST /probes/run — отмена через fetch AbortSignal */
  const liveProbeRunRef       = useRef<{ testId: string; ctrl: AbortController } | null>(null)

  const runLock = useRef(false)
  const alive = useRef(true)
  useEffect(() => {
    alive.current = true
    return () => { alive.current = false; liveProbeRunRef.current?.ctrl.abort() }
  }, [])

  const bwTunnels = tunnelsForSrc
  const bwTunId = bwChoice?.serverId === srcId ? bwChoice.id : (bwTunnels[0]?.id ?? "")
  const setBwTunId = (id: string) => setBwChoice({ serverId: srcId, id })
  const srcServer = useMemo(() => allServers.find(s => s.id === srcId), [allServers, srcId])
  const sourceKey = JSON.stringify([srcId, srcServer?.host])
  const sourceRequired = tool === "ping" || tool === "traceroute" || tool === "mtu"
  const sourceCurrent = source?.key === sourceKey ? source : null
  const rosSrcV4 = sourceCurrent?.ipv4
  useEffect(() => {
    if (!isLive || !canRead || liveLoad !== "idle" || !srcServer?.enabled || !sourceRequired) return
    const host = srcServer.host, id = srcServer.id
    if (!/^[1-9][0-9]*$/.test(id) || !Number.isSafeInteger(Number(id))) return
    let cancelled = false
    const ctrl = new AbortController()
    queueMicrotask(() => { if (!cancelled) setSource({ key: sourceKey, loading: true }) })
    void apiFetch<unknown>("/api/servers/" + id + "/ros-src-address", { signal: ctrl.signal })
      .then(raw => { const ipv4 = readProbeSource(raw, host); if (!cancelled) setSource({ key: sourceKey, loading: false, ipv4 }) })
      .catch(error => { if (!cancelled) setSource({ key: sourceKey, loading: false, error: error instanceof Error ? error.message : "Источник preview неизвестен." }) })
    return () => { cancelled = true; ctrl.abort() }
  }, [isLive, canRead, liveLoad, srcServer, sourceRequired, sourceKey, apiFetch, sourceRevision])
  const greReady = !isLive || (greState?.id === srcId && greState.state === "ready")
  const bwTun     = useMemo(() => bwTunnels.find(t => t.id === bwTunId), [bwTunnels, bwTunId])

  // current command preview
  const cmdPreview = useMemo(() => buildCommand(allServers, tool, srcId, target, {
    pingCount, pingSize, pingTtl, traceProto, traceMaxHops: traceHops, traceUseDns, dnsType,
    bwTarget: bwTun?.remoteAddress, bwProto, bwDuration,
  }, isLive ? rosSrcV4 : undefined), [allServers, tool, srcId, target, pingCount, pingSize, pingTtl, traceProto, traceHops, traceUseDns, dnsType, bwTun, bwProto, bwDuration, isLive, rosSrcV4])

  // ── run test ──
  const runTest = useCallback(async () => {
    const srv = allServers.find(s => s.id === srcId)
    if (!canRun || (tool === "bandwidth" && (!bwTun?.enabled || !bwTun.remoteAddress.trim() || !greReady || (isLive && !canReadGre))) || !srv || !srv.enabled || runLock.current || (isLive && liveLoad !== "idle")) return
    const id = String(nextId.current++)
    const numericServerId = Number.parseInt(srcId, 10)

    if (isLive) {
      if (!Number.isFinite(numericServerId)) return
      runLock.current = true
      setRunBusy(true)
      const abortCtrl = new AbortController()
      liveProbeRunRef.current = { testId: id, ctrl: abortCtrl }
      let timedOut = false
      const timeout = setTimeout(() => { timedOut = true; abortCtrl.abort() }, 60_000)
      setTests(p => [{
        id,
        tool,
        status: "running",
        srcServerId: srcId,
        srcServerName: srv.name,
        target: tool === "bandwidth" ? (bwTun?.name ?? target) : target,
        command: cmdPreview,
        startedAt: Date.now(),
        lines: [{ text: tool === "dns" ? "Выполняется DNS-запрос приложения…" : "Выполняется запрос к MikroTik через API…", kind: "dim" }],
        totalLines: 1,
        source: "live",
      }, ...p.slice(0, 9)])
      setTab("history")
      try {
        const peer =
          bwTun?.remoteAddress
            ? allServers.find(s => s.host.trim().toLowerCase() === bwTun.remoteAddress.trim().toLowerCase())
            : undefined
        const body = {
          tool,
          target: tool === "bandwidth" ? undefined : target.trim(),
          pingCount,
          pingSize,
          pingTtl,
          traceProto,
          traceMaxHops: traceHops,
          traceHopTimeout: tool === "traceroute" ? "1s" : undefined,
          traceProbeCount: tool === "traceroute" ? 1 : undefined,
          traceUseDns: tool === "traceroute" ? traceUseDns : undefined,
          dnsType,
          bwRemoteAddress: tool === "bandwidth" ? bwTun?.remoteAddress : undefined,
          dstServerId: peer ? Number.parseInt(peer.id, 10) : undefined,
          bwProto,
          bwDuration,
        }
        const res = await apiFetch<unknown>(`/api/servers/${numericServerId}/probes/run`, {
          method: "POST",
          body: JSON.stringify(body),
          signal: abortCtrl.signal,
        })
        if (!alive.current || abortCtrl.signal.aborted) return
        const output = readProbeOutput(res)
        const lines = parseProbeOutput(output || "Запрос выполнен: API вернул пустой вывод.")
        setTests(p => p.map(t => (t.id === id
          ? {
              ...t,
              lines,
              totalLines: lines.length,
              status: "done",
            }
          : t)))
      } catch (e) {
        if (!alive.current) return
        const aborted = abortCtrl.signal.aborted ||
          (typeof DOMException !== "undefined" && e instanceof DOMException && e.name === "AbortError")
          || (e instanceof Error && e.name === "AbortError")
        if (aborted) {
          setTests(p => p.map(t => (t.id === id
            ? {
                ...t,
                lines: [{ text: timedOut ? "Время ожидания истекло. Результат на устройстве не подтверждён; повтор выполняется вручную." : "Ожидание отменено. Остановка на устройстве не подтверждена.", kind: timedOut ? "err" : "dim" }],
                totalLines: 1,
                status: timedOut ? "error" : "cancelled",
              }
            : t)))
        } else {
          const msg = e instanceof Error ? e.message : String(e)
          setTests(p => p.map(t => (t.id === id
            ? {
                ...t,
                lines: [{ text: msg, kind: "err" }],
                totalLines: 1,
                status: "error",
              }
            : t)))
        }
      } finally {
        clearTimeout(timeout)
        if (liveProbeRunRef.current?.testId === id) liveProbeRunRef.current = null
        runLock.current = false
        if (alive.current) {
          setRunBusy(false)
          requestAnimationFrame(() => { if (alive.current && (document.activeElement === runButtonRef.current || document.activeElement === document.body)) (targetRef.current ?? runButtonRef.current)?.focus() })
        }
      }
      return
    }

    let lines: OutputLine[] = []

    switch (tool) {
      case "ping":       lines = genPingOutput(target, srcId, pingCount, pingSize, pingTtl); break
      case "traceroute": lines = genTraceOutput(target, srcId, traceProto, traceHops); break
      case "dns":        lines = genDnsOutput(target, srcId, dnsType); break
      case "route":      lines = genRouteOutput(target, srcId); break
      case "mtu":        lines = genMtuOutput(target, srcId); break
      case "bandwidth":  lines = genBwOutput(bwTun?.remoteAddress ?? target, srcId, bwProto, bwDuration); break
    }

    const test: DiagTest = {
      id,
      tool,
      status: "done",
      srcServerId: srcId,
      srcServerName: srv.name,
      target: tool === "bandwidth" ? (bwTun?.name ?? target) : target,
      command: cmdPreview,
      startedAt: Date.now(),
      lines,
      totalLines: lines.length,
      source: "demo",
    }
    setTests(p => [test, ...p.slice(0, 9)])
    setTab("history")
  }, [
    isLive,
    liveLoad,
    canRun,
    canReadGre,
    greReady,
    allServers,
    srcId,
    tool,
    target,
    pingCount,
    pingSize,
    pingTtl,
    traceProto,
    traceUseDns,
    traceHops,
    dnsType,
    bwTun,
    bwProto,
    bwDuration,
    cmdPreview,
    apiFetch,
  ])

  const stopTest = (id: string) => {
    if (liveProbeRunRef.current?.testId === id) { liveProbeRunRef.current.ctrl.abort(); return }
    setTests(p => p.map(t => (t.id === id && t.status === "running"
      ? { ...t, status: "cancelled" as const, totalLines: t.lines.length }
      : t)))
  }
  const clearTest = (id: string) => {
    if (liveProbeRunRef.current?.testId === id) liveProbeRunRef.current.ctrl.abort()
    setTests(p => p.filter(t => t.id !== id))
    runButtonRef.current?.focus()
  }

  const running = tests.filter(t => t.status === "running")

  if (!canRead) return <p role="status">Для просмотра устройств требуется mm:servers:read.</p>

  if (isLive && liveLoad === "loading" && catalogReadAt === null) {
    return (
      <div className="flex flex-col h-full">
        <PageHeader crumbs={[{ label: "Инструменты" }, { label: "Диагностика" }]} />
        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-muted-foreground">
          <LoaderCircleIcon aria-hidden="true" className="size-8 motion-safe:animate-spin opacity-50" />
          <p className="text-sm">Загрузка серверов из бекенда…</p>
        </div>
      </div>
    )
  }

  return (
    <ServerRailLayout
      items={probeRailItems}
      selectedId={srcId}
      onSelect={selectServer}
      preserveSelection
      showAll={false}
      loading={isLive && liveLoad === "loading" && allServers.length === 0}
      header={
        <PageHeader
          crumbs={[{ label: "Инструменты" }, { label: "Диагностика" }]}
          actions={
            <>
              <ServerRailMobileButton />
              {isLive && <Button type="button" size="sm" variant="outline" aria-label="Обновить устройства диагностики" disabled={liveLoad === "loading"} onClick={() => setCatalogRevision(n => n + 1)}>Обновить</Button>}
              {running.length > 0
                ? <Button variant="outline" size="sm" onClick={() => {
                    running.forEach(test => stopTest(test.id))
                  }}>
                    <SquareIcon aria-hidden="true" className="size-4" />Остановить все
                  </Button>
                : null}
            </>
          }
        />
      }
    >
        <div className="flex flex-col gap-4">

          {!server && <p role="status">Выберите устройство для диагностики. Выбор сохраняется в URL.</p>}
          {server && (!isLive || catalogReadAt !== null) && !srcServer && <div role="alert" aria-label="Устройство диагностики"><p>Указанное устройство отсутствует в текущем каталоге. Другое устройство автоматически не выбирается.</p><Button type="button" variant="outline" onClick={() => selectServer("")}>Сбросить выбор устройства</Button></div>}
          {srcServer && !srcServer.enabled && <p role="status">Выбранное устройство выключено. Диагностика недоступна.</p>}
          {isLive && liveLoad === "error" && (
            <div role="alert" aria-label="Каталог диагностики" className="rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-2.5 text-sm text-destructive">
              <p>{catalogReadAt === null ? "Устройства пока неизвестны." : "Не удалось обновить устройства. Последний список сохранён; запуск приостановлен."}</p>
              <p>{catalogError}</p>
            </div>
          )}
          {isLive && catalogReadAt !== null && <p role="status" className="text-xs text-muted-foreground">Каталог получен: {new Date(catalogReadAt).toLocaleTimeString("ru-RU")}{liveLoad === "loading" ? " · обновляется" : ""}</p>}
          {isLive && liveLoad === "idle" && allServers.length === 0 && <p role="status">В каталоге нет устройств. Добавьте устройство в разделе «Серверы».</p>}

          {!isLive && <p role="status" className="text-sm text-muted-foreground">Демо: запросы не отправляются; результаты синтетические.</p>}
          {isLive && (
            <details className="text-xs text-muted-foreground"><summary className="cursor-pointer">Где выполняются тесты</summary><p className="pt-2">
              Сетевые тесты выполняются на выбранном устройстве. DNS использует резолвер приложения. Traceroute ограничен примерно минутой; сокращение числа хопов указывается в ответе. Стоп отменяет ожидание, но не подтверждает остановку на устройстве.
            </p></details>
          )}

          {!canRun && <p role="status" className="text-sm text-muted-foreground">Для запуска диагностики требуется mm:servers:write.</p>}
          {isLive && tool === "bandwidth" && !canReadGre && <p role="status" className="text-sm text-muted-foreground">Для выбора GRE требуется mm:filters:read.</p>}

          {isLive && tool === "bandwidth" && canReadGre && (
            <div className="text-sm">
              {greState?.id === srcId && greState.state === "error" ? <div role="alert" aria-label="GRE диагностики"><p className="text-destructive">GRE недоступны. Последний список сохранён; BW-тест приостановлен. {greState.error}</p><Button type="button" size="sm" variant="outline" onClick={() => setGreRevision(n => n + 1)}>Повторить GRE</Button></div>
                : !greReady ? <p role="status">GRE выбранного устройства загружаются…</p>
                : !bwTunnels.length ? <p role="status">У выбранного устройства нет GRE-туннелей.</p> : !bwTun?.enabled || !bwTun.remoteAddress.trim() ? <p role="status">Выберите включённый GRE с адресом назначения.</p> : null}
            </div>
          )}

          {isLive && srcServer?.enabled && sourceRequired && (
            <div className="text-xs text-muted-foreground">
              {sourceCurrent?.error ? <div role="alert" aria-label="Источник preview"><p>{sourceCurrent.error}</p><Button type="button" size="sm" variant="outline" onClick={() => setSourceRevision(n => n + 1)}>Повторить определение IPv4</Button></div>
                : !sourceCurrent || sourceCurrent.loading ? <p role="status">Определяем IPv4 для preview…</p>
                : <p role="status">{sourceCurrent.ipv4 === null ? "IPv4 для preview не определён." : "IPv4 для preview: " + sourceCurrent.ipv4}</p>}
              <p>Адрес справочный: при запуске определяется заново.</p>
            </div>
          )}

          {/* ── tool selector + config ── */}
          <OpsPanel contentClassName="pt-4 pb-4 px-3 md:px-4 flex min-w-0 flex-col gap-4">

              {/* tool chips */}
              <div className="flex gap-2 flex-wrap">
                {(Object.entries(TOOL_META) as [DiagTool, typeof TOOL_META[DiagTool]][]).map(([t, m]) => {
                  const active = tool === t
                  return (
                    <button key={t} type="button" aria-pressed={active} title={m.description} onClick={() => setTool(t)}
                      className={cn(
                        "flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                        active
                          ? "border-foreground bg-foreground text-background"
                          : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/40",
                      )}>
                      <m.Icon aria-hidden="true" className={cn("size-3.5", active ? "" : m.color)} />
                      {m.label}
                    </button>
                  )
                })}
              </div>

              {/* main config row */}
              <div className="flex flex-wrap items-end gap-3">

                {/* target — all tools except bandwidth */}
                {tool !== "bandwidth" && (
                  <div className="flex-1 min-w-[140px]">
                    <OptionLabel htmlFor="probe-target">
                      {tool === "dns" ? "Домен" : tool === "route" ? "Адрес назначения IPv4" : "Цель (IP или домен)"}
                    </OptionLabel>
                    <Input id="probe-target" ref={targetRef} maxLength={1024} value={target} onChange={e => setTarget(e.target.value)}
                      placeholder={tool === "dns" ? "google.com" : tool === "route" ? "8.8.8.8" : "8.8.8.8"}
                      aria-label={tool === "dns" ? "Домен" : tool === "route" ? "Адрес назначения IPv4" : "Цель диагностики"}
                      className="font-mono text-sm"
                      onKeyDown={e => e.key === "Enter" && runTest()}
                    />
                  </div>
                )}

                {/* bandwidth: select GRE tunnel */}
                {tool === "bandwidth" && (
                  <div>
                    <OptionLabel>GRE-туннель (цель)</OptionLabel>
                    <NativeSelect ariaLabel="GRE-туннель для BW-теста" value={bwTunnels.some(t => t.id === bwTunId) ? bwTunId : ""} onChange={setBwTunId} className="min-w-[180px]">
                      {!bwTunnels.some(t => t.id === bwTunId) && <option value="" disabled>Выберите GRE-туннель</option>}
                      {bwTunnels.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
                    </NativeSelect>
                  </div>
                )}

                {/* inline quick options */}
                {tool === "ping" && (
                  <>
                    <div>
                      <OptionLabel>Количество пакетов</OptionLabel>
                      <div className="flex flex-wrap rounded-lg border border-input min-h-8">
                        {[5, 10, 25, 100].map(n => <SegBtn key={n} value={n} current={pingCount} onClick={setPingCount}>{n}</SegBtn>)}
                      </div>
                    </div>
                    <div>
                      <OptionLabel>Размер (байт)</OptionLabel>
                      <div className="flex flex-wrap rounded-lg border border-input overflow-hidden min-h-8">
                        {[64, 128, 512, 1472].map(n => <SegBtn key={n} value={n} current={pingSize} onClick={setPingSize}>{n}</SegBtn>)}
                      </div>
                    </div>
                  </>
                )}

                {tool === "traceroute" && (
                  <>
                    <div>
                      <OptionLabel>Протокол</OptionLabel>
                      <div className="flex rounded-lg border border-input overflow-hidden h-8">
                        {(["icmp", "udp", "tcp"] as TraceProto[]).map(p => <SegBtn key={p} value={p} current={traceProto} onClick={setTraceProto}>{p.toUpperCase()}</SegBtn>)}
                      </div>
                    </div>
                    <div className="flex items-end gap-3 pb-0.5">
                      <div className="flex flex-col gap-1 min-w-0">
                        <OptionLabel>Имена хопов (use-dns)</OptionLabel>
                        <p className="text-[10px] text-muted-foreground leading-snug max-w-[220px]">
                          Как в RouterOS: резолвить IP промежуточных узлов в DNS-имена на самом MikroTik.
                        </p>
                      </div>
                      <FormToggle ariaLabel="Разрешать имена хопов на устройстве" checked={traceUseDns} onChange={setTraceUseDns} />
                    </div>
                  </>
                )}

                {tool === "dns" && (
                  <div>
                    <OptionLabel>Тип записи</OptionLabel>
                    <div className="flex rounded-lg border border-input overflow-hidden h-8">
                      {(["A", "AAAA", "MX", "NS", "TXT", "CNAME", "PTR"] as DnsType[]).map(t => <SegBtn key={t} value={t} current={dnsType} onClick={setDnsType}>{t}</SegBtn>)}
                    </div>
                  </div>
                )}

                {tool === "bandwidth" && (
                  <>
                    <div>
                      <OptionLabel>Протокол</OptionLabel>
                      <div className="flex rounded-lg border border-input overflow-hidden h-8">
                        {(["tcp", "udp"] as const).map(p => <SegBtn key={p} value={p} current={bwProto} onClick={setBwProto}>{p.toUpperCase()}</SegBtn>)}
                      </div>
                    </div>
                    <div>
                      <OptionLabel>Длительность</OptionLabel>
                      <div className="flex rounded-lg border border-input overflow-hidden h-8">
                        {[5, 10, 30].map(n => <SegBtn key={n} value={n} current={bwDuration} onClick={setBwDuration}>{n}с</SegBtn>)}
                      </div>
                    </div>
                  </>
                )}

                <Button ref={runButtonRef} type="button" aria-busy={runBusy}
                  onClick={() => void runTest()}
                  disabled={!canRun || (tool === "bandwidth" && (!bwTun?.enabled || !bwTun.remoteAddress.trim() || !greReady || (isLive && !canReadGre))) || runBusy || !srcServer?.enabled || (isLive && liveLoad !== "idle") || (tool === "bandwidth" && !bwTunnels.length)}
                  className="h-8 shrink-0 gap-1.5 self-end"
                >
                  {runBusy ? <LoaderCircleIcon aria-hidden="true" className="size-3.5 motion-safe:animate-spin" /> : <PlayIcon aria-hidden="true" className="size-3.5" />}
                  Запустить
                </Button>
              </div>

              {/* RouterOS command preview */}
              <div className="flex min-w-0 items-center gap-2 rounded-lg bg-muted/30 px-3 py-2 border">
                <TerminalIcon aria-hidden="true" className="size-3 text-muted-foreground shrink-0" />
                <span className="hidden md:inline text-muted-foreground text-xs font-mono truncate max-w-24">[{tool === "dns" ? (isLive ? "backend" : "демо") : srcServer?.name}]</span>
                <span className="hidden md:inline text-success text-xs font-mono shrink-0">$</span>
                <span className="min-w-0 flex-1 text-foreground text-xs font-mono [overflow-wrap:anywhere]">{cmdPreview}</span>
                <button type="button" aria-label="Скопировать параметры диагностики" onClick={() => void copyProbeText(cmdPreview)}
                  className="shrink-0 text-muted-foreground hover:text-foreground transition-colors ml-auto">
                  <CopyIcon aria-hidden="true" className="size-3" />
                </button>
              </div>
          </OpsPanel>

          {/* ── tabs ── */}
          <div>
            <div className="flex items-center gap-0 border-b">
              {([
                ["history",  "История тестов"],
                ["schedule", "Расписание"],
              ] as const).map(([t, label]) => (
                <button key={t} type="button" aria-pressed={tab === t} onClick={() => setTab(t)}
                  className={cn(
                    "px-4 py-2 text-sm font-medium -mb-px border-b-2 transition-colors",
                    tab === t
                      ? "border-foreground text-foreground"
                      : "border-transparent text-muted-foreground hover:text-foreground",
                  )}>
                  {label}
                  {t === "history" && tests.length > 0 && (
                    <span className="ml-1.5 text-[10px] font-mono px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
                      {tests.length}
                    </span>
                  )}
                </button>
              ))}
            </div>

            <div className="mt-4">
              {/* history */}
              {tab === "history" && (
                tests.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-16 text-muted-foreground gap-2">
                    <TerminalIcon aria-hidden="true" className="size-8 opacity-20" />
                    <p className="text-sm">Запустите тест — результаты появятся здесь</p>
                  </div>
                ) : (
                  <div className="flex flex-col gap-4">
                    {tests.map(test => {
                      const { Icon, color, label } = TOOL_META[test.tool]
                      return (
                        <Frame key={test.id} dense aria-busy={test.status === "running"} className="w-full h-[60dvh] min-h-0 flex flex-col overflow-hidden">
                          <FramePanel className="p-0 flex-1 min-h-0 flex flex-col overflow-hidden">
                          {/* header */}
                          <div className="shrink-0 flex flex-wrap items-center justify-between gap-2 px-3 py-2.5 border-b bg-muted/20">
                            <div className="flex flex-wrap items-center gap-2 min-w-0 w-full md:w-auto">
                              <Icon aria-hidden="true" className={cn("size-4 shrink-0", color)} />
                              <span className="text-sm font-medium">{label}</span>
                              <span className="min-w-0 max-w-[70%] text-xs font-mono text-muted-foreground truncate" title={test.target}>{test.target}</span>
                              <span className="w-full md:w-auto max-w-full text-xs text-muted-foreground truncate" title={test.tool === "dns" ? "DNS приложения" : test.srcServerName}>{test.tool === "dns" ? "DNS приложения" : "← " + test.srcServerName}</span>
                            </div>
                            <div className="flex flex-wrap items-center gap-2 min-w-0">
                              {test.status === "running" && (
                                <>
                                  <span role="status" className="flex items-center gap-1 text-xs text-muted-foreground">
                                    <span className="size-1.5 rounded-full bg-info motion-safe:animate-pulse" />
                                    ожидаем ответ
                                  </span>
                                  <Button size="sm" variant="outline" type="button" className="h-11 md:h-7 px-2 text-xs"
                                    onClick={() => stopTest(test.id)}>
                                    <SquareIcon aria-hidden="true" className="size-3" />Стоп
                                  </Button>
                                </>
                              )}
                              {test.status === "done" && <span role="status" className="text-xs text-muted-foreground">{test.source === "live" ? "ответ API" : "демо"}</span>}
                              {test.status === "cancelled" && <span role="status" className="text-[11px] text-muted-foreground">ожидание отменено</span>}
                              {test.status === "error" && (
                                <span role="alert" className="text-xs text-destructive">ошибка</span>
                              )}
                              <button type="button" aria-label={"Скопировать показанный вывод · " + label + " · " + test.id} onClick={() => void copyProbeText(test.lines.map(l => l.text).join("\n"))}
                                className="size-11 md:size-8 flex items-center justify-center rounded text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hover:text-foreground hover:bg-muted transition-colors">
                                <CopyIcon aria-hidden="true" className="size-3.5" />
                              </button>
                              <button type="button" aria-label={"Удалить результат · " + label + " · " + test.id} onClick={() => clearTest(test.id)}
                                className="size-11 md:size-8 flex items-center justify-center rounded text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hover:text-destructive hover:bg-destructive/10 transition-colors">
                                <Trash2Icon aria-hidden="true" className="size-3.5" />
                              </button>
                            </div>
                          </div>
                          {/* terminal output */}
                          <div className="flex-1 min-h-0 p-3">
                            <TerminalOutput test={test} />
                          </div>
                          </FramePanel>
                        </Frame>
                      )
                    })}
                  </div>
                )
              )}

              {/* schedule */}
              {tab === "schedule" && (
                isLive
                  ? <ProbesSpeedSchedule base={backendUrl} serversForName={allServers} />
                  : (
                    <ScheduleTab
                      key={srcId}
                      rules={rules}
                      setRules={setRules}
                      serverOptions={allServers}
                      tunnelsForServer={sid => greTunnels.filter(t => t.serverId === sid)}
                      defaultSrc={srcId}
                    />
                  )
              )}
            </div>
          </div>
        </div>
    </ServerRailLayout>
  )
}