import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { useEditContext } from "../client/editContext";
import { Switch } from "../../components/ui/switch";
import { Button } from "../../components/ui/button";
import { Badge } from "../../components/ui/badge";
import { Loader2, RefreshCw, FileText } from "lucide-react";
import { formatTime } from "../utils";
import { generatePageContext, getCachedContext, clearContextCache, } from "../services/contextService";
export function Completions() {
    const editContext = useEditContext();
    const [pageContext, setPageContext] = useState(null);
    const [isGeneratingContext, setIsGeneratingContext] = useState(false);
    const pageViewContext = editContext?.getActiveSlotContext()?.primaryPageViewContext;
    // Load page context when component mounts or item changes
    useEffect(() => {
        if (editContext) {
            const cached = getCachedContext(editContext);
            if (cached) {
                setPageContext(cached);
            }
            else {
                loadPageContext();
            }
        }
    }, [
        editContext?.item?.id,
        editContext?.item?.language,
        editContext?.item?.version,
        editContext?.enableCompletions,
    ]);
    const loadPageContext = async () => {
        if (!editContext || !pageViewContext)
            return;
        setIsGeneratingContext(true);
        try {
            const context = await generatePageContext(editContext, pageViewContext);
            setPageContext(context);
        }
        catch (error) {
            console.error("Failed to load page context:", error);
        }
        finally {
            setIsGeneratingContext(false);
        }
    };
    const refreshPageContext = async () => {
        if (!editContext?.item)
            return;
        const cacheKey = `${editContext.item.id}-${editContext.item.language}-${editContext.item.version}`;
        clearContextCache(cacheKey);
        await loadPageContext();
    };
    return (_jsxs("div", { className: "flex h-full flex-col space-y-4 p-4", children: [_jsxs("div", { className: "rounded-lg border bg-white p-4 shadow-sm", children: [_jsx("h3", { className: "mb-3 text-sm font-medium", children: "Completion Settings" }), _jsx("div", { className: "space-y-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx("label", { className: "text-sm font-medium", children: "Enable Completions" }), _jsx("p", { className: "text-xs text-gray-600", children: "Allow AI to suggest completions while typing" })] }), _jsx(Switch, { checked: editContext?.enableCompletions || false, onCheckedChange: (checked) => editContext?.setEnableCompletions(checked) })] }) })] }), _jsxs("div", { className: "rounded-lg border bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("h3", { className: "text-sm font-medium", children: "Page Context" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: refreshPageContext, disabled: isGeneratingContext, children: isGeneratingContext ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(RefreshCw, { className: "h-3 w-3 stroke-1" })) })] }), isGeneratingContext ? (_jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-sm", children: "Generating context..." })] })) : pageContext ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "h-4 w-4 stroke-1 text-blue-500" }), _jsx("span", { className: "text-sm font-medium", children: pageContext.pageTitle }), _jsx(Badge, { variant: "outline", className: "text-xs", children: pageContext.pageType })] }), _jsx("p", { className: "text-xs leading-relaxed text-gray-600", children: pageContext.abstract }), _jsx("div", { className: "text-xs text-gray-400", children: `Generated: ${formatTime(pageContext.lastGenerated)}` })] })) : (_jsxs("div", { className: "py-4 text-center text-gray-500", children: [_jsx(FileText, { className: "mx-auto mb-2 h-6 w-6 opacity-50" }), _jsx("p", { className: "text-sm", children: "No context available" })] }))] }), _jsxs("div", { className: "rounded-lg border bg-white p-4 shadow-sm", children: [_jsx("h3", { className: "mb-3 text-sm font-medium", children: "Keyboard Shortcuts" }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex justify-between text-xs", children: [_jsx("span", { children: "Apply completion" }), _jsx("kbd", { className: "rounded bg-gray-100 px-2 py-1 text-gray-600", children: "Tab" })] }), _jsxs("div", { className: "flex justify-between text-xs", children: [_jsx("span", { children: "Request completion" }), _jsx("kbd", { className: "rounded bg-gray-100 px-2 py-1 text-gray-600", children: "Ctrl+Space" })] }), _jsxs("div", { className: "flex justify-between text-xs", children: [_jsx("span", { children: "Dismiss completion" }), _jsx("kbd", { className: "rounded bg-gray-100 px-2 py-1 text-gray-600", children: "Esc" })] })] })] })] }));
}
//# sourceMappingURL=Completions.js.map