"use client"

import { useCallback, useEffect, useMemo, useState } from "react"
import { PageHeader } from "@/components/page-header"
import { routerContainers as mockContainers, servers as mockServers } from "@/lib/data"
import type { RouterContainer, Server } from "@/lib/data"
import { Flag } from "@/components/flag"
import { Frame, FramePanel } from "@/components/reui/frame"
import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
import { OpsPanel } from "@/components/ops-panel"
import { Button } from "@/components/ui/button"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { cn } from "@/lib/utils"
import { toast } from "sonner"
import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"
import {
  BoxIcon, PlayIcon, StopCircleIcon, SearchIcon,
  MoreHorizontalIcon, Trash2Icon, PencilIcon, PowerIcon,
  CodeXmlIcon, ActivityIcon, ServerIcon,
  TerminalIcon, AlertCircleIcon, RefreshCwIcon,
} from "lucide-react"
import { CodeExportSheet } from "@/components/reui-kit/code-export-sheet"
import { useDataSource } from "@/lib/data-source"
import { requestJson } from "@/shared/api/http-client"
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"]
  latency?: number | null
}

interface ContainersApiResponse {
  containers: RouterContainer[]
}

function mapBackendServer(s: BackendServer): Server {
  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 ?? "online",
    latency: s.latency ?? null,
    sessions: 0,
  }
}

function statusConfig(status: RouterContainer["status"]) {
  return {
    running: {
      dot: "bg-emerald-500 animate-pulse",
      badge: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
      label: "Running",
    },
    stopped: {
      dot: "bg-muted-foreground",
      badge: "bg-muted/50 text-muted-foreground border-border",
      label: "Stopped",
    },
    error: {
      dot: "bg-red-500 animate-pulse",
      badge: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
      label: "Error",
    },
  }[status]
}

function generateContainerRsc(c: RouterContainer, serverById: Record<string, Server>): string {
  const srv = serverById[c.serverId]
  const lines: string[] = []
  lines.push(`# RouterOS Container — ${c.name}`)
  if (srv) lines.push(`# Сервер: ${srv.name} (${srv.host})`)
  lines.push(`# Образ: ${c.image}:${c.tag}`)
  lines.push(`# RouterOS 7.4+ · /container`)
  lines.push(``)

  for (const iface of c.interfaces) {
    lines.push(`/interface/veth/add name=${iface} address=172.17.0.2/24 gateway=172.17.0.1`)
  }
  lines.push(``)

  if (c.envs.length > 0) {
    lines.push(`/container/envs/add name=${c.name}-envs \\`)
    for (const { key, value } of c.envs) {
      lines.push(`  ${key}="${value}" \\`)
    }
    lines.push(``)
  }

  for (const m of c.mounts) {
    lines.push(`/container/mounts/add name=${c.name}-mount-${m.dst.replace(/\//g, "-").slice(1)} \\`)
    if (m.src) lines.push(`  src=${m.src} \\`)
    lines.push(`  dst=${m.dst}`)
    lines.push(``)
  }

  lines.push(`/container/add \\`)
  lines.push(`  remote-image=${c.image}:${c.tag} \\`)
  lines.push(`  interface=${c.interfaces[0] ?? "veth-container"} \\`)
  if (c.envs.length > 0) lines.push(`  envlist=${c.name}-envs \\`)
  if (c.mounts.length > 0) lines.push(`  mounts=${c.mounts.map((m) => `${c.name}-mount-${m.dst.replace(/\//g, "-").slice(1)}`).join(",")} \\`)
  if (c.cmd) lines.push(`  cmd="${c.cmd}" \\`)
  if (c.startOnBoot) lines.push(`  start-on-boot=yes \\`)
  if (c.comment) lines.push(`  comment="${c.comment}" \\`)
  lines.push(`  logging=yes`)

  return lines.join("\n")
}

function ExportSheet({
  open, container, onClose, serverById,
}: {
  open: boolean
  container: RouterContainer | null
  onClose: () => void
  serverById: Record<string, Server>
}) {
  const code = useMemo(
    () => (container ? generateContainerRsc(container, serverById) : ""),
    [container, serverById],
  )

  return (
    <CodeExportSheet
      open={open}
      onClose={onClose}
      title="Экспорт Container"
      description="RouterOS 7.4+ · /container · /interface/veth"
      formats={[
        {
          id: "rsc",
          label: "MikroTik .rsc",
          filename: `${container?.name ?? "container"}.rsc`,
          code,
        },
      ]}
    />
  )
}

function ContainerCard({
  container,
  server,
  live,
  busy,
  onExport,
  onStart,
  onStop,
  onRestart,
  onRemove,
}: {
  container: RouterContainer
  server?: Server
  live: boolean
  busy: boolean
  onExport: () => void
  onStart: () => void
  onStop: () => void
  onRestart: () => void
  onRemove: () => void
}) {
  const cfg = statusConfig(container.status)
  const canMutate = live && Boolean(container.rosId)

  return (
    <Frame dense className="w-full overflow-hidden">
      <FramePanel className="p-0 overflow-hidden">
      <div className="px-4 py-3 border-b flex items-center justify-between gap-2 bg-muted/10">
        <div className="flex items-center gap-2 min-w-0">
          <span className={cn("size-2 rounded-full shrink-0", cfg.dot)} />
          <span className="font-mono font-semibold text-sm truncate">{container.name}</span>
          <span className={cn("text-[10px] font-mono px-1.5 py-0.5 rounded border shrink-0", cfg.badge)}>
            {cfg.label}
          </span>
        </div>
        <DropdownMenu>
          <DropdownMenuTrigger render={
            <Button variant="ghost" size="icon" className="size-7 shrink-0" disabled={busy}>
              <MoreHorizontalIcon className="size-4" />
            </Button>
          } />
          <DropdownMenuContent side="bottom" align="end">
            {container.status === "running" ? (
              <DropdownMenuItem disabled={!canMutate} onClick={onStop}>
                <StopCircleIcon className="size-4 text-amber-500" />Остановить
              </DropdownMenuItem>
            ) : (
              <DropdownMenuItem disabled={!canMutate} onClick={onStart}>
                <PlayIcon className="size-4 text-emerald-500" />Запустить
              </DropdownMenuItem>
            )}
            <DropdownMenuItem disabled><TerminalIcon className="size-4" />Логи</DropdownMenuItem>
            <DropdownMenuItem disabled><PencilIcon className="size-4" />Редактировать</DropdownMenuItem>
            <DropdownMenuItem onClick={onExport}><CodeXmlIcon className="size-4" />Экспорт .rsc</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem disabled={!canMutate} onClick={onRestart}>
              <PowerIcon className="size-4" />Перезапустить
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem variant="destructive" disabled={!canMutate} onClick={onRemove}>
              <Trash2Icon className="size-4" />Удалить
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <div className="px-4 py-3 flex flex-col gap-3">
        <div className="flex items-center gap-2">
          <BoxIcon className="size-3.5 text-muted-foreground shrink-0" />
          <span className="font-mono text-xs text-foreground/80">
            {container.image}:<span className="text-muted-foreground">{container.tag}</span>
          </span>
        </div>

        {server && (
          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            <ServerIcon className="size-3.5 shrink-0" />
            <Flag code={server.country} size={12} />
            <span className="font-mono">{server.name}</span>
          </div>
        )}

        {container.status === "running" && (container.uptime || container.cpu !== undefined || container.memMb !== undefined) && (
          <div className="flex items-center gap-4 text-xs text-muted-foreground border-t pt-2.5">
            {container.uptime && (
              <div className="flex items-center gap-1">
                <ActivityIcon className="size-3 text-emerald-500" />
                <span>{container.uptime}</span>
              </div>
            )}
            {container.cpu !== undefined && (
              <div>
                <span className="text-muted-foreground">CPU </span>
                <span className={cn("font-mono font-medium",
                  container.cpu > 50 ? "text-amber-500" : "text-foreground")}>
                  {container.cpu}%
                </span>
              </div>
            )}
            {container.memMb !== undefined && (
              <div>
                <span className="text-muted-foreground">RAM </span>
                <span className="font-mono font-medium">{container.memMb} МБ</span>
              </div>
            )}
          </div>
        )}

        {container.interfaces.length > 0 && (
          <div className="flex flex-wrap gap-1">
            {container.interfaces.map((i) => (
              <span key={i} className="text-[10px] font-mono px-1.5 py-0.5 bg-muted border rounded text-muted-foreground">
                {i}
              </span>
            ))}
          </div>
        )}

        {container.mounts.length > 0 && (
          <div className="flex flex-col gap-1">
            {container.mounts.map((m, idx) => (
              <div key={idx} className="text-[11px] font-mono text-muted-foreground flex items-center gap-1">
                <span className="text-muted-foreground/40">→</span>
                <span>{m.dst}</span>
                {m.src && <><span className="text-muted-foreground/40">←</span><span>{m.src}</span></>}
              </div>
            ))}
          </div>
        )}

        {container.comment && (
          <p className="text-xs text-muted-foreground border-t pt-2">{container.comment}</p>
        )}
      </div>
      </FramePanel>
    </Frame>
  )
}

export default function ContainersPage() {
  const { mode, backendUrl } = useDataSource()
  const isLive = mode === "live"

  const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState<RouterContainer["status"] | "all">("all")
  const [exportContainer, setExportContainer] = useState<RouterContainer | null>(null)
  const [selectedServerId, setSelectedServerId] = useState(ALL_SERVERS_ID)

  const [liveContainers, setLiveContainers] = useState<RouterContainer[]>([])
  const [liveServers, setLiveServers] = useState<Server[]>([])
  const [loading, setLoading] = useState(false)
  const [busyId, setBusyId] = useState<string | null>(null)
  const [liveError, setLiveError] = useState<string | null>(null)

  const loadLive = useCallback(async () => {
    if (!isLive) return
    setLoading(true)
    setLiveError(null)
    try {
      const [cRes, sRes] = await Promise.all([
        requestJson<ContainersApiResponse>(backendUrl, "/api/containers"),
        requestJson<BackendServer[]>(backendUrl, "/api/servers"),
      ])
      setLiveContainers(cRes.containers ?? [])
      setLiveServers(sRes.filter((s) => s.enabled).map(mapBackendServer))
    } catch (e) {
      setLiveError(e instanceof Error ? e.message : "Ошибка загрузки")
      setLiveContainers([])
    } finally {
      setLoading(false)
    }
  }, [isLive, backendUrl])

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

  const displayContainers = isLive ? liveContainers : mockContainers
  const displayServers = isLive ? liveServers : mockServers.filter((s) => s.enabled)

  const effectiveServerId =
    selectedServerId === ALL_SERVERS_ID || displayServers.some((s) => s.id === selectedServerId)
      ? selectedServerId
      : ALL_SERVERS_ID

  const scoped = useMemo(() => {
    if (effectiveServerId === ALL_SERVERS_ID) return displayContainers
    return displayContainers.filter((c) => c.serverId === effectiveServerId)
  }, [displayContainers, effectiveServerId])

  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: s.status,
      type: s.type,
      enabled: s.enabled,
      meta: String(displayContainers.filter((c) => c.serverId === s.id).length),
    }))
  ), [displayServers, displayContainers])

  const filtered = useMemo(() => {
    return scoped.filter((c) => {
      if (statusFilter !== "all" && c.status !== statusFilter) return false
      if (!search) return true
      const q = search.toLowerCase()
      return (
        c.name.toLowerCase().includes(q) ||
        c.image.toLowerCase().includes(q) ||
        (serverById[c.serverId]?.name.toLowerCase().includes(q) ?? false)
      )
    })
  }, [search, statusFilter, scoped, serverById])

  const running = scoped.filter((c) => c.status === "running").length
  const stopped = scoped.filter((c) => c.status === "stopped").length
  const errors = scoped.filter((c) => c.status === "error").length

  async function mutate(c: RouterContainer, action: "start" | "stop" | "restart" | "remove") {
    if (!isLive || !c.rosId) {
      toast.info("Действие доступно только в live-режиме")
      return
    }
    if (action === "remove" && !window.confirm(`Удалить контейнер ${c.name}?`)) return
    setBusyId(c.id)
    try {
      await requestJson(backendUrl, `/api/servers/${c.serverId}/containers/${action}`, {
        method: "POST",
        body: JSON.stringify({ rosId: c.rosId }),
      })
      const labels = { start: "запущен", stop: "остановлен", restart: "перезапущен", remove: "удалён" }
      toast.success(`${c.name}: ${labels[action]}`)
      await loadLive()
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Ошибка RouterOS")
    } finally {
      setBusyId(null)
    }
  }

  return (
    <>
    <ServerRailLayout
      items={railItems}
      selectedId={effectiveServerId}
      onSelect={setSelectedServerId}
      showAll
      allCount={displayServers.length}
      loading={isLive && loading && displayServers.length === 0}
      header={
        <PageHeader
          crumbs={[{ label: "Управление" }, { label: "Контейнеры" }]}
          actions={
            <>
              <ServerRailMobileButton />
              <Button
                variant="outline"
                size="sm"
                onClick={() => { void loadLive() }}
                disabled={!isLive || loading}
              >
                <RefreshCwIcon className={cn("size-4", loading && "animate-spin")} />
                Обновить
              </Button>
              <Button size="sm">
                <BoxIcon className="size-4" />Новый контейнер
              </Button>
            </>
          }
        />
      }
    >
        <div className="flex flex-col gap-5">

          {isLive && liveError && (
            <Alert variant="warning" className="py-2">
              <AlertCircleIcon />
              <AlertDescription className="text-xs">Ошибка загрузки: {liveError}</AlertDescription>
            </Alert>
          )}
          {isLive && !loading && displayContainers.length === 0 && !liveError && (
            <div className="rounded-md border border-border bg-muted/30 px-4 py-6 text-center text-sm text-muted-foreground">
              Контейнеры не найдены. Нужен пакет container (RouterOS 7.4+).
            </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="Сводка контейнеров"
            items={[
              {
                id: "all",
                label: "Всего",
                value: scoped.length,
                icon: <BoxIcon className="size-4" />,
                iconClassName: "text-muted-foreground",
              },
              {
                id: "running",
                label: "Running",
                value: running,
                icon: <PlayIcon className="size-4" />,
                iconClassName: "text-success",
              },
              {
                id: "stopped",
                label: "Stopped",
                value: stopped,
                icon: <StopCircleIcon className="size-4" />,
                iconClassName: "text-muted-foreground",
              },
              {
                id: "errors",
                label: "Ошибок",
                value: errors,
                icon: <AlertCircleIcon className="size-4" />,
                iconClassName: "text-destructive",
                variant: errors > 0 ? "destructive" : "default",
              },
            ]}
          />

          <div className="flex items-start gap-3 rounded-lg bg-violet-500/5 border border-violet-500/20 px-4 py-3 text-sm">
            <BoxIcon className="size-5 text-violet-500 shrink-0 mt-0.5" />
            <div>
              <p className="font-medium text-violet-600 dark:text-violet-400">Контейнеры доступны с RouterOS 7.4+</p>
              <p className="text-muted-foreground text-xs mt-0.5">
                Поддерживаются Docker-совместимые образы. Требуется установка пакета <code className="font-mono bg-muted px-1 rounded">container</code>.
                Интерфейсы veth создаются автоматически.
              </p>
            </div>
          </div>

          <div className="flex items-center gap-3 flex-wrap">
            <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="Поиск по имени, образу, серверу…"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>

            <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5">
              {(["all", "running", "stopped", "error"] as const).map((s) => (
                <button key={s}
                  onClick={() => setStatusFilter(s)}
                  className={cn(
                    "px-3 py-1 text-xs rounded whitespace-nowrap transition-colors",
                    statusFilter === s
                      ? "bg-background text-foreground shadow-sm"
                      : "text-muted-foreground hover:text-foreground",
                  )}>
                  {s === "all" ? "Все" : s === "running" ? "Running" : s === "stopped" ? "Stopped" : "Error"}
                </button>
              ))}
            </div>

            <span className="text-sm text-muted-foreground ml-auto">{filtered.length} контейнеров</span>
          </div>

          {filtered.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 text-center text-muted-foreground">
              <BoxIcon className="size-10 mb-3 opacity-20" />
              <p className="text-sm font-medium">Контейнеры не найдены</p>
              <p className="text-xs mt-1">Добавьте первый контейнер или измените фильтр</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
              {filtered.map((c) => (
                <ContainerCard
                  key={c.id}
                  container={c}
                  server={serverById[c.serverId]}
                  live={isLive}
                  busy={busyId === c.id}
                  onExport={() => setExportContainer(c)}
                  onStart={() => { void mutate(c, "start") }}
                  onStop={() => { void mutate(c, "stop") }}
                  onRestart={() => { void mutate(c, "restart") }}
                  onRemove={() => { void mutate(c, "remove") }}
                />
              ))}
            </div>
          )}

          <OpsPanel title="RouterOS 7.4+ · /container — быстрые команды" contentClassName="px-5 py-4">
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs font-mono">
                {[
                  {
                    title: "Установка пакета",
                    lines: [
                      "# Скачать пакет container:",
                      "# mikrotik.com → Software",
                      "",
                      "/system/package/install",
                      "  container",
                      "",
                      "# Перезагрузить:",
                      "/system/reboot",
                    ],
                  },
                  {
                    title: "Создать контейнер",
                    lines: [
                      "# veth интерфейс:",
                      "/interface/veth/add \\",
                      "  name=veth-nginx \\",
                      "  address=172.17.0.2/24 \\",
                      "  gateway=172.17.0.1",
                      "",
                      "# Контейнер:",
                      "/container/add \\",
                      "  remote-image=nginx:alpine \\",
                      "  interface=veth-nginx",
                    ],
                  },
                  {
                    title: "Управление",
                    lines: [
                      "# Список:",
                      "/container/print",
                      "",
                      "# Запуск:",
                      "/container/start 0",
                      "",
                      "# Остановка:",
                      "/container/stop 0",
                      "",
                      "# Логи:",
                      "/container/shell 0",
                    ],
                  },
                ].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>
          </OpsPanel>

        </div>
    </ServerRailLayout>

      <ExportSheet
        open={!!exportContainer}
        container={exportContainer}
        onClose={() => setExportContainer(null)}
        serverById={serverById}
      />
    </>
  )
}