"use client"

import { useCallback, useEffect, useRef, useState } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Activity,
  AlertTriangle,
  CheckCircle,
  ChevronDown,
  ChevronUp,
  Code2,
  GripHorizontal,
  Maximize2,
  Minimize2,
  RefreshCcw,
  Send,
  Terminal,
  X,
  XCircle,
} from "@luxfi/ui/icons"
import { getApiUrl, getAuthHeaders as getAuth } from "@/lib/api"

// ─── Types ─────────────────────────────────────────────

interface LogEntry {
  id: string
  status: number
  method: string
  path: string
  latency_ms: number
  timestamp: string
  request_id: string
  ip?: string
  body?: string
  response?: string
}

interface EventEntry {
  id: string
  type: string
  description: string
  timestamp: string
  source: string
  api_version?: string
  data?: Record<string, unknown>
}

interface HealthStatus {
  service: string
  status: "healthy" | "degraded" | "down"
  latency_ms: number
  details?: string
}

interface ShellHistoryItem {
  command: string
  output: string
  timestamp: string
  error?: boolean
}

// ─── Helpers ───────────────────────────────────────────

const getAPIURL = () => getApiUrl()
const getAuthHeaders = () => getAuth()

function statusColor(status: number): string {
  if (status < 300) return "text-green-400"
  if (status < 400) return "text-yellow-400"
  return "text-red-400"
}

function statusBg(status: number): string {
  if (status < 300) return "bg-green-500/20 text-green-400 border-green-500/30"
  if (status < 400) return "bg-yellow-500/20 text-yellow-400 border-yellow-500/30"
  return "bg-red-500/20 text-red-400 border-red-500/30"
}

function timeAgo(timestamp: string): string {
  const diff = Date.now() - new Date(timestamp).getTime()
  if (diff < 60000) return `${Math.floor(diff / 1000)}s ago`
  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`
  return new Date(timestamp).toLocaleTimeString()
}

// ─── Component ─────────────────────────────────────────

export function DeveloperWorkbench() {
  const [open, setOpen] = useState(false)
  const [expanded, setExpanded] = useState(false)
  const [height, setHeight] = useState(350)
  const [tab, setTab] = useState("overview")
  const [refreshing, setRefreshing] = useState(false)

  // Data
  const [logs, setLogs] = useState<LogEntry[]>([])
  const [events, setEvents] = useState<EventEntry[]>([])
  const [health, setHealth] = useState<HealthStatus[]>([])
  const [selectedLog, setSelectedLog] = useState<LogEntry | null>(null)
  const [selectedEvent, setSelectedEvent] = useState<EventEntry | null>(null)

  // Shell
  const [shellInput, setShellInput] = useState("")
  const [shellHistory, setShellHistory] = useState<ShellHistoryItem[]>([])
  const shellEndRef = useRef<HTMLDivElement>(null)

  // Overview stats
  const [overviewStats, setOverviewStats] = useState({
    totalRequests: 0,
    errorRate: 0,
    avgLatency: 0,
    activeAlerts: 0,
  })

  // Drag resize
  const dragRef = useRef<{ startY: number; startHeight: number } | null>(null)

  const handleMouseDown = useCallback((e: React.MouseEvent) => {
    dragRef.current = { startY: e.clientY, startHeight: height }
    const onMove = (ev: MouseEvent) => {
      if (!dragRef.current) return
      const delta = dragRef.current.startY - ev.clientY
      const newHeight = Math.max(200, Math.min(window.innerHeight - 100, dragRef.current.startHeight + delta))
      setHeight(newHeight)
    }
    const onUp = () => {
      dragRef.current = null
      document.removeEventListener("mousemove", onMove)
      document.removeEventListener("mouseup", onUp)
    }
    document.addEventListener("mousemove", onMove)
    document.addEventListener("mouseup", onUp)
  }, [height])

  // ─── Data Fetching ─────────────────────────────────

  const fetchData = useCallback(async () => {
    const headers = getAuthHeaders()

    // Fetch health
    try {
      const res = await fetch(`${getAPIURL()}/health`)
      const data = res.ok ? await res.json() : null
      const checks: HealthStatus[] = [{
        service: "Bootnode API",
        status: data?.status === "healthy" ? "healthy" : "down",
        latency_ms: 0,
        details: data ? `v${data.version}` : "Unreachable",
      }]

      // Check nodes
      const nodesRes = await fetch(`${getAPIURL()}/v1/nodes/`, { headers }).catch(() => null)
      if (nodesRes?.ok) {
        const nodes = await nodesRes.json()
        if (Array.isArray(nodes)) {
          for (const node of nodes.slice(0, 5)) {
            checks.push({
              service: `${node.name}`,
              status: node.status === "running" ? "healthy" : "down",
              latency_ms: 0,
              details: `${node.chain}/${node.network}`,
            })
          }
        }
      }

      setHealth(checks)

      // Build overview stats
      setOverviewStats({
        totalRequests: logs.length,
        errorRate: logs.length > 0 ? (logs.filter(l => l.status >= 400).length / logs.length) * 100 : 0,
        avgLatency: logs.length > 0 ? Math.round(logs.reduce((a, l) => a + l.latency_ms, 0) / logs.length) : 0,
        activeAlerts: checks.filter(c => c.status !== "healthy").length,
      })
    } catch {
      setHealth([{
        service: "Bootnode API",
        status: "down",
        latency_ms: 0,
        details: "Connection refused",
      }])
    }
  }, [logs])

  useEffect(() => {
    if (!open) return
    fetchData()
    const interval = setInterval(fetchData, 10000)
    return () => clearInterval(interval)
  }, [open, fetchData])

  const handleRefresh = useCallback(() => {
    setRefreshing(true)
    fetchData().finally(() => setRefreshing(false))
  }, [fetchData])

  // ─── Shell ─────────────────────────────────────────

  async function handleShellSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!shellInput.trim()) return

    const cmd = shellInput.trim()
    setShellInput("")

    try {
      let output = ""
      // Parse simple bootnode commands
      if (cmd === "help" || cmd === "bootnode help") {
        output = `Available commands:
  bootnode chains list     - List supported chains
  bootnode nodes list      - List deployed nodes
  bootnode keys list       - List API keys
  bootnode health          - Check API health
  bootnode webhooks list   - List webhooks
  curl <endpoint>          - Make API request`
      } else if (cmd === "bootnode health" || cmd === "health") {
        const res = await fetch(`${getAPIURL()}/health`)
        output = JSON.stringify(await res.json(), null, 2)
      } else if (cmd === "bootnode chains list" || cmd === "chains") {
        const res = await fetch(`${getAPIURL()}/v1/chains`, { headers: getAuthHeaders() })
        const data = res.ok ? await res.json() : { error: res.statusText }
        output = JSON.stringify(data, null, 2)
      } else if (cmd === "bootnode nodes list" || cmd === "nodes") {
        const res = await fetch(`${getAPIURL()}/v1/nodes/`, { headers: getAuthHeaders() })
        const data = res.ok ? await res.json() : { error: res.statusText }
        output = JSON.stringify(data, null, 2)
      } else if (cmd === "bootnode keys list" || cmd === "keys") {
        const res = await fetch(`${getAPIURL()}/v1/auth/keys`, { headers: getAuthHeaders() })
        const data = res.ok ? await res.json() : { error: res.statusText }
        output = JSON.stringify(data, null, 2)
      } else if (cmd === "bootnode webhooks list" || cmd === "webhooks") {
        const res = await fetch(`${getAPIURL()}/v1/webhooks`, { headers: getAuthHeaders() })
        const data = res.ok ? await res.json() : { error: res.statusText }
        output = JSON.stringify(data, null, 2)
      } else if (cmd.startsWith("curl ")) {
        const endpoint = cmd.replace("curl ", "").trim()
        const url = endpoint.startsWith("http") ? endpoint : `${getAPIURL()}${endpoint.startsWith("/") ? "" : "/"}${endpoint}`
        const res = await fetch(url, { headers: getAuthHeaders() })
        const data = await res.json().catch(() => res.text())
        output = typeof data === "string" ? data : JSON.stringify(data, null, 2)
      } else {
        output = `Unknown command: ${cmd}\nType "help" for available commands.`
      }

      setShellHistory(prev => [...prev, { command: cmd, output, timestamp: new Date().toISOString() }])
    } catch (err) {
      setShellHistory(prev => [...prev, {
        command: cmd,
        output: `Error: ${err instanceof Error ? err.message : String(err)}`,
        timestamp: new Date().toISOString(),
        error: true,
      }])
    }

    setTimeout(() => shellEndRef.current?.scrollIntoView({ behavior: "smooth" }), 50)
  }

  // ─── Toggle Button (when closed) ──────────────────

  if (!open) {
    return (
      <button
        onClick={() => setOpen(true)}
        className="fixed bottom-0 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 rounded-t-lg border border-b-0 border-zinc-700 bg-zinc-900 px-4 py-1.5 text-sm text-zinc-300 shadow-lg transition hover:bg-zinc-800 hover:text-white"
      >
        <Code2 className="h-4 w-4" />
        Developers
      </button>
    )
  }

  // ─── Panel ─────────────────────────────────────────

  const panelHeight = expanded ? "100vh" : `${height}px`

  return (
    <div
      className="fixed bottom-0 left-0 right-0 z-50 flex flex-col border-t border-zinc-700 bg-zinc-950 text-zinc-100 shadow-2xl"
      style={{ height: panelHeight }}
    >
      {/* Drag Handle */}
      {!expanded && (
        <div
          className="flex h-2 cursor-row-resize items-center justify-center hover:bg-zinc-800"
          onMouseDown={handleMouseDown}
        >
          <GripHorizontal className="h-4 w-4 text-zinc-600" />
        </div>
      )}

      {/* Header */}
      <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-1">
        <Tabs value={tab} onValueChange={setTab} className="flex-1">
          <div className="flex items-center justify-between">
            <TabsList className="h-8 bg-transparent p-0 gap-0">
              <TabsTrigger
                value="overview"
                className="h-8 rounded-none border-b-2 border-transparent px-3 text-xs data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white text-zinc-400"
              >
                Overview
              </TabsTrigger>
              <TabsTrigger
                value="logs"
                className="h-8 rounded-none border-b-2 border-transparent px-3 text-xs data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white text-zinc-400"
              >
                Logs
              </TabsTrigger>
              <TabsTrigger
                value="events"
                className="h-8 rounded-none border-b-2 border-transparent px-3 text-xs data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white text-zinc-400"
              >
                Events
              </TabsTrigger>
              <TabsTrigger
                value="health"
                className="h-8 rounded-none border-b-2 border-transparent px-3 text-xs data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white text-zinc-400"
              >
                Health
              </TabsTrigger>
              <TabsTrigger
                value="shell"
                className="h-8 rounded-none border-b-2 border-transparent px-3 text-xs data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white text-zinc-400"
              >
                Shell
              </TabsTrigger>
            </TabsList>

            <div className="flex items-center gap-1">
              <Button variant="ghost" size="icon" className="h-7 w-7 text-zinc-400 hover:text-white hover:bg-zinc-800" onClick={handleRefresh}>
                <RefreshCcw className={`h-3.5 w-3.5 ${refreshing ? "animate-spin" : ""}`} />
              </Button>
              <Button variant="ghost" size="icon" className="h-7 w-7 text-zinc-400 hover:text-white hover:bg-zinc-800" onClick={() => setExpanded(!expanded)}>
                {expanded ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
              </Button>
              <Button variant="ghost" size="icon" className="h-7 w-7 text-zinc-400 hover:text-white hover:bg-zinc-800" onClick={() => { setOpen(false); setExpanded(false) }}>
                <X className="h-3.5 w-3.5" />
              </Button>
            </div>
          </div>

          {/* ─── Overview Tab ─────────────────────── */}
          <TabsContent value="overview" className="mt-0 flex-1 overflow-auto p-4">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
                <p className="text-xs text-zinc-500 mb-1">API Requests</p>
                <p className="text-2xl font-bold">{overviewStats.totalRequests}</p>
                <p className="text-xs text-zinc-500">this session</p>
              </div>
              <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
                <p className="text-xs text-zinc-500 mb-1">Error Rate</p>
                <p className={`text-2xl font-bold ${overviewStats.errorRate > 5 ? "text-red-400" : "text-green-400"}`}>
                  {overviewStats.errorRate.toFixed(1)}%
                </p>
                <p className="text-xs text-zinc-500">of requests</p>
              </div>
              <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
                <p className="text-xs text-zinc-500 mb-1">Avg Latency</p>
                <p className="text-2xl font-bold">{overviewStats.avgLatency}ms</p>
                <p className="text-xs text-zinc-500">response time</p>
              </div>
              <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
                <p className="text-xs text-zinc-500 mb-1">Health</p>
                <div className="flex items-center gap-2">
                  {health.every(h => h.status === "healthy") ? (
                    <>
                      <CheckCircle className="h-5 w-5 text-green-500" />
                      <span className="text-green-400 font-medium">All healthy</span>
                    </>
                  ) : (
                    <>
                      <AlertTriangle className="h-5 w-5 text-yellow-500" />
                      <span className="text-yellow-400 font-medium">{overviewStats.activeAlerts} issues</span>
                    </>
                  )}
                </div>
              </div>
            </div>

            <div className="mt-4 rounded-lg border border-zinc-800 bg-zinc-900 p-4">
              <h3 className="text-sm font-medium mb-3">Quick Actions</h3>
              <div className="flex flex-wrap gap-2">
                <Button size="sm" variant="outline" className="border-zinc-700 text-zinc-300 hover:bg-zinc-800" onClick={() => setTab("logs")}>
                  View Logs
                </Button>
                <Button size="sm" variant="outline" className="border-zinc-700 text-zinc-300 hover:bg-zinc-800" onClick={() => setTab("health")}>
                  Health Check
                </Button>
                <Button size="sm" variant="outline" className="border-zinc-700 text-zinc-300 hover:bg-zinc-800" onClick={() => setTab("shell")}>
                  Open Shell
                </Button>
                <Button size="sm" variant="outline" className="border-zinc-700 text-zinc-300 hover:bg-zinc-800" onClick={() => window.open(`${getAPIURL()}/docs`, "_blank")}>
                  API Docs
                </Button>
              </div>
            </div>
          </TabsContent>

          {/* ─── Logs Tab ─────────────────────────── */}
          <TabsContent value="logs" className="mt-0 flex-1 overflow-auto">
            <div className="flex h-full">
              <div className={`flex-1 overflow-auto ${selectedLog ? "border-r border-zinc-800" : ""}`}>
                {logs.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-12 text-zinc-500">
                    <Activity className="h-8 w-8 mb-3 opacity-50" />
                    <p className="text-sm font-medium">No logs yet</p>
                    <p className="text-xs mt-1">API request logs will appear here as requests are made</p>
                    <p className="text-xs mt-3 text-zinc-600">Try running commands in the Shell tab</p>
                  </div>
                ) : (
                  <table className="w-full text-xs">
                    <thead className="sticky top-0 bg-zinc-950 border-b border-zinc-800">
                      <tr>
                        <th className="px-3 py-2 text-left text-zinc-500 font-medium">Status</th>
                        <th className="px-3 py-2 text-left text-zinc-500 font-medium">Method</th>
                        <th className="px-3 py-2 text-left text-zinc-500 font-medium">Path</th>
                        <th className="px-3 py-2 text-right text-zinc-500 font-medium">Latency</th>
                        <th className="px-3 py-2 text-right text-zinc-500 font-medium">Time</th>
                      </tr>
                    </thead>
                    <tbody>
                      {logs.map((log) => (
                        <tr
                          key={log.id}
                          className={`cursor-pointer border-b border-zinc-900 hover:bg-zinc-900/50 ${selectedLog?.id === log.id ? "bg-zinc-900" : ""}`}
                          onClick={() => setSelectedLog(log)}
                        >
                          <td className="px-3 py-2">
                            <span className={`inline-flex items-center rounded border px-1.5 py-0.5 font-mono text-[10px] font-medium ${statusBg(log.status)}`}>
                              {log.status} {log.status < 300 ? "OK" : log.status < 500 ? "ERR" : "FAIL"}
                            </span>
                          </td>
                          <td className="px-3 py-2 font-mono text-zinc-300">{log.method}</td>
                          <td className="px-3 py-2 font-mono text-zinc-400 max-w-[300px] truncate">{log.path}</td>
                          <td className="px-3 py-2 text-right font-mono text-zinc-400">{log.latency_ms}ms</td>
                          <td className="px-3 py-2 text-right text-zinc-500">{timeAgo(log.timestamp)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
              </div>

              {selectedLog && (
                <div className="w-96 overflow-auto p-4">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="text-sm font-medium">Request Details</h3>
                    <Button variant="ghost" size="icon" className="h-6 w-6 text-zinc-400" onClick={() => setSelectedLog(null)}>
                      <X className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                  <div className="space-y-3 text-xs">
                    <div>
                      <span className="text-zinc-500">Method</span>
                      <p className="font-mono text-zinc-200">{selectedLog.method} {selectedLog.path}</p>
                    </div>
                    <div>
                      <span className="text-zinc-500">Status</span>
                      <p className={statusColor(selectedLog.status)}>{selectedLog.status}</p>
                    </div>
                    <div>
                      <span className="text-zinc-500">Request ID</span>
                      <p className="font-mono text-zinc-400">{selectedLog.request_id}</p>
                    </div>
                    <div>
                      <span className="text-zinc-500">Latency</span>
                      <p className="font-mono text-zinc-300">{selectedLog.latency_ms}ms</p>
                    </div>
                    <div>
                      <span className="text-zinc-500">Time</span>
                      <p className="text-zinc-300">{new Date(selectedLog.timestamp).toLocaleString()}</p>
                    </div>
                    {selectedLog.response && (
                      <div>
                        <span className="text-zinc-500">Response</span>
                        <pre className="mt-1 rounded bg-zinc-900 p-2 text-[10px] text-zinc-400 overflow-auto max-h-48">
                          {selectedLog.response}
                        </pre>
                      </div>
                    )}
                  </div>
                </div>
              )}
            </div>
          </TabsContent>

          {/* ─── Events Tab ───────────────────────── */}
          <TabsContent value="events" className="mt-0 flex-1 overflow-auto">
            <div className="flex h-full">
              <div className={`flex-1 overflow-auto ${selectedEvent ? "border-r border-zinc-800" : ""}`}>
                {events.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-12 text-zinc-500">
                    <Activity className="h-8 w-8 mb-3 opacity-50" />
                    <p className="text-sm font-medium">No events yet</p>
                    <p className="text-xs mt-1">Webhook events and chain events will appear here</p>
                  </div>
                ) : (
                  <div className="divide-y divide-zinc-900">
                    {events.map((event) => (
                      <div
                        key={event.id}
                        className={`px-4 py-3 cursor-pointer hover:bg-zinc-900/50 ${selectedEvent?.id === event.id ? "bg-zinc-900" : ""}`}
                        onClick={() => setSelectedEvent(event)}
                      >
                        <div className="flex items-center justify-between">
                          <span className="text-xs font-medium text-zinc-200">{event.type}</span>
                          <span className="text-[10px] text-zinc-500">{timeAgo(event.timestamp)}</span>
                        </div>
                        <p className="text-xs text-zinc-500 mt-0.5">{event.description}</p>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {selectedEvent && (
                <div className="w-96 overflow-auto p-4">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="text-sm font-medium">Event</h3>
                    <Button variant="ghost" size="icon" className="h-6 w-6 text-zinc-400" onClick={() => setSelectedEvent(null)}>
                      <X className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                  <div className="space-y-3 text-xs">
                    <div>
                      <span className="text-zinc-500">Type</span>
                      <p className="font-mono text-zinc-200">{selectedEvent.type}</p>
                    </div>
                    <div>
                      <span className="text-zinc-500">Event ID</span>
                      <p className="font-mono text-zinc-400">{selectedEvent.id}</p>
                    </div>
                    <div>
                      <span className="text-zinc-500">Source</span>
                      <p className="text-zinc-300">{selectedEvent.source}</p>
                    </div>
                    <div>
                      <span className="text-zinc-500">Time</span>
                      <p className="text-zinc-300">{new Date(selectedEvent.timestamp).toLocaleString()}</p>
                    </div>
                    {selectedEvent.data && (
                      <div>
                        <span className="text-zinc-500">Event Data</span>
                        <pre className="mt-1 rounded bg-zinc-900 p-2 text-[10px] text-zinc-400 overflow-auto max-h-48">
                          {JSON.stringify(selectedEvent.data, null, 2)}
                        </pre>
                      </div>
                    )}
                  </div>
                </div>
              )}
            </div>
          </TabsContent>

          {/* ─── Health Tab ────────────────────────── */}
          <TabsContent value="health" className="mt-0 flex-1 overflow-auto p-4">
            <div className="grid grid-cols-4 gap-3 mb-4">
              <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-3 text-center">
                <p className="text-xs text-zinc-500">All</p>
                <p className="text-lg font-bold">{health.length}</p>
              </div>
              <div className="rounded-lg border border-red-900/30 bg-red-950/20 p-3 text-center">
                <p className="text-xs text-zinc-500">Critical</p>
                <p className="text-lg font-bold text-red-400">{health.filter(h => h.status === "down").length}</p>
              </div>
              <div className="rounded-lg border border-yellow-900/30 bg-yellow-950/20 p-3 text-center">
                <p className="text-xs text-zinc-500">Degraded</p>
                <p className="text-lg font-bold text-yellow-400">{health.filter(h => h.status === "degraded").length}</p>
              </div>
              <div className="rounded-lg border border-green-900/30 bg-green-950/20 p-3 text-center">
                <p className="text-xs text-zinc-500">Healthy</p>
                <p className="text-lg font-bold text-green-400">{health.filter(h => h.status === "healthy").length}</p>
              </div>
            </div>

            {health.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-8 text-zinc-500">
                <CheckCircle className="h-8 w-8 mb-3 opacity-50" />
                <p className="text-sm">Checking services...</p>
              </div>
            ) : (
              <div className="rounded-lg border border-zinc-800 overflow-hidden">
                <table className="w-full text-xs">
                  <thead className="bg-zinc-900">
                    <tr>
                      <th className="px-4 py-2 text-left text-zinc-500 font-medium">Service</th>
                      <th className="px-4 py-2 text-left text-zinc-500 font-medium">Status</th>
                      <th className="px-4 py-2 text-right text-zinc-500 font-medium">Latency</th>
                      <th className="px-4 py-2 text-left text-zinc-500 font-medium">Details</th>
                    </tr>
                  </thead>
                  <tbody>
                    {health.map((check) => (
                      <tr key={check.service} className="border-t border-zinc-800">
                        <td className="px-4 py-2 font-medium text-zinc-200">{check.service}</td>
                        <td className="px-4 py-2">
                          <div className="flex items-center gap-1.5">
                            {check.status === "healthy" ? (
                              <CheckCircle className="h-3.5 w-3.5 text-green-500" />
                            ) : check.status === "degraded" ? (
                              <AlertTriangle className="h-3.5 w-3.5 text-yellow-500" />
                            ) : (
                              <XCircle className="h-3.5 w-3.5 text-red-500" />
                            )}
                            <span className="capitalize">{check.status}</span>
                          </div>
                        </td>
                        <td className="px-4 py-2 text-right font-mono text-zinc-400">
                          {check.latency_ms > 0 ? `${check.latency_ms}ms` : "—"}
                        </td>
                        <td className="px-4 py-2 text-zinc-500">{check.details || "—"}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </TabsContent>

          {/* ─── Shell Tab ─────────────────────────── */}
          <TabsContent value="shell" className="mt-0 flex flex-col flex-1 overflow-hidden">
            <div className="flex-1 overflow-auto p-4 font-mono text-xs">
              {shellHistory.length === 0 && (
                <div className="text-zinc-600 mb-4">
                  <pre className="text-zinc-500 mb-2">{`
 ____              _                   _
| __ )  ___   ___ | |_ _ __   ___   __| | ___
|  _ \\ / _ \\ / _ \\| __| '_ \\ / _ \\ / _\` |/ _ \\
| |_) | (_) | (_) | |_| | | | (_) | (_| |  __/
|____/ \\___/ \\___/ \\__|_| |_|\\___/ \\__,_|\\___|
`}</pre>
                  <p>Welcome to Bootnode Shell!</p>
                  <p>Type <span className="text-zinc-300">help</span> to see available commands.</p>
                  <p>Use <span className="text-zinc-300">curl /v1/health</span> to test API endpoints.</p>
                </div>
              )}

              {shellHistory.map((item, i) => (
                <div key={i} className="mb-3">
                  <div className="flex items-center gap-2 text-zinc-300">
                    <span className="text-green-500">$</span>
                    <span>{item.command}</span>
                  </div>
                  <pre className={`mt-1 whitespace-pre-wrap ${item.error ? "text-red-400" : "text-zinc-500"}`}>
                    {item.output}
                  </pre>
                </div>
              ))}
              <div ref={shellEndRef} />
            </div>

            <form
              onSubmit={handleShellSubmit}
              className="flex items-center gap-2 border-t border-zinc-800 px-4 py-2"
            >
              <span className="text-green-500 text-xs font-mono">$</span>
              <Input
                value={shellInput}
                onChange={(e) => setShellInput(e.target.value)}
                placeholder="Enter a command..."
                className="flex-1 h-8 border-0 bg-transparent text-xs font-mono text-zinc-200 placeholder:text-zinc-600 focus-visible:ring-0 focus-visible:ring-offset-0"
                autoFocus={tab === "shell"}
              />
              <Button type="submit" variant="ghost" size="icon" className="h-7 w-7 text-zinc-500 hover:text-white">
                <Send className="h-3.5 w-3.5" />
              </Button>
            </form>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}