"use client";

import { AuthorizedAction } from "@/components/auth/authorized-action";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import type { ActionSpec } from "@/lib/rbac/action-access";
import { cn } from "@/lib/utils";
import { AlertTriangle, Trash2 } from "lucide-react";

interface ConfirmationDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  description: string;
  confirmLabel: string;
  cancelLabel: string;
  onConfirm: () => void;
  confirmAction?: ActionSpec;
  variant?: "danger" | "warning";
  icon?: React.ReactNode;
}

export function ConfirmationDialog({
  open,
  onOpenChange,
  title,
  description,
  confirmLabel,
  cancelLabel,
  onConfirm,
  confirmAction,
  variant = "danger",
  icon,
}: ConfirmationDialogProps) {
  const handleConfirm = () => {
    onConfirm();
    onOpenChange(false);
  };

  const defaultIcon =
    variant === "danger" ? (
      <Trash2 className="size-12 text-destructive" />
    ) : (
      <AlertTriangle className="size-12 text-orange-500" />
    );

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        layout="compact"
        className="sm:max-w-[425px]"
        showCloseButton={false}
      >
        <div className="flex flex-col items-center gap-4">
          {/* Icon */}
          <div className="flex items-center justify-center">
            {icon || defaultIcon}
          </div>

          {/* Header */}
          <DialogHeader className="text-center space-y-2">
            <DialogTitle className="text-lg font-semibold text-center">
              {title}
            </DialogTitle>
            <DialogDescription className="text-sm text-muted-foreground text-center break-words">
              {description}
            </DialogDescription>
          </DialogHeader>
        </div>

        {/* Footer */}
        <DialogFooter className="flex gap-3 sm:gap-3">
          <Button
            type="button"
            variant="outline"
            onClick={() => onOpenChange(false)}
            className="h-10 flex-1"
          >
            {cancelLabel}
          </Button>
          <AuthorizedAction action={confirmAction} surface="dialog">
            <Button
              type="button"
              variant={variant === "danger" ? "destructive" : "default"}
              onClick={handleConfirm}
              className={cn(
                "h-10 flex-1",
                variant === "warning" &&
                "bg-orange-500 hover:bg-orange-600 text-white"
              )}
            >
              {confirmLabel}
            </Button>
          </AuthorizedAction>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}