"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from "react";
import Markdown from "react-markdown";
import { cn } from "@stigmer/theme";
import { MARKDOWN_COMPONENTS, REMARK_PLUGINS, stripFrontmatter } from "../internal/markdown-components";
import { buildFileTree, FileTreeNode } from "../internal/file-tree";
import { useSkillArtifact } from "./useSkillArtifact";
// ---------------------------------------------------------------------------
// Main component
// ---------------------------------------------------------------------------
/**
 * File tree browser with content viewer for skill packages.
 *
 * Fetches the skill's ZIP artifact, unpacks it, and renders:
 * - Left panel: file tree with folder grouping
 * - Right panel: content viewer (rendered Markdown for .md, raw code otherwise)
 *
 * SKILL.md is selected by default on load.
 * Responsive: stacked layout on mobile viewports.
 *
 * Zero Console dependencies — safe for platform builder embedding.
 * All visual properties flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * const { skill } = useSkill(org, slug);
 *
 * <SkillFileBrowser
 *   artifactStorageKey={skill?.status?.artifactStorageKey ?? null}
 * />
 * ```
 */
export function SkillFileBrowser({ artifactStorageKey, className, }) {
    const { files, isLoading, error, getFileContent } = useSkillArtifact(artifactStorageKey);
    const [selectedPath, setSelectedPath] = useState("SKILL.md");
    const treeNodes = useMemo(() => (files ? buildFileTree(files.filter((f) => !f.isDirectory)) : []), [files]);
    const content = useMemo(() => (selectedPath ? getFileContent(selectedPath) : null), [selectedPath, getFileContent]);
    if (!artifactStorageKey)
        return null;
    if (isLoading) {
        return (_jsxs("div", { className: cn("rounded-lg border border-border", className), "aria-busy": "true", "aria-label": "Loading skill package files", children: [_jsx("div", { className: "p-4", children: _jsx("div", { className: "h-3 w-32 animate-pulse rounded bg-muted" }) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-[200px_1fr] border-t border-border", children: [_jsx("div", { className: "space-y-2 p-3 border-b md:border-b-0 md:border-r border-border", children: [1, 2, 3].map((i) => (_jsx("div", { className: "h-4 w-full animate-pulse rounded bg-muted" }, i))) }), _jsx("div", { className: "p-4", children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-4 w-3/4 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-4 w-1/2 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-4 w-2/3 animate-pulse rounded bg-muted" })] }) })] })] }));
    }
    if (error) {
        return (_jsx("div", { className: cn("rounded-lg border border-border p-4", className), children: _jsxs("p", { className: "text-sm text-destructive", children: ["Failed to load skill package: ", error.message] }) }));
    }
    if (!files || files.length === 0)
        return null;
    return (_jsxs("div", { className: cn("rounded-lg border border-border overflow-hidden", className), children: [_jsx("div", { className: "border-b border-border px-4 py-2", children: _jsx("h3", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Package Files" }) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-[220px_1fr]", children: [_jsx("nav", { className: "border-b border-border md:border-b-0 md:border-r overflow-y-auto", "aria-label": "Skill package file tree", children: _jsx("ul", { className: "py-1", role: "tree", children: treeNodes.map((node) => (_jsx(FileTreeNode, { node: node, selectedPath: selectedPath, onSelect: setSelectedPath, depth: 0 }, node.path))) }) }), _jsx("div", { className: "min-h-[200px] max-h-[400px] overflow-y-auto p-4", children: content !== null ? (_jsx(FileContentViewer, { path: selectedPath, content: content })) : (_jsx("p", { className: "text-sm text-muted-foreground-subtle italic", children: "Select a file to view its contents" })) })] })] }));
}
// ---------------------------------------------------------------------------
// Content viewer
// ---------------------------------------------------------------------------
function FileContentViewer({ path, content, }) {
    const isMarkdown = path.endsWith(".md");
    if (isMarkdown) {
        return (_jsx(Markdown, { remarkPlugins: REMARK_PLUGINS, components: MARKDOWN_COMPONENTS, children: stripFrontmatter(content) }));
    }
    return (_jsx("pre", { className: "overflow-x-auto font-mono text-xs leading-relaxed text-foreground whitespace-pre-wrap", children: content }));
}
//# sourceMappingURL=SkillFileBrowser.js.map