'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { LayoutTemplate, Plus } from 'lucide-react';
import { fetchPosts } from '../../lib/posts-service.js';
import { paletteFor } from '../../components/posts/badges.js';
import { resolvePostTypeIcon } from '../../components/posts/icons.js';
export function PostTypesView({ onNavigate }) {
    const [types, setTypes] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [refreshToken, setRefreshToken] = useState(0);
    useEffect(() => {
        let cancelled = false;
        setLoading(true);
        setError(null);
        fetchPosts({ pageSize: 1 })
            .then((res) => {
            if (cancelled)
                return;
            setTypes(res.types);
            setLoading(false);
        })
            .catch((err) => {
            if (cancelled)
                return;
            setError(err instanceof Error ? err.message : 'Failed to load Post Types');
            setLoading(false);
        });
        return () => {
            cancelled = true;
        };
    }, [refreshToken]);
    return (_jsxs("div", { className: "flex h-full flex-col gap-6 p-4 sm:p-6", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h1", { className: "text-foreground text-xl font-medium tracking-tight sm:text-2xl", children: "Post Types" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Define content models and their fields. All types share the same default fields." })] }), loading && _jsx(CardGridSkeleton, {}), !loading && error && (_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: error }), _jsx("button", { type: "button", onClick: () => setRefreshToken((t) => t + 1), className: "text-primary text-sm hover:underline", children: "Try again" })] })), !loading && !error && (_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: [types.map((t) => (_jsx(PostTypeCard, { type: t, onClick: () => onNavigate(`/posts/types/${t.slug}/edit`), onEditTemplate: () => onNavigate(`/posts/types/${t.slug}/template`) }, t.slug))), _jsx(NewPostTypeCard, { onClick: () => onNavigate('/posts/types/new') })] }))] }));
}
// ─── PostTypeCard ────────────────────────────────────────────────────
function PostTypeCard({ type, onClick, onEditTemplate, }) {
    const palette = paletteFor(type.accentColor);
    const Icon = resolvePostTypeIcon(type.icon);
    // Tailwind needs the exact class string at build time — derive the
    // top-border color from the palette's `border` token directly so it
    // stays in sync with the badge color.
    const topBorderClass = palette.border;
    return (_jsxs("div", { className: "bg-card border-border relative flex flex-col gap-3 overflow-hidden rounded-xl border p-5 shadow-sm transition-shadow hover:shadow-md", children: [_jsx("span", { "aria-hidden": true, className: `absolute inset-x-0 top-0 h-1 ${topBorderClass}` }), _jsxs("button", { type: "button", onClick: onClick, "aria-label": `Manage ${type.name} posts`, className: "focus-visible:ring-ring -m-1 flex flex-col gap-3 rounded-lg p-1 text-left focus:outline-none focus-visible:ring-2", children: [_jsxs("div", { className: "flex items-center gap-3 pt-2", children: [_jsx("span", { className: `inline-flex h-9 w-9 items-center justify-center rounded-lg ${palette.bg} ${palette.text}`, children: _jsx(Icon, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx("h2", { className: "text-foreground text-base leading-tight font-medium", children: type.name })] }), _jsx("p", { className: "text-muted-foreground line-clamp-2 text-sm", children: type.description ?? 'No description provided.' })] }), _jsxs("div", { className: "border-border mt-auto flex flex-wrap items-center gap-x-4 gap-y-1 border-t pt-3 text-xs", children: [_jsxs("span", { className: "text-foreground font-medium tabular-nums", children: [type.postCount, " ", _jsx("span", { className: "text-muted-foreground font-normal", children: "posts" })] }), _jsxs("span", { className: "text-foreground font-medium tabular-nums", children: [type.fieldCount, " ", _jsx("span", { className: "text-muted-foreground font-normal", children: "fields" })] }), _jsx("span", { className: "text-muted-foreground ml-auto truncate font-mono", children: type.urlBase })] }), _jsxs("button", { type: "button", onClick: onEditTemplate, className: "border-border text-foreground hover:bg-accent focus-visible:ring-ring inline-flex items-center justify-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2", children: [_jsx(LayoutTemplate, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Edit template"] })] }));
}
function NewPostTypeCard({ onClick }) {
    return (_jsxs("button", { type: "button", onClick: onClick, "aria-label": "New Post Type", className: "border-border text-muted-foreground hover:text-foreground hover:border-primary/50 hover:bg-primary/5 focus-visible:ring-ring flex min-h-[170px] flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed bg-transparent p-5 transition-colors focus:outline-none focus-visible:ring-2", children: [_jsx("span", { className: "bg-muted text-muted-foreground inline-flex h-9 w-9 items-center justify-center rounded-full", children: _jsx(Plus, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx("span", { className: "text-sm font-medium", children: "New Post Type" })] }));
}
function CardGridSkeleton() {
    return (_jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "bg-card border-border min-h-[170px] animate-pulse rounded-xl border p-5", children: [_jsx("div", { className: "bg-muted mb-3 h-9 w-9 rounded-lg" }), _jsx("div", { className: "bg-muted mb-2 h-4 w-1/2 rounded" }), _jsx("div", { className: "bg-muted h-3 w-3/4 rounded" })] }, i))) }));
}
//# sourceMappingURL=PostTypesView.js.map