"use client"

import { useEffect, useState } from "react"
import useSWR, { mutate as refreshCache } from "swr"
import { ArrowLeft, ChevronDown, DatabaseBackup, ExternalLink, Globe, Pencil, Plus, Server, Trash2 } from "lucide-react"
import { Button } from "./ui/button"
import { Input } from "./ui/input"
import { Label } from "./ui/label"
import { Switch } from "./ui/switch"
import { Checkbox } from "./ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
} from "./ui/dropdown-menu"
import { fetchApi } from "../lib/api-config"
import { monitorLinkError } from "../lib/monitor-link-errors"
import { useT } from "../lib/i18n/provider"

interface MonitorLink {
  key: string
  name: string
  product: "pve" | "pbs"
  group: "cluster" | "standalone" | "pbs"
  url: string | null
  status: "online" | "offline" | "unknown" | "local"
  native_url?: string | null
  manual: boolean
  // A PBS installed on this same host.
  local?: boolean
  hidden: boolean
  custom_url: boolean
}
interface MonitorLinks { self: { name: string; product: string }; links: MonitorLink[] }

const GROUPS = ["cluster", "standalone", "pbs"] as const
const fetcher = (url: string) => fetchApi<MonitorLinks>(url)
const ORIGIN_KEY = "proxmenux-came-from"
const DECLINED_KEY = "proxmenux-links-declined"
const MAX_CARRIED = 16

interface Carried { url: string; name: string; product: "pve" | "pbs" }
interface Origin extends Carried { links?: Carried[] }

// A Monitor address is accepted only as a bare http(s) origin.
function bareOrigin(value: unknown): string | null {
  if (typeof value !== "string") return null
  try {
    const parsed = new URL(value)
    return /^https?:$/.test(parsed.protocol) && parsed.origin === value ? parsed.origin : null
  } catch { return null }
}

// localhost names the computer that opens the address, never another node.
function isLoopback(url: string): boolean {
  try {
    const host = new URL(url).hostname.replace(/^\[|\]$/g, "").toLowerCase()
    return host === "localhost" || host.endsWith(".localhost") || /^127\./.test(host)
      || host === "::1" || /^::ffff:127\./.test(host) || /^::ffff:7f/.test(host)
  } catch { return false }
}

// The Monitors the source already links, carried in the jump so this one can add them too.
function readCarried(raw: string | null): Carried[] {
  if (!raw) return []
  try {
    const rows = JSON.parse(decodeURIComponent(escape(atob(raw.replace(/-/g, "+").replace(/_/g, "/")))))
    if (!Array.isArray(rows)) return []
    const seen = new Set<string>()
    const out: Carried[] = []
    for (const row of rows.slice(0, MAX_CARRIED)) {
      const url = bareOrigin(row?.u)
      if (!url || url === window.location.origin || isLoopback(url) || seen.has(url)) continue
      seen.add(url)
      out.push({ url, name: String(row?.n || new URL(url).hostname).slice(0, 64), product: row?.p === "pbs" ? "pbs" : "pve" })
    }
    return out
  } catch { return [] }
}

function writeCarried(rows: Carried[]): string {
  const json = JSON.stringify(rows.slice(0, MAX_CARRIED).map(row => ({ n: row.name, u: row.url, p: row.product })))
  return btoa(unescape(encodeURIComponent(json))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
}

// The Monitor a jump came from, as the browser reached it. Only a bare http(s)
// origin is accepted, and the parameters leave the address at once.
function takeOrigin(): (Origin & { fresh?: boolean }) | null {
  if (typeof window === "undefined") return null
  const params = new URLSearchParams(window.location.search)
  const from = params.get("pmx_from")
  if (from !== null) {
    const name = params.get("pmx_name") || ""
    const product = params.get("pmx_product") === "pbs" ? "pbs" : "pve"
    const links = readCarried(params.get("pmx_links"))
    for (const key of ["pmx_from", "pmx_name", "pmx_product", "pmx_links"]) params.delete(key)
    const query = params.toString()
    window.history.replaceState(null, "", window.location.pathname + (query ? `?${query}` : "") + window.location.hash)
    try {
      const parsed = new URL(from)
      if (/^https?:$/.test(parsed.protocol) && parsed.origin === from && parsed.origin !== window.location.origin) {
        const origin: Origin = { url: parsed.origin, name: (name || parsed.hostname).slice(0, 64), product,
          links: links.filter(link => link.url !== parsed.origin) }
        try { sessionStorage.setItem(ORIGIN_KEY, JSON.stringify(origin)) } catch { /* private mode */ }
        return { ...origin, fresh: true }
      }
    } catch { /* not an address */ }
  }
  try {
    const stored = JSON.parse(sessionStorage.getItem(ORIGIN_KEY) || "null")
    return stored && typeof stored.url === "string" && /^https?:\/\//.test(stored.url) ? stored : null
  } catch { return null }
}

// Where a link leads: its Monitor, or the native PBS interface when no Monitor answers there.
function destination(link: MonitorLink): { href: string; native: boolean } | null {
  if (link.local && !link.url) return { href: `https://${window.location.hostname}:8007`, native: true }
  if (link.product === "pbs" && link.status !== "online" && link.native_url) return { href: link.native_url, native: true }
  return link.url ? { href: link.url, native: false } : null
}

function ProductIcon({ product, className }: { product: string; className?: string }) {
  return product === "pbs" ? <DatabaseBackup className={className} /> : <Server className={className} />
}

export function MonitorSwitcher({ nodeName, compact = false }: { nodeName: string; compact?: boolean }) {
  const t = useT()
  const [manageOpen, setManageOpen] = useState(false)
  // The backend keeps the list ready, so the menu opens already filled.
  const { data, error, isLoading } = useSWR<MonitorLinks>("/api/monitor-links", fetcher, { revalidateOnFocus: false, refreshInterval: 300000 })

  const [origin, setOrigin] = useState<(Origin & { fresh?: boolean }) | null>(null)
  const [offerOrigin, setOfferOrigin] = useState(false)
  const [selected, setSelected] = useState<string[]>([])
  const [offered, setOffered] = useState(false)
  const [adding, setAdding] = useState(false)
  const [addError, setAddError] = useState("")
  useEffect(() => { setOrigin(takeOrigin()) }, [])
  const known = (url: string) => !!data?.links.some(link => link.url === url)
  const originKnown = !!origin && known(origin.url)
  // The source Monitor and the Monitors it links that this one does not know yet.
  const candidates: Carried[] = origin && data
    ? [origin, ...(origin.links || [])].filter(row => !known(row.url) && !isLoopback(row.url))
    : []
  const declined = (url: string) => {
    try { return (JSON.parse(sessionStorage.getItem(DECLINED_KEY) || "[]") as string[]).includes(url) } catch { return false }
  }
  useEffect(() => {
    // Offered right after arriving, until every node the source links is known here.
    if (!offered && origin?.fresh && data && candidates.length > 0 && !declined(origin.url)) {
      setOffered(true)
      setSelected(candidates.map(row => row.url))
      setOfferOrigin(true)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [origin, data])

  // The address carries where the jump comes from and the Monitors this one links,
  // so the other Monitor can offer the way back and the rest of the nodes.
  const withOrigin = (href: string) => {
    const target = bareOrigin(href.replace(/\/+$/, ""))
    const carried = (data?.links || [])
      .filter(link => link.url && link.status === "online" && !destination(link)?.native && link.url !== target
        && !isLoopback(link.url))
      .map(link => ({ url: link.url as string, name: link.name, product: link.product }))
    const params = new URLSearchParams({ pmx_from: window.location.origin, pmx_name: nodeName, pmx_product: data?.self.product === "pbs" ? "pbs" : "pve" })
    if (carried.length > 0) params.set("pmx_links", writeCarried(carried))
    return `${href}/?${params.toString()}`
  }
  const open = (href: string, newTab: boolean) => {
    if (newTab) window.open(href, "_blank", "noopener,noreferrer")
    else window.location.assign(href)
  }
  const go = (link: MonitorLink, newTab: boolean) => {
    const target = destination(link)
    if (!target) return
    if (target.native) open(target.href, true)
    else open(withOrigin(target.href), newTab)
  }
  const addSelected = async () => {
    setAdding(true); setAddError("")
    try {
      for (const row of candidates.filter(row => selected.includes(row.url))) {
        await fetchApi("/api/monitor-links", { method: "POST", body: JSON.stringify({ name: row.name, url: row.url, product: row.product }) })
      }
      await refreshCache("/api/monitor-links")
      setOfferOrigin(false)
    } catch (err) {
      setAddError(monitorLinkError(err, t))
      try { await refreshCache("/api/monitor-links") }
      catch { /* SWR shows the load error; keep the localized mutation error. */ }
    } finally { setAdding(false) }
  }
  const notNow = () => {
    if (origin) {
      try {
        const list = JSON.parse(sessionStorage.getItem(DECLINED_KEY) || "[]") as string[]
        sessionStorage.setItem(DECLINED_KEY, JSON.stringify([...list.filter(url => url !== origin.url), origin.url]))
      } catch { /* private mode */ }
    }
    setOfferOrigin(false)
  }

  return <div onClick={event => event.stopPropagation()}>
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" className={`gap-2 border-border bg-transparent hover:bg-secondary ${compact ? "h-8 px-2.5 text-xs" : ""}`}>
          <Server className={compact ? "h-3.5 w-3.5" : "h-4 w-4"} />
          <span className="max-w-[12rem] truncate">{t("status.node", { node: nodeName })}</span>
          <ChevronDown className="h-3.5 w-3.5 opacity-70" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-72">
        <DropdownMenuLabel className="text-xs font-medium text-muted-foreground">{t("monitorLinks.thisNode")}</DropdownMenuLabel>
        <DropdownMenuItem disabled className="gap-2 opacity-100">
          <span className="h-2 w-2 rounded-full bg-green-500" />
          <ProductIcon product={data?.self.product || ""} className="h-4 w-4 text-muted-foreground" />
          <span className="truncate font-medium">{nodeName}</span>
        </DropdownMenuItem>
        {origin && !originKnown && <DropdownMenuItem className="gap-2" onSelect={() => open(withOrigin(origin.url), false)}>
          <ArrowLeft className="h-4 w-4 text-muted-foreground" />
          <span className="min-w-0 flex-1 truncate">{t("monitorLinks.backTo", { name: origin.name })}</span>
        </DropdownMenuItem>}
        {isLoading && <p className="px-2 py-1.5 text-xs text-muted-foreground">{t("monitorLinks.checking")}</p>}
        {error && <p className="px-2 py-1.5 text-xs text-amber-500">{t("monitorLinks.loadFailed")}</p>}
        {data && data.links.length === 0 && <p className="px-2 py-1.5 text-xs text-muted-foreground">{t("monitorLinks.empty")}</p>}
        {data && GROUPS.map(group => {
          const rows = data.links.filter(link => link.group === group)
          if (rows.length === 0) return null
          return <div key={group}>
            <DropdownMenuSeparator />
            <DropdownMenuLabel className="text-xs font-medium text-muted-foreground">{t(`monitorLinks.groups.${group}`)}</DropdownMenuLabel>
            {rows.map(link => {
              const target = destination(link)
              // A PBS without a Monitor opens its own web interface, not another Monitor.
              if (target?.native) return <DropdownMenuItem key={link.key} className="gap-2" onSelect={() => go(link, false)}>
                <span className="h-2 w-2 shrink-0" />
                <ProductIcon product={link.product} className="h-4 w-4 shrink-0 text-muted-foreground" />
                <span className="min-w-0 flex-1 truncate">{link.name}</span>
                <span className="shrink-0 text-[11px] text-muted-foreground">{t("monitorLinks.pbsWebInterface")}</span>
                <Globe className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
              </DropdownMenuItem>
              return <DropdownMenuItem key={link.key} disabled={!target} className="gap-2" onSelect={() => go(link, false)}>
                <span className={`h-2 w-2 shrink-0 rounded-full ${link.status === "online" ? "bg-green-500" : "bg-gray-500"}`} />
                <ProductIcon product={link.product} className="h-4 w-4 shrink-0 text-muted-foreground" />
                <span className="min-w-0 flex-1 truncate">{link.name}</span>
                {link.status !== "online" && <span className="shrink-0 text-[11px] text-muted-foreground">{t("monitorLinks.noResponse")}</span>}
                {target && <button type="button" aria-label={t("monitorLinks.openNewTab")} title={t("monitorLinks.openNewTab")}
                  className="shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground"
                  onClick={event => { event.preventDefault(); event.stopPropagation(); go(link, true) }}>
                  <ExternalLink className="h-3.5 w-3.5" />
                </button>}
              </DropdownMenuItem>
            })}
          </div>
        })}
        <DropdownMenuSeparator />
        <DropdownMenuItem className="gap-2" onSelect={() => setManageOpen(true)}>
          <Plus className="h-4 w-4" />{t("monitorLinks.manage")}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
    {manageOpen && <ManageLinksDialog open={manageOpen} onOpenChange={setManageOpen} />}
    {origin && <Dialog open={offerOrigin} onOpenChange={open => { if (!open) notNow() }}>
      <DialogContent className="grid-cols-1 max-w-md" onClick={event => event.stopPropagation()}>
        <DialogHeader>
          <DialogTitle>{t("monitorLinks.knownTitle")}</DialogTitle>
          <DialogDescription>{t("monitorLinks.knownBody", { name: origin.name })}</DialogDescription>
        </DialogHeader>
        <div className="max-h-72 space-y-2 overflow-y-auto">
          {candidates.map(row => <label key={row.url} className="flex cursor-pointer items-start gap-3 rounded-md border border-border bg-card px-3 py-2">
            <Checkbox className="mt-0.5" checked={selected.includes(row.url)} disabled={adding}
              onCheckedChange={checked => setSelected(current => checked === true ? [...current, row.url] : current.filter(url => url !== row.url))} />
            <ProductIcon product={row.product} className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
            <span className="min-w-0 flex-1">
              <span className="block truncate text-sm font-medium">{row.name}</span>
              <span className="block break-all font-mono text-xs text-muted-foreground">{row.url}</span>
            </span>
          </label>)}
        </div>
        {addError && <p role="alert" className="text-sm text-red-500">{addError}</p>}
        <div className="flex justify-end gap-2">
          <Button variant="outline" disabled={adding} onClick={notNow}>{t("monitorLinks.notNow")}</Button>
          <Button className="bg-blue-600 text-white hover:bg-blue-700" disabled={adding || selected.length === 0} onClick={addSelected}>
            <Plus className="mr-2 h-4 w-4" />{t("monitorLinks.addSelected")}
          </Button>
        </div>
      </DialogContent>
    </Dialog>}
  </div>
}

function ManageLinksDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
  const t = useT()
  const { data, mutate, error: loadError, isLoading } = useSWR<MonitorLinks>("/api/monitor-links?all=1", fetcher, { revalidateOnFocus: false })
  const [form, setForm] = useState({ name: "", url: "", product: "pve" })
  const [addresses, setAddresses] = useState<Record<string, string>>({})
  const [editing, setEditing] = useState<string | null>(null)
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState("")

  const run = async (action: () => Promise<unknown>) => {
    setBusy(true); setError("")
    try {
      await action()
      await mutate()
      await refreshCache("/api/monitor-links")
    } catch (err) {
      setError(monitorLinkError(err, t))
    } finally { setBusy(false) }
  }
  const send = (path: string, method: string, body?: unknown) =>
    fetchApi(path, { method, ...(body === undefined ? {} : { body: JSON.stringify(body) }) })

  return <Dialog open={open} onOpenChange={onOpenChange}>
    <DialogContent className="grid-cols-1 max-w-2xl max-h-[85vh] overflow-y-auto bg-accent [&_input]:bg-background [&_textarea]:bg-background [&_[role=combobox]]:bg-background"
      onClick={event => event.stopPropagation()}>
      <DialogHeader>
        <DialogTitle>{t("monitorLinks.dialogTitle")}</DialogTitle>
        <DialogDescription>{t("monitorLinks.dialogDescription")}</DialogDescription>
      </DialogHeader>

      <div className="space-y-3 rounded-lg border border-border p-4">
        <p className="text-sm font-medium">{t("monitorLinks.addTitle")}</p>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-[1fr_1.5fr_auto]">
          <div className="space-y-1.5">
            <Label htmlFor="monitor-link-name">{t("monitorLinks.name")}</Label>
            <Input id="monitor-link-name" value={form.name} disabled={busy} onChange={event => setForm({ ...form, name: event.target.value })} />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="monitor-link-url">{t("monitorLinks.address")}</Label>
            <Input id="monitor-link-url" value={form.url} disabled={busy} placeholder="https://192.168.1.20:8008"
              onChange={event => setForm({ ...form, url: event.target.value })} />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="monitor-link-product">{t("monitorLinks.type")}</Label>
            <Select value={form.product} disabled={busy} onValueChange={product => setForm({ ...form, product })}>
              <SelectTrigger id="monitor-link-product" className="w-full sm:w-56"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="pve">Proxmox VE</SelectItem>
                <SelectItem value="pbs">Proxmox Backup Server</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
        <Button size="sm" className="bg-blue-600 text-white hover:bg-blue-700 disabled:bg-blue-600/50 disabled:text-white disabled:opacity-100" disabled={busy || !form.url.trim()} onClick={() => run(async () => {
          await send("/api/monitor-links", "POST", form)
          setForm({ name: "", url: "", product: "pve" })
        })}><Plus className="mr-2 h-4 w-4" />{t("monitorLinks.add")}</Button>
      </div>

      {error && <p role="alert" className="text-sm text-red-500">{error}</p>}

      <div className="space-y-3">
        {isLoading && <p className="text-sm text-muted-foreground">{t("monitorLinks.checking")}</p>}
        {loadError && <p role="alert" className="text-sm text-amber-500">{t("monitorLinks.loadFailed")}</p>}
        {data?.links.length === 0 && <p className="text-sm text-muted-foreground">{t("monitorLinks.empty")}</p>}
        {data?.links.map(link => {
          const own = link.manual || link.custom_url
          const shown = link.url || ""
          const draft = addresses[link.key] ?? (own ? shown : "")
          const isEditing = editing === link.key
          // A read-only card is a panel; while its address is edited it lets the field stand out.
          return <div key={link.key} className={`space-y-2 rounded-lg border border-border p-3 ${isEditing ? "" : "bg-card"} ${link.hidden ? "opacity-60" : ""}`}>
            <div className="flex items-center gap-2">
              <ProductIcon product={link.product} className="h-4 w-4 text-muted-foreground" />
              <span className="min-w-0 flex-1 truncate font-medium">{link.name}</span>
              <span className="text-xs text-muted-foreground">{link.manual ? t("monitorLinks.added") : t("monitorLinks.detected")}</span>
              {!link.manual && <label className="flex items-center gap-2 text-xs text-muted-foreground">
                {t("monitorLinks.visible")}
                <Switch checked={!link.hidden} disabled={busy} className="data-[state=checked]:bg-blue-600"
                  onCheckedChange={checked => run(() => send(`/api/monitor-links/${encodeURIComponent(link.key)}`, "PATCH", { hidden: !checked }))} />
              </label>}
              {link.manual && <Button variant="ghost" size="sm" disabled={busy} aria-label={t("monitorLinks.remove")}
                onClick={() => run(() => send(`/api/monitor-links/${encodeURIComponent(link.key)}`, "DELETE"))}>
                <Trash2 className="h-4 w-4 text-red-500" />
              </Button>}
            </div>
            {link.local && !link.custom_url
              ? <div className="flex items-center gap-2">
                  <span className="min-w-0 flex-1 truncate text-sm text-foreground">{t("monitorLinks.pbsWebInterface")}</span>
                  <span className="shrink-0 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground">{t("monitorLinks.thisNode")}</span>
                </div>
              : isEditing
              ? <div className="grid grid-cols-2 gap-2 sm:flex">
                  <Input className="col-span-2 min-w-0 sm:flex-1" value={draft} disabled={busy} autoFocus aria-label={t("monitorLinks.address")}
                    placeholder={link.manual ? "" : `${t("monitorLinks.autoAddress")}${shown ? `: ${shown}` : ""}`}
                    onChange={event => setAddresses({ ...addresses, [link.key]: event.target.value })} />
                  <Button size="sm" className="h-10 bg-blue-600 text-white hover:bg-blue-700 disabled:bg-blue-600/50 disabled:text-white disabled:opacity-100"
                    disabled={busy || addresses[link.key] === undefined || (link.manual && !draft.trim())}
                    onClick={() => run(async () => {
                      await send(`/api/monitor-links/${encodeURIComponent(link.key)}`, "PATCH", { url: addresses[link.key] })
                      setAddresses(({ [link.key]: _, ...rest }) => rest)
                      setEditing(null)
                    })}>{t("monitorLinks.save")}</Button>
                  <Button variant="outline" size="sm" className="h-10" disabled={busy}
                    onClick={() => { setAddresses(({ [link.key]: _, ...rest }) => rest); setEditing(null) }}>{t("monitorLinks.cancel")}</Button>
                </div>
              : <div className="flex items-center gap-2">
                  <span className="min-w-0 flex-1 truncate font-mono text-sm text-foreground">{shown || "—"}</span>
                  {!link.manual && !link.custom_url && <span className="shrink-0 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground">{t("monitorLinks.autoAddress")}</span>}
                  <Button variant="ghost" size="sm" disabled={busy} aria-label={t("monitorLinks.changeAddress")} title={t("monitorLinks.changeAddress")}
                    onClick={() => setEditing(link.key)}>
                    <Pencil className="h-4 w-4 text-muted-foreground" />
                  </Button>
                </div>}
          </div>
        })}
      </div>
    </DialogContent>
  </Dialog>
}