"use client"

import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react"
import Link from "next/link"
import { useRouter, useSearchParams } from "next/navigation"
import { Alert as ContextAlert, AlertTitle as ContextTitle, AlertDescription as ContextDescription } from "@/components/reui/alert"
import { PageHeader } from "@/components/page-header"
import { vxlanTunnels as mockVxlanTunnels, servers as mockServers } from "@/lib/data"
import type { Server, VxlanTunnel } from "@/lib/data"
import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
import { OpsPanel } from "@/components/ops-panel"
import { DataPageCard } from "@/components/data-page-card"
import { DataPageToolbar } from "@/components/data-page-toolbar"
import { VxlanDataGrid } from "@/components/data-grids/vxlan-data-grid"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Alert, AlertDescription } from "@/components/ui/alert"
import {
  NetworkIcon, LayersIcon, RefreshCwIcon, AlertCircleIcon,
} from "lucide-react"
import { CodeExportSheet } from "@/components/reui-kit/code-export-sheet"
import { useDataSource } from "@/lib/data-source"
import { generateVxlanRsc } from "@/lib/vxlan-export"
import { vxlanResponseSchema, vxlanServersSchema } from "@/lib/vxlan-response"
import { requestJson } from "@/shared/api/http-client"
import { cn } from "@/lib/utils"
import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
import { ALL_SERVERS_ID, type ServerTileItem } from "@/components/server-tile-rail"

interface BackendServer {
  id: number
  name: string
  host: string
  type?: Server["type"]
  site?: string
  country: string
  asn?: string
  enabled: boolean
  status?: Server["status"] | null
  latency?: number | null
}

interface VxlanApiResponse {
  failures?: Array<{ serverId: string; serverName?: string; error: string }>
  tunnels: VxlanTunnel[]
}

type InventoryServer = Server & { monitoringUnknown?: boolean }

function mapBackendServer(s: BackendServer): InventoryServer {
  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 ?? "exit-node",
    enabled: s.enabled,
    status: s.status ?? "offline",
    monitoringUnknown: s.status == null,
    latency: s.latency ?? null,
    sessions: 0,
  }
}

function ExportSheet({
  open, tunnel, onClose, serverById, receivedAt, stale, mock,
}: {
  open: boolean
  tunnel: VxlanTunnel | null
  onClose: () => void
  serverById: Record<string, Server>
  receivedAt: string | null
  stale: boolean
  mock: boolean
}) {
  const code = useMemo(
    () => (tunnel ? generateVxlanRsc(tunnel, serverById) : ""),
    [tunnel, serverById],
  )

  return (
    <CodeExportSheet
      open={open}
      onClose={onClose}
      className="data-[side=right]:w-full data-[side=right]:sm:max-w-lg"
      title="Экспорт VXLAN"
      description={mock ? "Моковый снимок · данные не получены с RouterOS" : `Снимок на момент открытия · ${receivedAt ? new Date(receivedAt).toLocaleString("ru-RU") : "время получения неизвестно"} · ${stale ? "актуальность не подтверждена" : "последний успешный опрос"}`}
      formats={[
        {
          id: "rsc",
          label: "MikroTik .rsc",
          filename: `${tunnel?.name ?? "vxlan"}.rsc`,
          code,
        },
      ]}
    />
  )
}

function VxlanPageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, onSelectServer }: {
  selectedServerId: string
  selectedTunnelId: string | null
  allTunnelsHref: string
  onSelectServer: (id: string) => void
}) {
  const { mode, backendUrl } = useDataSource()
  const isLive = mode === "live"

  const [search, setSearch] = useState("")
  const [exportSnapshot, setExportSnapshot] = useState<{ tunnel: VxlanTunnel; servers: Record<string, Server>; at: string | null; stale: boolean; mock: boolean } | null>(null)
  const [readReceipt, setReadReceipt] = useState<Record<string, string>>({})
  const [responseReceipt, setResponseReceipt] = useState<string | null>(null)

  const [liveTunnels, setLiveTunnels] = useState<VxlanTunnel[]>([])
  const [liveServers, setLiveServers] = useState<InventoryServer[]>([])
  const [loading, setLoading] = useState(true)
  const [failures, setFailures] = useState<NonNullable<VxlanApiResponse["failures"]>>([])
  const [hasLoaded, setHasLoaded] = useState(false)
  const loadEpoch = useRef(0)
  useEffect(() => () => { loadEpoch.current += 1 }, [backendUrl, isLive])
  const [liveError, setLiveError] = useState<string | null>(null)

  const loadLive = useCallback(async () => {
    if (!isLive) return
    const epoch = ++loadEpoch.current
    setLoading(true)
    try {
      const [tunnelsRes, serversRes] = await Promise.all([
        requestJson<unknown>(backendUrl, "/api/vxlan"),
        requestJson<unknown>(backendUrl, "/api/servers"),
      ])
      if (epoch !== loadEpoch.current) return
      const parsedTunnels = vxlanResponseSchema.safeParse(tunnelsRes)
      const parsedServers = vxlanServersSchema.safeParse(serversRes)
      if (!parsedTunnels.success || !parsedServers.success) throw new Error("Некорректный ответ загрузки VXLAN")
      const nextTunnels = parsedTunnels.data.tunnels
      const nextServers = parsedServers.data
      const nextFailures = parsedTunnels.data.failures
      const failedIds = new Set(nextFailures.map(f => f.serverId))
      const enabledIds = new Set(nextServers.filter(s => s.enabled).map(s => String(s.id)))
      setLiveTunnels(previous => [...nextTunnels.filter(t => !failedIds.has(t.serverId)), ...previous.filter(t => failedIds.has(t.serverId) && enabledIds.has(t.serverId))])
      setFailures(nextFailures)
      setLiveError(null)
      setHasLoaded(true)
      const at = new Date().toISOString()
      setResponseReceipt(at)
      setReadReceipt(previous => Object.fromEntries([...enabledIds].map(id => [id, failedIds.has(id) ? previous[id] : at]).filter((entry): entry is [string, string] => !!entry[1])))
      setLiveServers(nextServers.filter((s) => s.enabled).map(mapBackendServer))
    } catch (e) {
      if (epoch !== loadEpoch.current) return
      setLiveError(e instanceof Error ? e.message : "Ошибка загрузки")
    } finally {
      if (epoch === loadEpoch.current) setLoading(false)
    }
  }, [isLive, backendUrl])

  useEffect(() => {
    if (!isLive) {
      queueMicrotask(() => {
        setLiveTunnels([])
        setLiveServers([])
        setLiveError(null)
      })
      return
    }
    queueMicrotask(() => {
      void loadLive()
    })
  }, [isLive, loadLive])

  const displayTunnels = isLive ? liveTunnels : mockVxlanTunnels
  const displayServers = isLive ? liveServers : mockServers.filter((s) => s.enabled)

  const effectiveServerId = selectedServerId

  const scopedTunnels = useMemo(() => {
    if (selectedTunnelId !== null) return displayTunnels.filter(t => t.serverId === effectiveServerId && t.id === selectedTunnelId)
    if (effectiveServerId === ALL_SERVERS_ID) return displayTunnels
    return displayTunnels.filter((t) => t.serverId === effectiveServerId)
  }, [displayTunnels, effectiveServerId, selectedTunnelId])

  const selectedTunnel = selectedTunnelId === null ? undefined : scopedTunnels[0]

  const serverById = useMemo(
    () => Object.fromEntries(displayServers.map((s) => [s.id, s])),
    [displayServers],
  )

  const railItems = useMemo<ServerTileItem[]>(() => (
    displayServers.map((s) => ({
      id: s.id,
      name: s.name,
      host: s.host,
      site: s.site,
      country: s.country,
      status: isLive && (s as InventoryServer).monitoringUnknown ? undefined : s.status,
      type: s.type,
      enabled: s.enabled,
      meta: `${displayTunnels.filter((t) => t.serverId === s.id).length}${isLive && (s as InventoryServer).monitoringUnknown ? " · Статус неизвестен" : ""}`,
    }))
  ), [displayServers, displayTunnels, isLive])

  const filtered = useMemo(() => {
    if (!search) return scopedTunnels
    const q = search.toLowerCase()
    return scopedTunnels.filter((t) =>
      t.name.includes(q) ||
      String(t.vni).includes(q) ||
      t.vtepIp.includes(q) ||
      (serverById[t.serverId]?.name.toLowerCase().includes(q) ?? false),
    )
  }, [search, scopedTunnels, serverById])

  const failedServerIds = useMemo(() => !isLive ? [] : liveError ? [...new Set([...liveTunnels.map(t => t.serverId), ...liveServers.map(s => s.id)])] : failures.map(f => f.serverId), [isLive, liveError, liveTunnels, liveServers, failures])
  const scopedFailures = failures.filter(f => effectiveServerId === ALL_SERVERS_ID || f.serverId === effectiveServerId)
  const upCount = scopedTunnels.filter((t) => t.status === "up").length
  const vnis = new Set(scopedTunnels.map((t) => t.vni)).size

  return (
    <>
    <ServerRailLayout
      items={railItems}
      selectedId={effectiveServerId}
      preserveSelection
      onSelect={onSelectServer}
      showAll
      allCount={displayServers.length}
      loading={isLive && loading && displayServers.length === 0}
      header={
        <PageHeader
          crumbs={[{ label: "Управление" }, { label: "VXLAN" }]}
          actions={
            <>
              <ServerRailMobileButton />
              <Button
                variant="outline"
                size="sm"
                onClick={() => { void loadLive() }}
                disabled={!isLive || loading}
              >
                <RefreshCwIcon className={cn("size-4", loading && "animate-spin")} />
                Обновить
              </Button>
              <Badge variant="outline">Только просмотр</Badge>
            </>
          }
        />
      }
    >
        <div className="flex flex-col gap-5">
          {isLive && scopedFailures.length > 0 && <ContextAlert variant="warning" role="alert">
            <ContextTitle>Не все устройства ответили</ContextTitle>
            <ContextDescription>
              <p>Не удалось опросить: {scopedFailures.map(f => f.serverName ?? f.serverId).join(", ")}. Для этих устройств сохранены последние данные; текущее состояние туннелей неизвестно.</p>
              <Button variant="outline" size="sm" disabled={loading} onClick={() => void loadLive()}>Повторить опрос</Button>
            </ContextDescription>
          </ContextAlert>}
          {selectedTunnelId !== null && (
            <ContextAlert variant={liveError || ((!isLive || !loading) && !selectedTunnel) ? "warning" : "info"} role="status" aria-label="VXLAN по ссылке">
              <ContextTitle className="line-clamp-none wrap-anywhere">{selectedTunnel ? "Выбран VXLAN: " + selectedTunnel.name : "VXLAN по ссылке"}</ContextTitle>
              <ContextDescription>
                <p className="wrap-anywhere">{isLive && loading ? "Загрузка туннеля…" : isLive && liveError ? "Не удалось обновить VXLAN. Повторите обновление; сохранённые данные могут быть устаревшими." : selectedTunnel ? (serverById[selectedServerId]?.name ?? selectedServerId) + " · VNI " + selectedTunnel.vni + ". Список и сводка ограничены выбранным туннелем." : "Туннель не получен для указанного сервера. Проверьте ссылку и доступ к устройству: туннель может отсутствовать или устройство не ответило на опрос."}</p>
                <div className="flex flex-wrap gap-4">
                  <Link href={allTunnelsHref} className="underline underline-offset-2">Все туннели сервера</Link>
                  <Link href="/dashboard" className="underline underline-offset-2">К дашборду</Link>
                </div>
              </ContextDescription>
            </ContextAlert>
          )}


          {isLive && liveError && selectedTunnelId === null && (
            <Alert variant="warning" className="py-2">
              <AlertCircleIcon />
              <AlertDescription className="text-xs">Ошибка загрузки: {liveError}</AlertDescription>
            </Alert>
          )}
          {isLive && <div role="group" aria-label="Свежесть VXLAN" className="text-xs text-muted-foreground">
            {effectiveServerId === ALL_SERVERS_ID ? "Последний ответ получен в приложении: " : "Ответ устройства получен в приложении: "}
            {(effectiveServerId === ALL_SERVERS_ID ? responseReceipt : readReceipt[effectiveServerId]) ? <time dateTime={(effectiveServerId === ALL_SERVERS_ID ? responseReceipt : readReceipt[effectiveServerId])!} title="Клиентское время ответа, не время измерения RouterOS">{new Date((effectiveServerId === ALL_SERVERS_ID ? responseReceipt : readReceipt[effectiveServerId])!).toLocaleString("ru-RU")}</time> : "неизвестно"}
          </div>}
          {isLive && loading && <p role="status" className="text-sm text-muted-foreground">{hasLoaded ? "Обновление VXLAN…" : "Загрузка VXLAN…"}</p>}
          {isLive && liveError && hasLoaded && <p className="text-sm text-muted-foreground">Показаны последние полученные данные; они могут быть устаревшими.</p>}
          {selectedTunnelId === null && isLive && !loading && displayTunnels.length === 0 && !liveError && scopedFailures.length === 0 && (
            <div className="rounded-md border border-border bg-muted/30 px-4 py-6 text-center text-sm text-muted-foreground">
              На опрошенных серверах нет VXLAN-интерфейсов
            </div>
          )}
          {mode === "mock" && (
            <span className="inline-flex w-fit items-center gap-1.5 rounded-full border border-border bg-muted/40 px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground">
              Моковые данные
            </span>
          )}

          <KpiStatGrid
            aria-label="Сводка VXLAN"
            items={[
              {
                id: "tunnels",
                label: "Туннелей",
                value: isLive && (!hasLoaded || !!liveError || scopedFailures.length > 0) ? "—" : scopedTunnels.length,
                icon: <NetworkIcon className="size-4" />,
                iconClassName: "text-muted-foreground",
              },
              {
                id: "up",
                label: "Активных",
                value: isLive && (!hasLoaded || !!liveError || scopedFailures.length > 0) ? "—" : upCount,
                icon: <LayersIcon className="size-4" />,
                iconClassName: "text-success",
              },
              {
                id: "vni",
                label: "VNI",
                value: isLive && (!hasLoaded || !!liveError || scopedFailures.length > 0) ? "—" : vnis,
                icon: <LayersIcon className="size-4" />,
                iconClassName: "text-info",
              },
              {
                id: "servers",
                label: "Серверов",
                value: isLive && (!hasLoaded || !!liveError || scopedFailures.length > 0) ? "—" : new Set(scopedTunnels.map((t) => t.serverId)).size,
                icon: <NetworkIcon className="size-4" />,
                iconClassName: "text-primary",
              },
            ]}
          />

          <div className="flex items-start gap-3 rounded-lg bg-sky-500/5 border border-sky-500/20 px-4 py-3 text-sm">
            <NetworkIcon className="size-5 text-sky-500 shrink-0 mt-0.5" />
            <div>
              <p className="font-medium text-foreground">VXLAN — L2-over-L3 оверлей для RouterOS 7.x</p>
              <p className="text-muted-foreground text-xs mt-0.5">
                VXLAN переносит L2 через IP-сеть. VNI определяет сегмент; шифрование зависит от настроенного транспорта.
              </p>
            </div>
          </div>

          <DataPageCard>
            <DataPageToolbar
              search={search}
              onSearchChange={setSearch}
              searchPlaceholder="Поиск по имени, VNI, серверу…"
              countLabel={isLive && !hasLoaded ? "Туннели пока неизвестны" : `${filtered.length} туннелей`}
            />
            {(!isLive || hasLoaded) && <VxlanDataGrid
              tunnels={filtered}
              failedServerIds={failedServerIds}
              servers={displayServers}
              onExport={tunnel => setExportSnapshot({ tunnel, servers: serverById, at: isLive ? readReceipt[tunnel.serverId] ?? null : null, stale: isLive && (!!liveError || failedServerIds.includes(tunnel.serverId)), mock: !isLive })}
            />}
          </DataPageCard>

          <OpsPanel title="Справка VXLAN" contentClassName="px-5 py-4">
            <p className="text-xs text-muted-foreground">Экспорт содержит интерфейс, известный MTU и статические VTEP выбранного туннеля. IP-адреса, bridge и FDB в него не входят. <a href="https://help.mikrotik.com/docs/spaces/ROS/pages/100007937/VXLAN" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2">Параметры VXLAN в документации MikroTik</a></p>
          </OpsPanel>

        </div>
    </ServerRailLayout>

      <ExportSheet
        open={!!exportSnapshot}
        tunnel={exportSnapshot?.tunnel ?? null}
        onClose={() => setExportSnapshot(null)}
        serverById={exportSnapshot?.servers ?? {}}
        receivedAt={exportSnapshot?.at ?? null}
        stale={exportSnapshot?.stale ?? false}
        mock={exportSnapshot?.mock ?? !isLive}
      />
    </>
  )
}

function VxlanRoute() {
  const { mode, backendUrl } = useDataSource()
  const params = useSearchParams()
  const router = useRouter()
  const serverId = params.get("server") ?? ALL_SERVERS_ID
  const tunnelId = params.get("tunnel")
  const rest = new URLSearchParams(params.toString())
  rest.delete("tunnel")
  const allTunnelsHref = "/vxlan" + (rest.size ? "?" + rest.toString() : "")
  return <VxlanPageContent key={JSON.stringify([serverId, tunnelId, mode, backendUrl])} selectedServerId={serverId} selectedTunnelId={tunnelId} allTunnelsHref={allTunnelsHref} onSelectServer={id => {
    const next = new URLSearchParams(rest)
    if (id === ALL_SERVERS_ID) next.delete("server")
    else next.set("server", id)
    router.push("/vxlan" + (next.size ? "?" + next.toString() : ""))
  }} />
}

export default function VxlanPage() {
  return <Suspense fallback={<div role="status">Загрузка VXLAN…</div>}><VxlanRoute /></Suspense>
}