"use client"

import { useMemo, useState } from "react"
import { PageHeader } from "@/components/page-header"
import { vxlanTunnels, servers } from "@/lib/data"
import type { VxlanTunnel } from "@/lib/data"
import { Flag } from "@/components/flag"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"
import {
  SearchIcon, NetworkIcon, PlusIcon, MoreHorizontalIcon,
  Trash2Icon, PencilIcon, PowerIcon, CopyIcon, CheckIcon,
  CodeXmlIcon, LayersIcon,
} from "lucide-react"
import {
  Sheet, SheetContent, SheetHeader, SheetTitle,
  SheetDescription, SheetFooter, SheetClose,
} from "@/components/ui/sheet"

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

function serverFor(id: string) {
  return servers.find((s) => s.id === id)
}

// ─── RSC generator ───────────────────────────────────────────────────────────

function generateVxlanRsc(t: VxlanTunnel): string {
  const srv = serverFor(t.serverId)
  const lines: string[] = []
  lines.push(`# VXLAN — ${t.name} · VNI ${t.vni}`)
  if (srv) lines.push(`# Сервер: ${srv.name} (${srv.host})`)
  lines.push(`# RouterOS 7.x · /interface/vxlan`)
  lines.push(``)
  lines.push(`/interface/vxlan/add \\`)
  lines.push(`  name=${t.name} \\`)
  lines.push(`  vni=${t.vni} \\`)
  lines.push(`  port=${t.dstPort} \\`)
  lines.push(`  vtep-mac-address=auto \\`)
  lines.push(`  arp-proxy=${t.arpProxy ? "yes" : "no"} \\`)
  lines.push(`  mac-learning=${t.macLearning ? "yes" : "no"} \\`)
  lines.push(`  l2mtu=${t.l2mtu} \\`)
  if (t.comment) lines.push(`  comment="${t.comment}" \\`)
  if (!t.enabled) lines.push(`  disabled=yes \\`)
  lines.push(``)

  // FDB entries for remote VTEPs
  for (const vtep of t.remoteVteps) {
    lines.push(`/interface/vxlan/vteps/add \\`)
    lines.push(`  interface=${t.name} \\`)
    lines.push(`  remote-ip=${vtep}`)
    lines.push(``)
  }

  // Bridge
  lines.push(`# Добавить в bridge:`)
  lines.push(`/interface/bridge/port/add \\`)
  lines.push(`  bridge=bridge-overlay \\`)
  lines.push(`  interface=${t.name}`)

  return lines.join("\n")
}

// ─── Export Sheet ─────────────────────────────────────────────────────────────

function ExportSheet({ open, tunnel, onClose }: {
  open: boolean; tunnel: VxlanTunnel | null; onClose: () => void
}) {
  const [copied, setCopied] = useState(false)
  const code = useMemo(() => tunnel ? generateVxlanRsc(tunnel) : "", [tunnel])

  function handleCopy() {
    navigator.clipboard.writeText(code).then(() => {
      setCopied(true); setTimeout(() => setCopied(false), 2000)
    })
  }

  return (
    <Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
      <SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-2xl">
        <SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
          <div className="flex items-start justify-between gap-4">
            <div>
              <SheetTitle>Экспорт VXLAN</SheetTitle>
              <SheetDescription>RouterOS 7.x · /interface/vxlan + vteps</SheetDescription>
            </div>
            <Button variant="outline" size="sm" className="shrink-0" onClick={handleCopy}>
              {copied ? <><CheckIcon className="size-3.5 text-emerald-500" />Скопировано</> : <><CopyIcon className="size-3.5" />Копировать</>}
            </Button>
          </div>
        </SheetHeader>
        <div className="flex-1 overflow-y-auto">
          <pre className="px-6 py-5 text-[12px] font-mono leading-relaxed text-foreground/85 whitespace-pre select-all">
            {code.split("\n").map((line, i) => {
              const isComment = line.startsWith("#")
              const isCmd = /^\//.test(line.trimStart())
              const isParam = /^\s+[a-z]/.test(line)
              return (
                <span key={i} className={
                  isComment ? "text-muted-foreground"
                  : isCmd    ? "text-sky-400"
                  : isParam  ? "text-violet-300"
                  : "text-foreground"
                }>
                  {line}{"\n"}
                </span>
              )
            })}
          </pre>
        </div>
        <SheetFooter className="shrink-0 px-6 py-4 border-t flex-row gap-2">
          <SheetClose render={<Button variant="outline" className="flex-1" />}>Закрыть</SheetClose>
          <Button className="flex-1" onClick={handleCopy}>
            {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
            {copied ? "Скопировано" : "Копировать .rsc"}
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

// ─── Tunnel row ───────────────────────────────────────────────────────────────

function TunnelRow({
  tunnel,
  onExport,
}: {
  tunnel: VxlanTunnel
  onExport: () => void
}) {
  const srv = serverFor(tunnel.serverId)

  return (
    <div className={cn(
      "grid grid-cols-[10px_1fr_1fr_auto_auto_auto_auto_auto_auto_auto_auto] gap-3 px-4 py-3 items-center border-b last:border-b-0 hover:bg-muted/30 transition-colors",
      !tunnel.enabled && "opacity-50",
    )}>
      {/* status dot */}
      <span className={cn(
        "size-2 rounded-full shrink-0",
        tunnel.status === "up" ? "bg-emerald-500" : "bg-red-500",
      )} />

      {/* name */}
      <div className="min-w-0">
        <p className="font-mono font-medium text-sm truncate">{tunnel.name}</p>
        <p className="text-[11px] text-muted-foreground font-mono">VTEP: {tunnel.vtepIp}</p>
      </div>

      {/* server */}
      <div className="flex items-center gap-1.5 text-xs text-muted-foreground min-w-0">
        {srv && <><Flag code={srv.country} size={12} /><span className="font-mono truncate">{srv.name}</span></>}
      </div>

      {/* VNI */}
      <div className="text-center">
        <p className="text-[10px] text-muted-foreground">VNI</p>
        <p className="font-mono text-sm">{tunnel.vni}</p>
      </div>

      {/* Port */}
      <div className="text-center">
        <p className="text-[10px] text-muted-foreground">Port</p>
        <p className="font-mono text-sm">{tunnel.dstPort}</p>
      </div>

      {/* Remote VTEPs */}
      <div className="text-center">
        <p className="text-[10px] text-muted-foreground">Remote VTEP</p>
        <p className="font-mono text-sm">{tunnel.remoteVteps.length}</p>
      </div>

      {/* ARP Proxy */}
      <span className={cn("text-[10px] font-mono px-1.5 py-0.5 rounded",
        tunnel.arpProxy ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-muted text-muted-foreground")}>
        ARP {tunnel.arpProxy ? "✓" : "✗"}
      </span>

      {/* MAC learning */}
      <span className={cn("text-[10px] font-mono px-1.5 py-0.5 rounded",
        tunnel.macLearning ? "bg-sky-500/10 text-sky-600 dark:text-sky-400" : "bg-muted text-muted-foreground")}>
        MAC {tunnel.macLearning ? "✓" : "✗"}
      </span>

      {/* Status badge */}
      <span className={cn(
        "text-[11px] font-mono px-2 py-0.5 rounded border whitespace-nowrap",
        tunnel.status === "up"
          ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
          : "bg-red-500/10 text-red-500 border-red-500/20",
      )}>
        {tunnel.status === "up" ? "UP" : "DOWN"}
      </span>

      {/* menu */}
      <DropdownMenu>
        <DropdownMenuTrigger render={
          <Button variant="ghost" size="icon" className="size-7">
            <MoreHorizontalIcon className="size-4" />
          </Button>
        } />
        <DropdownMenuContent side="bottom" align="end">
          <DropdownMenuItem onClick={onExport}><CodeXmlIcon className="size-4" />Экспорт .rsc</DropdownMenuItem>
          <DropdownMenuItem><PencilIcon className="size-4" />Редактировать</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem><PowerIcon className="size-4" />{tunnel.enabled ? "Отключить" : "Включить"}</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem variant="destructive"><Trash2Icon className="size-4" />Удалить</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

// ════════════════════════════════════════════════════════════════════════════
export default function VxlanPage() {
  const [search, setSearch]           = useState("")
  const [exportTunnel, setExportTunnel] = useState<VxlanTunnel | null>(null)

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

  const upCount = vxlanTunnels.filter((t) => t.status === "up").length
  const vnis    = new Set(vxlanTunnels.map((t) => t.vni)).size

  return (
    <div className="flex flex-col h-full">
      <PageHeader
        crumbs={[{ label: "Управление" }, { label: "VXLAN" }]}
        actions={
          <Button size="sm">
            <PlusIcon className="size-4" />Новый VXLAN
          </Button>
        }
      />

      <div className="flex-1 overflow-y-auto p-6">
        <div className="flex flex-col gap-5">

          {/* KPI */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            {[
              { label: "Туннелей",     value: vxlanTunnels.length, icon: <NetworkIcon className="size-4 text-muted-foreground" /> },
              { label: "Активных",     value: upCount,             icon: <LayersIcon className="size-4 text-emerald-500" /> },
              { label: "Уникальных VNI", value: vnis,              icon: <LayersIcon className="size-4 text-sky-400" /> },
              { label: "Серверов",     value: new Set(vxlanTunnels.map((t) => t.serverId)).size, icon: <NetworkIcon className="size-4 text-violet-400" /> },
            ].map((s) => (
              <Card key={s.label}>
                <CardContent className="px-5 py-4 flex items-start justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">{s.label}</p>
                    <p className="text-2xl font-semibold tabular-nums mt-0.5">{s.value}</p>
                  </div>
                  <div className="mt-0.5">{s.icon}</div>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* Info banner */}
          <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-sky-600 dark:text-sky-400">VXLAN — L2-over-L3 оверлей для RouterOS 7.x</p>
              <p className="text-muted-foreground text-xs mt-0.5">
                Доступен с RouterOS 7.1+. VNI (Virtual Network Identifier) — уникальный идентификатор сегмента (0–16777215).
                Рекомендуется использовать совместно с WireGuard или GRE туннелями для шифрования.
              </p>
            </div>
          </div>

          {/* Table */}
          <Card>
            <div className="flex items-center gap-3 px-4 py-3 border-b">
              <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[240px]">
                <SearchIcon className="size-3.5 text-muted-foreground shrink-0" />
                <input
                  className="flex-1 bg-transparent outline-none placeholder:text-muted-foreground text-sm"
                  placeholder="Поиск по имени, VNI, серверу…"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                />
              </div>
              <span className="text-sm text-muted-foreground ml-auto">{filtered.length} туннелей</span>
            </div>

            {/* header */}
            <div className="grid grid-cols-[10px_1fr_1fr_auto_auto_auto_auto_auto_auto_auto_auto] gap-3 px-4 py-2 border-b text-[10px] font-semibold uppercase tracking-widest text-muted-foreground bg-muted/20">
              <span />
              <span>Имя / VTEP IP</span>
              <span>Сервер</span>
              <span>VNI</span>
              <span>Port</span>
              <span>Remote</span>
              <span />
              <span />
              <span>Статус</span>
              <span />
            </div>

            {filtered.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-16 text-center text-muted-foreground">
                <NetworkIcon className="size-10 mb-3 opacity-20" />
                <p className="text-sm font-medium">VXLAN туннели не найдены</p>
              </div>
            ) : (
              filtered.map((t) => (
                <TunnelRow key={t.id} tunnel={t} onExport={() => setExportTunnel(t)} />
              ))
            )}
          </Card>

          {/* Reference */}
          <Card>
            <CardContent className="px-5 py-4">
              <p className="text-xs font-medium text-muted-foreground mb-3">
                RouterOS 7 · /interface/vxlan — быстрые команды
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs font-mono">
                {[
                  {
                    title: "Создать VXLAN",
                    lines: [
                      "/interface/vxlan/add \\",
                      "  name=vxlan-10 \\",
                      "  vni=10010 \\",
                      "  port=8472 \\",
                      "  arp-proxy=yes \\",
                      "  mac-learning=yes",
                    ],
                  },
                  {
                    title: "Добавить VTEP",
                    lines: [
                      "/interface/vxlan/vteps/add \\",
                      "  interface=vxlan-10 \\",
                      "  remote-ip=10.0.1.1",
                      "",
                      "/interface/vxlan/vteps/add \\",
                      "  interface=vxlan-10 \\",
                      "  remote-ip=10.0.2.1",
                    ],
                  },
                  {
                    title: "Bridge + IP",
                    lines: [
                      "/interface/bridge/add \\",
                      "  name=br-overlay",
                      "",
                      "/interface/bridge/port/add \\",
                      "  bridge=br-overlay \\",
                      "  interface=vxlan-10",
                      "",
                      "/ip/address/add \\",
                      "  address=10.100.0.1/24 \\",
                      "  interface=br-overlay",
                    ],
                  },
                ].map((b) => (
                  <div key={b.title}>
                    <p className="font-sans font-semibold text-foreground/80 mb-1.5 text-[11px] uppercase tracking-wide">{b.title}</p>
                    <pre className="bg-zinc-950 rounded-md p-2.5 text-zinc-300 text-[11px] leading-relaxed overflow-x-auto whitespace-pre">
                      {b.lines.join("\n")}
                    </pre>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

        </div>
      </div>

      <ExportSheet
        open={!!exportTunnel}
        tunnel={exportTunnel}
        onClose={() => setExportTunnel(null)}
      />
    </div>
  )
}