/**
 * Dialoge.
 *
 * Zwei Bauarten, und der Unterschied ist fachlich:
 *
 * - `Dialog` fuer Eingaben (anlegen, bearbeiten). Er laesst sich mit Escape und
 *   einem Klick daneben schliessen.
 * - `ConfirmDialog` fuer Handlungen, die etwas veraendern. Er verlangt eine
 *   ausdrueckliche Bestaetigung. Bei zerstoerenden Handlungen kann er zusaetzlich
 *   ein woertlich einzutippendes Wort verlangen — dasselbe Mittel, das
 *   `uninstall.sh` und die Wiederherstellung mit Ueberschreiben verwenden. Ein
 *   versehentlich gesetztes Kennzeichen in einem Skript reicht dann nicht aus,
 *   und ein Klick aus Gewohnheit auch nicht.
 */

import * as DialogPrimitive from '@radix-ui/react-dialog';
import { X } from 'lucide-react';
import { useState, type ReactNode } from 'react';
import { cn } from '@/lib/utils';
import { Button } from './Button';

export const DialogRoot = DialogPrimitive.Root;
export const DialogTrigger = DialogPrimitive.Trigger;
export const DialogClose = DialogPrimitive.Close;

export function DialogContent({
  className,
  children,
  size = 'md',
}: {
  readonly className?: string | undefined;
  readonly children: ReactNode;
  readonly size?: 'sm' | 'md' | 'lg' | 'xl' | undefined;
}) {
  const sizeClasses = {
    sm: 'max-w-md',
    md: 'max-w-lg',
    lg: 'max-w-2xl',
    xl: 'max-w-4xl',
  } as const;

  return (
    <DialogPrimitive.Portal>
      <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/50 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=open]:fade-in-0" />
      <DialogPrimitive.Content
        className={cn(
          'fixed left-1/2 top-1/2 z-50 w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2',
          'max-h-[calc(100vh-4rem)] overflow-y-auto',
          'rounded-lg border border-line bg-card shadow-xl',
          sizeClasses[size],
          className,
        )}
      >
        {children}
        <DialogPrimitive.Close
          className="absolute right-4 top-4 rounded-md p-1 text-fg-muted transition-colors hover:bg-hover hover:text-fg"
          aria-label="Schliessen"
        >
          <X className="size-4" />
        </DialogPrimitive.Close>
      </DialogPrimitive.Content>
    </DialogPrimitive.Portal>
  );
}

export function DialogHeader({
  title,
  description,
}: {
  readonly title: ReactNode;
  readonly description?: ReactNode | undefined;
}) {
  return (
    <div className="border-b border-line px-5 py-4 pr-12">
      <DialogPrimitive.Title className="text-base font-semibold text-fg">
        {title}
      </DialogPrimitive.Title>
      {description ? (
        <DialogPrimitive.Description className="mt-1 text-sm text-fg-muted">
          {description}
        </DialogPrimitive.Description>
      ) : null}
    </div>
  );
}

export function DialogBody({
  className,
  children,
}: {
  readonly className?: string | undefined;
  readonly children: ReactNode;
}) {
  return <div className={cn('space-y-4 px-5 py-4', className)}>{children}</div>;
}

export function DialogFooter({ children }: { readonly children: ReactNode }) {
  return (
    <div className="flex items-center justify-end gap-2 border-t border-line px-5 py-3">
      {children}
    </div>
  );
}

/**
 * Bestaetigungsdialog fuer veraendernde Handlungen.
 *
 * `confirmationWord` ist die zweite Huerde: Wird es gesetzt, muss der Betreiber
 * es woertlich eintippen. Das gehoert ausschliesslich an Handlungen, die Daten
 * unwiederbringlich entfernen oder ueberschreiben — ein Ritual ohne Anlass
 * gewoehnt das Wegklicken an, und dann wirkt es dort nicht mehr, wo es zaehlt.
 */
export function ConfirmDialog({
  open,
  onOpenChange,
  title,
  description,
  confirmLabel = 'Bestaetigen',
  cancelLabel = 'Abbrechen',
  confirmationWord,
  confirmationHint,
  isDestructive = false,
  isLoading = false,
  onConfirm,
  children,
}: {
  readonly open: boolean;
  readonly onOpenChange: (isOpen: boolean) => void;
  readonly title: ReactNode;
  readonly description?: ReactNode | undefined;
  readonly confirmLabel?: string | undefined;
  readonly cancelLabel?: string | undefined;
  /** Wird gesetzt, muss der Betreiber dieses Wort woertlich eintippen. */
  readonly confirmationWord?: string | undefined;
  readonly confirmationHint?: ReactNode | undefined;
  readonly isDestructive?: boolean | undefined;
  readonly isLoading?: boolean | undefined;
  readonly onConfirm: () => void | Promise<void>;
  readonly children?: ReactNode | undefined;
}) {
  return (
    <DialogRoot open={open} onOpenChange={onOpenChange}>
      <DialogContent size="sm">
        {/* Der Inhalt haengt im Portal und wird beim Schliessen ausgehaengt.
            Damit verschwindet die eingetippte Bestaetigung von selbst — ein
            Zuruecksetzen im Effekt braucht es nicht, und die Huerde steht beim
            naechsten Oeffnen wieder. */}
        <ConfirmDialogBody
          title={title}
          description={description}
          confirmLabel={confirmLabel}
          cancelLabel={cancelLabel}
          confirmationWord={confirmationWord}
          confirmationHint={confirmationHint}
          isDestructive={isDestructive}
          isLoading={isLoading}
          onCancel={() => onOpenChange(false)}
          onConfirm={onConfirm}
        >
          {children}
        </ConfirmDialogBody>
      </DialogContent>
    </DialogRoot>
  );
}

/** Inhalt des Bestaetigungsdialogs; haelt die eingetippte Bestaetigung. */
function ConfirmDialogBody({
  title,
  description,
  confirmLabel,
  cancelLabel,
  confirmationWord,
  confirmationHint,
  isDestructive,
  isLoading,
  onCancel,
  onConfirm,
  children,
}: {
  readonly title: ReactNode;
  readonly description?: ReactNode | undefined;
  readonly confirmLabel: string;
  readonly cancelLabel: string;
  readonly confirmationWord?: string | undefined;
  readonly confirmationHint?: ReactNode | undefined;
  readonly isDestructive: boolean;
  readonly isLoading: boolean;
  readonly onCancel: () => void;
  readonly onConfirm: () => void | Promise<void>;
  readonly children?: ReactNode | undefined;
}) {
  const [typedConfirmation, setTypedConfirmation] = useState('');

  const confirmationSatisfied =
    !confirmationWord || typedConfirmation.trim() === confirmationWord;

  return (
    <>
      <DialogHeader title={title} description={description} />
      <DialogBody>
        {children}
        {confirmationWord ? (
          <div className="space-y-2">
            <label
              htmlFor="confirmation-input"
              className="block text-sm font-medium text-fg"
            >
              {confirmationHint ?? (
                <>
                  Tippen Sie zur Bestaetigung{' '}
                  <code className="rounded bg-sunken px-1.5 py-0.5 font-mono text-xs">
                    {confirmationWord}
                  </code>
                </>
              )}
            </label>
            <input
              id="confirmation-input"
              type="text"
              autoComplete="off"
              value={typedConfirmation}
              onChange={(changeEvent) => setTypedConfirmation(changeEvent.target.value)}
              className="w-full rounded-md border border-line-strong bg-card px-3 py-2 font-mono text-sm text-fg"
            />
          </div>
        ) : null}
      </DialogBody>
      <DialogFooter>
        <Button variant="ghost" onClick={onCancel} disabled={isLoading}>
          {cancelLabel}
        </Button>
        <Button
          variant={isDestructive ? 'destructive' : 'primary'}
          onClick={() => void onConfirm()}
          disabled={!confirmationSatisfied}
          isLoading={isLoading}
        >
          {confirmLabel}
        </Button>
      </DialogFooter>
    </>
  );
}