import { Chip, Zustandsfeld } from "@/components/cockpit/Chip"
import { Panel } from "@/components/cockpit/Panel"
import { SnapshotListe } from "@/components/homelab/SnapshotListe"
import { useHomelabSnapshots, useInstanz, usePartner, useSnapshotAktion } from "@/lib/abfragen"
import { summeText, zeitpunktText } from "@/lib/snapshots"

// Homelab · Snapshots (seit 25.09.2026, User-Wunsch): je Gerät seine Snapshots und die Sicherungen des Orchestrators,
// mit Knöpfen zum Anlegen, Löschen und Zurücksetzen. Was erlaubt ist und die Rückfragen kommen vom Homelab-Teil
// (backend/services/homelab/snapshots.py); die Aktionen laufen dort als Läufe wie die Updates.

export function HomelabSnapshotsSeite() {
  const instanz = useInstanz()
  const partner = usePartner()
  const aktiv = instanz.data?.rolle === "homelab" || !!(partner.data?.eingerichtet && partner.data.erreichbar)
  const abfrage = useHomelabSnapshots(aktiv)
  const aktion = useSnapshotAktion()

  if (instanz.isPending || partner.isPending) return <Zustandsfeld text="Wird gelesen …" />
  if (!aktiv) return <Zustandsfeld fehler text="Der Homelab-Teil antwortet gerade nicht." />
  if (abfrage.isPending) return <Zustandsfeld text="Die Snapshots werden gelesen …" />
  if (!abfrage.data) {
    return <Zustandsfeld fehler text={`Die Snapshots lassen sich nicht lesen: ${abfrage.error?.message ?? "keine Daten"}`} />
  }

  const d = abfrage.data
  // Warum gerade gar keine Aktion geht („Alle aktualisieren“, ein Update, der Ausführer) — derselbe Satz wie beim Knopf.
  const grund = d.sperre
  return (
    <Panel titel="Snapshots" rechts={d.bericht ? <Chip>{summeText(d.summe)}</Chip> : undefined}>
      <p className="-mt-2 text-[15px] text-text-2">
        Ein Snapshot hält den Stand eines Geräts fest. Vor jedem Update legt der Orchestrator einen an (beim Proxmox
        Backup Server eine Sicherung) und räumt nach einem grünen Update die älteren weg. Hier legst du selbst welche
        an — die bleiben, bis du sie löschst —, setzt ein Gerät zurück oder löschst, was weg kann. Von Hand in Proxmox
        angelegte stehen nur zur Ansicht da.
      </p>
      {grund && (
        <p role="alert" className="rounded-xl border border-bernstein/60 bg-bernstein-grund px-4 py-3 text-[15px] text-bernstein">
          {grund}
        </p>
      )}
      {d.bericht?.veraltet && (
        <p className="text-[15px] text-bernstein">
          Der letzte Bericht ist von {zeitpunktText(d.bericht.empfangen, d.jetzt)}; die Liste kann veraltet sein.
        </p>
      )}
      {!d.bericht ? (
        <p className="text-[15px] text-text-2">Der Ausführer hat noch keinen Bericht geschickt.</p>
      ) : (
        <>
          {!d.details && (
            <p className="text-sm text-text-3">
              Beschreibungen und die Größe der Sicherungen erscheinen, sobald der neue Ausführer auf dem Proxmox-Host
              läuft; bis dahin kommt der Zeitpunkt aus dem Namen des Snapshots.
            </p>
          )}
          <SnapshotListe daten={d} gesperrt={aktion.isPending || !!grund} onAktion={(a) => aktion.mutate(a)} />
          <p className="text-sm text-text-3">
            Wie viel ein Snapshot im Speicherpool belegt, sagt Proxmox nicht: Er teilt sich die Daten mit dem Gerät und
            wächst mit jeder Änderung seit seinem Zeitpunkt. Wie voll der Pool ist, steht im Cockpit unter „Speicher und
            Sicherungen“.
          </p>
        </>
      )}
    </Panel>
  )
}