import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, useState, useCallback, } from "react";
import { Check, RotateCcw, Wand2 } from "lucide-react";
import { Button } from "../../components/ui/button";
import { useEditContext } from "../client/editContext";
/**
 * Overlay component that appears on an image after AI edit completes.
 * Provides options to accept, revert, or refine the edit.
 */
export function AiImageResultOverlay({ fieldDescriptor, originalRawValue, agentId, onAccept, onRevert, onRefine, autoDismissMs = 0, }) {
    const editContext = useEditContext();
    const [isVisible, setIsVisible] = useState(true);
    const dismissTimerRef = useRef(null);
    const pageViewContext = editContext?.getActiveSlotContext()?.primaryPageViewContext;
    const indicatorRect = useMemo(() => {
        const geometry = pageViewContext?.bridgeGeometry;
        if (!geometry)
            return null;
        const target = geometry.targets.find((candidate) => {
            if (candidate.kind !== "field")
                return false;
            return (normalizeBridgeId(candidate.fieldId) ===
                normalizeBridgeId(fieldDescriptor.fieldId) &&
                normalizeBridgeId(candidate.item?.id) ===
                    normalizeBridgeId(fieldDescriptor.item.id) &&
                (!candidate.item?.language ||
                    candidate.item.language === fieldDescriptor.item.language) &&
                (candidate.item?.version === undefined ||
                    candidate.item.version === fieldDescriptor.item.version));
        });
        if (!target?.rect)
            return null;
        const rectScale = geometry.rectScale ?? 1;
        return {
            x: target.rect.left * rectScale,
            y: target.rect.top * rectScale,
            width: target.rect.width * rectScale,
            height: target.rect.height * rectScale,
        };
    }, [
        pageViewContext?.bridgeGeometry,
        fieldDescriptor.fieldId,
        fieldDescriptor.item.id,
        fieldDescriptor.item.language,
        fieldDescriptor.item.version,
    ]);
    // Auto-dismiss timer
    useEffect(() => {
        if (autoDismissMs > 0) {
            dismissTimerRef.current = setTimeout(() => {
                setIsVisible(false);
                onAccept();
            }, autoDismissMs);
        }
        return () => {
            if (dismissTimerRef.current) {
                clearTimeout(dismissTimerRef.current);
            }
        };
    }, [autoDismissMs, onAccept]);
    // Handle accept (keep the edit)
    const handleAccept = useCallback(() => {
        setIsVisible(false);
        onAccept();
    }, [onAccept]);
    // Handle revert (restore original value)
    const handleRevert = useCallback(() => {
        if (editContext) {
            editContext.operations.editField({
                field: fieldDescriptor,
                rawValue: originalRawValue,
                refresh: "immediate",
            });
        }
        setIsVisible(false);
        onRevert();
    }, [editContext, fieldDescriptor, originalRawValue, onRevert]);
    // Handle refine (re-open editor)
    const handleRefine = useCallback(() => {
        if (dismissTimerRef.current) {
            clearTimeout(dismissTimerRef.current);
        }
        setIsVisible(false);
        onRefine?.();
    }, [onRefine]);
    if (!isVisible || !indicatorRect)
        return null;
    return (_jsxs("div", { className: "pointer-events-none absolute", style: {
            left: indicatorRect.x,
            top: indicatorRect.y,
            width: indicatorRect.width,
            height: indicatorRect.height,
            zIndex: 850,
        }, children: [_jsx("div", { className: "border-feedback-green bg-feedback-green/10 absolute inset-0 rounded border-2" }), _jsxs("div", { className: "ring-neutral-grey-100/10 pointer-events-auto absolute top-2 right-2 flex items-center gap-1 rounded-lg bg-white/95 p-1 shadow-lg ring-1 backdrop-blur-sm", children: [_jsxs(Button, { size: "sm", variant: "ghost", onClick: handleAccept, className: "text-feedback-green hover:bg-feedback-green-light hover:text-feedback-green h-7 gap-1 px-2 text-xs", title: "Accept edit", children: [_jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 1 }), "Accept"] }), _jsxs(Button, { size: "sm", variant: "ghost", onClick: handleRevert, className: "text-feedback-orange hover:bg-feedback-orange-light hover:text-feedback-orange h-7 gap-1 px-2 text-xs", title: "Revert to original", children: [_jsx(RotateCcw, { className: "h-3.5 w-3.5", strokeWidth: 1 }), "Revert"] }), onRefine && (_jsxs(Button, { size: "sm", variant: "ghost", onClick: handleRefine, className: "text-highlight-100 hover:bg-highlight-10 h-7 gap-1 px-2 text-xs", title: "Refine edit", children: [_jsx(Wand2, { className: "h-3.5 w-3.5", strokeWidth: 1 }), "Refine"] }))] }), _jsxs("div", { className: "rounded-badge bg-feedback-green badge-pad-sm text-2xs pointer-events-none absolute bottom-2 left-2 flex items-center gap-1 font-medium text-white shadow-sm", children: [_jsx(Check, { className: "h-3 w-3", strokeWidth: 1 }), "AI Edited"] })] }));
}
export default AiImageResultOverlay;
function normalizeBridgeId(value) {
    return (value || "").replace(/[{}-]/g, "").toLowerCase();
}
//# sourceMappingURL=AiImageResultOverlay.js.map