"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef, useState } from "react";
import { getUserMessage } from "@stigmer/sdk";
import { usePersonalEnvironment } from "../environment/usePersonalEnvironment";
import { EnvironmentVariableEditor } from "../environment/EnvironmentVariableEditor";
import { EnvironmentListPanel } from "../environment/EnvironmentListPanel";
import { CreateEnvironmentForm } from "../environment/CreateEnvironmentForm";
import { useActiveOrgSlug } from "../organization/OrgProvider";
const ENV_EXCLUDE_LABELS = [
    { "stigmer.ai/personal": "true" },
    { "stigmer.ai/managed": "true" },
];
/** Settings section for personal and organization environment variables. */
export function EnvironmentsSection() {
    const org = useActiveOrgSlug();
    return (_jsxs("div", { className: "space-y-10", children: [_jsx(PersonalEnvironmentCard, { org: org }), _jsx(EnvironmentsCard, { org: org })] }));
}
function PersonalEnvironmentCard({ org }) {
    const { environment, isLoading, error, getOrCreate, isMutating, } = usePersonalEnvironment(org || null);
    const bootstrapAttempted = useRef(false);
    useEffect(() => {
        bootstrapAttempted.current = false;
    }, [org]);
    useEffect(() => {
        if (!org || isLoading || environment || bootstrapAttempted.current)
            return;
        bootstrapAttempted.current = true;
        getOrCreate().catch(() => { });
    }, [org, isLoading, environment, getOrCreate]);
    const environmentId = environment?.metadata?.id;
    return (_jsxs("section", { "aria-labelledby": "personal-env-heading", children: [_jsxs("div", { className: "mb-3 flex items-baseline gap-2", children: [_jsx("h2", { id: "personal-env-heading", className: "text-foreground text-sm font-semibold", children: "Personal Environment" }), _jsx("span", { className: "bg-primary-subtle text-primary rounded-full px-2 py-0.5 text-[0.6rem] font-medium uppercase tracking-wider", children: "You" })] }), _jsx("p", { className: "text-muted-foreground mb-4 text-xs", children: "Your private secrets and configuration, automatically managed for you. Only visible to you \u2014 used when running agents that require your personal credentials." }), isLoading || isMutating ? (_jsx(SkeletonRows, { count: 3 })) : error ? (_jsx("p", { className: "text-destructive text-xs", role: "alert", children: getUserMessage(error) })) : environmentId ? (_jsx(EnvironmentVariableEditor, { environmentId: environmentId })) : (_jsx("p", { className: "text-muted-foreground text-xs", children: "Your personal environment will be created automatically when needed." }))] }));
}
function EnvironmentsCard({ org }) {
    const [showCreate, setShowCreate] = useState(false);
    const listRefetchRef = useRef(null);
    const handleRefetchRef = useCallback((refetch) => {
        listRefetchRef.current = refetch;
    }, []);
    const handleCreated = useCallback(() => {
        setShowCreate(false);
        listRefetchRef.current?.();
    }, []);
    return (_jsxs("section", { "aria-labelledby": "org-env-heading", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("h2", { id: "org-env-heading", className: "text-foreground text-sm font-semibold", children: "Environments" }), !showCreate && (_jsx("button", { type: "button", onClick: () => setShowCreate(true), className: "text-primary hover:text-foreground text-xs font-medium transition-colors", children: "+ New environment" }))] }), _jsx("p", { className: "text-muted-foreground mb-4 text-xs", children: "Named environments for your organization. Store credentials, API tokens, and configuration that agents need at runtime." }), showCreate && (_jsx("div", { className: "border-border bg-card mb-4 rounded-lg border p-4", children: _jsx(CreateEnvironmentForm, { org: org, onCreated: handleCreated, onCancel: () => setShowCreate(false) }) })), org ? (_jsx(EnvironmentListPanel, { org: org, excludeLabels: ENV_EXCLUDE_LABELS, onRefetchRef: handleRefetchRef })) : (_jsx("p", { className: "text-muted-foreground py-4 text-center text-xs", children: "Select an organization to view environments." }))] }));
}
function SkeletonRows({ count }) {
    return (_jsx("div", { className: "space-y-2", "aria-busy": "true", "aria-label": "Loading", children: Array.from({ length: count }, (_, i) => (_jsx("div", { className: "bg-muted-subtle h-8 animate-pulse rounded", style: { width: `${85 - i * 10}%` } }, i))) }));
}
//# sourceMappingURL=EnvironmentsSection.js.map