import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { lookupArtifactRendererByType, useArtifactRendererRegistry, useArtifactStorage, useThreadList, } from "@openuidev/react-headless";
import { ArrowLeft, MessageSquare } from "lucide-react";
import { useEffect, useMemo, useRef, useState } from "react";
import { Button } from "../Button";
import { IconButton } from "../IconButton";
import { artifactListPath } from "./_shared/artifactPaths";
import { useNav } from "./_shared/navContext";
/**
 * Full-page artifact view (reserved path `artifacts/{category}/{id}`),
 * rendered independent of any thread.
 *
 * Fetches the artifact via `ArtifactStorage.get`, resolves the renderer by
 * `artifact.type`, runs the renderer's `parser` with
 * `{ args: undefined, response: artifact.content }` (stored content must have
 * the same shape as the tool-call response), and renders `actual` filling the
 * page. No DetailedView involvement.
 *
 * `controls.close` navigates back to the category list; `open`/`toggle` are
 * no-ops (the page IS the open state). `isStreaming` is always `false`.
 *
 * Internal — rendered by AgentInterface for the reserved `artifacts/` prefix.
 *
 * @internal
 */
export const ArtifactViewPage = ({ artifactId, categoryName, }) => {
    const storage = useArtifactStorage();
    const registry = useArtifactRendererRegistry();
    const { navigate } = useNav();
    const selectThread = useThreadList((s) => s.selectThread);
    const [artifact, setArtifact] = useState(null);
    const [error, setError] = useState(null);
    const requestIdRef = useRef(0);
    useEffect(() => {
        if (!storage)
            return;
        const requestId = ++requestIdRef.current;
        setArtifact(null);
        setError(null);
        storage
            .get(artifactId)
            .then((a) => {
            if (requestId !== requestIdRef.current)
                return;
            setArtifact(a);
        })
            .catch((e) => {
            if (requestId !== requestIdRef.current)
                return;
            setError(e instanceof Error ? e : new Error(String(e)));
        });
    }, [storage, artifactId]);
    const backToList = () => navigate(artifactListPath(categoryName));
    const goToThread = () => {
        if (!artifact)
            return;
        selectThread(artifact.threadId);
        navigate(undefined);
    };
    const renderer = useMemo(() => {
        if (!artifact || !registry)
            return null;
        return lookupArtifactRendererByType(registry, artifact.type);
    }, [artifact, registry]);
    const parsed = useMemo(() => {
        if (!artifact || !renderer)
            return null;
        return renderer.parser({ args: undefined, response: artifact.content }, { isStreaming: false });
    }, [artifact, renderer]);
    const controls = {
        isActive: true,
        isStreaming: false,
        open: () => { },
        close: backToList,
        toggle: backToList,
    };
    let body;
    if (!storage) {
        body = null;
    }
    else if (error) {
        body = (_jsxs("div", { className: "openui-agent-artifact-view__error", children: ["Failed to load artifact: ", error.message] }));
    }
    else if (!artifact) {
        body = _jsx("div", { className: "openui-agent-artifact-view__loading", children: "Loading\u2026" });
    }
    else if (!renderer) {
        body = (_jsxs("div", { className: "openui-agent-artifact-view__error", children: ["No renderer registered for artifact type \"", artifact.type, "\"."] }));
    }
    else if (!parsed) {
        body = (_jsx("div", { className: "openui-agent-artifact-view__error", children: "The renderer could not parse this artifact's content." }));
    }
    else {
        body = renderer.actual(parsed.props, controls);
    }
    return (_jsxs("div", { className: "openui-agent-artifact-view", children: [_jsxs("div", { className: "openui-agent-artifact-view__header", children: [_jsx(IconButton, { variant: "tertiary", size: "small", icon: _jsx(ArrowLeft, { size: "1em" }), "aria-label": "Back", onClick: backToList }), _jsx("span", { className: "openui-agent-artifact-view__title", children: artifact?.title ?? "" }), artifact && (_jsx(Button, { variant: "tertiary", size: "small", iconLeft: _jsx(MessageSquare, { size: 14 }), onClick: goToThread, children: "Go to thread" }))] }), _jsx("div", { className: "openui-agent-artifact-view__content", children: body })] }));
};
//# sourceMappingURL=ArtifactViewPage.js.map