'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Dashboard onboarding / getting-started block (design: Dashboard.html
 * `OnboardingSection`). Shown only while the site is effectively empty —
 * it REPLACES the Recent Activity / Publishing Queue / Content Health grid
 * (see `shouldShowOnboarding`), sitting between the stats row and the
 * Delivery API card.
 *
 * Steps are DERIVED from data the dashboard already fetches — the
 * prototype's click-to-toggle checklist was mock behavior. No new API
 * endpoints; every signal below comes from `/stats` or
 * `/stats/api-delivery`:
 *
 *   1. Create your workspace        — always complete (they're logged in).
 *   2. Create your first Post/Page  — post/page collection counts > 0.
 *   3. Upload media assets          — `totalMedia > 0`.
 *   4. Configure SEO defaults       — `avgSeoScore > 0`. The average SEO
 *      score is the only SEO signal in already-fetched data; it is 0 until
 *      content is scored, so the step reads incomplete on an empty site
 *      (honest, if conservative).
 *   5. Get your API key             — no API-key count exists in dashboard
 *      data, so we use recorded delivery-API traffic (`hasData` from
 *      /stats/api-delivery) as the proxy: traffic means the API is being
 *      consumed. Incomplete by default.
 *   6. Invite team members          — `totalUsers > 1`.
 *
 * Quick links deviate from the prototype in one place: "Webhooks guide"
 * has no in-admin destination or docs URL (webhooks UI only exists inside
 * individual form settings), so it is replaced with an internal SEO
 * defaults link — no dead links.
 */
import { Check, ChevronRight, Code, Key, Search, Users } from 'lucide-react';
export function deriveOnboardingSteps(signals) {
    return [
        { id: 'workspace', label: 'Create your workspace', done: true },
        {
            id: 'first-content',
            label: 'Create your first Post or Page',
            done: signals.postsAndPagesCount > 0,
        },
        { id: 'media', label: 'Upload media assets', done: signals.mediaCount > 0 },
        { id: 'seo', label: 'Configure SEO defaults', done: signals.seoScore > 0 },
        { id: 'api-key', label: 'Get your API key', done: signals.hasApiTraffic },
        { id: 'invite', label: 'Invite team members', done: signals.userCount > 1 },
    ];
}
/**
 * The block appears only when content is essentially empty: zero posts +
 * pages AND zero media (steps 2 and 3 both incomplete).
 */
export function shouldShowOnboarding(signals) {
    return signals.postsAndPagesCount === 0 && signals.mediaCount === 0;
}
const QUICK_LINKS = [
    {
        icon: Code,
        label: 'API Reference',
        sub: 'REST & GraphQL docs',
        path: '/settings?tab=api-keys',
    },
    { icon: Search, label: 'SEO defaults', sub: 'Set up site metadata', path: '/settings?tab=seo' },
    { icon: Users, label: 'Invite team', sub: 'Add editors & admins', path: '/settings?tab=users' },
    { icon: Key, label: 'API Keys', sub: 'Manage access tokens', path: '/settings?tab=api-keys' },
];
export function OnboardingBlock({ signals, onNavigate }) {
    const steps = deriveOnboardingSteps(signals);
    const done = steps.filter((s) => s.done).length;
    return (_jsxs("div", { className: "space-y-3.5", children: [_jsxs("section", { "aria-labelledby": "ob-welcome-title", className: "rounded-[var(--r)] border border-[var(--bdr)] bg-[linear-gradient(135deg,var(--acc-l)_0%,var(--card)_60%)] px-7 py-6 shadow-[var(--shd)]", children: [_jsxs("h2", { id: "ob-welcome-title", className: "text-[17px] font-medium tracking-[-0.3px] text-[var(--txt)]", children: ["Welcome to ActuateCMS ", _jsx("span", { "aria-hidden": true, children: "\uD83D\uDC4B" })] }), _jsxs("p", { className: "mt-1 max-w-[480px] text-[length:var(--fs-body)] text-[var(--sub)]", children: ["Your headless CMS is ready. Complete these steps to start delivering content to your frontend. ", done, "/", steps.length, " steps complete."] }), _jsx("div", { role: "progressbar", "aria-label": "Onboarding progress", "aria-valuemin": 0, "aria-valuemax": steps.length, "aria-valuenow": done, "aria-valuetext": `${done} of ${steps.length} steps complete`, className: "mt-3 h-[6px] max-w-[400px] overflow-hidden rounded-full bg-[var(--bdr)]", children: _jsx("div", { className: "h-full rounded-full bg-[var(--acc)] motion-safe:transition-[width] motion-safe:duration-[var(--motion-base)]", style: { width: `${(done / steps.length) * 100}%` } }) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-3.5 lg:grid-cols-2", children: [_jsxs("section", { "aria-labelledby": "ob-checklist-title", className: "rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--card)] p-6 shadow-[var(--shd)]", children: [_jsx("h3", { id: "ob-checklist-title", className: "text-[length:var(--fs-card)] font-medium text-[var(--txt)]", children: "Getting started" }), _jsx("p", { className: "mt-1 mb-4 text-[length:var(--fs-sub)] leading-[1.55] text-[var(--sub)]", children: "Complete each step to get the most out of ActuateCMS." }), _jsx("ul", { role: "list", className: "space-y-0.5", children: steps.map((step) => (_jsxs("li", { className: "flex items-center gap-[11px] rounded-lg px-2.5 py-2", children: [_jsx("span", { "aria-hidden": true, className: `flex h-[19px] w-[19px] shrink-0 items-center justify-center rounded-full motion-safe:transition-colors motion-safe:duration-[var(--motion-base)] ${step.done ? 'bg-[var(--suc)]' : 'border-2 border-[var(--bdr)]'}`, children: step.done && (_jsx(Check, { size: 11, strokeWidth: 2.5, className: "text-[var(--success-foreground)]" })) }), _jsx("span", { className: `text-[length:var(--fs-body)] ${step.done ? 'text-[var(--muted)] line-through' : 'text-[var(--txt)]'}`, children: step.label }), _jsx("span", { className: "sr-only", children: step.done ? '(completed)' : '(not completed)' })] }, step.id))) })] }), _jsxs("section", { "aria-labelledby": "ob-links-title", className: "rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--card)] p-6 shadow-[var(--shd)]", children: [_jsx("h3", { id: "ob-links-title", className: "text-[length:var(--fs-card)] font-medium text-[var(--txt)]", children: "Quick links" }), _jsx("p", { className: "mt-1 mb-4 text-[length:var(--fs-sub)] leading-[1.55] text-[var(--sub)]", children: "Helpful resources for building with ActuateCMS." }), _jsx("ul", { role: "list", className: "space-y-0.5", children: QUICK_LINKS.map((link) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onNavigate?.(link.path), className: "focus-visible:ring-ring flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-[var(--acc-l)] focus:outline-none focus-visible:ring-2", children: [_jsx("span", { "aria-hidden": true, className: "flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[7px] bg-[var(--acc-l)] text-[var(--acc)]", children: _jsx(link.icon, { size: 14 }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[length:var(--fs-body)] font-medium text-[var(--txt)]", children: link.label }), _jsx("span", { className: "block truncate text-[length:var(--fs-hint)] text-[var(--muted)]", children: link.sub })] }), _jsx(ChevronRight, { size: 14, className: "shrink-0 text-[var(--muted)]", "aria-hidden": true })] }) }, link.label))) })] })] })] }));
}
//# sourceMappingURL=OnboardingBlock.js.map