import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { useConfirmationStore } from '../../stores/confirmationStore';
import { X, AlertCircle } from 'lucide-react';
import { useEffect, useState } from 'react';
export function ConfirmationDialog() {
    const { isOpen, title, message, confirmLabel, cancelLabel, variant, onConfirm, onCancel, closeConfirmation, } = useConfirmationStore();
    const [isProcessing, setIsProcessing] = useState(false);
    useEffect(() => {
        if (!isOpen) {
            setIsProcessing(false);
        }
    }, [isOpen]);
    const handleConfirm = useCallback(async () => {
        setIsProcessing(true);
        try {
            await onConfirm();
            closeConfirmation();
        }
        catch (error) {
            console.error('Confirmation action failed:', error);
            setIsProcessing(false);
        }
    }, [onConfirm, closeConfirmation]);
    const handleCancel = useCallback(() => {
        onCancel?.();
        closeConfirmation();
    }, [onCancel, closeConfirmation]);
    const handleBackdropClick = (e) => {
        if (e.target === e.currentTarget && !isProcessing) {
            handleCancel();
        }
    };
    useEffect(() => {
        const handleEscape = (e) => {
            if (isOpen && !isProcessing) {
                const target = e.target;
                const isInInput = target.tagName === 'INPUT' ||
                    target.tagName === 'TEXTAREA' ||
                    target.isContentEditable;
                if (e.key === 'Escape' || (e.key === 'q' && !isInInput)) {
                    e.preventDefault();
                    handleCancel();
                }
                if (e.key === 'Enter') {
                    e.preventDefault();
                    handleConfirm();
                }
            }
        };
        if (isOpen) {
            document.addEventListener('keydown', handleEscape);
            return () => document.removeEventListener('keydown', handleEscape);
        }
    }, [isOpen, isProcessing, handleConfirm, handleCancel]);
    if (!isOpen)
        return null;
    return (_jsx("div", { role: "dialog", "aria-modal": "true", className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", onClick: handleBackdropClick, onKeyDown: (e) => {
            const target = e.target;
            const isInInput = target.tagName === 'INPUT' ||
                target.tagName === 'TEXTAREA' ||
                target.isContentEditable;
            if ((e.key === 'Escape' || (e.key === 'q' && !isInInput)) &&
                !isProcessing) {
                e.preventDefault();
                handleCancel();
            }
        }, children: _jsxs("div", { className: "bg-background border border-border rounded-lg shadow-lg max-w-md w-full mx-4", children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-border", children: [_jsxs("div", { className: "flex items-center gap-2", children: [variant === 'destructive' && (_jsx(AlertCircle, { className: "w-5 h-5 text-destructive" })), _jsx("h2", { className: "text-lg font-semibold", children: title })] }), _jsx("button", { type: "button", onClick: handleCancel, disabled: isProcessing, className: "p-1 hover:bg-muted rounded transition-colors disabled:opacity-50", "aria-label": "Close", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-muted-foreground", children: message }) }), _jsxs("div", { className: "flex items-center justify-end gap-3 p-4 border-t border-border", children: [_jsx("button", { type: "button", onClick: handleCancel, disabled: isProcessing, className: "px-4 py-2 text-sm font-medium rounded transition-colors hover:bg-muted disabled:opacity-50", children: cancelLabel }), _jsx("button", { type: "button", onClick: handleConfirm, disabled: isProcessing, className: `px-4 py-2 text-sm font-medium rounded transition-colors disabled:opacity-50 ${variant === 'destructive'
                                ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
                                : 'bg-primary text-primary-foreground hover:bg-primary/90'}`, children: isProcessing ? 'Processing...' : confirmLabel })] })] }) }));
}
//# sourceMappingURL=ConfirmationDialog.js.map