import type { ReactNode } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
} from "@/components/ui/dialog"

/**
 * Rückfrage vor Schritten, die die Box verändern (Updates, Freigeben, Zurückspielen, Neustarts,
 * Installieren, Abbrechen). `gesperrt` hält den Ja-Knopf fest, solange die Aktion schon unterwegs
 * ist — ein Doppelklick startet sie so nicht zweimal.
 */
export function Bestaetigen({ offen, titel, text, knopf, neinKnopf = "Abbrechen", gefahr, gesperrt, onJa, onNein, children }: {
  offen: boolean
  titel: string
  text: string
  knopf: string
  neinKnopf?: string
  gefahr?: boolean
  gesperrt?: boolean
  onJa: () => void
  onNein: () => void
  children?: ReactNode
}) {
  return (
    <Dialog open={offen} onOpenChange={(o) => !o && onNein()}>
      {/* Nie höher als der Bildschirm: Auf kleinen Handys (320 × 568) lagen die Knöpfe sonst außerhalb
          und ließen sich nicht erreichen. Der Text scrollt, die Knöpfe bleiben unten stehen — bündig,
          darum ohne Bodenpolster (sticky rechnet das Polster ein, darunter schien sonst Text durch). */}
      <DialogContent className="max-h-[calc(100dvh-2rem)] overflow-y-auto border-linie bg-panel pb-0 sm:max-w-lg">
        <DialogHeader>
          <DialogTitle className="schild pr-10 text-xl break-words">{titel}</DialogTitle>
          <DialogDescription className="text-[15px] leading-relaxed text-text-2">{text}</DialogDescription>
        </DialogHeader>
        {children}
        <DialogFooter className="sticky bottom-0 mb-0 gap-2 bg-erhaben sm:gap-2">
          <Button variant="outline" onClick={onNein}>
            {neinKnopf}
          </Button>
          <Button
            variant={gefahr ? "gefahr" : "default"}
            disabled={gesperrt}
            aria-busy={gesperrt || undefined}
            onClick={() => {
              if (!gesperrt) onJa()
            }}
          >
            {knopf}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}