'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { ArrowRight, ArrowLeft } from 'lucide-react';
import { fetchPostTypes } from '../../lib/posts-service.js';
import { paletteFor } from '../../components/posts/badges.js';
import { resolvePostTypeIcon } from '../../components/posts/icons.js';
/**
 * Type-picker landing page for "+ New Post".
 *
 * Behavior by number of configured post types:
 *   - exactly one  → skip the picker and forward straight to that type's
 *     new-post editor (a one-card chooser adds nothing but a flash)
 *   - two or more  → show the chooser cards
 *   - zero         → show a "no post types configured" setup hint
 *
 * Picking a card navigates to the section-based Post editor's new-post
 * route (`/posts/<slug>/new`), which seeds the post from that type's
 * template so the author starts from the type's default layout.
 */
export function NewPostPicker({ onNavigate }) {
    const [types, setTypes] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    useEffect(() => {
        let cancelled = false;
        fetchPostTypes()
            .then((res) => {
            if (cancelled)
                return;
            // With a single Post Type there's nothing to choose — forward
            // straight to its editor so the picker doesn't flash a
            // one-card screen.
            if (res.length === 1) {
                onNavigate(`/posts/${res[0].slug}/new`);
                return;
            }
            setTypes(res);
            setLoading(false);
        })
            .catch((err) => {
            if (cancelled)
                return;
            setError(err instanceof Error ? err.message : 'Failed to load Post Types');
            setLoading(false);
        });
        return () => {
            cancelled = true;
        };
    }, [onNavigate]);
    return (_jsxs("div", { className: "mx-auto flex h-full max-w-3xl flex-col gap-6 p-4 sm:p-6", children: [_jsxs("button", { type: "button", onClick: () => onNavigate('/posts'), className: "text-muted-foreground hover:text-foreground inline-flex w-fit items-center gap-1.5 text-sm transition-colors", children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Back to Posts"] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h1", { className: "text-foreground text-xl font-medium tracking-tight sm:text-2xl", children: "Choose a Post Type" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Pick which content model you want to use for this post. Each type has its own fields, URL base, and SEO defaults." })] }), loading && _jsx(Skeleton, {}), !loading && error && (_jsx("div", { className: "border-border bg-card rounded-xl border p-8 text-center", children: _jsx("div", { className: "text-foreground mb-2 text-sm font-medium", children: error }) })), !loading && !error && types.length === 0 && (_jsxs("div", { className: "border-border bg-card rounded-xl border p-8 text-center", children: [_jsx("div", { className: "text-foreground mb-2 text-sm font-medium", children: "No Post Types configured." }), _jsxs("p", { className: "text-muted-foreground mb-4 text-sm", children: ["Add a collection with ", _jsx("code", { className: "font-mono", children: "type: 'post'" }), " to your CMS config to start creating posts."] }), _jsx("button", { type: "button", onClick: () => onNavigate('/posts/types/new'), className: "text-primary text-sm hover:underline", children: "View setup instructions \u2192" })] })), !loading && !error && types.length > 0 && (_jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: types.map((t) => {
                    const palette = paletteFor(t.accentColor);
                    const Icon = resolvePostTypeIcon(t.icon);
                    return (_jsxs("button", { type: "button", onClick: () => onNavigate(`/posts/${t.slug}/new`), className: "border-border bg-card focus-visible:ring-ring flex items-center gap-3 rounded-xl border p-4 text-left shadow-sm transition-shadow hover:shadow-md focus:outline-none focus-visible:ring-2", children: [_jsx("span", { className: `inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ${palette.bg} ${palette.text}`, children: _jsx(Icon, { className: "h-5 w-5", "aria-hidden": true }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block text-sm font-medium", children: t.singularName }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: t.description ?? `New entry in ${t.name}` })] }), _jsx(ArrowRight, { className: "text-muted-foreground h-4 w-4 shrink-0", "aria-hidden": true })] }, t.slug));
                }) }))] }));
}
function Skeleton() {
    return (_jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "border-border bg-card flex items-center gap-3 rounded-xl border p-4", children: [_jsx("div", { className: "bg-muted h-10 w-10 animate-pulse rounded-lg" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "bg-muted mb-2 h-3 w-1/3 animate-pulse rounded" }), _jsx("div", { className: "bg-muted h-2.5 w-2/3 animate-pulse rounded" })] })] }, i))) }));
}
//# sourceMappingURL=NewPostPicker.js.map