"use client"

import type React from "react"
import { useEffect, useRef, useState, useCallback } from "react"
import { API_PORT } from "@/lib/api-config"
import { Activity, Trash2, X, Search, Send, Lightbulb, Terminal, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import type { CheatSheetResult } from "@/lib/cheat-sheet-result" // Declare CheatSheetResult here

type TerminalPanelProps = {
  terminals: TerminalInstance[]
  onAddTerminal: (terminal: TerminalInstance) => void
  onRemoveTerminal: (id: string) => void
  onClearTerminal: (id: string) => void
}

interface TerminalInstance {
  id: string
  title: string
  term: any
  ws: WebSocket | null
  isConnected: boolean
  // containerRef: React.RefObject<HTMLDivElement> // This is no longer needed as we use callback refs
}

function getWebSocketUrl(): string {
  if (typeof window === "undefined") {
    return "ws://localhost:8008/ws/terminal"
  }

  const { protocol, hostname, port } = window.location
  const isStandardPort = port === "" || port === "80" || port === "443"

  const wsProtocol = protocol === "https:" ? "wss:" : "ws:"

  if (isStandardPort) {
    return `${wsProtocol}//${hostname}/ws/terminal`
  } else {
    return `${wsProtocol}//${hostname}:${API_PORT}/ws/terminal`
  }
}

function getApiUrl(): string {
  if (typeof window === "undefined") {
    return "http://localhost:8008"
  }

  const { protocol, hostname } = window.location
  const apiProtocol = protocol === "https:" ? "https:" : "http:"
  return `${apiProtocol}//${hostname}:${API_PORT}`
}

const proxmoxCommands = [
  { cmd: "pvesh get /nodes", desc: "List all Proxmox nodes" },
  { cmd: "pvesh get /nodes/{node}/qemu", desc: "List VMs on a node" },
  { cmd: "pvesh get /nodes/{node}/lxc", desc: "List LXC containers on a node" },
  { cmd: "pvesh get /nodes/{node}/storage", desc: "List storage on a node" },
  { cmd: "pvesh get /nodes/{node}/network", desc: "List network interfaces" },
  { cmd: "qm list", desc: "List all QEMU/KVM virtual machines" },
  { cmd: "qm start <vmid>", desc: "Start a virtual machine" },
  { cmd: "qm stop <vmid>", desc: "Stop a virtual machine" },
  { cmd: "qm shutdown <vmid>", desc: "Shutdown a virtual machine gracefully" },
  { cmd: "qm status <vmid>", desc: "Show VM status" },
  { cmd: "qm config <vmid>", desc: "Show VM configuration" },
  { cmd: "qm snapshot <vmid> <snapname>", desc: "Create VM snapshot" },
  { cmd: "pct list", desc: "List all LXC containers" },
  { cmd: "pct start <vmid>", desc: "Start LXC container" },
  { cmd: "pct stop <vmid>", desc: "Stop LXC container" },
  { cmd: "pct enter <vmid>", desc: "Enter LXC container console" },
  { cmd: "pct config <vmid>", desc: "Show container configuration" },
  { cmd: "pvesm status", desc: "Show storage status" },
  { cmd: "pvesm list <storage>", desc: "List storage content" },
  { cmd: "pveperf", desc: "Test Proxmox system performance" },
  { cmd: "pveversion", desc: "Show Proxmox VE version" },
  { cmd: "systemctl status pve-cluster", desc: "Check cluster status" },
  { cmd: "pvecm status", desc: "Show cluster status" },
  { cmd: "pvecm nodes", desc: "List cluster nodes" },
  { cmd: "zpool status", desc: "Show ZFS pool status" },
  { cmd: "zpool list", desc: "List all ZFS pools" },
  { cmd: "zfs list", desc: "List all ZFS datasets" },
  { cmd: "ls -la", desc: "List all files with details" },
  { cmd: "cd /path/to/dir", desc: "Change directory" },
  { cmd: "mkdir dirname", desc: "Create new directory" },
  { cmd: "rm -rf dirname", desc: "Remove directory recursively" },
  { cmd: "cp source dest", desc: "Copy files or directories" },
  { cmd: "mv source dest", desc: "Move or rename files" },
  { cmd: "cat filename", desc: "Display file contents" },
  { cmd: "grep 'pattern' file", desc: "Search for pattern in file" },
  { cmd: "find . -name 'file'", desc: "Find files by name" },
  { cmd: "chmod 755 file", desc: "Change file permissions" },
  { cmd: "chown user:group file", desc: "Change file owner" },
  { cmd: "tar -xzf file.tar.gz", desc: "Extract tar.gz archive" },
  { cmd: "tar -czf archive.tar.gz dir/", desc: "Create tar.gz archive" },
  { cmd: "df -h", desc: "Show disk usage" },
  { cmd: "du -sh *", desc: "Show directory sizes" },
  { cmd: "free -h", desc: "Show memory usage" },
  { cmd: "top", desc: "Show running processes" },
  { cmd: "ps aux | grep process", desc: "Find running process" },
  { cmd: "kill -9 PID", desc: "Force kill process" },
  { cmd: "systemctl status service", desc: "Check service status" },
  { cmd: "systemctl start service", desc: "Start a service" },
  { cmd: "systemctl stop service", desc: "Stop a service" },
  { cmd: "systemctl restart service", desc: "Restart a service" },
  { cmd: "apt update && apt upgrade", desc: "Update Debian/Ubuntu packages" },
  { cmd: "apt install package", desc: "Install package on Debian/Ubuntu" },
  { cmd: "apt remove package", desc: "Remove package" },
  { cmd: "docker ps", desc: "List running containers" },
  { cmd: "docker images", desc: "List Docker images" },
  { cmd: "docker exec -it container bash", desc: "Enter container shell" },
  { cmd: "ip addr show", desc: "Show IP addresses" },
  { cmd: "ping host", desc: "Test network connectivity" },
  { cmd: "curl -I url", desc: "Get HTTP headers" },
  { cmd: "wget url", desc: "Download file from URL" },
  { cmd: "ssh user@host", desc: "Connect via SSH" },
  { cmd: "scp file user@host:/path", desc: "Copy file via SSH" },
  { cmd: "tail -f /var/log/syslog", desc: "Follow log file in real-time" },
  { cmd: "history", desc: "Show command history" },
  { cmd: "clear", desc: "Clear terminal screen" },
]

export const TerminalPanel: React.FC<TerminalPanelProps> = ({
  terminals,
  onAddTerminal,
  onRemoveTerminal,
  onClearTerminal,
}) => {
  const [activeTerminalId, setActiveTerminalId] = useState<string>("")
  const [isMobile, setIsMobile] = useState(false)

  const [searchModalOpen, setSearchModalOpen] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [filteredCommands, setFilteredCommands] = useState<Array<{ cmd: string; desc: string }>>(proxmoxCommands)
  const [lastKeyPressed, setLastKeyPressed] = useState<string | null>(null)
  const [isSearching, setIsSearching] = useState(false)
  const [searchResults, setSearchResults] = useState<CheatSheetResult[]>([])
  const [useOnline, setUseOnline] = useState(true)

  const terminalRefs = useRef<{ [key: string]: HTMLDivElement | null }>({})

  const setTerminalRef = useCallback(
    (id: string) => (el: HTMLDivElement | null) => {
      terminalRefs.current[id] = el
    },
    [],
  )

  useEffect(() => {
    setIsMobile(window.innerWidth < 768)
    const handleResize = () => setIsMobile(window.innerWidth < 768)
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  useEffect(() => {
    if (terminals.length === 0) {
      onAddTerminal({
        id: `terminal-${Date.now()}`,
        title: `Terminal 1`,
        term: null,
        ws: null,
        isConnected: false,
      })
    }
  }, [])

  useEffect(() => {
    const searchCheatSh = async (query: string) => {
      if (!query.trim()) {
        setSearchResults([])
        setFilteredCommands(proxmoxCommands)
        return
      }

      try {
        setIsSearching(true)

        const apiUrl = getApiUrl()
        const response = await fetch(`${apiUrl}/api/terminal/search-command?q=${encodeURIComponent(query)}`, {
          method: "GET",
          headers: {
            Accept: "application/json",
          },
          signal: AbortSignal.timeout(10000),
        })

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }

        const data = await response.json()

        if (!data.success || !data.examples || data.examples.length === 0) {
          throw new Error("No examples found")
        }

        console.log("[v0] Received parsed examples from server:", data.examples.length)

        // Usar los ejemplos ya parseados del servidor
        const formattedResults: CheatSheetResult[] = data.examples.map((example: any) => ({
          command: example.command,
          description: example.description || "",
          examples: [example.command], // El comando limpio como ejemplo
        }))

        setUseOnline(true)
        setSearchResults(formattedResults)
      } catch (error) {
        console.log("[v0] Error fetching from cheat.sh proxy, using offline commands:", error)
        // Mostrar resultados offline si falla
        const filtered = proxmoxCommands.filter(
          (item) =>
            item.cmd.toLowerCase().includes(query.toLowerCase()) ||
            item.desc.toLowerCase().includes(query.toLowerCase()),
        )
        setFilteredCommands(filtered)
        setSearchResults([])
        setUseOnline(false)
      } finally {
        setIsSearching(false)
      }
    }

    const debounce = setTimeout(() => {
      if (searchQuery && searchQuery.length >= 2) {
        searchCheatSh(searchQuery)
      } else {
        setSearchResults([])
        setFilteredCommands(proxmoxCommands)
      }
    }, 800)

    return () => clearTimeout(debounce)
  }, [searchQuery])

  const handleKeyButton = (key: string) => {
    const activeTerminal = terminals.find((t) => t.id === activeTerminalId)
    if (!activeTerminal || !activeTerminal.ws || activeTerminal.ws.readyState !== WebSocket.OPEN) return
    let seq = ""
    switch (key) {
      case "UP":
        seq = "\x1b[A"
        break
      case "DOWN":
        seq = "\x1b[B"
        break
      case "RIGHT":
        seq = "\x1b[C"
        break
      case "LEFT":
        seq = "\x1b[D"
        break
      case "ESC":
        seq = "\x1b"
        break
      case "TAB":
        seq = "\t"
        break
      case "CTRL_C":
        seq = "\x03"
        break
      default:
        break
    }
    activeTerminal.ws.send(seq)
    if (key) {
      setLastKeyPressed(key)
      setTimeout(() => setLastKeyPressed(null), 2000)
    }
  }

  const handleClose = () => {
    terminals.forEach((terminal) => {
      if (terminal.ws) terminal.ws.close()
      if (terminal.term) terminal.term.dispose()
    })
    onRemoveTerminal(activeTerminalId)
  }

  const sendToActiveTerminal = (command: string) => {
    const activeTerminal = terminals.find((t) => t.id === activeTerminalId)

    if (activeTerminal?.ws && activeTerminal.ws.readyState === WebSocket.OPEN) {
      // Solo enviamos el comando sin el \n para que no se ejecute automáticamente
      // El usuario puede editar el comando y presionar Enter cuando esté listo
      activeTerminal.ws.send(command)

      // Pequeño delay antes de cerrar el modal para asegurar que el comando se envió
      setTimeout(() => {
        setSearchModalOpen(false)
      }, 100)
    }
  }

  const sendSequence = (seq: string, keyName?: string) => {
    const activeTerminal = terminals.find((t) => t.id === activeTerminalId)
    if (activeTerminal?.ws && activeTerminal.ws.readyState === WebSocket.OPEN) {
      activeTerminal.ws.send(seq)
      if (keyName) {
        setLastKeyPressed(keyName)
        setTimeout(() => setLastKeyPressed(null), 2000)
      }
    }
  }

  const getLayoutClass = () => {
    const count = terminals.length
    if (isMobile || count === 1) return "grid grid-cols-1"
    if (count === 2) return "grid grid-cols-2"
    if (count >= 3) return "grid grid-cols-2 grid-rows-2"
    return "grid grid-cols-1"
  }

  const activeTerminal = terminals.find((t) => t.id === activeTerminalId)

  const renderTerminals = () => {
    if (terminals.length === 0) {
      return (
        <div className="flex items-center justify-center h-full text-muted-foreground">
          <p>No terminals open. Click "New" to create one.</p>
        </div>
      )
    }

    if (terminals.length === 1 || isMobile) {
      // Single terminal mode - fill entire container
      return (
        <div className="w-full h-full flex flex-col bg-black">
          <div className="flex items-center justify-between border-b border-border px-4 py-2 bg-muted/50 flex-shrink-0">
            <span className="text-sm font-medium">Terminal {terminals[0].id}</span>
            <Button variant="ghost" size="sm" onClick={() => onRemoveTerminal(terminals[0].id)} className="h-6 w-6 p-0">
              <X className="h-4 w-4" />
            </Button>
          </div>
          <div ref={(el) => (terminalRefs.current[terminals[0].id] = el)} className="flex-1 w-full bg-black" />
        </div>
      )
    }

    if (terminals.length === 2) {
      // Split view - two terminals side by side
      return (
        <div className="w-full h-full flex gap-2">
          {terminals.map((terminal) => (
            <div key={terminal.id} className="flex-1 flex flex-col border border-border rounded bg-black min-w-0">
              <div className="flex items-center justify-between border-b border-border px-4 py-2 bg-muted/50 flex-shrink-0">
                <span className="text-sm font-medium">Terminal {terminal.id}</span>
                <Button variant="ghost" size="sm" onClick={() => onRemoveTerminal(terminal.id)} className="h-6 w-6 p-0">
                  <X className="h-4 w-4" />
                </Button>
              </div>
              <div ref={(el) => (terminalRefs.current[terminal.id] = el)} className="flex-1 w-full bg-black" />
            </div>
          ))}
        </div>
      )
    }

    // Grid view for 3+ terminals
    return (
      <div className="w-full h-full grid grid-cols-2 gap-2">
        {terminals.map((terminal) => (
          <div key={terminal.id} className="flex flex-col border border-border rounded bg-black min-h-0">
            <div className="flex items-center justify-between border-b border-border px-4 py-2 bg-muted/50 flex-shrink-0">
              <span className="text-sm font-medium">Terminal {terminal.id}</span>
              <Button variant="ghost" size="sm" onClick={() => onRemoveTerminal(terminal.id)} className="h-6 w-6 p-0">
                <X className="h-4 w-4" />
              </Button>
            </div>
            <div ref={(el) => (terminalRefs.current[terminal.id] = el)} className="flex-1 w-full bg-black" />
          </div>
        ))}
      </div>
    )
  }

  return (
    <div className="flex flex-col h-full">
      <style jsx>{`
        :global(.xterm .xterm-viewport) {
          padding: 0 !important;
        }
        :global(.xterm .xterm-screen) {
          padding: 0 !important;
        }
      `}</style>

      <div className="h-full flex flex-col bg-zinc-900 rounded-md overflow-hidden">
        <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800 flex-shrink-0">
          <div className="flex items-center gap-3">
            <Activity className="h-5 w-5 text-blue-500" />
            <div
              className={`w-2 h-2 rounded-full ${activeTerminal?.isConnected ? "bg-green-500" : "bg-red-500"}`}
              title={activeTerminal?.isConnected ? "Connected" : "Disconnected"}
            ></div>
            <span className="text-xs text-zinc-500">{terminals.length} terminals</span>
          </div>

          <div className="flex gap-2">
            <Button
              onClick={() =>
                onAddTerminal({
                  id: `terminal-${Date.now()}`,
                  title: `Terminal ${terminals.length + 1}`,
                  term: null,
                  ws: null,
                  isConnected: false,
                })
              }
              variant="outline"
              size="sm"
              className="h-8 gap-2 bg-green-600 hover:bg-green-700 border-green-500 text-white"
            >
              <Plus className="h-4 w-4" />
              <span className="hidden sm:inline">New</span>
            </Button>
            <Button
              onClick={() => setSearchModalOpen(true)}
              variant="outline"
              size="sm"
              disabled={!activeTerminal?.isConnected}
              className="h-8 gap-2 bg-blue-600 hover:bg-blue-700 border-blue-500 text-white disabled:opacity-50"
            >
              <Search className="h-4 w-4" />
              <span className="hidden sm:inline">Search</span>
            </Button>
            <Button
              onClick={() => onClearTerminal(activeTerminalId)}
              variant="outline"
              size="sm"
              disabled={!activeTerminal?.isConnected}
              className="h-8 gap-2 bg-yellow-600 hover:bg-yellow-700 border-yellow-500 text-white disabled:opacity-50"
            >
              <Trash2 className="h-4 w-4" />
              <span className="hidden sm:inline">Clear</span>
            </Button>
            <Button
              onClick={handleClose}
              variant="outline"
              size="sm"
              className="h-8 gap-2 bg-red-600 hover:bg-red-700 border-red-500 text-white"
            >
              <X className="h-4 w-4" />
              <span className="hidden sm:inline">Close</span>
            </Button>
          </div>
        </div>

        <div className="h-[calc(100%-60px)] overflow-hidden">{renderTerminals()}</div>

        {isMobile && (
          <div className="flex flex-wrap gap-2 justify-center items-center px-2 bg-zinc-900 text-sm rounded-b-md border-t border-zinc-700 py-1.5">
            {lastKeyPressed && (
              <span className="text-xs text-green-500 bg-green-500/10 px-2 py-0.5 rounded mr-2">
                Sent: {lastKeyPressed}
              </span>
            )}
            <Button onClick={() => sendSequence("\x1b")} variant="outline" size="sm" className="h-8 px-3 text-xs">
              ESC
            </Button>
            <Button onClick={() => sendSequence("\t")} variant="outline" size="sm" className="h-8 px-3 text-xs">
              TAB
            </Button>
            <Button onClick={() => handleKeyButton("UP")} variant="outline" size="sm" className="h-8 px-3 text-xs">
              ↑
            </Button>
            <Button onClick={() => handleKeyButton("DOWN")} variant="outline" size="sm" className="h-8 px-3 text-xs">
              ↓
            </Button>
            <Button onClick={() => handleKeyButton("LEFT")} variant="outline" size="sm" className="h-8 px-3 text-xs">
              ←
            </Button>
            <Button onClick={() => handleKeyButton("RIGHT")} variant="outline" size="sm" className="h-8 px-3 text-xs">
              →
            </Button>
            <Button onClick={() => sendSequence("\x03")} variant="outline" size="sm" className="h-8 px-3 text-xs">
              CTRL+C
            </Button>
          </div>
        )}

        <Dialog open={searchModalOpen} onOpenChange={setSearchModalOpen}>
          <DialogContent className="max-w-3xl max-h-[85vh] overflow-hidden flex flex-col">
            <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-4 border-b border-zinc-800">
              <DialogTitle className="text-xl font-semibold">Search Commands</DialogTitle>
              <div className="flex items-center gap-2">
                <div
                  className={`w-2 h-2 rounded-full ${useOnline ? "bg-green-500" : "bg-red-500"}`}
                  title={useOnline ? "Online - Using cheat.sh API" : "Offline - Using local commands"}
                />
              </div>
            </DialogHeader>

            <DialogDescription className="sr-only">Search for Linux and Proxmox commands</DialogDescription>

            <div className="space-y-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
                <Input
                  placeholder="Search commands... (e.g., 'tar', 'docker ps', 'qm list', 'systemctl')"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 bg-zinc-900 border-zinc-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 text-base"
                  autoCapitalize="none"
                  autoComplete="off"
                  autoCorrect="off"
                  spellCheck={false}
                />
              </div>

              {isSearching && (
                <div className="text-center py-4 text-zinc-400">
                  <div className="animate-spin inline-block w-6 h-6 border-2 border-current border-t-transparent rounded-full mb-2" />
                  <p className="text-sm">Searching cheat.sh...</p>
                </div>
              )}

              <div className="flex-1 overflow-y-auto space-y-2 pr-2 max-h-[50vh]">
                {searchResults.length > 0 ? (
                  <>
                    {searchResults.map((result, index) => (
                      <div
                        key={index}
                        className="p-4 rounded-lg border border-zinc-700 bg-zinc-800/50 hover:border-zinc-600 transition-colors"
                      >
                        {result.description && (
                          <p className="text-xs text-zinc-400 mb-2 leading-relaxed"># {result.description}</p>
                        )}
                        <div
                          onClick={() => sendToActiveTerminal(result.command)}
                          className="flex items-start justify-between gap-2 cursor-pointer group hover:bg-zinc-800/50 rounded p-2 -m-2"
                        >
                          <code className="text-sm text-blue-400 font-mono break-all flex-1">{result.command}</code>
                          <Send className="h-4 w-4 text-zinc-600 group-hover:text-blue-400 flex-shrink-0 mt-0.5 transition-colors" />
                        </div>
                      </div>
                    ))}

                    {/* Powered by cheat.sh */}
                    <div className="text-center py-2">
                      <p className="text-xs text-zinc-500">
                        <Lightbulb className="inline-block w-3 h-3 mr-1" />
                        Powered by cheat.sh
                      </p>
                    </div>
                  </>
                ) : filteredCommands.length > 0 && !useOnline ? (
                  filteredCommands.map((item, index) => (
                    <div
                      key={index}
                      onClick={() => sendToActiveTerminal(item.cmd)}
                      className="p-3 rounded-lg border border-zinc-700 bg-zinc-800/50 hover:bg-zinc-800 hover:border-blue-500 cursor-pointer transition-colors"
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="flex-1 min-w-0">
                          <code className="text-sm text-blue-400 font-mono break-all">{item.cmd}</code>
                          <p className="text-xs text-zinc-400 mt-1">{item.desc}</p>
                        </div>
                        <Button
                          onClick={(e) => {
                            e.stopPropagation()
                            sendToActiveTerminal(item.cmd)
                          }}
                          size="sm"
                          variant="ghost"
                          className="shrink-0 h-7 px-2 text-xs"
                        >
                          <Send className="h-3 w-3 mr-1" />
                          Send
                        </Button>
                      </div>
                    </div>
                  ))
                ) : !isSearching && !searchQuery && !useOnline ? (
                  proxmoxCommands.map((item, index) => (
                    <div
                      key={index}
                      onClick={() => sendToActiveTerminal(item.cmd)}
                      className="p-3 rounded-lg border border-zinc-700 bg-zinc-800/50 hover:bg-zinc-800 hover:border-blue-500 cursor-pointer transition-colors"
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="flex-1 min-w-0">
                          <code className="text-sm text-blue-400 font-mono break-all">{item.cmd}</code>
                          <p className="text-xs text-zinc-400 mt-1">{item.desc}</p>
                        </div>
                        <Button
                          onClick={(e) => {
                            e.stopPropagation()
                            sendToActiveTerminal(item.cmd)
                          }}
                          size="sm"
                          variant="ghost"
                          className="shrink-0 h-7 px-2 text-xs"
                        >
                          <Send className="h-3 w-3 mr-1" />
                          Send
                        </Button>
                      </div>
                    </div>
                  ))
                ) : !isSearching ? (
                  <div className="text-center py-12 space-y-4">
                    {searchQuery ? (
                      <>
                        <Search className="w-12 h-12 text-zinc-600 mx-auto" />
                        <div>
                          <p className="text-zinc-400 font-medium">No results found for "{searchQuery}"</p>
                          <p className="text-xs text-zinc-500 mt-1">Try a different command or check your spelling</p>
                        </div>
                      </>
                    ) : (
                      <>
                        <Terminal className="w-12 h-12 text-zinc-600 mx-auto" />
                        <div>
                          <p className="text-zinc-400 font-medium mb-2">Search for any command</p>
                          <div className="text-sm text-zinc-500 space-y-1">
                            <p>Try searching for:</p>
                            <div className="flex flex-wrap justify-center gap-2 mt-2">
                              {["tar", "grep", "docker ps", "qm list", "systemctl"].map((cmd) => (
                                <code
                                  key={cmd}
                                  onClick={() => setSearchQuery(cmd)}
                                  className="px-2 py-1 bg-zinc-800 rounded text-blue-400 cursor-pointer hover:bg-zinc-700"
                                >
                                  {cmd}
                                </code>
                              ))}
                            </div>
                          </div>
                        </div>
                        {useOnline && (
                          <div className="flex items-center justify-center gap-2 text-xs text-zinc-600 mt-4">
                            <Lightbulb className="w-3 h-3" />
                            <span>Powered by cheat.sh</span>
                          </div>
                        )}
                      </>
                    )}
                  </div>
                ) : null}
              </div>

              <div className="pt-2 border-t border-zinc-800 flex items-center justify-between text-xs text-zinc-500">
                <div className="flex items-center gap-2">
                  <Lightbulb className="w-3 h-3" />
                  <span>
                    Tip: Search for any Linux command (tar, grep, docker, etc.) or Proxmox commands (qm, pct, pvesh)
                  </span>
                </div>
                {useOnline && searchResults.length > 0 && <span className="text-zinc-600">Powered by cheat.sh</span>}
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}