'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { FileText, Mail, Send } from 'lucide-react';
import { cmsApi } from '../../../lib/api.js';
/**
 * Canvas preview for the form block. When a form is linked we fetch its real
 * name + fields so the editor sees what will render; otherwise we fall back to
 * a generic skeleton. Network failures degrade to the skeleton rather than
 * breaking the canvas.
 */
export function FormPreview({ data, variant = 'contact' }) {
    const formId = data.formId || '';
    const [form, setForm] = useState(null);
    const [loading, setLoading] = useState(false);
    useEffect(() => {
        if (!formId) {
            setForm(null);
            return;
        }
        let cancelled = false;
        setLoading(true);
        cmsApi(`/forms/${encodeURIComponent(formId)}`)
            .then((res) => {
            if (cancelled)
                return;
            if (res.data?.name) {
                setForm({ name: res.data.name, fields: res.data.fields ?? [] });
            }
            else {
                setForm(null);
            }
        })
            .finally(() => {
            if (!cancelled)
                setLoading(false);
        });
        return () => {
            cancelled = true;
        };
    }, [formId]);
    if (!formId) {
        return (_jsxs("div", { className: "border-border bg-muted/30 rounded-md border border-dashed p-6 text-center", children: [_jsx(FileText, { size: 20, className: "text-muted-foreground mx-auto" }), _jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: "No form selected" }), _jsx("p", { className: "text-muted-foreground/70 text-xs", children: "Pick a form in the block settings" })] }));
    }
    const heading = form?.name ?? (loading ? 'Loading form…' : 'Contact Form');
    const fields = form?.fields ?? [];
    if (variant === 'newsletter') {
        return (_jsxs("div", { className: "border-border rounded-md border p-6 text-center", children: [_jsx(Mail, { size: 24, className: "text-muted-foreground mx-auto" }), _jsx("p", { className: "text-foreground mt-3 text-sm font-medium", children: form?.name ?? 'Newsletter Signup' }), _jsxs("div", { className: "mx-auto mt-4 flex max-w-xs gap-2", children: [_jsx("div", { className: "border-border bg-input-background h-9 flex-1 rounded-md border" }), _jsx("div", { className: "bg-primary flex h-9 items-center rounded-md px-3", children: _jsx(Send, { size: 14, className: "text-primary-foreground" }) })] })] }));
    }
    return (_jsxs("div", { className: "border-border rounded-md border p-5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileText, { size: 16, className: "text-muted-foreground" }), _jsx("p", { className: "text-foreground text-sm font-medium", children: heading })] }), _jsx("div", { className: "mt-3 flex flex-col gap-2", children: fields.length > 0 ? (fields.slice(0, 5).map((field) => (_jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground mb-1 text-xs", children: field.label || field.key }), _jsx("div", { className: `border-border bg-input-background rounded-md border ${field.type === 'textarea' ? 'h-16' : 'h-8'}` })] }, field.key)))) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border bg-input-background h-8 rounded-md border" }), _jsx("div", { className: "border-border bg-input-background h-8 rounded-md border" }), _jsx("div", { className: "border-border bg-input-background h-20 rounded-md border" })] })) }), _jsx("div", { className: "mt-3", children: _jsx("span", { className: "bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm", children: variant === 'custom' ? 'Submit' : 'Send Message' }) })] }));
}
//# sourceMappingURL=FormPreview.js.map