@actuate-media/cms-admin 0.76.6 → 0.77.0

package/src/views/FormEditor.tsx

@@ -1,63 +1,90 @@
 'use client'
 
-import { useState, useCallback, useEffect } from 'react'
+/**
+ * Full-page form editor — the canonical place to configure everything about a
+ * form. Backed entirely by the typed Forms API (`lib/forms-service.ts`), the
+ * same backend as the Forms list's inline Schema pane, so the two surfaces can
+ * never drift:
+ *
+ *   - Details      → name / description / status + post-submit confirmation
+ *                    (`PATCH /forms/:id` — `successMessage` / `redirectUrl`,
+ *                    which the public submission pipeline actually reads)
+ *   - Fields       → versioned schema editor (`PUT /forms/:id/schema`)
+ *   - Notifications→ shared NotificationsPanel (`/forms/:id/notifications`)
+ *   - Analytics    → GA4 event tracking config (persisted on the definition,
+ *                    exposed on the public schema, fired by `<ActuateForm>`)
+ *   - Embed        → shared EmbedPanel (endpoints, snippet, allowed domains)
+ *   - Integrations → shared WebhooksPanel (signed CRM/Zapier webhooks)
+ *
+ * New forms get a focused create screen (details + starting fields); saving
+ * routes into this editor so notifications/embed/webhooks — which need a form
+ * id — are one click away.
+ */
+import * as Tabs from '@radix-ui/react-tabs'
+import { ArrowLeft, ExternalLink, Inbox, Loader2, MessageSquare, Save } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import { EmbedPanel } from '../components/forms/EmbedPanel.js'
+import { FieldsPanel } from '../components/forms/FieldsPanel.js'
+import { NotificationsPanel } from '../components/forms/NotificationsPanel.js'
+import { WebhooksPanel } from '../components/forms/WebhooksPanel.js'
 import {
-  Save,
-  ArrowLeft,
-  Plus,
-  Trash2,
-  GripVertical,
-  MessageSquare,
-  ExternalLink,
-  BarChart3,
-  ChevronDown,
-  ChevronRight,
-  Loader2,
-} from 'lucide-react'
-import { useApiData } from '../lib/useApiData.js'
-import { cmsApi } from '../lib/api.js'
+  FormStatusBadge,
+  FormsErrorState,
+  FormsLoading,
+  btnPrimary,
+  btnSecondary,
+} from '../components/forms/primitives.js'
 import { Toggle } from '../components/ui/Toggle.js'
+import { emitFormsChanged } from '../lib/forms-events.js'
+import {
+  createForm,
+  fetchFormById,
+  fetchFormSchema,
+  saveFormSchema,
+  updateForm,
+  type FormAnalyticsConfig,
+  type FormDefinition,
+  type FormField,
+  type FormStatus,
+} from '../lib/forms-service.js'
+import { useNavigationBlocker } from '../router/index.js'
 
-interface FormField {
-  id: string
-  type: string
-  label: string
-  placeholder?: string
-  required: boolean
-  options?: string[]
-}
+const inputCls =
+  'border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none'
 
-interface ConfirmationConfig {
-  type: 'message' | 'redirect'
-  message: string
+const TABS = [
+  { id: 'details', label: 'Details' },
+  { id: 'fields', label: 'Fields' },
+  { id: 'notifications', label: 'Notifications' },
+  { id: 'analytics', label: 'Analytics' },
+  { id: 'embed', label: 'Embed' },
+  { id: 'integrations', label: 'Integrations' },
+] as const
+
+interface DetailsState {
+  name: string
+  description: string
+  status: FormStatus
+  confirmationType: 'message' | 'redirect'
+  successMessage: string
   redirectUrl: string
-  redirectDelay: number
 }
 
-interface AnalyticsConfig {
-  enabled: boolean
-  measurementId: string
-  submitEventName: string
-  startEventName: string
-  trackAsConversion: boolean
-  conversionValue: number
-  conversionCurrency: string
-  customParameters: Record<string, string>
+function detailsFromForm(form: FormDefinition): DetailsState {
+  return {
+    name: form.name,
+    description: form.description ?? '',
+    status: form.status,
+    // The submission pipeline redirects whenever redirectUrl is non-empty,
+    // otherwise it shows successMessage — mirror that decision here.
+    confirmationType: form.redirectUrl?.trim() ? 'redirect' : 'message',
+    successMessage: form.successMessage ?? '',
+    redirectUrl: form.redirectUrl ?? '',
+  }
 }
 
-const FIELD_TYPES = [
-  { value: 'text', label: 'Text' },
-  { value: 'email', label: 'Email' },
-  { value: 'tel', label: 'Phone' },
-  { value: 'textarea', label: 'Textarea' },
-  { value: 'select', label: 'Dropdown' },
-  { value: 'checkbox', label: 'Checkbox' },
-  { value: 'number', label: 'Number' },
-  { value: 'date', label: 'Date' },
-  { value: 'url', label: 'URL' },
-  { value: 'file', label: 'File Upload' },
-  { value: 'hidden', label: 'Hidden' },
-] as const
+const DEFAULT_ANALYTICS: FormAnalyticsConfig = { enabled: false }
 
 export interface FormEditorProps {
   formId?: string
@@ -65,535 +92,653 @@ export interface FormEditorProps {
 }
 
 export function FormEditor({ formId, onNavigate }: FormEditorProps) {
-  const isNew = !formId
-  const { data: existingForm, loading } = useApiData<any>(
-    formId ? `/collections/forms/${formId}` : null,
-  )
+  if (!formId) {
+    return <NewFormEditor onNavigate={onNavigate} />
+  }
+  return <ExistingFormEditor formId={formId} onNavigate={onNavigate} />
+}
+
+// ─── Existing form ─────────────────────────────────────────────────────────
+
+function ExistingFormEditor({
+  formId,
+  onNavigate,
+}: {
+  formId: string
+  onNavigate?: (path: string) => void
+}) {
+  const [form, setForm] = useState<FormDefinition | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [tab, setTab] = useState<string>('details')
+
+  const [details, setDetails] = useState<DetailsState | null>(null)
+  const [detailsDirty, setDetailsDirty] = useState(false)
+  const [savingDetails, setSavingDetails] = useState(false)
 
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  const [status, setStatus] = useState('active')
   const [fields, setFields] = useState<FormField[]>([])
-  const [saving, setSaving] = useState(false)
-  const [expandedSection, setExpandedSection] = useState<string | null>('fields')
-
-  const [confirmation, setConfirmation] = useState<ConfirmationConfig>({
-    type: 'message',
-    message: 'Thank you! Your submission has been received.',
-    redirectUrl: '',
-    redirectDelay: 0,
-  })
-
-  const [analytics, setAnalytics] = useState<AnalyticsConfig>({
-    enabled: false,
-    measurementId: '',
-    submitEventName: 'form_submit',
-    startEventName: 'form_start',
-    trackAsConversion: false,
-    conversionValue: 0,
-    conversionCurrency: 'USD',
-    customParameters: {},
-  })
+  const [fieldsDirty, setFieldsDirty] = useState(false)
+  const [savingFields, setSavingFields] = useState(false)
 
-  useEffect(() => {
-    if (existingForm) {
-      const d = existingForm.data ?? existingForm
-      setName(d.name ?? '')
-      setDescription(d.description ?? '')
-      setStatus(d.status ?? 'active')
-      if (Array.isArray(d.fields)) setFields(d.fields)
-      if (d.confirmation) {
-        setConfirmation((prev) => ({ ...prev, ...d.confirmation }))
-      }
-      if (d.analytics) {
-        setAnalytics((prev) => ({ ...prev, ...d.analytics }))
-      }
-    }
-  }, [existingForm])
-
-  const addField = useCallback((type: string) => {
-    setFields((prev) => [
-      ...prev,
-      {
-        id: crypto.randomUUID(),
-        type,
-        label: `New ${type} field`,
-        required: false,
-      },
-    ])
-  }, [])
-
-  const removeField = useCallback((id: string) => {
-    setFields((prev) => prev.filter((f) => f.id !== id))
-  }, [])
-
-  const updateField = useCallback((id: string, updates: Partial<FormField>) => {
-    setFields((prev) => prev.map((f) => (f.id === id ? { ...f, ...updates } : f)))
-  }, [])
-
-  const moveField = useCallback((from: number, to: number) => {
-    setFields((prev) => {
-      const next = [...prev]
-      const [moved] = next.splice(from, 1)
-      next.splice(to, 0, moved!)
-      return next
-    })
-  }, [])
+  const [analytics, setAnalytics] = useState<FormAnalyticsConfig>(DEFAULT_ANALYTICS)
+  const [analyticsDirty, setAnalyticsDirty] = useState(false)
+  const [savingAnalytics, setSavingAnalytics] = useState(false)
 
-  const handleSave = async () => {
-    setSaving(true)
-    try {
-      const payload = {
-        name,
-        description,
-        status,
-        fields,
-        confirmation,
-        analytics: analytics.enabled ? analytics : { enabled: false },
-      }
+  useNavigationBlocker(detailsDirty || fieldsDirty || analyticsDirty)
 
-      if (isNew) {
-        await cmsApi('/collections/forms', {
-          method: 'POST',
-          body: JSON.stringify(payload),
-        })
-      } else {
-        await cmsApi(`/collections/forms/${formId}`, {
-          method: 'PUT',
-          body: JSON.stringify(payload),
-        })
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const [loaded, schema] = await Promise.all([fetchFormById(formId), fetchFormSchema(formId)])
+      if (!loaded) {
+        setError('Form not found')
+        return
       }
-      onNavigate?.('/forms')
+      setForm(loaded)
+      setDetails(detailsFromForm(loaded))
+      setAnalytics(loaded.analytics ?? DEFAULT_ANALYTICS)
+      setFields(schema.fields)
+      setDetailsDirty(false)
+      setFieldsDirty(false)
+      setAnalyticsDirty(false)
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to load form')
     } finally {
-      setSaving(false)
+      setLoading(false)
     }
+  }, [formId])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  function patchDetails(patch: Partial<DetailsState>) {
+    setDetails((cur) => (cur ? { ...cur, ...patch } : cur))
+    setDetailsDirty(true)
   }
 
-  const toggleSection = (section: string) => {
-    setExpandedSection(expandedSection === section ? null : section)
+  function patchAnalytics(patch: Partial<FormAnalyticsConfig>) {
+    setAnalytics((cur) => ({ ...cur, ...patch }))
+    setAnalyticsDirty(true)
+  }
+
+  async function saveDetails() {
+    if (!details) return
+    setSavingDetails(true)
+    const res = await updateForm(formId, {
+      name: details.name,
+      description: details.description,
+      status: details.status,
+      successMessage: details.successMessage,
+      // Message mode must clear the URL — a non-empty redirectUrl always wins
+      // in the submission pipeline.
+      redirectUrl: details.confirmationType === 'redirect' ? details.redirectUrl : '',
+    })
+    setSavingDetails(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data) {
+      setForm(res.data)
+      setDetails(detailsFromForm(res.data))
+    }
+    setDetailsDirty(false)
+    toast.success('Form details saved.')
+    emitFormsChanged()
+  }
+
+  async function saveFields() {
+    setSavingFields(true)
+    const res = await saveFormSchema(
+      formId,
+      fields.map((f, i) => ({ ...f, sortOrder: i })),
+    )
+    setSavingFields(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    setFieldsDirty(false)
+    toast.success('Schema saved.')
+    emitFormsChanged()
+  }
+
+  async function saveAnalytics() {
+    setSavingAnalytics(true)
+    const res = await updateForm(formId, { analytics })
+    setSavingAnalytics(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data) setAnalytics(res.data.analytics ?? { enabled: false })
+    setAnalyticsDirty(false)
+    toast.success('Analytics settings saved.')
   }
 
   if (loading) {
     return (
-      <div className="flex h-64 items-center justify-center p-4">
-        <Loader2 className="text-primary h-6 w-6 animate-spin" />
+      <div className="max-w-4xl p-3 pr-6 sm:p-4 sm:pr-8">
+        <FormsLoading label="Loading form…" />
+      </div>
+    )
+  }
+
+  if (error || !form || !details) {
+    return (
+      <div className="max-w-4xl p-3 pr-6 sm:p-4 sm:pr-8">
+        <FormsErrorState message={error ?? 'Form not found'} onRetry={() => void load()} />
       </div>
     )
   }
 
   return (
     <div className="max-w-4xl p-3 pr-6 sm:p-4 sm:pr-8">
-      {/* Header */}
       <div className="mb-6 flex items-center gap-3">
         <button
           onClick={() => onNavigate?.('/forms')}
-          className="hover:bg-muted rounded-lg p-2 transition-colors"
+          aria-label="Back to forms"
+          className="hover:bg-muted focus-visible:ring-ring rounded-lg p-2 transition-colors focus-visible:ring-2 focus-visible:outline-none"
         >
-          <ArrowLeft className="text-muted-foreground h-5 w-5" />
+          <ArrowLeft className="text-muted-foreground h-5 w-5" aria-hidden />
         </button>
-        <div className="flex-1">
-          <h1 className="text-foreground text-xl font-medium">
-            {isNew ? 'New Form' : 'Edit Form'}
-          </h1>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <h1 className="text-foreground truncate text-xl font-medium">{form.name}</h1>
+            <FormStatusBadge status={form.status} />
+          </div>
+          <p className="text-muted-foreground truncate font-mono text-xs">/{form.slug}</p>
         </div>
         <button
-          onClick={handleSave}
-          disabled={saving || !name.trim()}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm transition-colors disabled:opacity-50"
+          onClick={() => onNavigate?.(`/forms/${formId}/submissions`)}
+          className={btnSecondary}
         >
-          {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-          {saving ? 'Saving...' : 'Save'}
+          <Inbox className="h-4 w-4" aria-hidden />
+          View Entries
         </button>
       </div>
 
-      {/* Basic info */}
-      <div className="border-border bg-card mb-4 rounded-lg border p-4">
+      <Tabs.Root value={tab} onValueChange={setTab}>
+        <Tabs.List
+          className="border-border mb-4 flex gap-0.5 overflow-x-auto border-b"
+          aria-label="Form settings sections"
+        >
+          {TABS.map((t) => (
+            <Tabs.Trigger
+              key={t.id}
+              value={t.id}
+              className="text-muted-foreground hover:text-foreground focus-visible:ring-ring data-[state=active]:border-primary data-[state=active]:text-foreground -mb-px border-b-2 border-transparent px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            >
+              {t.label}
+            </Tabs.Trigger>
+          ))}
+        </Tabs.List>
+
+        <Tabs.Content value="details" tabIndex={-1}>
+          <DetailsTab
+            details={details}
+            onPatch={patchDetails}
+            onSave={() => void saveDetails()}
+            saving={savingDetails}
+          />
+        </Tabs.Content>
+
+        <Tabs.Content value="fields" tabIndex={-1}>
+          <div className="border-border bg-card space-y-4 rounded-lg border p-4">
+            <FieldsPanel
+              fields={fields}
+              onChange={(next) => {
+                setFields(next)
+                setFieldsDirty(true)
+              }}
+              hasSubmissions={(form.totalEntries ?? 0) > 0}
+            />
+            <div className="flex justify-end">
+              <button
+                className={btnPrimary}
+                onClick={() => void saveFields()}
+                disabled={savingFields || !fieldsDirty}
+              >
+                {savingFields ? (
+                  <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+                ) : (
+                  <Save className="h-4 w-4" aria-hidden />
+                )}
+                {savingFields ? 'Saving…' : 'Save Schema'}
+              </button>
+            </div>
+          </div>
+        </Tabs.Content>
+
+        <Tabs.Content value="notifications" tabIndex={-1}>
+          <div className="border-border bg-card rounded-lg border p-4">
+            <NotificationsPanel formId={formId} />
+          </div>
+        </Tabs.Content>
+
+        <Tabs.Content value="analytics" tabIndex={-1}>
+          <AnalyticsTab
+            analytics={analytics}
+            onPatch={patchAnalytics}
+            onSave={() => void saveAnalytics()}
+            saving={savingAnalytics}
+          />
+        </Tabs.Content>
+
+        <Tabs.Content value="embed" tabIndex={-1}>
+          <div className="border-border bg-card rounded-lg border p-4">
+            <EmbedPanel formId={formId} slug={form.slug} status={form.status} />
+          </div>
+        </Tabs.Content>
+
+        <Tabs.Content value="integrations" tabIndex={-1}>
+          <div className="border-border bg-card rounded-lg border p-4">
+            <WebhooksPanel formId={formId} formSlug={form.slug} />
+          </div>
+        </Tabs.Content>
+      </Tabs.Root>
+    </div>
+  )
+}
+
+// ─── Details tab ────────────────────────────────────────────────────────────
+
+function DetailsTab({
+  details,
+  onPatch,
+  onSave,
+  saving,
+}: {
+  details: DetailsState
+  onPatch: (patch: Partial<DetailsState>) => void
+  onSave: () => void
+  saving: boolean
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="border-border bg-card rounded-lg border p-4">
         <div className="grid gap-4">
-          <div>
-            <label className="text-foreground mb-1 block text-sm font-medium">Form Name</label>
+          <Field label="Form Name">
             <input
               type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
+              value={details.name}
+              onChange={(e) => onPatch({ name: e.target.value })}
               placeholder="e.g. Contact Form"
-              className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+              className={inputCls}
             />
-          </div>
-          <div>
-            <label className="text-foreground mb-1 block text-sm font-medium">Description</label>
+          </Field>
+          <Field label="Description">
             <input
               type="text"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
+              value={details.description}
+              onChange={(e) => onPatch({ description: e.target.value })}
               placeholder="Brief description of this form"
-              className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+              className={inputCls}
             />
-          </div>
-          <div>
-            <label className="text-foreground mb-1 block text-sm font-medium">Status</label>
+          </Field>
+          <Field
+            label="Status"
+            hint="Only active forms accept submissions; archived forms are hidden from embed pickers."
+          >
             <select
-              value={status}
-              onChange={(e) => setStatus(e.target.value)}
-              className="border-border focus-visible:ring-ring/50 rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+              value={details.status}
+              onChange={(e) => onPatch({ status: e.target.value as FormStatus })}
+              className="border-border bg-input-background text-foreground focus-visible:ring-ring rounded-lg border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
             >
               <option value="active">Active</option>
-              <option value="inactive">Inactive</option>
+              <option value="draft">Draft</option>
+              <option value="archived">Archived</option>
             </select>
-          </div>
+          </Field>
         </div>
       </div>
 
-      {/* Fields section */}
-      <div className="border-border bg-card mb-4 rounded-lg border">
-        <button
-          onClick={() => toggleSection('fields')}
-          className="hover:bg-muted flex w-full items-center justify-between p-4 transition-colors"
-        >
-          <div className="flex items-center gap-2">
-            {expandedSection === 'fields' ? (
-              <ChevronDown className="h-4 w-4" />
-            ) : (
-              <ChevronRight className="h-4 w-4" />
-            )}
-            <span className="text-foreground font-medium">Form Fields</span>
-            <span className="text-muted-foreground text-sm">({fields.length})</span>
+      <div className="border-border bg-card rounded-lg border p-4">
+        <h2 className="text-foreground mb-3 text-base font-medium">Confirmation</h2>
+        <fieldset className="mb-4">
+          <legend className="text-foreground mb-2 block text-sm font-medium">
+            After submission
+          </legend>
+          <div className="flex flex-wrap gap-3">
+            <label
+              className={`flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
+                details.confirmationType === 'message'
+                  ? 'border-primary bg-accent'
+                  : 'border-border hover:bg-muted bg-transparent'
+              }`}
+            >
+              <input
+                type="radio"
+                name="confirmationType"
+                value="message"
+                checked={details.confirmationType === 'message'}
+                onChange={() => onPatch({ confirmationType: 'message' })}
+                className="text-primary"
+              />
+              <MessageSquare className="h-4 w-4" aria-hidden />
+              <span className="text-sm">Show Message</span>
+            </label>
+            <label
+              className={`flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
+                details.confirmationType === 'redirect'
+                  ? 'border-primary bg-accent'
+                  : 'border-border hover:bg-muted bg-transparent'
+              }`}
+            >
+              <input
+                type="radio"
+                name="confirmationType"
+                value="redirect"
+                checked={details.confirmationType === 'redirect'}
+                onChange={() => onPatch({ confirmationType: 'redirect' })}
+                className="text-primary"
+              />
+              <ExternalLink className="h-4 w-4" aria-hidden />
+              <span className="text-sm">Redirect to Page</span>
+            </label>
           </div>
-        </button>
-        {expandedSection === 'fields' && (
-          <div className="border-border border-t p-4">
-            <div className="mb-4 flex flex-wrap gap-2">
-              {FIELD_TYPES.map((ft) => (
-                <button
-                  key={ft.value}
-                  onClick={() => addField(ft.value)}
-                  className="border-border hover:bg-muted flex items-center gap-1 rounded-lg border px-3 py-1.5 text-xs transition-colors"
-                >
-                  <Plus className="h-3 w-3" /> {ft.label}
-                </button>
-              ))}
-            </div>
+        </fieldset>
 
-            {fields.length === 0 ? (
-              <p className="text-muted-foreground py-6 text-center text-sm">
-                Click a field type above to add it to your form.
-              </p>
-            ) : (
-              <div className="flex flex-col gap-2">
-                {fields.map((field, index) => (
-                  <div
-                    key={field.id}
-                    draggable
-                    onDragStart={(e) => e.dataTransfer.setData('text/plain', String(index))}
-                    onDragOver={(e) => e.preventDefault()}
-                    onDrop={(e) => {
-                      const from = Number(e.dataTransfer.getData('text/plain'))
-                      moveField(from, index)
-                    }}
-                    className="border-border bg-muted hover:bg-card flex items-center gap-3 rounded-lg border p-3 transition-colors"
-                  >
-                    <GripVertical className="text-muted-foreground h-4 w-4 shrink-0 cursor-grab" />
-                    <input
-                      type="text"
-                      value={field.label}
-                      onChange={(e) => updateField(field.id, { label: e.target.value })}
-                      className="border-border focus-visible:ring-ring/50 flex-1 rounded border px-2 py-1 text-sm focus:ring-1 focus:outline-none"
-                    />
-                    <span className="bg-muted text-muted-foreground shrink-0 rounded px-2 py-0.5 text-xs">
-                      {field.type}
-                    </span>
-                    <label className="text-muted-foreground flex shrink-0 items-center gap-1 text-xs">
-                      <input
-                        type="checkbox"
-                        checked={field.required}
-                        onChange={(e) => updateField(field.id, { required: e.target.checked })}
-                        className="rounded"
-                      />
-                      Required
-                    </label>
-                    <button
-                      onClick={() => removeField(field.id)}
-                      className="text-destructive hover:bg-destructive/10 shrink-0 rounded p-1 transition-colors"
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
+        {details.confirmationType === 'message' ? (
+          <Field label="Success Message">
+            <textarea
+              value={details.successMessage}
+              onChange={(e) => onPatch({ successMessage: e.target.value })}
+              rows={3}
+              placeholder="Thank you! Your submission has been received."
+              className={inputCls}
+            />
+          </Field>
+        ) : (
+          <Field label="Redirect URL">
+            <input
+              type="url"
+              value={details.redirectUrl}
+              onChange={(e) => onPatch({ redirectUrl: e.target.value })}
+              placeholder="https://example.com/thank-you"
+              className={inputCls}
+            />
+          </Field>
         )}
       </div>
 
-      {/* Confirmation section */}
-      <div className="border-border bg-card mb-4 rounded-lg border">
-        <button
-          onClick={() => toggleSection('confirmation')}
-          className="hover:bg-muted flex w-full items-center justify-between p-4 transition-colors"
-        >
-          <div className="flex items-center gap-2">
-            {expandedSection === 'confirmation' ? (
-              <ChevronDown className="h-4 w-4" />
-            ) : (
-              <ChevronRight className="h-4 w-4" />
-            )}
-            <MessageSquare className="text-success h-4 w-4" />
-            <span className="text-foreground font-medium">Confirmation</span>
-            <span className="bg-muted text-muted-foreground rounded px-2 py-0.5 text-xs">
-              {confirmation.type === 'message' ? 'Show Message' : 'Redirect'}
-            </span>
-          </div>
+      <div className="flex justify-end">
+        <button className={btnPrimary} onClick={onSave} disabled={saving || !details.name.trim()}>
+          {saving ? (
+            <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+          ) : (
+            <Save className="h-4 w-4" aria-hidden />
+          )}
+          {saving ? 'Saving…' : 'Save Details'}
         </button>
-        {expandedSection === 'confirmation' && (
-          <div className="border-border border-t p-4">
-            <div className="mb-4">
-              <label className="text-foreground mb-2 block text-sm font-medium">
-                After submission
-              </label>
-              <div className="flex gap-3">
-                <label
-                  className={`flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
-                    confirmation.type === 'message'
-                      ? 'border-primary bg-accent'
-                      : 'border-border hover:bg-muted bg-transparent'
-                  }`}
-                >
-                  <input
-                    type="radio"
-                    name="confirmationType"
-                    value="message"
-                    checked={confirmation.type === 'message'}
-                    onChange={() => setConfirmation((c) => ({ ...c, type: 'message' }))}
-                    className="text-primary"
-                  />
-                  <MessageSquare className="h-4 w-4" />
-                  <span className="text-sm">Show Message</span>
-                </label>
-                <label
-                  className={`flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
-                    confirmation.type === 'redirect'
-                      ? 'border-primary bg-accent'
-                      : 'border-border hover:bg-muted bg-transparent'
-                  }`}
-                >
-                  <input
-                    type="radio"
-                    name="confirmationType"
-                    value="redirect"
-                    checked={confirmation.type === 'redirect'}
-                    onChange={() => setConfirmation((c) => ({ ...c, type: 'redirect' }))}
-                    className="text-primary"
-                  />
-                  <ExternalLink className="h-4 w-4" />
-                  <span className="text-sm">Redirect to Page</span>
-                </label>
-              </div>
-            </div>
-
-            {confirmation.type === 'message' ? (
-              <div>
-                <label className="text-foreground mb-1 block text-sm font-medium">
-                  Success Message
-                </label>
-                <textarea
-                  value={confirmation.message}
-                  onChange={(e) => setConfirmation((c) => ({ ...c, message: e.target.value }))}
-                  rows={3}
-                  className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                  placeholder="Thank you! Your submission has been received."
-                />
-              </div>
-            ) : (
-              <div className="grid gap-3">
-                <div>
-                  <label className="text-foreground mb-1 block text-sm font-medium">
-                    Redirect URL
-                  </label>
-                  <input
-                    type="url"
-                    value={confirmation.redirectUrl}
-                    onChange={(e) =>
-                      setConfirmation((c) => ({ ...c, redirectUrl: e.target.value }))
-                    }
-                    placeholder="https://example.com/thank-you"
-                    className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                  />
-                </div>
-                <div>
-                  <label className="text-foreground mb-1 block text-sm font-medium">
-                    Redirect Delay (ms)
-                  </label>
-                  <input
-                    type="number"
-                    value={confirmation.redirectDelay}
-                    onChange={(e) =>
-                      setConfirmation((c) => ({ ...c, redirectDelay: Number(e.target.value) }))
-                    }
-                    min={0}
-                    step={500}
-                    className="border-border focus-visible:ring-ring/50 w-32 rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                  />
-                  <p className="text-muted-foreground mt-1 text-xs">0 = instant redirect</p>
-                </div>
-              </div>
-            )}
-          </div>
-        )}
       </div>
+    </div>
+  )
+}
 
-      {/* Analytics section */}
-      <div className="border-border bg-card mb-4 rounded-lg border">
-        <button
-          onClick={() => toggleSection('analytics')}
-          className="hover:bg-muted flex w-full items-center justify-between p-4 transition-colors"
-        >
-          <div className="flex items-center gap-2">
-            {expandedSection === 'analytics' ? (
-              <ChevronDown className="h-4 w-4" />
-            ) : (
-              <ChevronRight className="h-4 w-4" />
-            )}
-            <BarChart3 className="text-brand h-4 w-4" />
-            <span className="text-foreground font-medium">GA4 Analytics</span>
-            <span
-              className={`rounded px-2 py-0.5 text-xs ${analytics.enabled ? 'bg-success/10 text-success' : 'bg-muted text-muted-foreground'}`}
-            >
-              {analytics.enabled ? 'Enabled' : 'Disabled'}
+// ─── Analytics tab ──────────────────────────────────────────────────────────
+
+function AnalyticsTab({
+  analytics,
+  onPatch,
+  onSave,
+  saving,
+}: {
+  analytics: FormAnalyticsConfig
+  onPatch: (patch: Partial<FormAnalyticsConfig>) => void
+  onSave: () => void
+  saving: boolean
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="border-border bg-card rounded-lg border p-4">
+        <div className="flex items-center justify-between gap-3">
+          <span className="min-w-0">
+            <span className="text-foreground block text-sm font-medium">
+              Push events to Google Analytics 4
             </span>
-          </div>
-        </button>
-        {expandedSection === 'analytics' && (
-          <div className="border-border border-t p-4">
-            <div className="mb-4 flex items-center gap-3">
-              <Toggle
-                checked={analytics.enabled}
-                onCheckedChange={(v) => setAnalytics((a) => ({ ...a, enabled: v }))}
-                aria-label="Push events to Google Analytics 4"
+            <span className="text-muted-foreground block text-sm">
+              Fires form start, submit, and error events on the public site.
+            </span>
+          </span>
+          <Toggle
+            checked={analytics.enabled}
+            onCheckedChange={(v) => onPatch({ enabled: v })}
+            aria-label="Push events to Google Analytics 4"
+          />
+        </div>
+
+        {analytics.enabled && (
+          <div className="mt-4 grid gap-4">
+            <Field label="GA4 Measurement ID" hint="Leave blank to use your site's default GA4 tag">
+              <input
+                type="text"
+                value={analytics.measurementId ?? ''}
+                onChange={(e) => onPatch({ measurementId: e.target.value })}
+                placeholder="G-XXXXXXXXXX"
+                className={`${inputCls} max-w-64`}
               />
-              <span className="text-foreground text-sm font-medium">
-                Push events to Google Analytics 4
-              </span>
-            </div>
+            </Field>
 
-            {analytics.enabled && (
-              <div className="grid gap-4 pl-12">
-                <div>
-                  <label className="text-foreground mb-1 block text-sm font-medium">
-                    GA4 Measurement ID
-                    <span className="text-muted-foreground font-normal"> (optional)</span>
-                  </label>
-                  <input
-                    type="text"
-                    value={analytics.measurementId}
-                    onChange={(e) => setAnalytics((a) => ({ ...a, measurementId: e.target.value }))}
-                    placeholder="G-XXXXXXXXXX"
-                    className="border-border focus-visible:ring-ring/50 w-64 rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                  />
-                  <p className="text-muted-foreground mt-1 text-xs">
-                    Leave blank to use your site's default GA4 tag
-                  </p>
-                </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Field label="Submit Event Name">
+                <input
+                  type="text"
+                  value={analytics.submitEventName ?? ''}
+                  onChange={(e) => onPatch({ submitEventName: e.target.value })}
+                  placeholder="form_submit"
+                  className={inputCls}
+                />
+              </Field>
+              <Field label="Start Event Name">
+                <input
+                  type="text"
+                  value={analytics.startEventName ?? ''}
+                  onChange={(e) => onPatch({ startEventName: e.target.value })}
+                  placeholder="form_start"
+                  className={inputCls}
+                />
+              </Field>
+            </div>
 
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className="text-foreground mb-1 block text-sm font-medium">
-                      Submit Event Name
-                    </label>
-                    <input
-                      type="text"
-                      value={analytics.submitEventName}
-                      onChange={(e) =>
-                        setAnalytics((a) => ({ ...a, submitEventName: e.target.value }))
-                      }
-                      className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                    />
-                  </div>
-                  <div>
-                    <label className="text-foreground mb-1 block text-sm font-medium">
-                      Start Event Name
-                    </label>
-                    <input
-                      type="text"
-                      value={analytics.startEventName}
-                      onChange={(e) =>
-                        setAnalytics((a) => ({ ...a, startEventName: e.target.value }))
-                      }
-                      className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                    />
-                  </div>
-                </div>
+            <div className="border-border border-t pt-4">
+              <div className="mb-3 flex items-center gap-3">
+                <input
+                  type="checkbox"
+                  id="trackConversion"
+                  checked={analytics.trackAsConversion ?? false}
+                  onChange={(e) => onPatch({ trackAsConversion: e.target.checked })}
+                  className="rounded"
+                />
+                <label htmlFor="trackConversion" className="text-foreground text-sm font-medium">
+                  Track as conversion event
+                </label>
+              </div>
 
-                <div className="border-border border-t pt-4">
-                  <div className="mb-3 flex items-center gap-3">
+              {analytics.trackAsConversion && (
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <Field label="Conversion Value">
                     <input
-                      type="checkbox"
-                      id="trackConversion"
-                      checked={analytics.trackAsConversion}
-                      onChange={(e) =>
-                        setAnalytics((a) => ({ ...a, trackAsConversion: e.target.checked }))
-                      }
-                      className="rounded"
+                      type="number"
+                      value={analytics.conversionValue ?? 0}
+                      onChange={(e) => onPatch({ conversionValue: Number(e.target.value) })}
+                      min={0}
+                      step={0.01}
+                      className={inputCls}
                     />
-                    <label
-                      htmlFor="trackConversion"
-                      className="text-foreground text-sm font-medium"
+                  </Field>
+                  <Field label="Currency">
+                    <select
+                      value={analytics.conversionCurrency ?? 'USD'}
+                      onChange={(e) => onPatch({ conversionCurrency: e.target.value })}
+                      className={inputCls}
                     >
-                      Track as conversion event
-                    </label>
-                  </div>
-
-                  {analytics.trackAsConversion && (
-                    <div className="ml-6 grid grid-cols-2 gap-4">
-                      <div>
-                        <label className="text-foreground mb-1 block text-sm font-medium">
-                          Conversion Value
-                        </label>
-                        <input
-                          type="number"
-                          value={analytics.conversionValue}
-                          onChange={(e) =>
-                            setAnalytics((a) => ({ ...a, conversionValue: Number(e.target.value) }))
-                          }
-                          min={0}
-                          step={0.01}
-                          className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                        />
-                      </div>
-                      <div>
-                        <label className="text-foreground mb-1 block text-sm font-medium">
-                          Currency
-                        </label>
-                        <select
-                          value={analytics.conversionCurrency}
-                          onChange={(e) =>
-                            setAnalytics((a) => ({ ...a, conversionCurrency: e.target.value }))
-                          }
-                          className="border-border focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                        >
-                          <option value="USD">USD</option>
-                          <option value="EUR">EUR</option>
-                          <option value="GBP">GBP</option>
-                          <option value="CAD">CAD</option>
-                          <option value="AUD">AUD</option>
-                        </select>
-                      </div>
-                    </div>
-                  )}
+                      <option value="USD">USD</option>
+                      <option value="EUR">EUR</option>
+                      <option value="GBP">GBP</option>
+                      <option value="CAD">CAD</option>
+                      <option value="AUD">AUD</option>
+                    </select>
+                  </Field>
                 </div>
+              )}
+            </div>
 
-                <div className="border-info/30 bg-info/10 rounded-lg border p-3">
-                  <p className="text-foreground text-xs">
-                    <strong>Note:</strong> Your site must have the GA4 snippet or GTM container
-                    installed. Actuate pushes events via{' '}
-                    <code className="bg-info/10 rounded px-1">gtag()</code> /
-                    <code className="bg-info/10 rounded px-1">dataLayer</code> — it does not load
-                    the GA4 script.
-                  </p>
-                </div>
-              </div>
-            )}
+            <div className="border-info/30 bg-info/10 rounded-lg border p-3">
+              <p className="text-foreground text-xs">
+                <strong>Note:</strong> Your site must have the GA4 snippet or GTM container
+                installed. Actuate pushes events via{' '}
+                <code className="bg-info/10 rounded px-1">gtag()</code> /
+                <code className="bg-info/10 rounded px-1">dataLayer</code> — it does not load the
+                GA4 script.
+              </p>
+            </div>
           </div>
         )}
       </div>
+
+      <div className="flex justify-end">
+        <button className={btnPrimary} onClick={onSave} disabled={saving}>
+          {saving ? (
+            <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+          ) : (
+            <Save className="h-4 w-4" aria-hidden />
+          )}
+          {saving ? 'Saving…' : 'Save Analytics'}
+        </button>
+      </div>
     </div>
   )
 }
+
+// ─── New form ───────────────────────────────────────────────────────────────
+
+function NewFormEditor({ onNavigate }: { onNavigate?: (path: string) => void }) {
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [status, setStatus] = useState<FormStatus>('active')
+  const [fields, setFields] = useState<FormField[]>([])
+  const [saving, setSaving] = useState(false)
+  const [dirty, setDirty] = useState(false)
+
+  useNavigationBlocker(dirty && !saving)
+
+  async function handleCreate() {
+    setSaving(true)
+    const res = await createForm({ name, description, status, fields })
+    setSaving(false)
+    if (res.error || !res.data) {
+      toast.error(res.error ?? 'Failed to create form')
+      return
+    }
+    setDirty(false)
+    toast.success('Form created. Configure notifications, embed, and integrations here.')
+    emitFormsChanged()
+    onNavigate?.(`/forms/${res.data.id}/edit`)
+  }
+
+  return (
+    <div className="max-w-4xl p-3 pr-6 sm:p-4 sm:pr-8">
+      <div className="mb-6 flex items-center gap-3">
+        <button
+          onClick={() => onNavigate?.('/forms')}
+          aria-label="Back to forms"
+          className="hover:bg-muted focus-visible:ring-ring rounded-lg p-2 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+        >
+          <ArrowLeft className="text-muted-foreground h-5 w-5" aria-hidden />
+        </button>
+        <h1 className="text-foreground flex-1 text-xl font-medium">New Form</h1>
+        <button
+          onClick={() => void handleCreate()}
+          disabled={saving || !name.trim()}
+          className={btnPrimary}
+        >
+          {saving ? (
+            <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+          ) : (
+            <Save className="h-4 w-4" aria-hidden />
+          )}
+          {saving ? 'Creating…' : 'Create Form'}
+        </button>
+      </div>
+
+      <div className="border-border bg-card mb-4 rounded-lg border p-4">
+        <div className="grid gap-4">
+          <Field label="Form Name">
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => {
+                setName(e.target.value)
+                setDirty(true)
+              }}
+              placeholder="e.g. Contact Form"
+              className={inputCls}
+            />
+          </Field>
+          <Field label="Description">
+            <input
+              type="text"
+              value={description}
+              onChange={(e) => {
+                setDescription(e.target.value)
+                setDirty(true)
+              }}
+              placeholder="Brief description of this form"
+              className={inputCls}
+            />
+          </Field>
+          <Field label="Status">
+            <select
+              value={status}
+              onChange={(e) => setStatus(e.target.value as FormStatus)}
+              className="border-border bg-input-background text-foreground focus-visible:ring-ring rounded-lg border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
+            >
+              <option value="active">Active</option>
+              <option value="draft">Draft</option>
+            </select>
+          </Field>
+        </div>
+      </div>
+
+      <div className="border-border bg-card rounded-lg border p-4">
+        <h2 className="text-foreground mb-3 text-base font-medium">Fields</h2>
+        <FieldsPanel
+          fields={fields}
+          onChange={(next) => {
+            setFields(next)
+            setDirty(true)
+          }}
+          hasSubmissions={false}
+        />
+      </div>
+
+      <p className="text-muted-foreground mt-4 text-sm">
+        Confirmation, notifications, analytics, embed, and integrations are configured after the
+        form is created.
+      </p>
+    </div>
+  )
+}
+
+// ─── Shared bits ────────────────────────────────────────────────────────────
+
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string
+  hint?: string
+  children: React.ReactNode
+}) {
+  return (
+    <label className="block">
+      <span className="text-foreground mb-1 block text-sm font-medium">{label}</span>
+      {children}
+      {hint && <span className="text-muted-foreground mt-1 block text-xs">{hint}</span>}
+    </label>
+  )
+}