"use client"

import { AppSidebar } from "@/components/app-sidebar"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Separator } from "@/components/ui/separator"
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import {
  Plus,
  Link,
  MonitorIcon as MonitorCog,
  FileDigit,
  Trash2,
  LayoutGrid,
  List,
  Pencil,
  Cpu,
  MicroscopeIcon as Microchip,
  MemoryStick,
  HardDrive,
  LucideServer,
} from "lucide-react"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import Cookies from "js-cookie"
import { useState, useEffect } from "react"
import axios from "axios"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Checkbox } from "@/components/ui/checkbox"
import { ScrollArea } from "@/components/ui/scroll-area"
import { DynamicIcon } from "lucide-react/dynamic"

interface Server {
  id: number
  name: string
  icon: string
  host: boolean
  hostServer: number | null
  os?: string
  ip?: string
  url?: string
  cpu?: string
  gpu?: string
  ram?: string
  disk?: string
  hostedVMs?: Server[]
  isVM?: boolean
  monitoring?: boolean
  monitoringURL?: string
  online?: boolean
  cpuUsage?: number
  ramUsage?: number
  diskUsage?: number
}

interface GetServersResponse {
  servers: Server[]
  maxPage: number
}

export default function Dashboard() {
  const [host, setHost] = useState<boolean>(false)
  const [hostServer, setHostServer] = useState<number>(0)
  const [name, setName] = useState<string>("")
  const [icon, setIcon] = useState<string>("")
  const [os, setOs] = useState<string>("")
  const [ip, setIp] = useState<string>("")
  const [url, setUrl] = useState<string>("")
  const [cpu, setCpu] = useState<string>("")
  const [gpu, setGpu] = useState<string>("")
  const [ram, setRam] = useState<string>("")
  const [disk, setDisk] = useState<string>("")
  const [monitoring, setMonitoring] = useState<boolean>(false)
  const [monitoringURL, setMonitoringURL] = useState<string>("")
  const [online, setOnline] = useState<boolean>(false)
  const [cpuUsage, setCpuUsage] = useState<number>(0)
  const [ramUsage, setRamUsage] = useState<number>(0)
  const [diskUsage, setDiskUsage] = useState<number>(0)

  const [currentPage, setCurrentPage] = useState<number>(1)
  const [maxPage, setMaxPage] = useState<number>(1)
  const [itemsPerPage, setItemsPerPage] = useState<number>(4)
  const [servers, setServers] = useState<Server[]>([])
  const [isGridLayout, setIsGridLayout] = useState<boolean>(false)
  const [loading, setLoading] = useState<boolean>(true)

  const [editId, setEditId] = useState<number | null>(null)
  const [editHost, setEditHost] = useState<boolean>(false)
  const [editHostServer, setEditHostServer] = useState<number | null>(0)
  const [editName, setEditName] = useState<string>("")
  const [editIcon, setEditIcon] = useState<string>("")
  const [editOs, setEditOs] = useState<string>("")
  const [editIp, setEditIp] = useState<string>("")
  const [editUrl, setEditUrl] = useState<string>("")
  const [editCpu, setEditCpu] = useState<string>("")
  const [editGpu, setEditGpu] = useState<string>("")
  const [editRam, setEditRam] = useState<string>("")
  const [editDisk, setEditDisk] = useState<string>("")
  const [editMonitoring, setEditMonitoring] = useState<boolean>(false)
  const [editMonitoringURL, setEditMonitoringURL] = useState<string>("")

  const [searchTerm, setSearchTerm] = useState<string>("")
  const [isSearching, setIsSearching] = useState<boolean>(false)

  const [hostServers, setHostServers] = useState<Server[]>([])
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)

  useEffect(() => {
    const savedLayout = Cookies.get("layoutPreference-servers")
    const layout_bool = savedLayout === "grid"
    setIsGridLayout(layout_bool)
    setItemsPerPage(layout_bool ? 6 : 4)
  }, [])

  const toggleLayout = () => {
    const newLayout = !isGridLayout
    setIsGridLayout(newLayout)
    Cookies.set("layoutPreference-servers", newLayout ? "grid" : "standard", {
      expires: 365,
      path: "/",
      sameSite: "strict",
    })
    setItemsPerPage(newLayout ? 6 : 4)
  }

  const add = async () => {
    try {
      await axios.post("/api/servers/add", {
        host,
        hostServer,
        name,
        icon,
        os,
        ip,
        url,
        cpu,
        gpu,
        ram,
        disk,
        monitoring,
        monitoringURL,
      })
      setIsAddDialogOpen(false)
      setHost(false)
      setHostServer(0)
      setIcon("")
      setName("")
      setOs("")
      setIp("")
      setUrl("")
      setCpu("")
      setGpu("")
      setRam("")
      setDisk("")
      setMonitoring(false)
      setMonitoringURL("")
      getServers()
    } catch (error: any) {
      console.log(error.response.data)
    }
  }

  const getServers = async () => {
    try {
      setLoading(true)
      const response = await axios.post<GetServersResponse>("/api/servers/get", {
        page: currentPage,
        ITEMS_PER_PAGE: itemsPerPage,
      })
      for (const server of response.data.servers) {
        console.log("Host Server:" + server.hostServer)
        console.log("ID:" + server.id)
      }
      setServers(response.data.servers)
      setMaxPage(response.data.maxPage)
      setLoading(false)
    } catch (error: any) {
      console.log(error.response)
    }
  }

  useEffect(() => {
    getServers()
  }, [currentPage, itemsPerPage])

  const handlePrevious = () => {
    setCurrentPage((prev) => Math.max(1, prev - 1))
  }

  const handleNext = () => {
    setCurrentPage((prev) => Math.min(maxPage, prev + 1))
  }

  const deleteApplication = async (id: number) => {
    try {
      await axios.post("/api/servers/delete", { id })
      getServers()
    } catch (error: any) {
      console.log(error.response.data)
    }
  }

  const openEditDialog = (server: Server) => {
    setEditId(server.id)
    setEditHost(server.host)
    setEditHostServer(server.hostServer || null)
    setEditName(server.name)
    setEditIcon(server.icon || "")
    setEditOs(server.os || "")
    setEditIp(server.ip || "")
    setEditUrl(server.url || "")
    setEditCpu(server.cpu || "")
    setEditGpu(server.gpu || "")
    setEditRam(server.ram || "")
    setEditDisk(server.disk || "")
    setEditMonitoring(server.monitoring || false)
    setEditMonitoringURL(server.monitoringURL || "")
  }

  const edit = async () => {
    if (!editId) return

    try {
      await axios.put("/api/servers/edit", {
        id: editId,
        host: editHost,
        hostServer: editHostServer,
        name: editName,
        icon: editIcon,
        os: editOs,
        ip: editIp,
        url: editUrl,
        cpu: editCpu,
        gpu: editGpu,
        ram: editRam,
        disk: editDisk,
        monitoring: editMonitoring,
        monitoringURL: editMonitoringURL,
      })
      getServers()
      setEditId(null)
    } catch (error: any) {
      console.log(error.response.data)
    }
  }

  const searchServers = async () => {
    try {
      setIsSearching(true)
      const response = await axios.post<{ results: Server[] }>("/api/servers/search", { searchterm: searchTerm })
      setServers(response.data.results)
      setMaxPage(1)
      setIsSearching(false)
    } catch (error: any) {
      console.error("Search error:", error.response?.data)
      setIsSearching(false)
    }
  }

  useEffect(() => {
    const delayDebounce = setTimeout(() => {
      if (searchTerm.trim() === "") {
        getServers()
      } else {
        searchServers()
      }
    }, 300)

    return () => clearTimeout(delayDebounce)
  }, [searchTerm])

  useEffect(() => {
    const fetchHostServers = async () => {
      try {
        const response = await axios.get<{ servers: Server[] }>("/api/servers/hosts")
        setHostServers(response.data.servers)
      } catch (error) {
        console.error("Error fetching host servers:", error)
      }
    }

    if (isAddDialogOpen || editId !== null) {
      fetchHostServers()
    }
  }, [isAddDialogOpen, editId])

  // Add this function to get the host server name for a VM
  const getHostServerName = (hostServerId: number | null) => {
    if (!hostServerId) return ""
    const hostServer = servers.find((server) => server.id === hostServerId)
    return hostServer ? hostServer.name : ""
  }

  const iconCategories = {
    Infrastructure: ["server", "network", "database", "cloud", "hard-drive", "router", "wifi", "antenna"],
    Computing: ["cpu", "microchip", "memory-stick", "terminal", "code", "binary", "command"],
    Monitoring: ["activity", "monitor", "gauge", "bar-chart", "line-chart", "pie-chart"],
    Security: ["shield", "lock", "key", "fingerprint", "scan-face"],
    Status: ["check-circle", "x-octagon", "alert-triangle", "alarm-check", "life-buoy"],
    Other: [
      "settings",
      "power",
      "folder",
      "file-code",
      "clipboard-list",
      "git-branch",
      "git-commit",
      "git-merge",
      "git-pull-request",
      "github",
      "bug",
    ],
  }

  // Flatten icons for search
  const allIcons = Object.values(iconCategories).flat()

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="flex items-center gap-2 px-4">
            <SidebarTrigger className="-ml-1" />
            <Separator orientation="vertical" className="mr-2 h-4" />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem className="hidden md:block">
                  <BreadcrumbPage>/</BreadcrumbPage>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden md:block" />
                <BreadcrumbItem>
                  <BreadcrumbPage>My Infrastructure</BreadcrumbPage>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden md:block" />
                <BreadcrumbItem>
                  <BreadcrumbPage>Servers</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </div>
        </header>
        <div className="p-6">
          <div className="flex justify-between items-center">
            <span className="text-3xl font-bold">Your Servers</span>
            <div className="flex gap-2">
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button variant="outline" size="icon" onClick={toggleLayout}>
                      {isGridLayout ? <List className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>{isGridLayout ? "Switch to list view" : "Switch to grid view"}</TooltipContent>
                </Tooltip>
              </TooltipProvider>
              <AlertDialog onOpenChange={setIsAddDialogOpen}>
                <AlertDialogTrigger asChild>
                  <Button variant="outline" size="icon">
                    <Plus />
                  </Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
                    <AlertDialogTitle>Add an server</AlertDialogTitle>
                    <AlertDialogDescription>
                      <Tabs defaultValue="general" className="w-full">
                        <TabsList className="w-full">
                          <TabsTrigger value="general">General</TabsTrigger>
                          <TabsTrigger value="hardware">Hardware</TabsTrigger>
                          <TabsTrigger value="virtualization">Virtualization</TabsTrigger>
                          <TabsTrigger value="monitoring">Monitoring</TabsTrigger>
                        </TabsList>
                        <TabsContent value="general">
                          <div className="space-y-4 pt-4">
                            <div className="flex items-center gap-2">
                              <div className="grid w-[calc(100%-52px)] items-center gap-1.5">
                                <Label htmlFor="icon">Icon</Label>
                                <div className="space-y-2">
                                  <Select value={icon} onValueChange={(value) => setIcon(value)}>
                                    <SelectTrigger className="w-full">
                                      <SelectValue placeholder="Select an icon">
                                        {icon && (
                                          <div className="flex items-center gap-2">
                                            <DynamicIcon name={icon as any} color="white" size={18} />
                                            <span>{icon}</span>
                                          </div>
                                        )}
                                      </SelectValue>
                                    </SelectTrigger>
                                    <SelectContent className="max-h-[300px]">
                                      <Input
                                        placeholder="Search icons..."
                                        className="mb-2"
                                        onChange={(e) => {
                                          const iconElements = document.querySelectorAll("[data-icon-item]")
                                          const searchTerm = e.target.value.toLowerCase()

                                          iconElements.forEach((el) => {
                                            const iconName = el.getAttribute("data-icon-name")?.toLowerCase() || ""
                                            if (iconName.includes(searchTerm)) {
                                              ;(el as HTMLElement).style.display = "flex"
                                            } else {
                                              ;(el as HTMLElement).style.display = "none"
                                            }
                                          })
                                        }}
                                      />
                                      {Object.entries(iconCategories).map(([category, categoryIcons]) => (
                                        <div key={category} className="mb-2">
                                          <div className="px-2 text-xs font-bold text-muted-foreground mb-1">
                                            {category}
                                          </div>
                                          {categoryIcons.map((iconName) => (
                                            <SelectItem
                                              key={iconName}
                                              value={iconName}
                                              data-icon-item
                                              data-icon-name={iconName}
                                            >
                                              <div className="flex items-center gap-2">
                                                <DynamicIcon name={iconName as any} color="white" size={18} />
                                                <span>{iconName}</span>
                                              </div>
                                            </SelectItem>
                                          ))}
                                        </div>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                </div>
                              </div>
                              <div className="grid w-[52px] items-center gap-1.5">
                                <Label htmlFor="icon">Preview</Label>
                                <div className="flex items-center justify-center">
                                  {icon && <DynamicIcon name={icon as any} color="white" size={36} />}
                                </div>
                              </div>
                            </div>
                            <div className="grid w-full items-center gap-1.5">
                              <Label htmlFor="name">Name</Label>
                              <Input
                                id="name"
                                type="text"
                                placeholder="e.g. Server1"
                                onChange={(e) => setName(e.target.value)}
                              />
                            </div>
                            <div className="grid w-full items-center gap-1.5">
                              <Label htmlFor="description">
                                Operating System <span className="text-stone-600">(optional)</span>
                              </Label>
                              <Select onValueChange={(value) => setOs(value)}>
                                <SelectTrigger className="w-full">
                                  <SelectValue placeholder="Select OS" />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="Windows">Windows</SelectItem>
                                  <SelectItem value="Linux">Linux</SelectItem>
                                  <SelectItem value="MacOS">MacOS</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                            <div className="grid w-full items-center gap-1.5">
                              <Label htmlFor="icon">
                                IP Adress <span className="text-stone-600">(optional)</span>
                              </Label>
                              <Input
                                id="icon"
                                type="text"
                                placeholder="e.g. 192.168.100.2"
                                onChange={(e) => setIp(e.target.value)}
                              />
                            </div>
                            <div className="grid w-full items-center gap-1.5">
                              <TooltipProvider>
                                <Tooltip>
                                  <TooltipTrigger>
                                    <Label htmlFor="publicURL">
                                      Management URL <span className="text-stone-600">(optional)</span>
                                    </Label>
                                  </TooltipTrigger>
                                  <TooltipContent>
                                    Link to a web interface (e.g. Proxmox or Portainer) with which the server can be
                                    managed
                                  </TooltipContent>
                                </Tooltip>
                              </TooltipProvider>
                              <Input
                                id="publicURL"
                                type="text"
                                placeholder="e.g. https://proxmox.server1.com"
                                onChange={(e) => setUrl(e.target.value)}
                              />
                            </div>
                          </div>
                        </TabsContent>
                        <TabsContent value="hardware">
                          <div className="space-y-4 pt-4">
                            <div className="grid w-full items-center gap-1.5">
                              <Label htmlFor="name">
                                CPU <span className="text-stone-600">(optional)</span>
                              </Label>
                              <Input
                                id="name"
                                type="text"
                                placeholder="e.g. AMD Ryzen™ 7 7800X3D"
                                onChange={(e) => setCpu(e.target.value)}
                              />
                            </div>
                            <div className="grid w-full items-center gap-1.5">
                              <Label htmlFor="name">
                                GPU <span className="text-stone-600">(optional)</span>
                              </Label>
                              <Input
                                id="name"
                                type="text"
                                placeholder="e.g. AMD Radeon™ Graphics"
                                onChange={(e) => setGpu(e.target.value)}
                              />
                            </div>
                            <div className="grid w-full items-center gap-1.5">
                              <Label htmlFor="name">
                                RAM <span className="text-stone-600">(optional)</span>
                              </Label>
                              <Input
                                id="name"
                                type="text"
                                placeholder="e.g. 64GB DDR5"
                                onChange={(e) => setRam(e.target.value)}
                              />
                            </div>
                            <div className="grid w-full items-center gap-1.5">
                              <Label htmlFor="name">
                                Disk <span className="text-stone-600">(optional)</span>
                              </Label>
                              <Input
                                id="name"
                                type="text"
                                placeholder="e.g. 2TB SSD"
                                onChange={(e) => setDisk(e.target.value)}
                              />
                            </div>
                          </div>
                        </TabsContent>
                        <TabsContent value="virtualization">
                          <div className="space-y-4 pt-4">
                            <div className="flex items-center space-x-2">
                              <Checkbox
                                id="hostCheckbox"
                                checked={host}
                                onCheckedChange={(checked) => setHost(checked === true)}
                              />
                              <Label htmlFor="hostCheckbox">Mark as host server</Label>
                            </div>
                            {!host && (
                              <div className="grid w-full items-center gap-1.5">
                                <Label>Host Server</Label>
                                <Select
                                  value={hostServer?.toString()}
                                  onValueChange={(value) => setHostServer(Number(value))}
                                >
                                  <SelectTrigger>
                                    <SelectValue placeholder="Select a host server" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    {hostServers.map((server) => (
                                      <SelectItem key={server.id} value={server.id.toString()}>
                                        {server.name}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              </div>
                            )}
                          </div>
                        </TabsContent>
                        <TabsContent value="monitoring">
                          <div className="space-y-4 pt-4">
                            <div className="flex items-center space-x-2">
                              <Checkbox
                                id="monitoringCheckbox"
                                checked={monitoring}
                                onCheckedChange={(checked) => setMonitoring(checked === true)}
                              />
                              <Label htmlFor="monitoringCheckbox">Enable monitoring</Label>
                            </div>
                            {monitoring && (
                              <div className="grid w-full items-center gap-1.5">
                                <Label htmlFor="monitoringURL">Monitoring URL</Label>
                                <Input
                                  id="monitoringURL"
                                  type="text"
                                  placeholder={`http://${ip}:61208`}
                                  onChange={(e) => setMonitoringURL(e.target.value)}
                                />
                              </div>
                            )}
                          </div>
                        </TabsContent>
                      </Tabs>
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                    <AlertDialogAction onClick={add}>Add</AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </div>
          </div>
          <div className="flex flex-col gap-2 mb-4 pt-2">
            <Input
              id="application-search"
              placeholder="Type to search..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>

          <br />
          {!loading ? (
            <div className={isGridLayout ? "grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4" : "space-y-4"}>
              {servers
                .filter((server) => (searchTerm ? true : server.hostServer === 0))
                .map((server) => (
                  <Card
                    key={server.id}
                    className={`${isGridLayout ? "h-full flex flex-col justify-between" : "w-full mb-4"} hover:shadow-md transition-all duration-200 max-w-full`}
                  >
                    <CardHeader>
                      <div className="flex items-center justify-between w-full">
                        <div className="flex items-center w-4/6">
                          <div className="ml-4 flex-grow">
                            <CardTitle className="text-2xl font-bold flex items-center gap-2">
                              <div className="flex items-center gap-2">
                                {server.icon && <DynamicIcon name={server.icon as any} color="white" size={24} />}
                                <span className="font-bold">
                                  {server.icon && "･"} {server.name}
                                </span>
                              </div>
                              {server.isVM && (
                                <span className="bg-blue-500 text-white text-xs px-2 py-1 rounded">VM</span>
                              )}
                              {server.monitoring && (
                                <div
                                  className={`ml-2 h-2.5 w-2.5 rounded-full ${server.online ? "bg-emerald-500" : "bg-destructive"}`}
                                  title={server.online ? "Online" : "Offline"}
                                />
                              )}
                            </CardTitle>
                            <CardDescription
                              className={`text-sm mt-1 grid gap-y-1 ${
                                isGridLayout ? "grid-cols-1" : "grid-cols-2 gap-x-4"
                              }`}
                            >
                              <div className="flex items-center gap-2 text-foreground/80">
                                <MonitorCog className="h-4 w-4 text-muted-foreground" />
                                <span>
                                  <b>OS:</b> {server.os || "-"}
                                </span>
                              </div>
                              <div className="flex items-center gap-2 text-foreground/80">
                                <FileDigit className="h-4 w-4 text-muted-foreground" />
                                <span>
                                  <b>IP:</b> {server.ip || "Not set"}
                                </span>
                              </div>

                              {server.isVM && server.hostServer && (
                                <div className="flex items-center gap-2 text-foreground/80">
                                  <LucideServer className="h-4 w-4 text-muted-foreground" />
                                  <span>
                                    <b>Host:</b> {getHostServerName(server.hostServer)}
                                  </span>
                                </div>
                              )}

                              <div className="col-span-full pt-2 pb-2">
                                <Separator />
                              </div>

                              <div className="flex items-center gap-2 text-foreground/80">
                                <Cpu className="h-4 w-4 text-muted-foreground" />
                                <span>
                                  <b>CPU:</b> {server.cpu || "-"}
                                </span>
                              </div>
                              <div className="flex items-center gap-2 text-foreground/80">
                                <Microchip className="h-4 w-4 text-muted-foreground" />
                                <span>
                                  <b>GPU:</b> {server.gpu || "-"}
                                </span>
                              </div>
                              <div className="flex items-center gap-2 text-foreground/80">
                                <MemoryStick className="h-4 w-4 text-muted-foreground" />
                                <span>
                                  <b>RAM:</b> {server.ram || "-"}
                                </span>
                              </div>
                              <div className="flex items-center gap-2 text-foreground/80">
                                <HardDrive className="h-4 w-4 text-muted-foreground" />
                                <span>
                                  <b>Disk:</b> {server.disk || "-"}
                                </span>
                              </div>

                              {server.monitoring && server.hostServer === 0 && (
                                <>
                                  <div className="col-span-full pt-2 pb-2">
                                    <Separator />
                                  </div>

                                  <div className="col-span-full">
                                    <h4 className="text-sm font-semibold mb-3">Resource Usage</h4>
                                    <div className={`${!isGridLayout ? "grid grid-cols-3 gap-4" : "space-y-3"}`}>
                                      <div>
                                        <div className="flex items-center justify-between">
                                          <div className="flex items-center gap-2">
                                            <Cpu className="h-4 w-4 text-muted-foreground" />
                                            <span className="text-sm font-medium">CPU</span>
                                          </div>
                                          <span className="text-xs font-medium">{server.cpuUsage || 0}%</span>
                                        </div>
                                        <div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
                                          <div
                                            className={`h-full ${server.cpuUsage && server.cpuUsage > 80 ? "bg-destructive" : server.cpuUsage && server.cpuUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
                                            style={{ width: `${server.cpuUsage || 0}%` }}
                                          />
                                        </div>
                                      </div>

                                      <div>
                                        <div className="flex items-center justify-between">
                                          <div className="flex items-center gap-2">
                                            <MemoryStick className="h-4 w-4 text-muted-foreground" />
                                            <span className="text-sm font-medium">RAM</span>
                                          </div>
                                          <span className="text-xs font-medium">{server.ramUsage || 0}%</span>
                                        </div>
                                        <div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
                                          <div
                                            className={`h-full ${server.ramUsage && server.ramUsage > 80 ? "bg-destructive" : server.ramUsage && server.ramUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
                                            style={{ width: `${server.ramUsage || 0}%` }}
                                          />
                                        </div>
                                      </div>

                                      <div>
                                        <div className="flex items-center justify-between">
                                          <div className="flex items-center gap-2">
                                            <HardDrive className="h-4 w-4 text-muted-foreground" />
                                            <span className="text-sm font-medium">Disk</span>
                                          </div>
                                          <span className="text-xs font-medium">{server.diskUsage || 0}%</span>
                                        </div>
                                        <div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
                                          <div
                                            className={`h-full ${server.diskUsage && server.diskUsage > 80 ? "bg-destructive" : server.diskUsage && server.diskUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
                                            style={{ width: `${server.diskUsage || 0}%` }}
                                          />
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </>
                              )}
                            </CardDescription>
                          </div>
                        </div>
                        <div className="w-1/6" />
                        <div className="flex flex-col items-end justify-start space-y-2 w-1/6">
                          <div className="flex items-center justify-end gap-2 w-full">
                            <div className="flex flex-col items-end gap-2">
                              <div className="flex gap-2">
                                {server.url && (
                                  <Button
                                    variant="outline"
                                    className="gap-2"
                                    onClick={() => window.open(server.url, "_blank")}
                                  >
                                    <Link className="h-4 w-4" />
                                  </Button>
                                )}
                                <Button
                                  variant="destructive"
                                  size="icon"
                                  className="h-9 w-9"
                                  onClick={() => deleteApplication(server.id)}
                                >
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                                <AlertDialog>
                                  <AlertDialogTrigger asChild>
                                    <Button size="icon" className="h-9 w-9" onClick={() => openEditDialog(server)}>
                                      <Pencil className="h-4 w-4" />
                                    </Button>
                                  </AlertDialogTrigger>
                                  <AlertDialogContent>
                                    <AlertDialogHeader>
                                      <AlertDialogTitle>Edit Server</AlertDialogTitle>
                                      <AlertDialogDescription>
                                        <Tabs defaultValue="general" className="w-full">
                                          <TabsList className="w-full">
                                            <TabsTrigger value="general">General</TabsTrigger>
                                            <TabsTrigger value="hardware">Hardware</TabsTrigger>
                                            <TabsTrigger value="virtualization">Virtualization</TabsTrigger>
                                            <TabsTrigger value="monitoring">Monitoring</TabsTrigger>
                                          </TabsList>
                                          <TabsContent value="general">
                                            <div className="space-y-4 pt-4">
                                              <div className="flex items-center gap-2">
                                                <div className="grid w-[calc(100%-52px)] items-center gap-1.5">
                                                  <Label htmlFor="icon">Icon</Label>
                                                  <div className="space-y-2">
                                                    <Select
                                                      value={editIcon}
                                                      onValueChange={(value) => setEditIcon(value)}
                                                    >
                                                      <SelectTrigger className="w-full">
                                                        <SelectValue placeholder="Select an icon">
                                                          {editIcon && (
                                                            <div className="flex items-center gap-2">
                                                              <DynamicIcon
                                                                name={editIcon as any}
                                                                color="white"
                                                                size={18}
                                                              />
                                                              <span>{editIcon}</span>
                                                            </div>
                                                          )}
                                                        </SelectValue>
                                                      </SelectTrigger>
                                                      <SelectContent className="max-h-[300px]">
                                                        <Input
                                                          placeholder="Search icons..."
                                                          className="mb-2"
                                                          onChange={(e) => {
                                                            const iconElements =
                                                              document.querySelectorAll("[data-edit-icon-item]")
                                                            const searchTerm = e.target.value.toLowerCase()

                                                            iconElements.forEach((el) => {
                                                              const iconName =
                                                                el.getAttribute("data-icon-name")?.toLowerCase() || ""
                                                              if (iconName.includes(searchTerm)) {
                                                                ;(el as HTMLElement).style.display = "flex"
                                                              } else {
                                                                ;(el as HTMLElement).style.display = "none"
                                                              }
                                                            })
                                                          }}
                                                        />
                                                        {Object.entries(iconCategories).map(
                                                          ([category, categoryIcons]) => (
                                                            <div key={category} className="mb-2">
                                                              <div className="px-2 text-xs font-bold text-muted-foreground mb-1">
                                                                {category}
                                                              </div>
                                                              {categoryIcons.map((iconName) => (
                                                                <SelectItem
                                                                  key={iconName}
                                                                  value={iconName}
                                                                  data-edit-icon-item
                                                                  data-icon-name={iconName}
                                                                >
                                                                  <div className="flex items-center gap-2">
                                                                    <DynamicIcon
                                                                      name={iconName as any}
                                                                      color="white"
                                                                      size={18}
                                                                    />
                                                                    <span>{iconName}</span>
                                                                  </div>
                                                                </SelectItem>
                                                              ))}
                                                            </div>
                                                          ),
                                                        )}
                                                      </SelectContent>
                                                    </Select>
                                                  </div>
                                                </div>
                                                <div className="grid w-[52px] items-center gap-1.5">
                                                  <Label htmlFor="icon">Preview</Label>
                                                  <div className="flex items-center justify-center">
                                                    {editIcon && (
                                                      <DynamicIcon name={editIcon as any} color="white" size={36} />
                                                    )}
                                                  </div>
                                                </div>
                                              </div>
                                              <div className="grid w-full items-center gap-1.5">
                                                <Label htmlFor="editName">Name</Label>
                                                <Input
                                                  id="editName"
                                                  type="text"
                                                  placeholder="e.g. Server1"
                                                  value={editName}
                                                  onChange={(e) => setEditName(e.target.value)}
                                                />
                                              </div>
                                              <div className="grid w-full items-center gap-1.5">
                                                <Label htmlFor="editOs">Operating System</Label>
                                                <Select value={editOs} onValueChange={setEditOs}>
                                                  <SelectTrigger className="w-full">
                                                    <SelectValue placeholder="Select OS" />
                                                  </SelectTrigger>
                                                  <SelectContent>
                                                    <SelectItem value="Windows">Windows</SelectItem>
                                                    <SelectItem value="Linux">Linux</SelectItem>
                                                    <SelectItem value="MacOS">MacOS</SelectItem>
                                                  </SelectContent>
                                                </Select>
                                              </div>
                                              <div className="grid w-full items-center gap-1.5">
                                                <Label htmlFor="editIp">IP Adress</Label>
                                                <Input
                                                  id="editIp"
                                                  type="text"
                                                  placeholder="e.g. 192.168.100.2"
                                                  value={editIp}
                                                  onChange={(e) => setEditIp(e.target.value)}
                                                />
                                              </div>
                                              <div className="grid w-full items-center gap-1.5">
                                                <Label htmlFor="editUrl">Management URL</Label>
                                                <Input
                                                  id="editUrl"
                                                  type="text"
                                                  placeholder="e.g. https://proxmox.server1.com"
                                                  value={editUrl}
                                                  onChange={(e) => setEditUrl(e.target.value)}
                                                />
                                              </div>
                                            </div>
                                          </TabsContent>
                                          <TabsContent value="hardware">
                                            <div className="space-y-4 pt-4">
                                              <div className="grid w-full items-center gap-1.5">
                                                <Label htmlFor="editCpu">CPU</Label>
                                                <Input
                                                  id="editCpu"
                                                  value={editCpu}
                                                  onChange={(e) => setEditCpu(e.target.value)}
                                                />
                                              </div>
                                              <div className="grid w-full items-center gap-1.5">
                                                <Label htmlFor="editGpu">GPU</Label>
                                                <Input
                                                  id="editGpu"
                                                  value={editGpu}
                                                  onChange={(e) => setEditGpu(e.target.value)}
                                                />
                                              </div>
                                              <div className="grid w-full items-center gap-1.5">
                                                <Label htmlFor="editRam">RAM</Label>
                                                <Input
                                                  id="editRam"
                                                  value={editRam}
                                                  onChange={(e) => setEditRam(e.target.value)}
                                                />
                                              </div>
                                              <div className="grid w-full items-center gap-1.5">
                                                <Label htmlFor="editDisk">Disk</Label>
                                                <Input
                                                  id="editDisk"
                                                  value={editDisk}
                                                  onChange={(e) => setEditDisk(e.target.value)}
                                                />
                                              </div>
                                            </div>
                                          </TabsContent>
                                          <TabsContent value="virtualization">
                                            <div className="space-y-4 pt-4">
                                              <div className="flex items-center space-x-2">
                                                <Checkbox
                                                  id="editHostCheckbox"
                                                  checked={editHost}
                                                  onCheckedChange={(checked) => setEditHost(checked === true)}
                                                  disabled={server.hostedVMs && server.hostedVMs.length > 0}
                                                />
                                                <Label htmlFor="editHostCheckbox">
                                                  Mark as host server
                                                  {server.hostedVMs && server.hostedVMs.length > 0 && (
                                                    <span className="text-muted-foreground text-sm ml-2">
                                                      (Cannot be disabled while hosting VMs)
                                                    </span>
                                                  )}
                                                </Label>
                                              </div>
                                              {!editHost && (
                                                <div className="grid w-full items-center gap-1.5">
                                                  <Label>Host Server</Label>
                                                  <Select
                                                    value={editHostServer?.toString()}
                                                    onValueChange={(value) => setEditHostServer(Number(value))}
                                                  >
                                                    <SelectTrigger>
                                                      <SelectValue placeholder="Select a host server" />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                      {hostServers
                                                        .filter((server) => server.id !== editId)
                                                        .map((server) => (
                                                          <SelectItem key={server.id} value={server.id.toString()}>
                                                            {server.name}
                                                          </SelectItem>
                                                        ))}
                                                    </SelectContent>
                                                  </Select>
                                                </div>
                                              )}
                                            </div>
                                          </TabsContent>
                                          <TabsContent value="monitoring">
                                            <div className="space-y-4 pt-4">
                                              <div className="flex items-center space-x-2">
                                                <Checkbox
                                                  id="editMonitoringCheckbox"
                                                  checked={editMonitoring}
                                                  onCheckedChange={(checked) => setEditMonitoring(checked === true)}
                                                />
                                                <Label htmlFor="editMonitoringCheckbox">Enable monitoring</Label>
                                              </div>
                                              {editMonitoring && (
                                                <div className="grid w-full items-center gap-1.5">
                                                  <Label htmlFor="editMonitoringURL">Monitoring URL</Label>
                                                  <Input
                                                    id="editMonitoringURL"
                                                    type="text"
                                                    placeholder={`http://${editIp}:61208`}
                                                    value={editMonitoringURL}
                                                    onChange={(e) => setEditMonitoringURL(e.target.value)}
                                                  />
                                                </div>
                                              )}
                                            </div>
                                          </TabsContent>
                                        </Tabs>
                                      </AlertDialogDescription>
                                    </AlertDialogHeader>
                                    <AlertDialogFooter>
                                      <AlertDialogCancel>Cancel</AlertDialogCancel>
                                      <Button onClick={edit}>Save</Button>
                                    </AlertDialogFooter>
                                  </AlertDialogContent>
                                </AlertDialog>
                              </div>

                              {server.hostedVMs && server.hostedVMs.length > 0 && (
                                <AlertDialog>
                                  <AlertDialogTrigger asChild>
                                    <Button variant="outline" className="h-9 flex items-center gap-2 px-3 w-full">
                                      <LucideServer className="h-4 w-4" />
                                      <span>VMs</span>
                                    </Button>
                                  </AlertDialogTrigger>
                                  <AlertDialogContent>
                                    <AlertDialogHeader>
                                      <AlertDialogTitle>Hosted VMs</AlertDialogTitle>
                                      <AlertDialogDescription>
                                        {server.host && (
                                          <div className="mt-4">
                                            <ScrollArea className="h-[500px] w-full pr-3">
                                              <div className="space-y-2 mt-2">
                                                {server.hostedVMs?.map((hostedVM) => (
                                                  <div
                                                    key={hostedVM.id}
                                                    className="flex flex-col gap-2 border border-muted py-2 px-4 rounded-md"
                                                  >
                                                    <div className="flex items-center justify-between">
                                                      <div className="flex items-center gap-2">
                                                        {hostedVM.icon && (
                                                          <DynamicIcon
                                                            name={hostedVM.icon as any}
                                                            color="white"
                                                            size={24}
                                                          />
                                                        )}
                                                        <div className="text-base font-extrabold">
                                                          {hostedVM.icon && "･ "}
                                                          {hostedVM.name}
                                                        </div>
                                                      </div>
                                                      <div className="flex items-center gap-2 text-foreground/80">
                                                        <Button
                                                          variant="outline"
                                                          className="gap-2"
                                                          onClick={() => window.open(hostedVM.url, "_blank")}
                                                        >
                                                          <Link className="h-4 w-4" />
                                                        </Button>
                                                        <Button
                                                          variant="destructive"
                                                          size="icon"
                                                          className="h-9 w-9"
                                                          onClick={() => deleteApplication(hostedVM.id)}
                                                        >
                                                          <Trash2 className="h-4 w-4" />
                                                        </Button>

                                                        <AlertDialog>
                                                          <AlertDialogTrigger asChild>
                                                            <Button
                                                              size="icon"
                                                              className="h-9 w-9"
                                                              onClick={() => openEditDialog(hostedVM)}
                                                            >
                                                              <Pencil className="h-4 w-4" />
                                                            </Button>
                                                          </AlertDialogTrigger>
                                                          <AlertDialogContent>
                                                            <AlertDialogHeader>
                                                              <AlertDialogTitle>Edit VM</AlertDialogTitle>
                                                              <AlertDialogDescription>
                                                                <Tabs defaultValue="general" className="w-full">
                                                                  <TabsList className="w-full">
                                                                    <TabsTrigger value="general">General</TabsTrigger>
                                                                    <TabsTrigger value="hardware">Hardware</TabsTrigger>
                                                                    <TabsTrigger value="virtualization">
                                                                      Virtualization
                                                                    </TabsTrigger>
                                                                  </TabsList>
                                                                  <TabsContent value="general">
                                                                    <div className="space-y-4 pt-4">
                                                                      <div className="flex items-center gap-2">
                                                                        <div className="grid w-[calc(100%-52px)] items-center gap-1.5">
                                                                          <Label htmlFor="editIcon">Icon</Label>
                                                                          <div className="space-y-2">
                                                                            <Select
                                                                              value={editIcon}
                                                                              onValueChange={(value) =>
                                                                                setEditIcon(value)
                                                                              }
                                                                            >
                                                                              <SelectTrigger className="w-full">
                                                                                <SelectValue placeholder="Select an icon">
                                                                                  {editIcon && (
                                                                                    <div className="flex items-center gap-2">
                                                                                      <DynamicIcon
                                                                                        name={editIcon as any}
                                                                                        color="white"
                                                                                        size={18}
                                                                                      />
                                                                                      <span>{editIcon}</span>
                                                                                    </div>
                                                                                  )}
                                                                                </SelectValue>
                                                                              </SelectTrigger>
                                                                              <SelectContent className="max-h-[300px]">
                                                                                <Input
                                                                                  placeholder="Search icons..."
                                                                                  className="mb-2"
                                                                                  onChange={(e) => {
                                                                                    const iconElements =
                                                                                      document.querySelectorAll(
                                                                                        "[data-vm-edit-icon-item]",
                                                                                      )
                                                                                    const searchTerm =
                                                                                      e.target.value.toLowerCase()

                                                                                    iconElements.forEach((el) => {
                                                                                      const iconName =
                                                                                        el
                                                                                          .getAttribute(
                                                                                            "data-icon-name",
                                                                                          )
                                                                                          ?.toLowerCase() || ""
                                                                                      if (
                                                                                        iconName.includes(searchTerm)
                                                                                      ) {
                                                                                        ;(
                                                                                          el as HTMLElement
                                                                                        ).style.display = "flex"
                                                                                      } else {
                                                                                        ;(
                                                                                          el as HTMLElement
                                                                                        ).style.display = "none"
                                                                                      }
                                                                                    })
                                                                                  }}
                                                                                />
                                                                                {Object.entries(iconCategories).map(
                                                                                  ([category, categoryIcons]) => (
                                                                                    <div
                                                                                      key={category}
                                                                                      className="mb-2"
                                                                                    >
                                                                                      <div className="px-2 text-xs font-bold text-muted-foreground mb-1">
                                                                                        {category}
                                                                                      </div>
                                                                                      {categoryIcons.map((iconName) => (
                                                                                        <SelectItem
                                                                                          key={iconName}
                                                                                          value={iconName}
                                                                                          data-vm-edit-icon-item
                                                                                          data-icon-name={iconName}
                                                                                        >
                                                                                          <div className="flex items-center gap-2">
                                                                                            <DynamicIcon
                                                                                              name={iconName as any}
                                                                                              color="white"
                                                                                              size={18}
                                                                                            />
                                                                                            <span>{iconName}</span>
                                                                                          </div>
                                                                                        </SelectItem>
                                                                                      ))}
                                                                                    </div>
                                                                                  ),
                                                                                )}
                                                                              </SelectContent>
                                                                            </Select>
                                                                          </div>
                                                                        </div>
                                                                        <div className="grid w-[52px] items-center gap-1.5">
                                                                          <Label htmlFor="editIcon">Preview</Label>
                                                                          <div className="flex items-center justify-center">
                                                                            {editIcon && (
                                                                              <DynamicIcon
                                                                                name={editIcon as any}
                                                                                color="white"
                                                                                size={36}
                                                                              />
                                                                            )}
                                                                          </div>
                                                                        </div>
                                                                      </div>
                                                                      <div className="grid w-full items-center gap-1.5">
                                                                        <Label htmlFor="editName">Name</Label>
                                                                        <Input
                                                                          id="editName"
                                                                          type="text"
                                                                          placeholder="e.g. Server1"
                                                                          value={editName}
                                                                          onChange={(e) => setEditName(e.target.value)}
                                                                        />
                                                                      </div>
                                                                      <div className="grid w-full items-center gap-1.5">
                                                                        <Label htmlFor="editOs">Operating System</Label>
                                                                        <Select
                                                                          value={editOs}
                                                                          onValueChange={setEditOs}
                                                                        >
                                                                          <SelectTrigger className="w-full">
                                                                            <SelectValue placeholder="Select OS" />
                                                                          </SelectTrigger>
                                                                          <SelectContent>
                                                                            <SelectItem value="Windows">
                                                                              Windows
                                                                            </SelectItem>
                                                                            <SelectItem value="Linux">Linux</SelectItem>
                                                                            <SelectItem value="MacOS">MacOS</SelectItem>
                                                                          </SelectContent>
                                                                        </Select>
                                                                      </div>
                                                                      <div className="grid w-full items-center gap-1.5">
                                                                        <Label htmlFor="editIp">IP Adress</Label>
                                                                        <Input
                                                                          id="editIp"
                                                                          type="text"
                                                                          placeholder="e.g. 192.168.100.2"
                                                                          value={editIp}
                                                                          onChange={(e) => setEditIp(e.target.value)}
                                                                        />
                                                                      </div>
                                                                      <div className="grid w-full items-center gap-1.5">
                                                                        <Label htmlFor="editUrl">Management URL</Label>
                                                                        <Input
                                                                          id="editUrl"
                                                                          type="text"
                                                                          placeholder="e.g. https://proxmox.server1.com"
                                                                          value={editUrl}
                                                                          onChange={(e) => setEditUrl(e.target.value)}
                                                                        />
                                                                      </div>
                                                                    </div>
                                                                  </TabsContent>

                                                                  <TabsContent value="hardware">
                                                                    <div className="space-y-4 pt-4">
                                                                      <div className="grid w-full items-center gap-1.5">
                                                                        <Label htmlFor="editCpu">CPU</Label>
                                                                        <Input
                                                                          id="editCpu"
                                                                          value={editCpu}
                                                                          onChange={(e) => setEditCpu(e.target.value)}
                                                                        />
                                                                      </div>
                                                                      <div className="grid w-full items-center gap-1.5">
                                                                        <Label htmlFor="editGpu">GPU</Label>
                                                                        <Input
                                                                          id="editGpu"
                                                                          value={editGpu}
                                                                          onChange={(e) => setEditGpu(e.target.value)}
                                                                        />
                                                                      </div>
                                                                      <div className="grid w-full items-center gap-1.5">
                                                                        <Label htmlFor="editRam">RAM</Label>
                                                                        <Input
                                                                          id="editRam"
                                                                          value={editRam}
                                                                          onChange={(e) => setEditRam(e.target.value)}
                                                                        />
                                                                      </div>
                                                                      <div className="grid w-full items-center gap-1.5">
                                                                        <Label htmlFor="editDisk">Disk</Label>
                                                                        <Input
                                                                          id="editDisk"
                                                                          value={editDisk}
                                                                          onChange={(e) => setEditDisk(e.target.value)}
                                                                        />
                                                                      </div>
                                                                    </div>
                                                                  </TabsContent>
                                                                  <TabsContent value="virtualization">
                                                                    <div className="space-y-4 pt-4">
                                                                      <div className="flex items-center space-x-2">
                                                                        <Checkbox
                                                                          id="editHostCheckbox"
                                                                          checked={editHost}
                                                                          onCheckedChange={(checked) =>
                                                                            setEditHost(checked === true)
                                                                          }
                                                                          disabled={
                                                                            server.hostedVMs &&
                                                                            server.hostedVMs.length > 0
                                                                          }
                                                                        />
                                                                        <Label htmlFor="editHostCheckbox">
                                                                          Mark as host server
                                                                          {server.hostedVMs &&
                                                                            server.hostedVMs.length > 0 && (
                                                                              <span className="text-muted-foreground text-sm ml-2">
                                                                                (Cannot be disabled while hosting VMs)
                                                                              </span>
                                                                            )}
                                                                        </Label>
                                                                      </div>
                                                                      {!editHost && (
                                                                        <div className="grid w-full items-center gap-1.5">
                                                                          <Label>Host Server</Label>
                                                                          <Select
                                                                            value={editHostServer?.toString()}
                                                                            onValueChange={(value) =>
                                                                              setEditHostServer(Number(value))
                                                                            }
                                                                          >
                                                                            <SelectTrigger>
                                                                              <SelectValue placeholder="Select a host server" />
                                                                            </SelectTrigger>
                                                                            <SelectContent>
                                                                              {hostServers
                                                                                .filter(
                                                                                  (server) => server.id !== editId,
                                                                                )
                                                                                .map((server) => (
                                                                                  <SelectItem
                                                                                    key={server.id}
                                                                                    value={server.id.toString()}
                                                                                  >
                                                                                    {server.name}
                                                                                  </SelectItem>
                                                                                ))}
                                                                            </SelectContent>
                                                                          </Select>
                                                                        </div>
                                                                      )}
                                                                    </div>
                                                                  </TabsContent>
                                                                </Tabs>
                                                              </AlertDialogDescription>
                                                            </AlertDialogHeader>
                                                            <AlertDialogFooter>
                                                              <AlertDialogCancel>Cancel</AlertDialogCancel>
                                                              <Button onClick={edit}>Save</Button>
                                                            </AlertDialogFooter>
                                                          </AlertDialogContent>
                                                        </AlertDialog>
                                                      </div>
                                                    </div>

                                                    <div className="col-span-fullpb-2">
                                                      <Separator />
                                                    </div>

                                                    <div className="flex gap-5 pb-2">
                                                      <div className="flex items-center gap-2 text-foreground/80">
                                                        <MonitorCog className="h-4 w-4 text-muted-foreground" />
                                                        <span>
                                                          <b>OS:</b> {hostedVM.os || "-"}
                                                        </span>
                                                      </div>
                                                      <div className="flex items-center gap-2 text-foreground/80">
                                                        <FileDigit className="h-4 w-4 text-muted-foreground" />
                                                        <span>
                                                          <b>IP:</b> {hostedVM.ip || "Not set"}
                                                        </span>
                                                      </div>
                                                    </div>

                                                    <div className="flex items-center gap-2 text-foreground/80">
                                                      <Cpu className="h-4 w-4 text-muted-foreground" />
                                                      <span>
                                                        <b>CPU:</b> {hostedVM.cpu || "-"}
                                                      </span>
                                                    </div>
                                                    <div className="flex items-center gap-2 text-foreground/80">
                                                      <Microchip className="h-4 w-4 text-muted-foreground" />
                                                      <span>
                                                        <b>GPU:</b> {hostedVM.gpu || "-"}
                                                      </span>
                                                    </div>
                                                    <div className="flex items-center gap-2 text-foreground/80">
                                                      <MemoryStick className="h-4 w-4 text-muted-foreground" />
                                                      <span>
                                                        <b>RAM:</b> {hostedVM.ram || "-"}
                                                      </span>
                                                    </div>
                                                    <div className="flex items-center gap-2 text-foreground/80">
                                                      <HardDrive className="h-4 w-4 text-muted-foreground" />
                                                      <span>
                                                        <b>Disk:</b> {hostedVM.disk || "-"}
                                                      </span>
                                                    </div>

                                                    {hostedVM.monitoring && (
                                                      <>
                                                        <div className="col-span-full pt-2 pb-2">
                                                          <Separator />
                                                        </div>

                                                        <div className="col-span-full grid grid-cols-3 gap-4">
                                                          <div>
                                                            <div className="flex items-center justify-between">
                                                              <div className="flex items-center gap-2">
                                                                <Cpu className="h-4 w-4 text-muted-foreground" />
                                                                <span className="text-sm font-medium">CPU</span>
                                                              </div>
                                                              <span className="text-xs font-medium">
                                                                {hostedVM.cpuUsage || 0}%
                                                              </span>
                                                            </div>
                                                            <div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
                                                              <div
                                                                className={`h-full ${hostedVM.cpuUsage && hostedVM.cpuUsage > 80 ? "bg-destructive" : hostedVM.cpuUsage && hostedVM.cpuUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
                                                                style={{ width: `${hostedVM.cpuUsage || 0}%` }}
                                                              />
                                                            </div>
                                                          </div>

                                                          <div>
                                                            <div className="flex items-center justify-between">
                                                              <div className="flex items-center gap-2">
                                                                <MemoryStick className="h-4 w-4 text-muted-foreground" />
                                                                <span className="text-sm font-medium">RAM</span>
                                                              </div>
                                                              <span className="text-xs font-medium">
                                                                {hostedVM.ramUsage || 0}%
                                                              </span>
                                                            </div>
                                                            <div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
                                                              <div
                                                                className={`h-full ${hostedVM.ramUsage && hostedVM.ramUsage > 80 ? "bg-destructive" : hostedVM.ramUsage && hostedVM.ramUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
                                                                style={{ width: `${hostedVM.ramUsage || 0}%` }}
                                                              />
                                                            </div>
                                                          </div>

                                                          <div>
                                                            <div className="flex items-center justify-between">
                                                              <div className="flex items-center gap-2">
                                                                <HardDrive className="h-4 w-4 text-muted-foreground" />
                                                                <span className="text-sm font-medium">Disk</span>
                                                              </div>
                                                              <span className="text-xs font-medium">
                                                                {hostedVM.diskUsage || 0}%
                                                              </span>
                                                            </div>
                                                            <div className="h-2 w-full overflow-hidden rounded-full bg-secondary mt-1">
                                                              <div
                                                                className={`h-full ${hostedVM.diskUsage && hostedVM.diskUsage > 80 ? "bg-destructive" : hostedVM.diskUsage && hostedVM.diskUsage > 60 ? "bg-amber-500" : "bg-emerald-500"}`}
                                                                style={{ width: `${hostedVM.diskUsage || 0}%` }}
                                                              />
                                                            </div>
                                                          </div>
                                                        </div>
                                                      </>
                                                    )}
                                                  </div>
                                                ))}
                                              </div>
                                            </ScrollArea>
                                          </div>
                                        )}
                                      </AlertDialogDescription>
                                    </AlertDialogHeader>
                                    <AlertDialogFooter>
                                      <AlertDialogCancel>Close</AlertDialogCancel>
                                    </AlertDialogFooter>
                                  </AlertDialogContent>
                                </AlertDialog>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    </CardHeader>
                  </Card>
                ))}
            </div>
          ) : (
            <div className="flex items-center justify-center">
              <div className="inline-block" role="status" aria-label="loading">
                <svg
                  className="w-6 h-6 stroke-white animate-spin "
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g clipPath="url(#clip0_9023_61563)">
                    <path
                      d="M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444"
                      stroke="stroke-current"
                      strokeWidth="1.4"
                      strokeLinecap="round"
                      className="my-path"
                    ></path>
                  </g>
                  <defs>
                    <clipPath id="clip0_9023_61563">
                      <rect width="24" height="24" fill="white"></rect>
                    </clipPath>
                  </defs>
                </svg>
                <span className="sr-only">Loading...</span>
              </div>
            </div>
          )}
          <div className="pt-4 pb-4">
            <Pagination>
              <PaginationContent>
                <PaginationItem>
                  <PaginationPrevious
                    onClick={handlePrevious}
                    isActive={currentPage > 1}
                    style={{
                      cursor: currentPage === 1 ? "not-allowed" : "pointer",
                    }}
                  />
                </PaginationItem>

                <PaginationItem>
                  <PaginationLink isActive>{currentPage}</PaginationLink>
                </PaginationItem>

                <PaginationItem>
                  <PaginationNext
                    onClick={handleNext}
                    isActive={currentPage < maxPage}
                    style={{
                      cursor: currentPage === maxPage ? "not-allowed" : "pointer",
                    }}
                  />
                </PaginationItem>
              </PaginationContent>
            </Pagination>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}