'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { AlertTriangle, Loader2, Pencil, X } from 'lucide-react';
import { fetchPageForEditor } from '../../lib/page-editor-service.js';
import { SectionRenderer } from './sections/index.js';
/**
 * Clean, chrome-free render of a page using the SAME section renderers as
 * the editor canvas — so the preview reflects what will actually ship.
 * Only visible sections are rendered (hidden sections are omitted, exactly
 * as the public page would behave).
 */
export function PagePreview({ documentId, onNavigate }) {
    const [page, setPage] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    useEffect(() => {
        let cancelled = false;
        setLoading(true);
        fetchPageForEditor(documentId)
            .then((p) => !cancelled && setPage(p))
            .catch((err) => !cancelled && setError(err instanceof Error ? err.message : 'Failed to load'))
            .finally(() => !cancelled && setLoading(false));
        return () => {
            cancelled = true;
        };
    }, [documentId]);
    if (loading) {
        return (_jsxs("div", { className: "bg-background flex h-full items-center justify-center", children: [_jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin", "aria-hidden": true }), _jsx("span", { className: "sr-only", children: "Loading preview\u2026" })] }));
    }
    if (error || !page) {
        return (_jsx("div", { className: "bg-background flex h-full items-center justify-center p-6", children: _jsxs("div", { className: "border-destructive/30 bg-destructive/5 flex max-w-md items-center gap-3 rounded-lg border p-4", children: [_jsx(AlertTriangle, { className: "text-destructive shrink-0", size: 20, "aria-hidden": true }), _jsx("p", { className: "text-foreground text-sm font-medium", children: error ?? 'Page not found.' })] }) }));
    }
    const visible = page.sections.filter((s) => s.visible);
    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "bg-card border-border flex h-12 shrink-0 items-center justify-between border-b px-4", children: [_jsxs("button", { type: "button", onClick: () => {
                            // Opened via the editor's "Preview" (script-opened tab) → close
                            // it. Opened by navigating to the URL directly (no opener, so
                            // `window.close()` is a no-op) → fall back to the editor so the
                            // button is never dead.
                            if (window.opener)
                                window.close();
                            else
                                onNavigate(`/pages/${documentId}/edit`);
                        }, className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm", "aria-label": "Close preview tab", children: [_jsx(X, { className: "h-4 w-4", "aria-hidden": true }), "Close"] }), _jsxs("span", { className: "text-muted-foreground text-xs", children: ["Preview \u00B7 ", page.title || 'Untitled', " ", page.path] }), _jsxs("button", { type: "button", onClick: () => onNavigate(`/pages/${documentId}/edit`), className: "bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium", children: [_jsx(Pencil, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Open editor"] })] }), _jsx("div", { className: "flex-1 overflow-auto bg-white", children: visible.length === 0 ? (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center text-sm", children: "This page has no visible sections yet." })) : (visible.map((section) => _jsx(SectionRenderer, { section: section }, section.id))) })] }));
}
//# sourceMappingURL=PagePreview.js.map