"use client"

import { Loader2, Trash2, X } from "lucide-react"

interface DeleteConfirmModalProps {
  open: boolean
  userName: string
  isLoading: boolean
  onClose: () => void
  onConfirm: () => void
}

export function DeleteConfirmModal({
  open,
  userName,
  isLoading,
  onClose,
  onConfirm,
}: DeleteConfirmModalProps) {
  if (!open) return null

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      role="alertdialog"
      aria-modal="true"
      aria-labelledby="delete-modal-title"
      aria-describedby="delete-modal-desc"
    >
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={!isLoading ? onClose : undefined}
        aria-hidden="true"
      />

      {/* Modal */}
      <div className="relative w-full max-w-sm bg-card rounded-2xl shadow-2xl border border-border overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-5 border-b border-border">
          <div className="flex items-center gap-3">
            <div
              className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
              style={{ background: "rgba(239,68,68,0.10)" }}
            >
              <Trash2
                className="w-5 h-5"
                style={{ color: "#EF4444" }}
                aria-hidden="true"
              />
            </div>
            <h2
              id="delete-modal-title"
              className="text-base font-bold text-foreground font-sans"
            >
              Delete User
            </h2>
          </div>
          <button
            onClick={onClose}
            disabled={isLoading}
            className="p-2 rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-50"
            aria-label="Close"
          >
            <X className="w-4 h-4" aria-hidden="true" />
          </button>
        </div>

        {/* Body */}
        <div className="px-6 py-6 flex flex-col gap-6">
          <p
            id="delete-modal-desc"
            className="text-sm text-muted-foreground font-sans leading-relaxed"
          >
            Are you sure you want to delete{" "}
            <span className="font-semibold text-foreground">
              &quot;{userName}&quot;
            </span>
            ? This action cannot be undone and will permanently remove the
            user and all associated data.
          </p>

          <div className="flex gap-3">
            <button
              type="button"
              onClick={onClose}
              disabled={isLoading}
              className="flex-1 py-2.5 rounded-xl text-sm font-semibold font-sans border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-all disabled:opacity-50"
            >
              Cancel
            </button>
            <button
              type="button"
              onClick={onConfirm}
              disabled={isLoading}
              className="flex-1 py-2.5 rounded-xl text-white text-sm font-semibold font-sans transition-all duration-150 flex items-center justify-center gap-2 disabled:opacity-70 hover:brightness-105"
              style={{ background: "#EF4444" }}
            >
              {isLoading ? (
                <>
                  <Loader2
                    className="w-4 h-4 animate-spin"
                    aria-hidden="true"
                  />
                  Deleting...
                </>
              ) : (
                <>
                  <Trash2 className="w-4 h-4" aria-hidden="true" />
                  Delete
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}