import { AlertTriangle, ArrowRight, Bot, CheckCircle2, Clock, ExternalLink, GitCommit, Package, RefreshCw, Server, Shield, ShieldCheck, Shuffle, X } from "lucide-react"
import { cn } from "@/lib/utils"
import type { Job, UpdateDetails } from "@/lib/api"

export type UpdateDetailState = { kind: "os" | "engine" | "swap" | "hermes"; loading: boolean; data: UpdateDetails | null }

// Update-Detail-Fenster des SystemDrawers (Review P2-14: extrahiert): zeigt VOR dem
// Anwenden, was genau aktualisiert wird (apt-Pakete, Engine-Builds, Hermes-Commits).
export function UpdateDetailModal({ detail, maintenanceJob, onClose, onApply }: {
  detail: UpdateDetailState
  maintenanceJob?: Job
  onClose: () => void
  onApply: () => void
}) {
  const d = detail.data
  const meta = {
    os: { icon: Shield, cls: "text-cyan-400", title: "OS-Pakete (apt)" },
    engine: { icon: Server, cls: "text-violet-400", title: "Inferenz-Engine (llama.cpp)" },
    swap: { icon: Shuffle, cls: "text-fuchsia-400", title: "Router (llama-swap)" },
    hermes: { icon: Bot, cls: "text-amber-400", title: "Hermes-Agent" },
  }[detail.kind]
  const Icon = meta.icon
  const nothing = !d ? true
    : detail.kind === "os" ? (d.count ?? 0) === 0
    : detail.kind === "hermes" ? (d.behind ?? 0) === 0
    : (d.installed_build != null && d.latest_build != null && d.latest_build <= d.installed_build)
  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
      <div className="relative w-full max-w-lg max-h-[80vh] flex flex-col rounded-2xl border border-border/60 bg-card shadow-2xl font-sans text-foreground">
        {/* Header */}
        <div className="flex h-14 shrink-0 items-center justify-between border-b border-border/40 px-5">
          <div className="flex items-center gap-2">
            <Icon className={cn("h-4.5 w-4.5", meta.cls)} />
            <h3 className="text-sm font-semibold">{meta.title}</h3>
          </div>
          <button onClick={onClose} className="flex h-7 w-7 items-center justify-center rounded-lg border border-border/40 text-muted-foreground hover:bg-accent transition-colors">
            <X className="h-4 w-4" />
          </button>
        </div>

        {/* Body */}
        <div className="flex-1 overflow-y-auto p-5 text-xs space-y-3 scrollbar-thin">
          {detail.loading ? (
            <div className="flex h-24 items-center justify-center gap-2 text-muted-foreground">
              <RefreshCw className="h-4 w-4 animate-spin" /> Details werden geladen…
            </div>
          ) : d?.error ? (
            <div className="rounded-lg border border-red-500/30 bg-red-500/5 p-3 text-red-400">{d.error}</div>
          ) : (
            <>
              {/* Aktions-Verdikt in Lucys Stimme — "Musst du etwas tun?" (engine/swap/hermes) */}
              {d?.action_needed != null && (
                <div className={cn("flex items-start gap-2 rounded-lg border p-3",
                  d.action_needed ? "border-amber-500/40 bg-amber-500/10" : "border-emerald-500/40 bg-emerald-500/10")}>
                  {d.action_needed
                    ? <AlertTriangle className="h-4 w-4 text-amber-400 shrink-0 mt-0.5" />
                    : <CheckCircle2 className="h-4 w-4 text-emerald-400 shrink-0 mt-0.5" />}
                  <div className="min-w-0">
                    <div className={cn("text-xs font-semibold", d.action_needed ? "text-amber-300" : "text-emerald-300")}>
                      Musst du etwas tun? {d.action_needed ? "Ja" : "Nein — die Box regelt das (Fangnetz)"}
                    </div>
                    {d.action_needed && d.action_text && (
                      <div className="mt-0.5 text-[11px] text-foreground/90">{d.action_text}</div>
                    )}
                  </div>
                </div>
              )}
              {/* Zusammenfassung der Box (Breaking Changes zuerst) */}
              {d?.summary && (
                <div className="rounded-lg border border-primary/25 bg-primary/5 p-3 space-y-1">
                  <div className="text-[10px] font-bold uppercase tracking-wider text-primary">Was dieses Update bedeutet (Zusammenfassung der Box)</div>
                  <pre className="whitespace-pre-wrap text-[11px] leading-relaxed text-foreground/90 font-sans">{d.summary}</pre>
                </div>
              )}

              {detail.kind === "os" ? (
                <>
                  {(d?.count ?? 0) === 0 ? (
                    <div className="text-muted-foreground">Keine Pakete zu aktualisieren — System ist aktuell.</div>
                  ) : (
                    <>
                      <div className="text-muted-foreground">{d!.count} Paket(e) werden aktualisiert:</div>
                      <div className="space-y-1">
                        {d!.packages!.map((p) => (
                          <div key={p.name} className="flex items-center justify-between gap-2 rounded-md border border-border/40 bg-background/30 px-2.5 py-1.5">
                            <span className="flex items-center gap-1.5 font-mono text-[11px] truncate">
                              <Package className="h-3 w-3 text-cyan-400 shrink-0" />{p.name}
                            </span>
                            <span className="flex items-center gap-1 font-mono text-[10px] text-muted-foreground shrink-0">
                              <span>{p.current}</span><ArrowRight className="h-3 w-3" /><span className="text-emerald-400">{p.candidate}</span>
                            </span>
                          </div>
                        ))}
                      </div>
                    </>
                  )}
                  {/* Ehrlich: vom System zurückgestellte Pakete (Phasen-Rollout / kept back) */}
                  {(d?.held_back?.length ?? 0) > 0 && (
                    <div className="space-y-1.5 rounded-lg border border-border/40 bg-background/20 p-3">
                      <div className="flex items-center gap-1.5 text-[11px] font-semibold text-muted-foreground">
                        <Clock className="h-3.5 w-3.5" /> Vom Hersteller zurückgestellt — kein Handeln nötig
                      </div>
                      <p className="text-[10px] text-muted-foreground leading-normal">
                        Diese Pakete gäbe es bereits, Ubuntu spielt sie aber gestaffelt aus (Phasen-Rollout)
                        bzw. hält sie kurz zurück. Sie kommen bei einem der nächsten automatischen Läufe von
                        selbst — das ist kein Fehler und nichts hängt fest.
                      </p>
                      <div className="space-y-1">
                        {d!.held_back!.map((p) => (
                          <div key={p.name} className="flex items-center justify-between gap-2 rounded-md border border-border/30 bg-background/30 px-2.5 py-1.5">
                            <span className="flex items-center gap-1.5 font-mono text-[11px] truncate">
                              <Package className="h-3 w-3 text-muted-foreground shrink-0" />{p.name}
                            </span>
                            <span className="text-[9px] text-muted-foreground shrink-0">
                              {p.reason === "phasing" ? "Phasen-Rollout" : "vorerst zurückgehalten"}
                            </span>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </>
              ) : detail.kind === "engine" || detail.kind === "swap" ? (
                <>
                  <div className="flex items-center gap-2 font-mono text-[11px]">
                    <span className="rounded-md border border-border/40 bg-background/30 px-2 py-1">Build {d?.installed_build ?? "?"}</span>
                    <ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
                    <span className="rounded-md border border-emerald-500/30 bg-emerald-500/5 px-2 py-1 text-emerald-400">Build {d?.latest_build ?? "?"}</span>
                  </div>
                  {(d?.name || d?.latest_tag) && (
                    <div className="text-muted-foreground">Release: <span className="text-foreground">{d?.name}</span>{d?.latest_tag ? ` (${d.latest_tag})` : ""}</div>
                  )}
                  {d?.url && (
                    <a href={d.url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-primary hover:underline">
                      Original-Release-Notes auf GitHub <ExternalLink className="h-3 w-3" />
                    </a>
                  )}
                  {d?.body && (
                    <details className="group">
                      <summary className="cursor-pointer text-[10px] text-muted-foreground hover:text-foreground">Original-Notizen (englisch) anzeigen</summary>
                      <pre className="mt-1.5 whitespace-pre-wrap rounded-lg border border-border/40 bg-background/30 p-3 text-[10px] leading-relaxed text-muted-foreground max-h-60 overflow-y-auto scrollbar-thin">{d.body}</pre>
                    </details>
                  )}
                </>
              ) : (
                // hermes
                (d?.commits?.length ?? 0) === 0 ? (
                  <div className="text-muted-foreground">Keine neuen Commits — Hermes-Agent ist bereits aktuell.</div>
                ) : (
                  <>
                    <div className="text-muted-foreground">{d!.behind} neue Commit(s) auf <span className="font-mono text-foreground">origin/{d!.branch}</span>:</div>
                    <div className="space-y-1">
                      {d!.commits!.map((c) => (
                        <div key={c.hash} className="flex items-start gap-2 rounded-md border border-border/40 bg-background/30 px-2.5 py-1.5">
                          <GitCommit className="h-3.5 w-3.5 text-primary shrink-0 mt-0.5" />
                          <div className="min-w-0">
                            <div className="text-[11px] truncate">{c.subject}</div>
                            <div className="font-mono text-[9px] text-muted-foreground">{c.hash} · {c.when}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </>
                )
              )}

              {/* Fangnetz-Hinweis: verheiratet Breaking-Change-Sorge mit dem Postcheck (engine/swap/hermes) */}
              {detail.kind !== "os" && !nothing && (
                <div className="flex items-start gap-2 rounded-lg border border-border/40 bg-background/20 p-2.5">
                  <ShieldCheck className="h-3.5 w-3.5 text-emerald-400 shrink-0 mt-0.5" />
                  <p className="text-[10px] text-muted-foreground leading-normal">
                    Vor dem Update sichert die Box automatisch den alten Stand. Danach prüft sie den ganzen
                    Stack per echter Anfrage — läuft etwas nicht, rollt sie von selbst zurück{detail.kind === "hermes" ? " und startet den Gateway neu" : ""}.
                  </p>
                </div>
              )}
            </>
          )}
        </div>

        {/* Footer */}
        <div className="flex gap-3 border-t border-border/40 p-4 shrink-0">
          <button onClick={onClose} className="h-9 flex-1 rounded-lg border border-border/60 bg-background/20 text-xs font-semibold text-muted-foreground hover:bg-accent transition-colors cursor-pointer">
            Schließen
          </button>
          <button onClick={onApply} disabled={detail.loading || nothing || !!maintenanceJob}
            title={maintenanceJob ? `Update läuft bereits: ${maintenanceJob.label}` : undefined}
            className="h-9 flex-1 rounded-lg bg-primary text-xs font-semibold text-primary-foreground hover:opacity-90 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-default">
            {maintenanceJob ? "Update läuft…" : "Jetzt aktualisieren"}
          </button>
        </div>
      </div>
    </div>
  )
}
