import { useState } from "react"
import { SquareTerminal, ExternalLink, AlertTriangle, RefreshCw } from "lucide-react"
import { api } from "@/lib/api"
import { useAgentStatus, useQueryClient, qk, invalidate } from "@/lib/queries"
import { resolveExternalUrl, cn } from "@/lib/utils"

// Konsole = direkter, SSH-artiger Box-Zugriff (ttyd → Login-Shell auf :7682), eingebettet
// per iframe — Schwester der Hermes-Terminal-Seite. Login per Box-Passwort (su-Prompt im
// Terminal selbst). Die Passwort-Verwaltung liegt in System-Wartung → Einstellungen.
export function KonsoleView() {
  const { data: agent } = useAgentStatus()
  const qc = useQueryClient()
  const url = agent?.box_console_url ? resolveExternalUrl(agent.box_console_url) : undefined
  const ok = agent?.box_console_reachable
  const [restarting, setRestarting] = useState(false)
  const [restartMsg, setRestartMsg] = useState("")

  // Ein-Klick-Reparatur statt SSH-Anweisung: box-console ist ein normaler User-Dienst.
  async function restartConsole() {
    setRestarting(true)
    setRestartMsg("")
    try {
      const r = await api<{ ok: boolean; err?: string }>("/api/maintenance/restart", {
        method: "POST", body: JSON.stringify({ service: "box-console" }),
      })
      setRestartMsg(r.ok ? "Neu gestartet — einen Moment, dann lädt das Terminal." : `Fehlgeschlagen: ${r.err || "Unbekannter Fehler"}`)
      invalidate(qc, qk.agentStatus, qk.services)
    } catch (e: any) {
      setRestartMsg(`Fehlgeschlagen: ${e?.message || e}`)
    } finally {
      setRestarting(false)
    }
  }

  return (
    <div className="flex h-full flex-col gap-4">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h1 className="bg-gradient-to-r from-foreground via-foreground to-primary bg-clip-text font-space text-2xl font-bold tracking-tight text-transparent">
            Konsole
          </h1>
          <p className="flex items-center gap-2 text-sm text-muted-foreground">
            Direkte Shell auf der Box — wie ein SSH-Fenster, mitten im Browser.
          </p>
        </div>
        <div className="flex items-center gap-3">
          <span className="flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
            <span className={cn("h-2 w-2 rounded-full", ok ? "bg-emerald-500 animate-pulse" : "bg-amber-500")} />
            {ok ? "online" : "offline"}
          </span>
          {url && (
            <a href={url} target="_blank" rel="noopener"
              className="flex h-8 items-center gap-1.5 rounded-lg border border-border/60 bg-background/20 px-3 text-xs font-semibold text-muted-foreground transition-all hover:border-primary/50 hover:text-foreground">
              <ExternalLink className="h-3.5 w-3.5" /> In neuem Tab
            </a>
          )}
        </div>
      </div>

      {url ? (
        <div className="relative min-h-[58vh] flex-1 overflow-hidden rounded-2xl border border-border/60 bg-black/50 shadow-lg shadow-black/25">
          {ok === false && (
            <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 bg-black/70 text-center">
              <AlertTriangle className="h-8 w-8 text-amber-400" />
              <div className="text-sm font-semibold text-amber-300">Konsole nicht erreichbar</div>
              <p className="max-w-sm text-[11px] leading-normal text-muted-foreground">
                Der Terminal-Dienst (<code className="font-mono text-primary">box-console</code>) läuft gerade nicht.
              </p>
              <button onClick={restartConsole} disabled={restarting}
                className="flex h-9 items-center gap-1.5 rounded-lg border border-amber-500/40 bg-amber-500/10 px-4 text-[11px] font-bold uppercase tracking-wide text-amber-300 transition-all hover:bg-amber-500/20 cursor-pointer disabled:opacity-50">
                <RefreshCw className={cn("h-3.5 w-3.5", restarting && "animate-spin")} /> Dienst neu starten
              </button>
              {restartMsg && <p className="max-w-sm text-[11px] text-muted-foreground">{restartMsg}</p>}
            </div>
          )}
          <iframe src={url} title="Box-Konsole" className="h-full w-full border-0" style={{ minHeight: "58vh" }} />
        </div>
      ) : (
        <div className="flex min-h-[58vh] flex-1 items-center justify-center rounded-2xl border border-border/60 bg-background/20 text-xs text-muted-foreground">
          <SquareTerminal className="mr-2 h-4 w-4" /> Lade Konsole…
        </div>
      )}
    </div>
  )
}