'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { Check, Copy, Loader2, Sparkles, X } from 'lucide-react';
import { coauthorActionLabel } from '../lib/coauthor-client.js';
/**
 * Universal AI-result panel rendered by both the TipTap bubble menu and the
 * Cmd+K slash-command palette. Shows a before/after diff plus three actions:
 *
 *   - Apply (write the result back to the active target)
 *   - Copy (copy the result to the clipboard)
 *   - Discard (close without changing anything)
 *
 * The popover takes the same `{ open, loading, action, before, after, error }`
 * state shape regardless of caller so the UX stays identical across surfaces.
 */
export function CoauthorResultPopover({ open, loading, action, before, after, error, changes, applyLabel, onApply, onCopy, onDiscard, }) {
    const dialogRef = useRef(null);
    useEffect(() => {
        if (!open)
            return;
        const onKey = (e) => {
            if (e.key === 'Escape') {
                e.preventDefault();
                onDiscard();
            }
        };
        document.addEventListener('keydown', onKey);
        return () => document.removeEventListener('keydown', onKey);
    }, [open, onDiscard]);
    useEffect(() => {
        if (!open)
            return;
        dialogRef.current?.focus();
    }, [open]);
    if (!open)
        return null;
    const applyDisabled = loading || !!error || after.length === 0;
    const copyDisabled = loading || !!error || after.length === 0;
    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4", role: "presentation", onClick: onDiscard, children: _jsxs("div", { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-label": `AI ${coauthorActionLabel(action)} result`, tabIndex: -1, onClick: (e) => e.stopPropagation(), className: "w-full max-w-2xl rounded-lg bg-white shadow-2xl outline-none", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold text-gray-900", children: [_jsx(Sparkles, { className: "h-4 w-4 text-blue-600", "aria-hidden": true }), _jsxs("span", { children: ["AI ", coauthorActionLabel(action)] }), loading && (_jsx(Loader2, { className: "ml-1 h-4 w-4 animate-spin text-gray-400", "aria-label": "Loading" }))] }), _jsx("button", { type: "button", onClick: onDiscard, className: "rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600", "aria-label": "Close", children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 p-4", children: [_jsxs("section", { "aria-labelledby": "coauthor-before", children: [_jsx("h3", { id: "coauthor-before", className: "mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase", children: "Before" }), _jsx("pre", { className: "max-h-72 overflow-auto rounded border border-gray-200 bg-gray-50 p-3 text-sm whitespace-pre-wrap text-gray-700", children: before })] }), _jsxs("section", { "aria-labelledby": "coauthor-after", children: [_jsx("h3", { id: "coauthor-after", className: "mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase", children: "After" }), loading ? (_jsx("div", { className: "flex h-72 items-center justify-center rounded border border-dashed border-gray-200 bg-gray-50 text-sm text-gray-400", role: "status", children: "Thinking\u2026" })) : error ? (_jsx("div", { className: "flex h-72 items-center justify-center rounded border border-dashed border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })) : (_jsx("pre", { className: "max-h-72 overflow-auto rounded border border-blue-200 bg-blue-50 p-3 text-sm whitespace-pre-wrap text-gray-900", children: after }))] })] }), changes && changes.length > 0 && !loading && !error && (_jsxs("div", { className: "border-t border-gray-200 px-4 py-3", children: [_jsxs("h3", { className: "mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase", children: ["Changes (", changes.length, ")"] }), _jsx("ul", { className: "max-h-32 space-y-1 overflow-auto text-xs", children: changes.map((change, i) => (_jsxs("li", { className: "flex items-start gap-2 rounded bg-gray-50 px-2 py-1", children: [_jsx("span", { className: "text-red-600 line-through", children: change.original }), _jsx("span", { className: "text-gray-400", children: "\u2192" }), _jsx("span", { className: "text-green-700", children: change.corrected }), change.reason && (_jsx("span", { className: "ml-auto text-gray-500 italic", children: change.reason }))] }, i))) })] })), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-gray-200 bg-gray-50 px-4 py-3", children: [_jsxs("button", { type: "button", onClick: onDiscard, className: "rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50", children: [_jsx(X, { className: "mr-1.5 inline h-3.5 w-3.5", "aria-hidden": true }), "Discard"] }), _jsxs("button", { type: "button", onClick: onCopy, disabled: copyDisabled, className: "rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx(Copy, { className: "mr-1.5 inline h-3.5 w-3.5", "aria-hidden": true }), "Copy"] }), _jsxs("button", { type: "button", onClick: onApply, disabled: applyDisabled, className: "rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx(Check, { className: "mr-1.5 inline h-3.5 w-3.5", "aria-hidden": true }), applyLabel ?? 'Apply'] })] })] }) }));
}
//# sourceMappingURL=CoauthorResultPopover.js.map