"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo, useState, useCallback } from "react";
import { cn } from "@stigmer/theme";
import { START_NODE_ID, END_NODE_ID } from "../workflow-graph-model.js";
import { CATEGORY_DISPLAY_NAMES } from "../canvas-constants.js";
/**
 * Workflow-level summary shown when no task or edge is selected.
 *
 * Displays workflow identity, environment variables, budget settings,
 * validation issues, and task distribution statistics.
 *
 * @since T10 (Inspector Panel Refactor)
 */
export const WorkflowSummaryPanel = memo(function WorkflowSummaryPanel({ graph, validationErrors, className, }) {
    const { doc } = useMemo(() => ({ doc: graph.document }), [graph.document]);
    const stats = useMemo(() => {
        const tasks = graph.nodes.filter((n) => n.id !== START_NODE_ID && n.id !== END_NODE_ID);
        const byCategory = new Map();
        for (const node of tasks) {
            byCategory.set(node.category, (byCategory.get(node.category) ?? 0) + 1);
        }
        return { taskCount: tasks.length, byCategory };
    }, [graph.nodes]);
    const envEntries = useMemo(() => (graph.env ? Object.entries(graph.env) : []), [graph.env]);
    const totalErrors = useMemo(() => {
        if (!validationErrors)
            return 0;
        let count = 0;
        for (const errors of validationErrors.values())
            count += errors.length;
        return count;
    }, [validationErrors]);
    return (_jsxs("div", { className: cn("flex h-full flex-col overflow-y-auto", className), children: [_jsxs("section", { className: "flex flex-col gap-1.5 px-3 py-3", children: [_jsx(SectionHeader, { children: "Workflow" }), _jsx("h3", { className: "text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)]", children: doc.name }), _jsxs("div", { className: "flex flex-wrap gap-1.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]", children: [_jsx("span", { children: doc.namespace }), _jsx("span", { children: "\u00B7" }), _jsxs("span", { children: ["v", doc.version] }), _jsx("span", { children: "\u00B7" }), _jsxs("span", { children: ["DSL ", doc.dsl] })] }), doc.description && (_jsx("p", { className: "text-xs leading-relaxed text-[var(--stgm-muted-foreground,#737373)]", children: doc.description }))] }), totalErrors > 0 && validationErrors && (_jsx("section", { className: "border-t border-[var(--stgm-border,#e5e5e5)] px-3 py-3", children: _jsx(ValidationSection, { errors: validationErrors, totalCount: totalErrors }) })), _jsxs("section", { className: "border-t border-[var(--stgm-border,#e5e5e5)] px-3 py-3", children: [_jsx(SectionHeader, { children: "Tasks" }), _jsxs("div", { className: "mt-1 flex flex-col gap-1", children: [_jsxs("span", { className: "text-xs text-[var(--stgm-foreground,#1a1a2e)]", children: [stats.taskCount, " task", stats.taskCount !== 1 ? "s" : ""] }), stats.byCategory.size > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5", children: Array.from(stats.byCategory.entries()).map(([cat, count]) => (_jsxs("span", { className: "rounded bg-[var(--stgm-muted,#f5f5f5)] px-1.5 py-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]", children: [CATEGORY_DISPLAY_NAMES[cat] ?? cat, " (", count, ")"] }, cat))) }))] })] }), envEntries.length > 0 && (_jsx("section", { className: "border-t border-[var(--stgm-border,#e5e5e5)] px-3 py-3", children: _jsx(EnvVarsSection, { entries: envEntries }) })), graph.budget && (_jsx("section", { className: "border-t border-[var(--stgm-border,#e5e5e5)] px-3 py-3", children: _jsx(BudgetSection, { budget: graph.budget }) }))] }));
});
// ---------------------------------------------------------------------------
// Validation
// ---------------------------------------------------------------------------
function ValidationSection({ errors, totalCount, }) {
    const [expanded, setExpanded] = useState(false);
    const toggle = useCallback(() => setExpanded((v) => !v), []);
    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("button", { type: "button", onClick: toggle, className: "flex items-center gap-1.5 text-left", "aria-expanded": expanded, children: [_jsx(SectionHeader, { children: "Validation" }), _jsxs("span", { className: "rounded-full bg-[var(--stgm-destructive,#ef4444)]/10 px-1.5 py-0.5 text-[10px] font-medium text-[var(--stgm-destructive,#ef4444)]", children: [totalCount, " issue", totalCount !== 1 ? "s" : ""] })] }), expanded && (_jsx("ul", { className: "flex flex-col gap-1", role: "list", children: Array.from(errors.entries()).map(([nodeId, nodeErrors]) => nodeErrors.map((error, i) => (_jsxs("li", { className: "flex items-start gap-1.5 text-[11px]", children: [_jsxs("span", { className: "shrink-0 font-medium text-[var(--stgm-foreground,#1a1a2e)]", children: [nodeId, ":"] }), _jsx("span", { className: "text-[var(--stgm-destructive,#ef4444)]", children: error })] }, `${nodeId}-${i}`)))) }))] }));
}
// ---------------------------------------------------------------------------
// Environment variables
// ---------------------------------------------------------------------------
function EnvVarsSection({ entries, }) {
    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(SectionHeader, { children: "Environment variables" }), _jsx("div", { className: "flex flex-col gap-1", children: entries.map(([name, env]) => (_jsxs("div", { className: "flex items-baseline gap-2 text-[11px]", children: [_jsx("span", { className: "shrink-0 font-mono font-medium text-[var(--stgm-foreground,#1a1a2e)]", children: name }), env.isSecret && (_jsx("span", { className: "rounded bg-[var(--stgm-warning,#f59e0b)]/10 px-1 text-[9px] font-medium text-[var(--stgm-warning,#f59e0b)]", children: "secret" })), env.optional && (_jsx("span", { className: "text-[var(--stgm-muted-foreground,#737373)]", children: "optional" })), env.description && (_jsx("span", { className: "truncate text-[var(--stgm-muted-foreground,#737373)]", title: env.description, children: env.description }))] }, name))) })] }));
}
// ---------------------------------------------------------------------------
// Budget
// ---------------------------------------------------------------------------
function BudgetSection({ budget }) {
    const items = [];
    if (budget.maxCostMicros) {
        items.push({ label: "Max cost", value: `$${(budget.maxCostMicros / 1_000_000).toFixed(2)}` });
    }
    if (budget.maxTotalTokens) {
        items.push({ label: "Max tokens", value: budget.maxTotalTokens.toLocaleString() });
    }
    if (budget.maxDurationSeconds) {
        const mins = Math.floor(budget.maxDurationSeconds / 60);
        const secs = budget.maxDurationSeconds % 60;
        items.push({ label: "Max duration", value: mins > 0 ? `${mins}m ${secs}s` : `${secs}s` });
    }
    if (budget.onExceeded) {
        items.push({ label: "On exceeded", value: budget.onExceeded.replace(/_/g, " ") });
    }
    if (items.length === 0)
        return null;
    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(SectionHeader, { children: "Budget" }), _jsx("div", { className: "flex flex-col gap-1", children: items.map((item) => (_jsxs("div", { className: "flex items-baseline gap-2 text-[11px]", children: [_jsxs("span", { className: "shrink-0 text-[var(--stgm-muted-foreground,#737373)]", children: [item.label, ":"] }), _jsx("span", { className: "font-medium text-[var(--stgm-foreground,#1a1a2e)]", children: item.value })] }, item.label))) })] }));
}
// ---------------------------------------------------------------------------
// Shared
// ---------------------------------------------------------------------------
function SectionHeader({ children }) {
    return (_jsx("h4", { className: "text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]", children: children }));
}
//# sourceMappingURL=WorkflowSummaryPanel.js.map