'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useMemo } from 'react';
import { X, MessageCircleQuestion, ShieldCheck, ArrowRight, Plus, Layers, GitBranch, Sparkles, } from 'lucide-react';
import Link from 'next/link';
import { cn } from '../../../lib/utils.js';
const DISMISSED_KEY = 'shep:collaboration-onboarding-dismissed';
/** Human-friendly cap for the inline pill list before collapsing into a picker. */
const PILL_LIMIT = 3;
/**
 * Dismissable first-run callout shown in the control center when the
 * collaboration feature flag is on. Surfaces every entity the user can
 * attach a supervisor to — applications, repositories, and features —
 * mirroring the cascading scope model (`global → app → repo → feature`).
 *
 *   no scopes  → tells the user to add a repo or app to get started
 *   1 scope    → links directly to the right /supervisor/... page
 *   N scopes   → shows up to PILL_LIMIT inline pills with an overflow picker
 */
export function CollaborationOnboarding({ apps = [], repos = [], features = [], className, }) {
    const [visible, setVisible] = useState(false);
    useEffect(() => {
        try {
            if (!localStorage.getItem(DISMISSED_KEY)) {
                setVisible(true);
            }
        }
        catch {
            // localStorage blocked (private mode, SSR, etc.)
        }
    }, []);
    function dismiss() {
        try {
            localStorage.setItem(DISMISSED_KEY, '1');
        }
        catch {
            // ignore
        }
        setVisible(false);
    }
    if (!visible)
        return null;
    return (_jsxs("div", { className: cn('border-border/60 bg-card relative flex flex-col gap-4 rounded-xl border p-5 shadow-sm', className), role: "region", "aria-label": "Agent collaboration onboarding", "data-testid": "collaboration-onboarding", children: [_jsx("button", { type: "button", "aria-label": "Dismiss", onClick: dismiss, className: "text-muted-foreground hover:text-foreground absolute top-3 right-3 rounded-md p-1 transition-colors", children: _jsx(X, { className: "size-4" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold tracking-widest text-indigo-500 uppercase", children: "New" }), _jsx("h2", { className: "mt-0.5 text-base font-semibold", children: "Agent Collaboration & Supervision" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Your agents can now ask questions, talk to each other, and be guided by a supervisor you configure." })] }), _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsx(SupervisorCard, { apps: apps, repos: repos, features: features }), _jsx(FeatureCard, { icon: MessageCircleQuestion, title: "Agent questions inbox", description: "A single place for all questions raised by agents during interactive and background runs.", href: "/agent-questions", cta: "View inbox" })] })] }));
}
function SupervisorCard({ apps, repos, features }) {
    const [pickerOpen, setPickerOpen] = useState(false);
    const allScopes = useMemo(() => [
        ...apps.map((a) => ({ ...a, kind: 'app' })),
        ...repos.map((r) => ({ ...r, kind: 'repo' })),
        ...features.map((f) => ({ ...f, kind: 'feature' })),
    ], [apps, repos, features]);
    // Empty: no apps, repos, or features yet.
    if (allScopes.length === 0) {
        return (_jsxs("div", { className: "bg-muted/40 border-border/40 flex flex-col gap-2 rounded-lg border p-4", children: [_jsx(SupervisorHeader, {}), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed", children: "Supervisors attach to an application, repository, or feature. Add a repository or create an application to configure your first one." }), _jsxs("button", { type: "button", onClick: () => window.dispatchEvent(new CustomEvent('shep:open-create-application')), className: "text-primary mt-auto inline-flex cursor-pointer items-center gap-1 text-xs font-medium hover:underline", children: [_jsx(Plus, { className: "size-3" }), "Create an application"] })] }));
    }
    // Single scope on the canvas — link straight to its page.
    if (allScopes.length === 1) {
        const only = allScopes[0];
        return (_jsx(FeatureCard, { icon: ShieldCheck, title: "Supervisor agent", description: `Delegate approvals and policy decisions for ${describeKind(only.kind)} "${only.name}".`, href: routeFor(only), cta: "Configure supervisor" }));
    }
    // Multiple — show a few pills + (open picker for the rest).
    const pills = allScopes.slice(0, PILL_LIMIT);
    const overflow = allScopes.length - pills.length;
    return (_jsxs("div", { className: "bg-muted/40 border-border/40 flex flex-col gap-2 rounded-lg border p-4", children: [_jsx(SupervisorHeader, {}), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed", children: "Pick an application, repository, or feature to configure its supervisor." }), pickerOpen ? (_jsx("div", { className: "mt-1 flex max-h-72 flex-col gap-1 overflow-y-auto", children: allScopes.map((scope) => (_jsxs(Link, { href: routeFor(scope), className: "border-border/50 hover:bg-background flex items-center justify-between rounded-md border px-3 py-2 text-xs transition-colors", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(KindIcon, { kind: scope.kind, className: "text-muted-foreground size-3 shrink-0" }), _jsx("span", { className: "truncate font-medium", children: scope.name })] }), _jsx(ArrowRight, { className: "text-muted-foreground ml-2 size-3 shrink-0" })] }, `${scope.kind}-${scope.id}`))) })) : (_jsxs("div", { className: "mt-1 flex flex-wrap gap-1.5", children: [pills.map((scope) => (_jsxs(Link, { href: routeFor(scope), className: "border-border/50 bg-background hover:border-primary/40 hover:text-primary flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs transition-colors", children: [_jsx(KindIcon, { kind: scope.kind, className: "size-3 shrink-0" }), _jsx("span", { className: "max-w-[10rem] truncate", children: scope.name }), _jsx(ArrowRight, { className: "size-2.5" })] }, `${scope.kind}-${scope.id}`))), overflow > 0 ? (_jsxs("button", { type: "button", onClick: () => setPickerOpen(true), className: "text-muted-foreground hover:text-foreground border-border/50 rounded-md border px-2.5 py-1 text-xs transition-colors", children: ["+", overflow, " more"] })) : null] }))] }));
}
function SupervisorHeader() {
    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "bg-primary/10 text-primary flex h-7 w-7 shrink-0 items-center justify-center rounded-md", children: _jsx(ShieldCheck, { className: "size-3.5" }) }), _jsx("span", { className: "text-sm font-medium", children: "Supervisor agent" })] }));
}
function KindIcon({ kind, className }) {
    const Icon = kind === 'app' ? Layers : kind === 'repo' ? GitBranch : Sparkles;
    return _jsx(Icon, { className: className, "aria-hidden": true });
}
function describeKind(kind) {
    return kind === 'app' ? 'application' : kind === 'repo' ? 'repository' : 'feature';
}
function routeFor(scope) {
    switch (scope.kind) {
        case 'app':
            return `/application/${scope.id}/supervisor`;
        case 'repo':
            return `/supervisor/repo/${scope.id}`;
        case 'feature':
            return `/supervisor/feature/${scope.id}`;
    }
}
function FeatureCard({ icon: Icon, title, description, href, cta }) {
    return (_jsxs("div", { className: "bg-muted/40 border-border/40 flex flex-col gap-2 rounded-lg border p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "bg-primary/10 text-primary flex h-7 w-7 shrink-0 items-center justify-center rounded-md", children: _jsx(Icon, { className: "size-3.5" }) }), _jsx("span", { className: "text-sm font-medium", children: title })] }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed", children: description }), _jsxs(Link, { href: href, className: "text-primary mt-auto inline-flex items-center gap-1 text-xs font-medium hover:underline", children: [cta, _jsx(ArrowRight, { className: "size-3" })] })] }));
}
