"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { cn } from "@stigmer/theme";
import { FileTreeNode } from "../internal/file-tree/index.js";
import { useWorkspaceFiles } from "./useWorkspaceFiles.js";
/**
 * The workspace surface's multi-root file explorer — the bare, VS Code-style
 * tree: file-type icons, indent guides, single-click preview / double-click
 * pin, optional per-root remove controls. Search lives in the surface's rail,
 * not per root; listings come from the shared `useWorkspaceFiles` cache.
 *
 * All visual properties flow through `--stgm-*` tokens (DD-005).
 */
export function ExplorerTree({ entries, lister, selectedFile, onOpenFile, onActivateFile, onRemoveEntry, }) {
    return (_jsx("div", { className: "flex flex-col", children: entries.map((entry, index) => (_jsx(ExplorerRoot, { entry: entry, lister: lister, defaultExpanded: index === 0, selectedPath: selectedFile?.entryId === entry.id ? selectedFile.path : undefined, onOpenFile: onOpenFile, onActivateFile: onActivateFile, onRemove: onRemoveEntry }, entry.id))) }));
}
/** One workspace root: a collapsible header over its file tree. */
function ExplorerRoot({ entry, lister, defaultExpanded, selectedPath, onOpenFile, onActivateFile, onRemove, }) {
    const [expanded, setExpanded] = useState(defaultExpanded);
    const { tree, isLoading, error, truncated, refresh } = useWorkspaceFiles({
        entry: expanded ? entry : null,
        lister,
    });
    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "group/root flex items-stretch", children: [_jsxs("button", { type: "button", onClick: () => setExpanded((prev) => !prev), "aria-expanded": expanded, className: cn("flex min-w-0 flex-1 items-center gap-1.5 px-1.5 py-1 text-left text-[0.7rem] font-semibold uppercase tracking-wide text-foreground transition-colors hover:bg-accent-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"), title: entry.type === "local" ? entry.localPath : entry.gitUrl, children: [_jsx("span", { "aria-hidden": "true", className: "text-[10px] text-muted-foreground-subtle", children: expanded ? "▼" : "▶" }), _jsx("span", { className: "truncate", children: entry.name })] }), onRemove && (_jsx("button", { type: "button", onClick: () => onRemove(entry.id), "aria-label": `Remove ${entry.name} from workspace`, title: `Remove ${entry.name} from workspace`, className: cn("shrink-0 px-1.5 text-muted-foreground opacity-0 transition-opacity", "group-hover/root:opacity-100 focus-visible:opacity-100", "hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"), children: _jsx(RemoveIcon, {}) }))] }), expanded && (_jsx(ExplorerRootBody, { entryName: entry.name, entryId: entry.id, tree: tree, isLoading: isLoading, error: error, truncated: truncated, selectedPath: selectedPath, onOpenFile: onOpenFile, onActivateFile: onActivateFile, onRetry: refresh }))] }));
}
function ExplorerRootBody({ entryName, entryId, tree, isLoading, error, truncated, selectedPath, onOpenFile, onActivateFile, onRetry, }) {
    if (isLoading) {
        return (_jsx("div", { 
            // role="status" both announces the loading state to assistive tech and
            // makes aria-label permitted here (a role-less generic div cannot carry
            // an accessible name — axe `aria-prohibited-attr`).
            role: "status", className: "space-y-1.5 px-2 py-2", "aria-busy": "true", "aria-label": `Loading files for ${entryName}`, children: [1, 2, 3, 4].map((i) => (_jsx("div", { className: "h-3.5 animate-pulse rounded bg-muted", style: { width: `${50 + i * 10}%` }, "aria-hidden": "true" }, i))) }));
    }
    if (error) {
        return (_jsxs("div", { className: "px-2 py-2 text-xs text-destructive", children: ["Failed to list files: ", error.message, _jsx("button", { type: "button", onClick: onRetry, className: "ml-2 rounded-sm underline transition-colors hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Retry" })] }));
    }
    if (tree.length === 0) {
        return (_jsx("p", { className: "px-3 py-2 text-xs text-muted-foreground", children: "No files found." }));
    }
    return (_jsxs(_Fragment, { children: [_jsx("nav", { "aria-label": `File tree for ${entryName}`, children: _jsx("ul", { className: "py-0.5 pl-1.5", role: "tree", children: tree.map((node) => (_jsx(FileTreeNode, { node: node, selectedPath: selectedPath ?? "", onSelect: (path) => onOpenFile(entryId, path), onActivate: (path) => onActivateFile(entryId, path), depth: 0, enableDrag: true, showIcons: true, indentGuides: true, maxInitialDepth: 0 }, node.path))) }) }), truncated && (_jsx("p", { className: "px-3 py-1.5 text-[0.65rem] text-muted-foreground", children: "Showing a partial listing \u2014 too many files to load in full." }))] }));
}
// ---------------------------------------------------------------------------
// Inline SVG icons (SDK independence — no lucide dependency)
// ---------------------------------------------------------------------------
function RemoveIcon() {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4 4L10 10M10 4L4 10" }) }));
}
//# sourceMappingURL=ExplorerTree.js.map