"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { StatusBadge } from "../resource-workbench/components/StatusBadge.js";
import { Tabs } from "../tabs/Tabs.js";
import { ResourceActionBar } from "./ResourceActionBar.js";
/**
 * Shared layout shell for resource detail pages.
 *
 * Renders a standardized header (icon, name, org, timestamps, status,
 * visibility control), an action bar (primary button + kebab overflow),
 * optional tabs, and a content area — all themed via `--stgm-*` tokens.
 *
 * The shell receives pre-fetched data via props (DD-T03-001). It does
 * NOT own data fetching — resource-specific hooks (`useAgent`, `useSkill`,
 * etc.) handle that. The shell is a layout + behavior coordinator, not
 * a data-fetching component.
 *
 * Zero Console dependencies — safe for platform builder embedding.
 *
 * @example
 * ```tsx
 * const { agent } = useAgent(org, slug);
 *
 * <ResourceDetailShell
 *   header={{
 *     name: agent.metadata.name,
 *     id: agent.metadata.id,
 *     org: agent.metadata.org,
 *     slug: agent.metadata.slug,
 *     description: agent.spec.description,
 *   }}
 *   primaryAction={{ id: "edit", label: "Edit", onAction: handleEdit }}
 *   actions={[...]}
 * >
 *   <AgentOverview agent={agent} />
 * </ResourceDetailShell>
 * ```
 */
export function ResourceDetailShell({ header, visibilityControl, headerMetaExtra, headerBanner, primaryAction, actions, tabs, activeTab, onTabChange, tabsAriaLabel, children, className, }) {
    const hasTabs = tabs != null && tabs.length > 0;
    return (_jsxs("div", { className: cn("flex flex-col gap-6", className), children: [headerBanner, _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx(Header, { header: header, visibilityControl: visibilityControl, metaExtra: headerMetaExtra }), _jsx(ResourceActionBar, { primaryAction: primaryAction, actions: actions, className: "shrink-0" })] }), hasTabs && activeTab && onTabChange ? (_jsx(Tabs, { tabs: tabs, activeTab: activeTab, onTabChange: onTabChange, "aria-label": tabsAriaLabel, children: children })) : (children)] }));
}
// ---------------------------------------------------------------------------
// Header
// ---------------------------------------------------------------------------
function Header({ header, visibilityControl, metaExtra, }) {
    const { name, nameElement, org, slug, qualifiedSlug, description, iconUrl, icon, createdAt, updatedAt, status, statusLabel, } = header;
    const showSlug = slug && slug !== name && !qualifiedSlug;
    return (_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [iconUrl ? (_jsx("img", { src: iconUrl, alt: "", className: "mt-0.5 size-8 shrink-0 rounded object-cover" })) : icon ? (_jsx("span", { className: "mt-1 shrink-0", children: icon })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [nameElement ?? (_jsx("h2", { className: "truncate text-lg font-semibold text-foreground", children: name })), showSlug && (_jsx("code", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground", children: slug })), status && (_jsx(StatusBadge, { phase: status, label: statusLabel })), visibilityControl] }), qualifiedSlug && (_jsx("span", { className: "mt-0.5 block truncate font-mono text-xs text-muted-foreground", children: qualifiedSlug })), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground", children: [org && _jsx("span", { children: org }), metaExtra, createdAt && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { children: ["Created ", formatDate(createdAt)] })] })), updatedAt && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { children: ["Updated ", formatDate(updatedAt)] })] }))] }), description && (_jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: description }))] })] }));
}
// ---------------------------------------------------------------------------
// Utilities
// ---------------------------------------------------------------------------
function Dot() {
    return (_jsx("span", { className: "shrink-0", "aria-hidden": "true", children: "\u00B7" }));
}
function formatDate(date) {
    return date.toLocaleDateString("en-US", {
        month: "short",
        day: "numeric",
        year: "numeric",
    });
}
//# sourceMappingURL=ResourceDetailShell.js.map