'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * WelcomeBanner
 *
 * One-time hint shown at the top of /supervisor and /agents the first time
 * the user lands on each surface. Dismissed via localStorage so it stays
 * out of the way once acknowledged. Pure presentation — no domain calls.
 *
 * `id` is the storage key; pick a stable string per surface (e.g.
 * `onboarding:supervisor:v1`) so we can re-introduce a banner after a
 * refresh by bumping the version segment.
 */
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { GraduationCap, X } from 'lucide-react';
import { Button } from '../ui/button.js';
const STORAGE_PREFIX = 'shep:onboarding:';
export function WelcomeBanner({ id, title, description, ctaLabel, ctaHref, forceVisible, }) {
    const storageKey = `${STORAGE_PREFIX}${id}`;
    // Mounted gate avoids a server/client hydration mismatch: SSR returns null,
    // the effect resolves visibility from localStorage on the client.
    const [mounted, setMounted] = useState(false);
    const [visible, setVisible] = useState(true);
    useEffect(() => {
        setMounted(true);
        if (forceVisible) {
            setVisible(true);
            return;
        }
        try {
            const dismissed = window.localStorage.getItem(storageKey);
            setVisible(dismissed !== '1');
        }
        catch {
            setVisible(true);
        }
    }, [forceVisible, storageKey]);
    function dismiss() {
        setVisible(false);
        if (forceVisible)
            return;
        try {
            window.localStorage.setItem(storageKey, '1');
        }
        catch {
            // best-effort
        }
    }
    if (!mounted || !visible)
        return null;
    return (_jsxs("div", { className: "bg-muted/40 flex items-start gap-3 rounded-lg border p-4", "data-testid": `welcome-banner-${id}`, children: [_jsx("div", { className: "bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-md", children: _jsx(GraduationCap, { className: "size-4" }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: title }), _jsx("p", { className: "text-muted-foreground text-sm", children: description })] }), ctaHref && ctaLabel ? (_jsx("div", { children: _jsx(Button, { asChild: true, size: "sm", variant: "outline", children: _jsx(Link, { href: ctaHref, "data-testid": `welcome-banner-${id}-cta`, children: ctaLabel }) }) })) : null] }), _jsx(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0", onClick: dismiss, "aria-label": "Dismiss this hint", "data-testid": `welcome-banner-${id}-dismiss`, children: _jsx(X, { className: "size-4" }) })] }));
}
