'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Form Schema pane — inline inspector opened from the Forms list "Schema"
 * action (design's 390px schema panel; previously the `FormSchemaDrawer`
 * overlay). Four tabs: Fields (versioned schema editor), Embed (public
 * snippets + domain restrictions), Notifications (email settings),
 * Integrations (CRM webhooks / Zapier).
 *
 * Saving the Fields tab creates a new schema version server-side; existing
 * submissions keep referencing the version they were captured against, so
 * historical entries never break when the schema changes.
 */
import * as Tabs from '@radix-ui/react-tabs';
import { useEffect, useState } from 'react';
import { toast } from 'sonner';
import { fetchFormSchema, saveFormSchema } from '../../lib/forms-service.js';
import { emitFormsChanged } from '../../lib/forms-events.js';
import { ConfirmDialog } from '../ui/ConfirmDialog.js';
import { InspectorPaneBody, InspectorPaneFooter, InspectorPaneHeader } from '../ui/InspectorPane.js';
import { FieldsPanel } from './FieldsPanel.js';
import { EmbedPanel } from './EmbedPanel.js';
import { NotificationsPanel } from './NotificationsPanel.js';
import { WebhooksPanel } from './WebhooksPanel.js';
import { FormsErrorState, FormsLoading, btnPrimary } from './primitives.js';
const TABS = [
    { id: 'fields', label: 'Fields' },
    { id: 'embed', label: 'Embed' },
    { id: 'notifications', label: 'Notifications' },
    { id: 'integrations', label: 'Integrations' },
];
export function FormSchemaPane({ form, onClose, onSaved, }) {
    const [tab, setTab] = useState('fields');
    const [fields, setFields] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [dirty, setDirty] = useState(false);
    const [saving, setSaving] = useState(false);
    const [confirmDiscard, setConfirmDiscard] = useState(false);
    const formId = form.id;
    const hasSubmissions = (form.totalEntries ?? 0) > 0;
    useEffect(() => {
        setTab('fields');
        setDirty(false);
        setLoading(true);
        setError(null);
        let active = true;
        fetchFormSchema(formId)
            .then((schema) => {
            if (active)
                setFields(schema.fields);
        })
            .catch((e) => {
            if (active)
                setError(e instanceof Error ? e.message : 'Failed to load schema');
        })
            .finally(() => {
            if (active)
                setLoading(false);
        });
        return () => {
            active = false;
        };
    }, [formId]);
    function handleFieldsChange(next) {
        setFields(next);
        setDirty(true);
    }
    async function handleSave() {
        setSaving(true);
        const res = await saveFormSchema(formId, fields.map((f, i) => ({ ...f, sortOrder: i })));
        setSaving(false);
        if (res.error) {
            toast.error(res.error);
            return;
        }
        setDirty(false);
        toast.success('Schema saved.');
        emitFormsChanged();
        onSaved?.();
    }
    function requestClose() {
        if (dirty) {
            setConfirmDiscard(true);
            return;
        }
        onClose();
    }
    return (_jsxs(_Fragment, { children: [_jsxs(InspectorPaneHeader, { onClose: requestClose, closeLabel: "Close schema panel", children: [_jsx("div", { className: "truncate text-[13.5px] font-semibold text-[var(--txt)]", children: form.name }), _jsxs("div", { className: "mt-0.5 truncate font-mono text-[11.5px] text-[var(--muted)]", children: ["/", form.slug] })] }), _jsxs(Tabs.Root, { value: tab, onValueChange: setTab, className: "flex min-h-0 flex-1 flex-col", children: [_jsx(Tabs.List, { className: "flex shrink-0 gap-0.5 overflow-x-auto border-b border-[var(--bdr)] px-2", "aria-label": "Form schema sections", children: TABS.map((t) => (_jsx(Tabs.Trigger, { value: t.id, className: "-mb-px border-b-2 border-transparent px-2.5 py-2 text-[12.5px] font-medium whitespace-nowrap text-[var(--sub)] transition-colors hover:text-[var(--txt)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none data-[state=active]:border-[var(--acc)] data-[state=active]:text-[var(--txt)]", children: t.label }, t.id))) }), _jsx(InspectorPaneBody, { children: _jsxs("div", { className: "px-4 py-3.5", children: [_jsx(Tabs.Content, { value: "fields", tabIndex: -1, children: loading ? (_jsx(FormsLoading, { label: "Loading schema\u2026" })) : error ? (_jsx(FormsErrorState, { message: error, onRetry: () => setTab('fields') })) : (_jsx(FieldsPanel, { fields: fields, onChange: handleFieldsChange, hasSubmissions: hasSubmissions })) }), _jsx(Tabs.Content, { value: "embed", tabIndex: -1, children: _jsx(EmbedPanel, { formId: formId, slug: form.slug, status: form.status }) }), _jsx(Tabs.Content, { value: "notifications", tabIndex: -1, children: _jsx(NotificationsPanel, { formId: formId, onChanged: onSaved }) }), _jsx(Tabs.Content, { value: "integrations", tabIndex: -1, children: _jsx(WebhooksPanel, { formId: formId, formSlug: form.slug }) })] }) }), tab === 'fields' && (_jsx(InspectorPaneFooter, { children: _jsx("button", { type: "button", className: `${btnPrimary} w-full`, onClick: () => void handleSave(), disabled: saving || loading, children: saving ? 'Saving…' : 'Save Schema' }) }))] }), _jsx(ConfirmDialog, { open: confirmDiscard, onClose: () => setConfirmDiscard(false), onConfirm: () => {
                    setDirty(false);
                    setConfirmDiscard(false);
                    onClose();
                }, title: "Discard unsaved changes?", description: "You have unsaved schema changes. Closing now will discard them.", confirmLabel: "Discard", cancelLabel: "Keep editing", destructive: true })] }));
}
//# sourceMappingURL=FormSchemaPane.js.map