import { defineRouteConfig } from "@medusajs/admin-sdk"
import { Container, Heading, Button, Input, Label, Textarea } from "@medusajs/ui"
import { useState, useEffect, useRef } from "react"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { useNavigate, useParams, useSearchParams } from "react-router-dom"
import { sdk } from "../../../../lib/sdk"
import { toAbsoluteMediaUrl } from "../../../../lib/media-url"
import { showConfirm } from "../../../../lib/confirm"
import { DynamicFieldRenderer, ImageUploadProvider } from "../../../../components/DynamicFieldRenderer"
import { CmsLanguageDropdown } from "../../../../components/CmsLanguageDropdown"
import Swal from "sweetalert2"
import { isDevOnlyFeaturesEnabled } from "../../../../lib/feature-flags"
import { useTranslation } from "react-i18next"
import { normalizeValue, isContentEqual, deepClone } from "../../../../lib/cms-utils"
import isEqual from "lodash/isEqual"

// ---------------------------------------------------------------------------
// BrochurePanel — shown only on the Services page edit screen
// ---------------------------------------------------------------------------
function BrochurePanel({ pageId, initialMeta }: { pageId: string; initialMeta: Record<string, unknown> | null }) {
  const { t } = useTranslation()
  const [brochureUrl, setBrochureUrl] = useState(typeof initialMeta?.brochure_url === "string" ? initialMeta.brochure_url : "")
  const [brochureFilename, setBrochureFilename] = useState(typeof initialMeta?.brochure_filename === "string" ? initialMeta.brochure_filename : "")
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [isBusy, setIsBusy] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

  const previewUrl = toAbsoluteMediaUrl(brochureUrl)

  const handleSave = async () => {
    setIsBusy(true)
    try {
      let nextUrl = brochureUrl
      let nextFilename = brochureFilename

      if (selectedFile) {
        // Read file as base64 data URL
        const dataUrl = await new Promise<string>((resolve, reject) => {
          const reader = new FileReader()
          reader.onload = () => resolve(String(reader.result || ""))
          reader.onerror = reject
          reader.readAsDataURL(selectedFile)
        })
        const uploadRes = await fetch("/admin/upload", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          credentials: "include",
          body: JSON.stringify({ file: dataUrl, filename: selectedFile.name }),
        })
        const uploadJson = await uploadRes.json()
        if (!uploadRes.ok || !uploadJson?.url) throw new Error(uploadJson?.error || t("adminRoutes.pageBuilder.uploadFailed"))
        nextUrl = uploadJson.url as string
        nextFilename = selectedFile.name
      }

      // Save into page.meta via PUT /admin/pages/:id
      const saveRes = await fetch(`/admin/pages/${pageId}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({
          meta: {
            ...(initialMeta || {}),
            brochure_url: nextUrl,
            brochure_filename: nextFilename,
          },
        }),
      })
      if (!saveRes.ok) {
        const err = await saveRes.json().catch(() => ({}))
        throw new Error((err as { message?: string })?.message || t("adminRoutes.pageBuilder.saveFailed"))
      }
      setBrochureUrl(nextUrl)
      setBrochureFilename(nextFilename)
      setSelectedFile(null)
      if (fileInputRef.current) fileInputRef.current.value = ""
      await Swal.fire({ icon: "success", title: t("adminRoutes.pageBuilder.savedTitle"), text: t("adminRoutes.pageBuilder.brochureSaved"), timer: 1800, showConfirmButton: false })
    } catch (err) {
      await Swal.fire({ icon: "error", title: t("adminRoutes.pageBuilder.failedTitle"), text: (err as Error).message || t("adminRoutes.pageBuilder.genericError") })
    } finally {
      setIsBusy(false)
    }
  }

  const handleRemove = async () => {
    const confirm = await Swal.fire({
      icon: "warning", title: t("adminRoutes.pageBuilder.removeBrochureTitle"),
      text: t("adminRoutes.pageBuilder.removeBrochureText"),
      showCancelButton: true, confirmButtonText: t("adminRoutes.pageBuilder.yesRemove"),
    })
    if (!confirm.isConfirmed) return
    setIsBusy(true)
    try {
      const saveRes = await fetch(`/admin/pages/${pageId}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ meta: { ...(initialMeta || {}), brochure_url: "", brochure_filename: "" } }),
      })
      if (!saveRes.ok) throw new Error(t("adminRoutes.pageBuilder.removeFailed"))
      setBrochureUrl("")
      setBrochureFilename("")
      setSelectedFile(null)
      if (fileInputRef.current) fileInputRef.current.value = ""
      await Swal.fire({ icon: "success", title: t("adminRoutes.pageBuilder.removedTitle"), timer: 1500, showConfirmButton: false })
    } catch (err) {
      await Swal.fire({ icon: "error", title: t("adminRoutes.pageBuilder.failedTitle"), text: (err as Error).message })
    } finally {
      setIsBusy(false)
    }
  }

  return (
    <div className="mb-8 border border-ui-border-base rounded-lg p-4 bg-ui-bg-subtle max-w-xl">
      <div className="flex items-center justify-between mb-3">
        <Heading level="h2" className="text-base">{t("adminRoutes.pageBuilder.downloadBrochureFile")}</Heading>
        {brochureUrl && (
          <button
            type="button"
            onClick={() => window.open(previewUrl, "_blank", "noopener,noreferrer")}
            className="text-xs text-blue-600 hover:underline"
          >
            {t("adminRoutes.pageBuilder.previewCurrentFile")} ↗
          </button>
        )}
      </div>

      {brochureUrl ? (
        <div className="text-sm text-ui-fg-subtle mb-3 flex items-center gap-2">
          <span>📎</span>
          <span className="truncate">{brochureFilename || t("adminRoutes.pageBuilder.uploadedFile")}</span>
          <button
            type="button"
            onClick={handleRemove}
            disabled={isBusy}
            className="ml-auto text-red-500 hover:text-red-700 text-xs flex-shrink-0"
          >
            {t("adminRoutes.common.delete")}
          </button>
        </div>
      ) : (
        <p className="text-sm text-ui-fg-subtle mb-3">{t("adminRoutes.pageBuilder.noBrochureUploaded")}</p>
      )}

      <div className="flex flex-col gap-2">
        <Label className="text-sm">{brochureUrl ? t("adminRoutes.pageBuilder.replaceBrochure") : t("adminRoutes.pageBuilder.uploadBrochure")} (PDF, DOC, DOCX)</Label>
        <input
          ref={fileInputRef}
          type="file"
          accept=".pdf,.doc,.docx,.ppt,.pptx"
          onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
          disabled={isBusy}
          className="text-sm"
        />
        {selectedFile && (
          <span className="text-xs text-ui-fg-subtle">
            {t("adminRoutes.pageBuilder.selected")} <strong>{selectedFile.name}</strong> ({(selectedFile.size / 1024).toFixed(1)} KB)
          </span>
        )}
        <div className="flex justify-end mt-1">
          <Button
            size="small"
            isLoading={isBusy}
            disabled={!selectedFile && !brochureUrl}
            onClick={handleSave}
          >
            {selectedFile ? t("adminRoutes.pageBuilder.uploadSaveBrochure") : t("adminRoutes.pageBuilder.saveBrochure")}
          </Button>
        </div>
      </div>
    </div>
  )
}

type FieldDef = { id: string; api_key: string; label: string; field_type: string; required?: boolean; default_value?: unknown; validation_rules?: Record<string, unknown> }
type Component = {
  page_component_id: string
  position: number
  instance: { id: string; data: Record<string, unknown> }
  type: { id: string; name: string; display_name: string; folder_name?: string | null; repeatable?: boolean }
  fields: (FieldDef & { nested_component_display_name?: string; nested_component_repeatable?: boolean; nested_component_fields?: FieldDef[] })[]
}

type Section = {
  id: string
  name: string
  position: number
  components: Component[]
}

const CMS_LOCALE_STORAGE_KEY = "biomket.cms.selected-locale"
const DEFAULT_LOCALE_OPTION = "__default__"

function hasLocalizedShape(value: unknown): value is Record<string, unknown> {
  if (!value || typeof value !== "object" || Array.isArray(value)) return false
  const record = value as Record<string, unknown>
  return "default" in record || Object.keys(record).some((key) => key.includes("-"))
}

function getActivePreviewLocale(): string {
  if (typeof window === "undefined") return DEFAULT_LOCALE_OPTION
  return window.localStorage.getItem(CMS_LOCALE_STORAGE_KEY) || DEFAULT_LOCALE_OPTION
}

function resolveLocalizedPreviewValue(raw: unknown): unknown {
  const activeLocale = getActivePreviewLocale()
  if (!hasLocalizedShape(raw)) {
    return activeLocale === DEFAULT_LOCALE_OPTION ? raw : ""
  }

  const record = raw as Record<string, unknown>
  if (!activeLocale || activeLocale === DEFAULT_LOCALE_OPTION) {
    return record.default
  }
  if (record[activeLocale] !== undefined) return record[activeLocale]
  const languageCode = activeLocale.split("-")[0]
  if (languageCode && record[languageCode] !== undefined) return record[languageCode]
  return ""
}

function itemLabel(item: Record<string, unknown>, fallback: string): string {
  for (const k of ["name", "title", "heading", "label", "text", "content", "description"]) {
    const v = resolveLocalizedPreviewValue(item?.[k])
    if (typeof v === "string" && v.trim()) return v.trim()
  }
  if (item && typeof item === "object") {
    for (const raw of Object.values(item)) {
      const v = resolveLocalizedPreviewValue(raw)
      if (typeof v === "string" && v.trim()) return v.trim().slice(0, 80)
    }
  }
  return fallback
}

function componentSummary(comp: Component, data: Record<string, unknown> | { items?: Record<string, unknown>[] }): string | null {
  const raw = data || comp.instance.data
  const items = raw && typeof raw === "object" && Array.isArray((raw as { items?: unknown }).items)
    ? (raw as { items: Record<string, unknown>[] }).items
    : null
  if (items && items.length > 0) {
    const keys = ["title", "heading", "name", "label"]
    for (const k of keys) {
      const v = resolveLocalizedPreviewValue(items[0][k])
      if (typeof v === "string" && v.trim()) return `${items.length} item(s) · ${v.trim()}`
    }
    return `${items.length} item(s)`
  }
  const d = raw as Record<string, unknown>
  for (const k of ["title", "heading", "name", "label"]) {
    const v = resolveLocalizedPreviewValue(d?.[k])
    if (typeof v === "string" && v.trim()) return v.trim()
  }
  return null
}

function normalizeRepeatableData(instanceData: Record<string, unknown>): { items: Record<string, unknown>[] } {
  const d = instanceData || {}
  if (d.items && Array.isArray(d.items)) return { items: d.items as Record<string, unknown>[] }
  if (typeof d === "object" && d !== null && !Array.isArray(d) && Object.keys(d).length > 0 && !("items" in d))
    return { items: [{ ...d }] }
  return { items: [{}] }
}

function getPageBuilderNetworkErrorMessage() {
  const origin =
    typeof window !== "undefined" && window.location?.origin
      ? window.location.origin
      : "the current admin URL"

  return `Failed to save. The request did not reach the admin API. If your session expired, refresh and sign in again. Otherwise make sure the backend is reachable at ${origin}.`
}

export const config = defineRouteConfig({})

export default function EditPage() {
  const { t } = useTranslation()
  const params = useParams<{ id: string }>()
  const [searchParams] = useSearchParams()
  const id = params.id ?? searchParams.get("id") ?? undefined
  const navigate = useNavigate()
  const qc = useQueryClient()
  const [slug, setSlug] = useState("")
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [status, setStatus] = useState("draft")
  const [showPicker, setShowPicker] = useState(false)
  const [showComponentPickerForSectionId, setShowComponentPickerForSectionId] = useState<string | null>(null)
  const [expandedSectionId, setExpandedSectionId] = useState<string | null>(null)
  const [expandedComponentInstanceId, setExpandedComponentInstanceId] = useState<string | null>(null)
  const [sectionData, setSectionData] = useState<Record<string, Record<string, unknown> | { items: Record<string, unknown>[] }>>({})
  const [sectionNameDraft, setSectionNameDraft] = useState<Record<string, string>>({})
  const [successMessage, setSuccessMessage] = useState<string | null>(null)
  const [pageError, setPageError] = useState<string | null>(null)
  const [sectionErrors, setSectionErrors] = useState<Record<string, Record<string, string>>>({})
  const [lastSaved, setLastSaved] = useState<{ slug: string; title: string; description: string; status: string; sectionData: any; sectionNames: any } | null>(null)
  const [activeLocale, setActiveLocale] = useState<string>("__default__")

  const isDefaultLocaleSelected = (locale: string | null | undefined) => {
    if (!locale) return true
    const normalized = locale.trim().toLowerCase()
    return normalized === DEFAULT_LOCALE_OPTION || normalized === "default"
  }
  const getActiveLocale = () => {
    if (typeof window === "undefined") return DEFAULT_LOCALE_OPTION
    return window.localStorage.getItem(CMS_LOCALE_STORAGE_KEY) || DEFAULT_LOCALE_OPTION
  }
  const resolveLocalizedForValidation = (rawValue: unknown): unknown => {
    if (!rawValue || typeof rawValue !== "object" || Array.isArray(rawValue)) return rawValue
    const valueRecord = rawValue as Record<string, unknown>
    const hasLocalizedShape = "default" in valueRecord || Object.keys(valueRecord).some((key) => key.includes("-"))
    if (!hasLocalizedShape) return rawValue

    const activeLocale = getActiveLocale()
    if (!activeLocale || activeLocale === DEFAULT_LOCALE_OPTION) {
      return valueRecord.default
    }
    if (valueRecord[activeLocale] !== undefined) return valueRecord[activeLocale]
    const languageCode = activeLocale.split("-")[0]
    if (languageCode && valueRecord[languageCode] !== undefined) return valueRecord[languageCode]
    return ""
  }
  const resolveLocalizedPageField = (
    meta: Record<string, unknown> | null | undefined,
    fieldKey: "title" | "description",
    baseValue: string
  ) => {
    if (isDefaultLocaleSelected(activeLocale)) return baseValue
    const localizedContainer = (meta?.localized ?? {}) as Record<string, unknown>
    const fieldMap = (localizedContainer[fieldKey] ?? {}) as Record<string, unknown>
    if (typeof fieldMap[activeLocale] === "string") return String(fieldMap[activeLocale])
    const languageCode = activeLocale.split("-")[0]
    if (languageCode && typeof fieldMap[languageCode] === "string") return String(fieldMap[languageCode])
    return ""
  }

  const isRequiredEmpty = (value: unknown, fieldType: string): boolean => {
    const resolvedValue = resolveLocalizedForValidation(value)
    if (resolvedValue === undefined || resolvedValue === null) return true
    if (fieldType === "number") return resolvedValue === ""
    if (fieldType === "boolean") return false
    if (fieldType === "image") return resolvedValue === "" || resolvedValue === null || resolvedValue === undefined
    if (typeof resolvedValue === "string") return resolvedValue.trim() === ""
    return false
  }

  const { data: pageData, isError, error } = useQuery({
    queryKey: ["page", id],
    queryFn: async () => {
      const r = await sdk.fetch(`/admin/pages/${id}`)
      if (!r.ok) {
        const e = new Error(r.status === 404 ? "Not found" : "Failed") as Error & { status?: number }
        e.status = r.status
        throw e
      }
      return r.json() as Promise<{ page: { id: string; slug: string; title: string; description?: string; status: string; meta?: Record<string, unknown> | null; sections: Section[] } }>
    },
    enabled: !!id,
  })

  const { data: typesData } = useQuery({
    queryKey: ["component-types"],
    queryFn: async () => {
      const r = await sdk.fetch("/admin/component-types")
      if (!r.ok) throw new Error("Failed")
      return r.json() as Promise<{ component_types: { id: string; display_name: string }[] }>
    },
    enabled: showPicker || showComponentPickerForSectionId != null,
  })

  const page = pageData?.page
  const sections = (page?.sections ?? []) as Section[]
  const allComponents = sections.flatMap((sec) => sec.components)

  useEffect(() => {
    const getStoredLocale = () => {
      if (typeof window === "undefined") return DEFAULT_LOCALE_OPTION
      return window.localStorage.getItem(CMS_LOCALE_STORAGE_KEY) || DEFAULT_LOCALE_OPTION
    }
    setActiveLocale(getStoredLocale())
    const onLocaleChanged = (event: Event) => {
      const customEvent = event as CustomEvent<{ locale?: string }>
      setActiveLocale(customEvent.detail?.locale || getStoredLocale())
    }
    window.addEventListener("cms:locale-changed", onLocaleChanged as EventListener)
    return () => window.removeEventListener("cms:locale-changed", onLocaleChanged as EventListener)
  }, [])

  useEffect(() => {
    if (page) {
      const nextSlug = page.slug
      const nextTitle = resolveLocalizedPageField(page.meta ?? null, "title", page.title)
      const nextDescription = resolveLocalizedPageField(page.meta ?? null, "description", page.description ?? "")
      setSlug(isDefaultLocaleSelected(activeLocale) && !nextSlug ? page.slug : nextSlug)
      setTitle(isDefaultLocaleSelected(activeLocale) && !nextTitle ? page.title : nextTitle)
      setDescription(isDefaultLocaleSelected(activeLocale) && !nextDescription ? (page.description ?? "") : nextDescription)
      setStatus(page.status)
      const localizedSectionsContainer = (((page.meta ?? {}) as Record<string, unknown>).localized_sections ?? {}) as Record<string, unknown>
      const nextSectionDrafts: Record<string, string> = {}
      sections.forEach((sec) => {
        if (isDefaultLocaleSelected(activeLocale)) {
          nextSectionDrafts[sec.id] = sec.name
          return
        }
        const sectionLocalizedMap = (localizedSectionsContainer[sec.id] ?? {}) as Record<string, unknown>
        if (typeof sectionLocalizedMap[activeLocale] === "string") {
          nextSectionDrafts[sec.id] = String(sectionLocalizedMap[activeLocale])
          return
        }
        const languageCode = activeLocale.split("-")[0]
        if (languageCode && typeof sectionLocalizedMap[languageCode] === "string") {
          nextSectionDrafts[sec.id] = String(sectionLocalizedMap[languageCode])
          return
        }
        nextSectionDrafts[sec.id] = ""
      })
      setSectionNameDraft(nextSectionDrafts)
      const d: Record<string, Record<string, unknown> | { items: Record<string, unknown>[] }> = {}
      sections.forEach((sec) => sec.components.forEach((c) => {
        d[c.instance.id] = (c.type as { repeatable?: boolean }).repeatable
          ? normalizeRepeatableData(c.instance.data as Record<string, unknown>)
          : { ...(c.instance.data as Record<string, unknown>) }
      }))
      setSectionData((prev) => {
        const next: Record<string, Record<string, unknown> | { items: Record<string, unknown>[] }> = {}
        sections.forEach((sec) => sec.components.forEach((c) => {
          next[c.instance.id] = prev[c.instance.id] !== undefined ? prev[c.instance.id] : ((c.type as { repeatable?: boolean }).repeatable
            ? normalizeRepeatableData(deepClone(c.instance.data) as Record<string, unknown>)
            : deepClone(c.instance.data as Record<string, unknown>))
        }))
        return next
      })
      setLastSaved({
        slug: page.slug,
        title: resolveLocalizedPageField(page.meta ?? null, "title", page.title),
        description: resolveLocalizedPageField(page.meta ?? null, "description", page.description ?? ""),
        status: page.status,
        sectionData: normalizeValue(d),
        sectionNames: normalizeValue(nextSectionDrafts),
      })
    }
  }, [page, sections, activeLocale])

  const savePage = useMutation({
    mutationFn: async () => {
      setPageError(null)
      if (!slug?.trim()) {
        throw new Error(t("adminRoutes.pageBuilder.slugRequired"))
      }
      if (!title?.trim()) {
        throw new Error(t("adminRoutes.pageBuilder.titleRequired"))
      }
      const sectionErrMap: Record<string, Record<string, string>> = {}
      for (const comp of allComponents) {
        const raw = sectionData[comp.instance.id] ?? comp.instance.data
        const isRepeatable = (comp.type as { repeatable?: boolean }).repeatable
        if (isRepeatable && raw && typeof raw === "object" && "items" in raw && Array.isArray((raw as { items: unknown[] }).items)) {
          const items = (raw as { items: Record<string, unknown>[] }).items
          items.forEach((item, idx) => {
            for (const f of comp.fields) {
              if (f.field_type === "component" && f.nested_component_fields?.length) {
                const val = item[f.api_key]
                const isNestedRepeatable = !!f.nested_component_repeatable
                if (isNestedRepeatable && val && typeof val === "object" && "items" in val && Array.isArray((val as { items: unknown[] }).items)) {
                  (val as { items: Record<string, unknown>[] }).items.forEach((nItem, nIdx) => {
                    f.nested_component_fields!.forEach((nf) => {
                      if (nf.required && isRequiredEmpty(nItem[nf.api_key], nf.field_type)) {
                        if (!sectionErrMap[comp.instance.id]) sectionErrMap[comp.instance.id] = {}
                        sectionErrMap[comp.instance.id][`${idx}_${f.api_key}_${nIdx}_${nf.api_key}`] = "Required"
                      }
                    })
                  })
                } else if (!isNestedRepeatable && Array.isArray(val)) {
                  val.forEach((block, bIdx) => {
                    f.nested_component_fields!.forEach((nf) => {
                      if (nf.required && isRequiredEmpty((block as Record<string, unknown>)[nf.api_key], nf.field_type)) {
                        if (!sectionErrMap[comp.instance.id]) sectionErrMap[comp.instance.id] = {}
                        sectionErrMap[comp.instance.id][`${idx}_${f.api_key}_${bIdx}_${nf.api_key}`] = "Required"
                      }
                    })
                  })
                }
              } else if (f.required && isRequiredEmpty(item[f.api_key], f.field_type)) {
                if (!sectionErrMap[comp.instance.id]) sectionErrMap[comp.instance.id] = {}
                sectionErrMap[comp.instance.id][`${idx}_${f.api_key}`] = "Required"
              }
            }
          })
        } else {
          const data = raw as Record<string, unknown>
          for (const f of comp.fields) {
            if (f.field_type === "component" && f.nested_component_fields?.length) {
              const val = data?.[f.api_key]
              const isNestedRepeatable = !!f.nested_component_repeatable
              if (isNestedRepeatable && val && typeof val === "object" && "items" in val && Array.isArray((val as { items: unknown[] }).items)) {
                (val as { items: Record<string, unknown>[] }).items.forEach((item, idx) => {
                  f.nested_component_fields!.forEach((nf) => {
                    if (nf.required && isRequiredEmpty(item[nf.api_key], nf.field_type)) {
                      if (!sectionErrMap[comp.instance.id]) sectionErrMap[comp.instance.id] = {}
                      sectionErrMap[comp.instance.id][`${f.api_key}_${idx}_${nf.api_key}`] = "Required"
                    }
                  })
                })
              } else if (!isNestedRepeatable && Array.isArray(val)) {
                val.forEach((block, idx) => {
                  f.nested_component_fields!.forEach((nf) => {
                    if (nf.required && isRequiredEmpty((block as Record<string, unknown>)[nf.api_key], nf.field_type)) {
                      if (!sectionErrMap[comp.instance.id]) sectionErrMap[comp.instance.id] = {}
                      sectionErrMap[comp.instance.id][`${f.api_key}_${idx}_${nf.api_key}`] = "Required"
                    }
                  })
                })
              }
            } else if (f.required && isRequiredEmpty(data?.[f.api_key], f.field_type)) {
              if (!sectionErrMap[comp.instance.id]) sectionErrMap[comp.instance.id] = {}
              sectionErrMap[comp.instance.id][f.api_key] = "Required"
            }
          }
        }
      }
      if (Object.keys(sectionErrMap).length > 0) {
        setSectionErrors((prev) => ({ ...prev, ...sectionErrMap }))
        throw new Error(t("adminRoutes.pageBuilder.fillRequiredSections"))
      }
      const wrapFetch = async (fn: () => Promise<Response>) => {
        try {
          return await fn()
        } catch (e) {
          const err = e as Error
          if (err?.message === "Failed to fetch" || err?.name === "TypeError") {
            throw new Error(getPageBuilderNetworkErrorMessage())
          }
          throw e
        }
      }
      for (const comp of allComponents) {
        const data = sectionData[comp.instance.id] ?? comp.instance.data
        const payload = (typeof data === "object" && data !== null && "items" in data) ? data : { ...(data as Record<string, unknown>) }
        
        // PRODUCTION OPTIMIZATION: Only save if changed
        if (lastSaved && isContentEqual(data, lastSaved.sectionData?.[comp.instance.id])) {
          continue
        }

        const r = await wrapFetch(() => sdk.fetch(`/admin/component-instances/${comp.instance.id}`, {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ data: payload }),
        }))
        let text = await r.text()
        if (!r.ok) {
          if (r.status === 401) {
            await new Promise((resolve) => setTimeout(resolve, 600))
            const r2 = await sdk.fetch(`/admin/component-instances/${comp.instance.id}`, {
              method: "PUT",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ data: payload }),
            })
            text = await r2.text()
            if (!r2.ok) {
              let msg = text
              try { const j = JSON.parse(text); if (j.message) msg = j.message } catch { /* ignore */ }
              throw new Error(msg || "Unauthorized. Please refresh the page and try again.")
            }
          } else {
            let msg = text
            try { const j = JSON.parse(text); if (j.message) msg = j.message } catch { /* ignore */ }
            throw new Error(msg)
          }
        }
        await new Promise((resolve) => setTimeout(resolve, 200))
      }
      const currentMeta = ((page?.meta ?? {}) as Record<string, unknown>)
      const currentLocalized = ((currentMeta.localized ?? {}) as Record<string, unknown>)
      const currentLocalizedTitle = ((currentLocalized.title ?? {}) as Record<string, unknown>)
      const currentLocalizedDescription = ((currentLocalized.description ?? {}) as Record<string, unknown>)
      const currentLocalizedSections = ((currentMeta.localized_sections ?? {}) as Record<string, unknown>)
      const localizedSectionsPayload = sections.reduce<Record<string, unknown>>((acc, sec) => {
        const existing = (currentLocalizedSections[sec.id] ?? {}) as Record<string, unknown>
        acc[sec.id] = {
          ...existing,
          [activeLocale]: sectionNameDraft[sec.id] ?? "",
        }
        return acc
      }, {})

      const pagePayload =
        isDefaultLocaleSelected(activeLocale)
          ? { slug, title, description, status }
          : {
              slug: page?.slug ?? "",
              title: page?.title ?? "",
              description: page?.description ?? "",
              status,
              meta: {
                ...currentMeta,
                localized: {
                  ...currentLocalized,
                  title: {
                    ...currentLocalizedTitle,
                    [activeLocale]: title,
                  },
                  description: {
                    ...currentLocalizedDescription,
                    [activeLocale]: description,
                  },
                },
                localized_sections: localizedSectionsPayload,
              },
            }

      const r = await wrapFetch(() => sdk.fetch(`/admin/pages/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(pagePayload),
      }))
      const text = await r.text()
      if (!r.ok) {
        let msg = text
        try { const j = JSON.parse(text); if (j.message) msg = j.message } catch { /* ignore */ }
        if (r.status === 401) msg = "Unauthorized. Please refresh the page and try again."
        throw new Error(msg)
      }
    },
    onSuccess: () => {
      setLastSaved({ slug, title, description, status, sectionData: normalizeValue(sectionData), sectionNames: normalizeValue(sectionNameDraft) })
      qc.invalidateQueries({ queryKey: ["page", id] })
      setSuccessMessage(t("adminRoutes.pageBuilder.pageSaved"))
      setPageError(null)
      setTimeout(() => setSuccessMessage(null), 3000)
    },
    onError: (e: Error) => {
      const msg =
        e.message === "Failed to fetch"
          ? getPageBuilderNetworkErrorMessage()
          : e.message
      setPageError(msg)
      if (e.message === t("adminRoutes.pageBuilder.fillRequiredSections")) {
        setTimeout(() => setPageError(null), 5000)
      }
    },
  })

  const addSection = useMutation({
    mutationFn: async (name?: string) => {
      const r = await sdk.fetch(`/admin/pages/${id}/sections`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: name || t("adminRoutes.pageBuilder.newSection") }),
      })
      if (!r.ok) throw new Error(await r.text())
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["page", id] })
      setShowPicker(false)
    },
  })

  const addComponentToSection = useMutation({
    mutationFn: async ({ sectionId, componentTypeId }: { sectionId: string; componentTypeId: string }) => {
      const r = await sdk.fetch(`/admin/pages/${id}/sections/${sectionId}/components`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ component_type_id: componentTypeId }),
      })
      if (!r.ok) throw new Error(await r.text())
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["page", id] })
      setShowComponentPickerForSectionId(null)
    },
  })

  const updateSectionName = useMutation({
    mutationFn: async ({ sectionId, name }: { sectionId: string; name: string }) => {
      const r = await sdk.fetch(`/admin/pages/${id}/sections/${sectionId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: name.trim() || t("adminRoutes.pageBuilder.newSection") }),
      })
      if (!r.ok) throw new Error(await r.text())
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: ["page", id] }),
  })

  const removeSectionById = useMutation({
    mutationFn: async (sectionId: string) => {
      const r = await sdk.fetch(`/admin/pages/${id}/sections/${sectionId}`, { method: "DELETE" })
      if (!r.ok) throw new Error(await r.text())
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["page", id] })
      setExpandedSectionId(null)
      setExpandedComponentInstanceId(null)
    },
  })

  const saveSection = useMutation({
    mutationFn: async ({ instanceId, data }: { instanceId: string; data: Record<string, unknown> }) => {
      const r = await sdk.fetch(`/admin/component-instances/${instanceId}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ data }),
      })
      if (!r.ok) throw new Error(await r.text())
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["page", id] })
      setSuccessMessage(t("adminRoutes.pageBuilder.sectionSaved"))
      setTimeout(() => setSuccessMessage(null), 3000)
    },
  })

  const removeComponent = useMutation({
    mutationFn: async (pcId: string) => {
      const r = await sdk.fetch(`/admin/pages/${id}/components/${pcId}`, { method: "DELETE" })
      if (!r.ok) throw new Error(await r.text())
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["page", id] })
      setExpandedComponentInstanceId(null)
    },
  })

  const reorderSections = useMutation({
    mutationFn: async (order: { section_id: string; position: number }[]) => {
      const r = await sdk.fetch(`/admin/pages/${id}/sections/reorder`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ order }),
      })
      if (!r.ok) throw new Error(await r.text())
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: ["page", id] }),
  })

  const reorderComponentsInSection = useMutation({
    mutationFn: async ({ sectionId, order }: { sectionId: string; order: { page_component_id: string; position: number }[] }) => {
      const r = await sdk.fetch(`/admin/pages/${id}/sections/${sectionId}/components/reorder`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ order }),
      })
      if (!r.ok) throw new Error(await r.text())
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: ["page", id] }),
  })

  const notFound = !!id && isError && (error as Error & { status?: number })?.status === 404
  useEffect(() => {
    if (notFound) navigate("/not-found", { replace: true })
  }, [notFound, navigate])
  if (notFound) return null
  if (!page) return <Container><p>{t("adminRoutes.common.loading")}</p></Container>

    const isDirty = lastSaved != null && (
      !isContentEqual(slug, lastSaved.slug) ||
      !isContentEqual(title, lastSaved.title) ||
      !isContentEqual(description, lastSaved.description) ||
      status !== lastSaved.status ||
      !isContentEqual(sectionData, lastSaved.sectionData) ||
      !isContentEqual(sectionNameDraft, lastSaved.sectionNames)
    )

    return (
      <Container className="px-3 sm:px-4 overflow-x-hidden">
        <ImageUploadProvider>
          <CmsLanguageDropdown />
          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center py-4 sm:py-6 gap-4">
            <Heading level="h1" className="text-xl sm:text-2xl truncate min-w-0">{title || page.title}</Heading>
            <div className="flex flex-wrap gap-2">
              <Button variant="secondary" onClick={() => navigate("/page-builder")} className="flex-1 sm:flex-none min-w-0">{t("adminRoutes.pageBuilder.back")}</Button>
              <Button onClick={() => savePage.mutate()} disabled={savePage.isPending || !isDirty} className="flex-1 sm:flex-none min-w-0">{t("adminRoutes.common.save")}</Button>
            </div>
          </div>
        {successMessage && <div className="mb-4 p-3 rounded bg-green-100 text-green-800 text-sm">{successMessage}</div>}
        {pageError && <div className="mb-4 p-3 rounded bg-red-100 text-red-800 text-sm">{pageError}</div>}
        <div className="grid gap-4 w-full max-w-xl mb-6 sm:mb-8">

          <div>
            <Label>{t("adminRoutes.pageBuilder.titleLabel")}</Label>
            <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder={t("adminRoutes.pageBuilder.required")} />
          </div>
          <div>
            <Label>{t("adminRoutes.pageBuilder.slugLabel")}</Label>
            <Input
              value={slug}
              onChange={() => {}}
              placeholder={t("adminRoutes.pageBuilder.required")}
              disabled
            />
          </div>

          <div>
            <Label>{t("adminRoutes.pageBuilder.descriptionLabel")}</Label>
            <Textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={4}
              placeholder={t("adminRoutes.pageBuilder.descriptionPlaceholder")}
              className="w-full"
            />
          </div>
          <div>
            <Label>{t("adminRoutes.pageBuilder.statusLabel")}</Label>
            <select value={status} onChange={(e) => setStatus(e.target.value)} className="border rounded px-2 py-1 w-full max-w-xl">
              <option value="draft">{t("adminRoutes.pageBuilder.draft")}</option>
              <option value="published">{t("adminRoutes.pageBuilder.published")}</option>
            </select>
          </div>
        </div>

        {/* Brochure Upload — only shown on the Services page */}
        {page.slug === "services" && (
          <BrochurePanel pageId={page.id} initialMeta={(page as { meta?: Record<string, unknown> | null }).meta ?? null} />
        )}

        <Heading level="h2" className="mb-4">{t("adminRoutes.pageBuilder.sections")}</Heading>
        <div className="relative mb-4">
          {isDevOnlyFeaturesEnabled && <Button onClick={() => setShowPicker(!showPicker)}>{t("adminRoutes.pageBuilder.addSection")}</Button>}
          {showPicker && (
            <div className="absolute left-0 right-0 sm:right-auto top-full mt-1 border rounded bg-ui-bg-base shadow z-[100] p-2 min-w-[200px] w-full sm:w-auto max-h-[50vh] overflow-y-auto">
              <form onSubmit={(e) => { e.preventDefault(); const n = (e.currentTarget.elements.namedItem("sectionName") as HTMLInputElement)?.value; addSection.mutate(n || undefined); }}>
                <Input name="sectionName" placeholder={t("adminRoutes.pageBuilder.sectionName")} className="mb-2" />
                <Button type="submit" size="small">{t("adminRoutes.pageBuilder.createSection")}</Button>
              </form>
            </div>
          )}
        </div>
        <ul className="space-y-2">
          {sections.map((sec, secIdx) => (
            <li key={sec.id} className="border rounded overflow-visible">
              <div
                className="flex flex-wrap items-center gap-2 p-3 bg-ui-bg-subtle min-w-0 cursor-pointer"
                onClick={() => setExpandedSectionId(expandedSectionId === sec.id ? null : sec.id)}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setExpandedSectionId(expandedSectionId === sec.id ? null : sec.id); } }}
                aria-expanded={expandedSectionId === sec.id}
                aria-label={expandedSectionId === sec.id ? "Collapse section" : "Expand section"}
              >
                <span className="flex-shrink-0 text-ui-fg-muted" aria-hidden="true">
                  {expandedSectionId === sec.id ? "▼" : "▶"}
                </span>
                <Input
                  value={sectionNameDraft[sec.id] ?? (isDefaultLocaleSelected(activeLocale) ? sec.name : "")}
                  onChange={(e) => setSectionNameDraft((prev) => ({ ...prev, [sec.id]: e.target.value }))}
                  onBlur={() => {
                    const fallback = isDefaultLocaleSelected(activeLocale) ? sec.name : ""
                    const v = (sectionNameDraft[sec.id] ?? fallback).trim()
                    if (v === (isDefaultLocaleSelected(activeLocale) ? sec.name : (sectionNameDraft[sec.id] || ""))) {
                      return
                    }
                    setSectionNameDraft((prev) => { const o = { ...prev }; delete o[sec.id]; return o })
                    if (isDefaultLocaleSelected(activeLocale)) {
                      if (v && v !== sec.name) updateSectionName.mutate({ sectionId: sec.id, name: v })
                    } else {
                      setSectionNameDraft((prev) => ({ ...prev, [sec.id]: v }))
                    }
                  }}
                  onClick={(e) => e.stopPropagation()}
                  className="max-w-[200px] font-medium"
                  placeholder={t("adminRoutes.pageBuilder.sectionName")}
                />
                <div className="flex-1 min-w-2" />
                <div className="flex flex-wrap gap-1 justify-end w-full sm:w-auto" onClick={(e) => e.stopPropagation()}>
                  {isDevOnlyFeaturesEnabled && (
                    <div className="relative">
                      <Button size="small" variant="secondary" onClick={() => setShowComponentPickerForSectionId(showComponentPickerForSectionId === sec.id ? null : sec.id)}>{t("adminRoutes.pageBuilder.addComponent")}</Button>
                      {showComponentPickerForSectionId === sec.id && typesData?.component_types && (
                        <div className="absolute left-0 right-0 sm:right-auto top-full mt-1 border rounded bg-ui-bg-base shadow z-[100] p-2 min-w-[200px] w-full sm:w-auto max-h-[50vh] overflow-y-auto">
                          {typesData.component_types.map((t) => (
                            <button key={t.id} type="button" className="block w-full text-left px-3 py-2 hover:bg-ui-bg-base-hover rounded" onClick={() => addComponentToSection.mutate({ sectionId: sec.id, componentTypeId: t.id })}>{t.display_name}</button>
                          ))}
                        </div>
                      )}
                    </div>
                  )}
                  {sec.id !== "_uncategorized" && (
                    <>
                      {isDevOnlyFeaturesEnabled && <Button size="small" variant="transparent" onClick={() => { const sorted = [...sections].sort((a, b) => a.position - b.position); const i = sorted.findIndex((s) => s.id === sec.id); if (i <= 0) return; const t = sorted[i]; sorted.splice(i, 1); sorted.splice(i - 1, 0, t); reorderSections.mutate(sorted.map((s, j) => ({ section_id: s.id, position: j }))); }}>↑</Button>}
                      {isDevOnlyFeaturesEnabled && <Button size="small" variant="transparent" onClick={() => { const sorted = [...sections].sort((a, b) => a.position - b.position); const i = sorted.findIndex((s) => s.id === sec.id); if (i < 0 || i >= sorted.length - 1) return; const t = sorted[i]; sorted.splice(i, 1); sorted.splice(i + 1, 0, t); reorderSections.mutate(sorted.map((s, j) => ({ section_id: s.id, position: j }))); }}>↓</Button>}
                      {isDevOnlyFeaturesEnabled && <Button size="small" variant="secondary" onClick={() => showConfirm({ title: t("adminRoutes.pageBuilder.removeSectionTitle"), text: t("adminRoutes.pageBuilder.removeSectionText") }).then((r) => r.isConfirmed && removeSectionById.mutate(sec.id))}>{t("adminRoutes.pageBuilder.removeSection")}</Button>}
                    </>
                  )}
                </div>
              </div>
              {expandedSectionId === sec.id && (
                <div className="p-3 sm:p-4 border-t border-ui-border-base space-y-2 min-w-0">
                  {sec.components.length === 0 ? (
                    <p className="text-ui-fg-muted text-sm">{t("adminRoutes.pageBuilder.noComponents")}</p>
                  ) : (
                    <ul className="space-y-2">
                      {sec.components.map((comp, compIdx) => (
                        <li key={comp.page_component_id} className="border rounded overflow-hidden border-ui-border-base">
                          <div className="flex flex-wrap items-center gap-2 p-2 bg-ui-bg-subtle cursor-pointer min-w-0" onClick={() => setExpandedComponentInstanceId(expandedComponentInstanceId === comp.instance.id ? null : comp.instance.id)}>
                            <span className="text-ui-fg-muted flex-shrink-0">⋮⋮</span>
                            <span className="font-medium truncate min-w-0">{comp.type.display_name}</span>
                            {(() => { const s = componentSummary(comp, sectionData[comp.instance.id] ?? {}); return s ? <span className="text-ui-fg-muted text-sm truncate min-w-0">— {s}</span> : null })()}
                            {comp.type.folder_name && <span className="text-ui-fg-subtle text-sm flex-shrink-0">({comp.type.folder_name})</span>}
                            <div className="flex-1 min-w-2" />
                            <div className="flex flex-wrap gap-1 justify-end w-full sm:w-auto" onClick={(e) => e.stopPropagation()}>
                              {isDevOnlyFeaturesEnabled && (comp.type as { repeatable?: boolean }).repeatable && (
                                <Button
                                  size="small"
                                  variant="secondary"
                                  title="Add another item (repeatable)"
                                  onClick={(e) => {
                                    e.stopPropagation()
                                    setSectionData((prev) => {
                                      const raw = prev[comp.instance.id]
                                      const current = (raw && typeof raw === "object" && "items" in raw && Array.isArray((raw as { items: unknown[] }).items))
                                        ? (raw as { items: Record<string, unknown>[] }).items
                                        : (() => {
                                          const instData = comp.instance.data
                                          if (instData && typeof instData === "object" && "items" in instData && Array.isArray((instData as { items: unknown[] }).items))
                                            return (instData as { items: Record<string, unknown>[] }).items
                                          if (instData && typeof instData === "object" && instData !== null && !Array.isArray(instData) && Object.keys(instData).length > 0 && !("items" in instData))
                                            return [{ ...instData }]
                                          return [{}]
                                        })()
                                      return { ...prev, [comp.instance.id]: { items: [...current, {}] } }
                                    })
                                    setExpandedComponentInstanceId(comp.instance.id)
                                  }}
                                >
                                  +
                                </Button>
                              )}
                              {isDevOnlyFeaturesEnabled && <Button size="small" variant="transparent" onClick={(e) => { e.stopPropagation(); navigate(`/component-builder/types/${comp.type.id}`); }}>Open</Button>}
                              {isDevOnlyFeaturesEnabled && <Button size="small" variant="transparent" onClick={(e) => { e.stopPropagation(); const comps = [...sec.components]; const t = comps[compIdx]; comps.splice(compIdx, 1); comps.splice(Math.max(0, compIdx - 1), 0, t); reorderComponentsInSection.mutate({ sectionId: sec.id, order: comps.map((c, j) => ({ page_component_id: c.page_component_id, position: j })) }); }}>↑</Button>}
                              {isDevOnlyFeaturesEnabled && <Button size="small" variant="transparent" onClick={(e) => { e.stopPropagation(); const comps = [...sec.components]; const t = comps[compIdx]; comps.splice(compIdx, 1); comps.splice(Math.min(comps.length, compIdx + 2), 0, t); reorderComponentsInSection.mutate({ sectionId: sec.id, order: comps.map((c, j) => ({ page_component_id: c.page_component_id, position: j })) }); }}>↓</Button>}
                              {isDevOnlyFeaturesEnabled && <Button size="small" variant="secondary" onClick={(e) => { e.stopPropagation(); showConfirm({ title: "Remove component?", text: "This component will be removed from the section." }).then((r) => r.isConfirmed && removeComponent.mutate(comp.page_component_id)); }}>Remove</Button>}
                            </div>
                          </div>
                          {expandedComponentInstanceId === comp.instance.id && (
                            <div className="p-3 sm:p-4 border-t grid gap-3 min-w-0">
                              {(() => {
                                const isRepeatableType = !!(comp.type as { repeatable?: boolean }).repeatable
                                const rawData = sectionData[comp.instance.id] ?? comp.instance.data
                                const hasItems = rawData && typeof rawData === "object" && "items" in rawData && Array.isArray((rawData as { items: unknown[] }).items)
                                return (isRepeatableType || hasItems) ? (
                                  (() => {
                                    const raw = sectionData[comp.instance.id] ?? comp.instance.data
                                    const items = (raw && typeof raw === "object" && "items" in raw && Array.isArray((raw as { items: Record<string, unknown>[] }).items))
                                      ? (raw as { items: Record<string, unknown>[] }).items
                                      : [{}]
                                    return (
                                      <>
                                        {items.map((item, idx) => (
                                          <div key={idx} className="border border-ui-border-base rounded p-3 space-y-3 bg-ui-bg-subtle">
                                            <div className="flex items-center justify-between">
                                              <span className="text-sm font-medium text-ui-fg-muted">{itemLabel(item, `Item ${idx + 1}`)}</span>
                                              {isDevOnlyFeaturesEnabled && items.length > 1 && (
                                                <Button size="small" variant="transparent" onClick={() => {
                                                  const nextItems = items.filter((_, i) => i !== idx)
                                                  setSectionData((prev) => ({ ...prev, [comp.instance.id]: { items: nextItems } }))
                                                  setSectionErrors((prev) => {
                                                    const next = { ...prev }
                                                    const rebuilt: Record<string, string> = {}
                                                    nextItems.forEach((it, i) => {
                                                      comp.fields.forEach((rf) => {
                                                        if (rf.required && isRequiredEmpty(it[rf.api_key], rf.field_type)) rebuilt[`${i}_${rf.api_key}`] = "Required"
                                                      })
                                                    })
                                                    next[comp.instance.id] = rebuilt
                                                    return next
                                                  })
                                                }}>Remove item</Button>
                                              )}
                                            </div>
                                            {comp.fields.map((f) => {
                                              const isNestedComponent = f.field_type === "component" && (f.nested_component_fields?.length ?? 0) > 0
                                              if (isNestedComponent && f.nested_component_fields) {
                                                const nestedName = f.nested_component_display_name ?? "Nested component"
                                                const isNestedRepeatable = !!f.nested_component_repeatable
                                                const rawVal = item[f.api_key]
                                                const nfList = f.nested_component_fields
                                                const errPref = `${idx}_${f.api_key}`
                                                if (isNestedRepeatable) {
                                                  const nestedItems = (rawVal && typeof rawVal === "object" && "items" in rawVal && Array.isArray((rawVal as { items: unknown[] }).items))
                                                    ? (rawVal as { items: Record<string, unknown>[] }).items
                                                    : [{}]
                                                  return (
                                                    <div key={f.id} className="space-y-2 border border-ui-border-base rounded p-2 bg-ui-bg-base">
                                                      <div className="text-sm font-medium text-ui-fg-muted">{f.label} — {nestedName}</div>
                                                      {nestedItems.map((nItem, nIdx) => (
                                                        <div key={nIdx} className="border border-ui-border-base rounded p-2 bg-ui-bg-subtle space-y-2">
                                                          <div className="flex items-center justify-between">
                                                            <span className="text-xs text-ui-fg-muted">{itemLabel(nItem, `Item ${nIdx + 1}`)}</span>
                                                            {isDevOnlyFeaturesEnabled && nestedItems.length > 1 && (
                                                              <Button size="small" variant="transparent" onClick={() => {
                                                                const nextNested = nestedItems.filter((_, i) => i !== nIdx)
                                                                const nextItems = [...items]
                                                                nextItems[idx] = { ...nextItems[idx], [f.api_key]: { items: nextNested } }
                                                                setSectionData((prev) => ({ ...prev, [comp.instance.id]: { items: nextItems } }))
                                                                setSectionErrors((prev) => {
                                                                  const nextErrs: Record<string, string> = {}
                                                                  nextItems.forEach((it, i) => {
                                                                    comp.fields.forEach((rf) => {
                                                                      if (rf.field_type === "component" && rf.nested_component_fields && rf.api_key === f.api_key) {
                                                                        (rf.nested_component_fields ?? []).forEach((rf2) => {
                                                                          const val = i === idx ? (it[f.api_key] && typeof it[f.api_key] === "object" && "items" in (it[f.api_key] as object) ? (it[f.api_key] as { items: Record<string, unknown>[] }).items : [{}]) : []
                                                                          val.forEach((nit, ni) => { if (rf2.required && isRequiredEmpty(nit[rf2.api_key], rf2.field_type)) nextErrs[`${i}_${f.api_key}_${ni}_${rf2.api_key}`] = "Required" })
                                                                        })
                                                                      } else if (rf.required && rf.field_type !== "component" && isRequiredEmpty(it[rf.api_key], rf.field_type)) nextErrs[`${i}_${rf.api_key}`] = "Required"
                                                                    })
                                                                  })
                                                                  return { ...prev, [comp.instance.id]: nextErrs }
                                                                })
                                                              }}>Remove</Button>
                                                            )}
                                                          </div>
                                                          {nfList.map((nf) => (
                                                            <div key={nf.id}>
                                                              {sectionErrors[comp.instance.id]?.[`${errPref}_${nIdx}_${nf.api_key}`] && (
                                                                <div className="text-red-600 text-xs mb-1">{sectionErrors[comp.instance.id][`${errPref}_${nIdx}_${nf.api_key}`]}</div>
                                                              )}
                                                              <DynamicFieldRenderer
                                                                field={nf}
                                                                value={nItem[nf.api_key]}
                                                                activeLocale={activeLocale}
                                                                onChange={(v) => {
                                                                  const nextNested = [...nestedItems]
                                                                  nextNested[nIdx] = { ...nextNested[nIdx], [nf.api_key]: v }
                                                                  const nextItems = [...items]
                                                                  nextItems[idx] = { ...nextItems[idx], [f.api_key]: { items: nextNested } }
                                                                  setSectionData((prev) => ({ ...prev, [comp.instance.id]: { items: nextItems } }))
                                                                  const errs: Record<string, string> = {}
                                                                  nextItems.forEach((it, i) => {
                                                                    comp.fields.forEach((rf) => {
                                                                      if (rf.field_type === "component" && rf.nested_component_fields && rf.api_key === f.api_key) {
                                                                        const val = i === idx ? nextNested : ((it[f.api_key] && typeof it[f.api_key] === "object" && "items" in (it[f.api_key] as object) && Array.isArray((it[f.api_key] as { items: unknown[] }).items)) ? (it[f.api_key] as { items: Record<string, unknown>[] }).items : [{}])
                                                                        val.forEach((nit, ni) => { (rf.nested_component_fields ?? []).forEach((rf2) => { if (rf2.required && isRequiredEmpty(nit[rf2.api_key], rf2.field_type)) errs[`${i}_${f.api_key}_${ni}_${rf2.api_key}`] = "Required" }) })
                                                                      } else if (rf.required && rf.field_type !== "component" && isRequiredEmpty(it[rf.api_key], rf.field_type)) errs[`${i}_${rf.api_key}`] = "Required"
                                                                    })
                                                                  })
                                                                  setSectionErrors((prev) => ({ ...prev, [comp.instance.id]: errs }))
                                                                }}
                                                              />
                                                            </div>
                                                          ))}
                                                        </div>
                                                      ))}
                                                      {isDevOnlyFeaturesEnabled && <Button size="small" variant="secondary" onClick={() => {
                                                        setSectionData((prev) => {
                                                          const raw = prev[comp.instance.id]
                                                          const curItems = (raw && typeof raw === "object" && "items" in raw && Array.isArray((raw as { items: unknown[] }).items)) ? (raw as { items: Record<string, unknown>[] }).items : [{}]
                                                          const curItem = curItems[idx] as Record<string, unknown> | undefined
                                                          const curFieldVal = curItem?.[f.api_key]
                                                          const curNested = (curFieldVal && typeof curFieldVal === "object" && "items" in curFieldVal && Array.isArray((curFieldVal as { items: unknown[] }).items))
                                                            ? (curFieldVal as { items: Record<string, unknown>[] }).items
                                                            : [{}]
                                                          const nextItems = curItems.map((it, i) => i === idx ? { ...it, [f.api_key]: { items: [...curNested, {}] } } : it)
                                                          return { ...prev, [comp.instance.id]: { items: nextItems } }
                                                        })
                                                      }}>+ Add item</Button>}
                                                    </div>
                                                  )
                                                }
                                                const blocks = (Array.isArray(rawVal) && rawVal.length > 0 ? rawVal : [{}]) as Record<string, unknown>[]
                                                return (
                                                  <div key={f.id} className="space-y-2 border border-ui-border-base rounded p-2 bg-ui-bg-base">
                                                    <div className="text-sm font-medium text-ui-fg-muted">{f.label} — {nestedName}</div>
                                                    {blocks.map((block, bIdx) => (
                                                      <div key={bIdx} className="border border-ui-border-base rounded p-2 bg-ui-bg-subtle space-y-2">
                                                        <div className="flex items-center justify-between">
                                                          <span className="text-xs text-ui-fg-muted">{itemLabel(block, `Instance ${bIdx + 1}`)}</span>
                                                          {isDevOnlyFeaturesEnabled && blocks.length > 1 && (
                                                            <Button size="small" variant="transparent" onClick={() => {
                                                              const nextBlocks = blocks.filter((_, i) => i !== bIdx)
                                                              const nextItems = [...items]
                                                              nextItems[idx] = { ...nextItems[idx], [f.api_key]: nextBlocks }
                                                              setSectionData((prev) => ({ ...prev, [comp.instance.id]: { items: nextItems } }))
                                                              setSectionErrors((prev) => {
                                                                const nextErrs: Record<string, string> = {}
                                                                nextItems.forEach((it, i) => {
                                                                  comp.fields.forEach((rf) => {
                                                                    if (rf.field_type === "component" && rf.nested_component_fields && rf.api_key === f.api_key && i === idx) {
                                                                      nextBlocks.forEach((bl, bi) => { (rf.nested_component_fields ?? []).forEach((rf2) => { if (rf2.required && isRequiredEmpty(bl[rf2.api_key], rf2.field_type)) nextErrs[`${i}_${f.api_key}_${bi}_${rf2.api_key}`] = "Required" }) })
                                                                    } else if (rf.required && rf.field_type !== "component" && isRequiredEmpty(it[rf.api_key], rf.field_type)) nextErrs[`${i}_${rf.api_key}`] = "Required"
                                                                  })
                                                                })
                                                                return { ...prev, [comp.instance.id]: nextErrs }
                                                              })
                                                            }}>Remove</Button>
                                                          )}
                                                        </div>
                                                        {nfList.map((nf) => (
                                                          <div key={nf.id}>
                                                            {sectionErrors[comp.instance.id]?.[`${errPref}_${bIdx}_${nf.api_key}`] && (
                                                              <div className="text-red-600 text-xs mb-1">{sectionErrors[comp.instance.id][`${errPref}_${bIdx}_${nf.api_key}`]}</div>
                                                            )}
                                                            <DynamicFieldRenderer
                                                              field={nf}
                                                              value={block[nf.api_key]}
                                                              activeLocale={activeLocale}
                                                              onChange={(v) => {
                                                                const nextBlocks = blocks.map((b, i) => i === bIdx ? { ...b, [nf.api_key]: v } : b)
                                                                const nextItems = [...items]
                                                                nextItems[idx] = { ...nextItems[idx], [f.api_key]: nextBlocks }
                                                                setSectionData((prev) => ({ ...prev, [comp.instance.id]: { items: nextItems } }))
                                                                const errs: Record<string, string> = {}
                                                                nextItems.forEach((it, i) => {
                                                                  comp.fields.forEach((rf) => {
                                                                    if (rf.field_type === "component" && rf.nested_component_fields && rf.api_key === f.api_key) {
                                                                      const val = i === idx ? nextBlocks : (Array.isArray(it[f.api_key]) ? (it[f.api_key] as Record<string, unknown>[]) : [])
                                                                      val.forEach((bl, bi) => { (rf.nested_component_fields ?? []).forEach((rf2) => { if (rf2.required && isRequiredEmpty(bl[rf2.api_key], rf2.field_type)) errs[`${i}_${f.api_key}_${bi}_${rf2.api_key}`] = "Required" }) })
                                                                    } else if (rf.required && rf.field_type !== "component" && isRequiredEmpty(it[rf.api_key], rf.field_type)) errs[`${i}_${rf.api_key}`] = "Required"
                                                                  })
                                                                })
                                                                setSectionErrors((prev) => ({ ...prev, [comp.instance.id]: errs }))
                                                              }}
                                                            />
                                                          </div>
                                                        ))}
                                                      </div>
                                                    ))}
                                                    {isDevOnlyFeaturesEnabled && <Button size="small" variant="secondary" onClick={() => {
                                                      setSectionData((prev) => {
                                                        const raw = prev[comp.instance.id]
                                                        const curItems = (raw && typeof raw === "object" && "items" in raw && Array.isArray((raw as { items: unknown[] }).items)) ? (raw as { items: Record<string, unknown>[] }).items : [{}]
                                                        const curBlocks = (curItems[idx] && typeof curItems[idx] === "object" && Array.isArray((curItems[idx] as Record<string, unknown>)[f.api_key])) ? (curItems[idx] as Record<string, unknown>)[f.api_key] as Record<string, unknown>[] : [{}]
                                                        const nextItems = curItems.map((it, i) => i === idx ? { ...it, [f.api_key]: [...(Array.isArray(curBlocks) ? curBlocks : [{}]), {}] } : it)
                                                        return { ...prev, [comp.instance.id]: { items: nextItems } }
                                                      })
                                                    }}>+ Add {nestedName}</Button>}
                                                  </div>
                                                )
                                              }
                                              return (
                                                <div key={f.id}>
                                                  {sectionErrors[comp.instance.id]?.[`${idx}_${f.api_key}`] && (
                                                    <div className="text-red-600 text-sm mb-1">{sectionErrors[comp.instance.id][`${idx}_${f.api_key}`]}</div>
                                                  )}
                                                  <DynamicFieldRenderer
                                                    field={f}
                                                    value={item[f.api_key]}
                                                    activeLocale={activeLocale}
                                                    onChange={(v) => {
                                                      const nextItems = [...items]
                                                      nextItems[idx] = { ...nextItems[idx], [f.api_key]: v }
                                                      setSectionData((prev) => ({ ...prev, [comp.instance.id]: { items: nextItems } }))
                                                      const errs: Record<string, string> = {}
                                                      nextItems.forEach((it, i) => {
                                                        comp.fields.forEach((rf) => {
                                                          if (rf.required && isRequiredEmpty(it[rf.api_key], rf.field_type)) errs[`${i}_${rf.api_key}`] = "Required"
                                                        })
                                                      })
                                                      setSectionErrors((prev) => ({ ...prev, [comp.instance.id]: errs }))
                                                    }}
                                                  />
                                                </div>
                                              )
                                            })}
                                          </div>
                                        ))}
                                        {isDevOnlyFeaturesEnabled && <Button size="small" variant="secondary" onClick={() => setSectionData((prev) => {
                                          const raw = prev[comp.instance.id]
                                          const current = (raw && typeof raw === "object" && "items" in raw && Array.isArray((raw as { items: unknown[] }).items))
                                            ? (raw as { items: Record<string, unknown>[] }).items
                                            : [{}]
                                          return { ...prev, [comp.instance.id]: { items: [...current, {}] } }
                                        })}>+ Add item</Button>}
                                      </>
                                    )
                                  })()
                                ) : null
                              })()}
                              {(() => {
                                const isRepeatableType = !!(comp.type as { repeatable?: boolean }).repeatable
                                const rawData = sectionData[comp.instance.id] ?? comp.instance.data
                                const hasItems = rawData && typeof rawData === "object" && "items" in rawData && Array.isArray((rawData as { items: unknown[] }).items)
                                return !(isRepeatableType || hasItems) ? (
                                  comp.fields.map((f) => {
                                    const data = (sectionData[comp.instance.id] ?? comp.instance.data) as Record<string, unknown>
                                    const isNestedComponent = f.field_type === "component" && f.nested_component_fields != null && f.nested_component_fields.length >= 0
                                    if (isNestedComponent && f.nested_component_fields) {
                                      const nestedName = f.nested_component_display_name ?? "Nested component"
                                      const isNestedRepeatable = !!f.nested_component_repeatable
                                      const rawVal = data[f.api_key]
                                      if (isNestedRepeatable) {
                                        const items = (rawVal && typeof rawVal === "object" && "items" in rawVal && Array.isArray((rawVal as { items: unknown[] }).items))
                                          ? (rawVal as { items: Record<string, unknown>[] }).items
                                          : [{}]
                                        return (
                                          <div key={f.id} className="space-y-2 border border-ui-border-base rounded p-3 bg-ui-bg-subtle">
                                            <div className="text-sm font-medium text-ui-fg-muted">{f.label} — {nestedName}</div>
                                            {items.map((item, idx) => (
                                              <div key={idx} className="border border-ui-border-base rounded p-2 bg-ui-bg-base space-y-2">
                                                <div className="flex items-center justify-between">
                                                  <span className="text-xs text-ui-fg-muted">{itemLabel(item, `Item ${idx + 1}`)}</span>
                                                  {isDevOnlyFeaturesEnabled && items.length > 1 && (
                                                    <Button size="small" variant="transparent" onClick={() => {
                                                      const nextItems = items.filter((_, i) => i !== idx)
                                                      const next = { ...data, [f.api_key]: { items: nextItems } }
                                                      setSectionData((prev) => ({ ...prev, [comp.instance.id]: next }))
                                                      setSectionErrors((prev) => {
                                                        const nextErrs: Record<string, string> = {}
                                                        nextItems.forEach((it, i) => {
                                                          f.nested_component_fields!.forEach((rf) => {
                                                            if (rf.required && isRequiredEmpty(it[rf.api_key], rf.field_type)) nextErrs[`${f.api_key}_${i}_${rf.api_key}`] = "Required"
                                                          })
                                                        })
                                                        return { ...prev, [comp.instance.id]: nextErrs }
                                                      })
                                                    }}>Remove</Button>
                                                  )}
                                                </div>
                                                {(f.nested_component_fields ?? []).map((nf) => (
                                                  <div key={nf.id}>
                                                    {sectionErrors[comp.instance.id]?.[`${f.api_key}_${idx}_${nf.api_key}`] && (
                                                      <div className="text-red-600 text-xs mb-1">{sectionErrors[comp.instance.id][`${f.api_key}_${idx}_${nf.api_key}`]}</div>
                                                    )}
                                                    <DynamicFieldRenderer
                                                      field={nf}
                                                      value={item[nf.api_key]}
                                                      activeLocale={activeLocale}
                                                      onChange={(v) => {
                                                        const nextItems = [...items]
                                                        nextItems[idx] = { ...nextItems[idx], [nf.api_key]: v }
                                                        const next = { ...data, [f.api_key]: { items: nextItems } }
                                                        setSectionData((prev) => ({ ...prev, [comp.instance.id]: next }))
                                                        const errs: Record<string, string> = {}
                                                        const nfList = f.nested_component_fields ?? []
                                                        nextItems.forEach((it, i) => {
                                                          nfList.forEach((rf) => {
                                                            if (rf.required && isRequiredEmpty(it[rf.api_key], rf.field_type)) errs[`${f.api_key}_${i}_${rf.api_key}`] = "Required"
                                                          })
                                                        })
                                                        setSectionErrors((prev) => ({ ...prev, [comp.instance.id]: errs }))
                                                      }}
                                                    />
                                                  </div>
                                                ))}
                                              </div>
                                            ))}
                                            {isDevOnlyFeaturesEnabled && <Button size="small" variant="secondary" onClick={() => {
                                              setSectionData((prev) => {
                                                const current = (prev[comp.instance.id] ?? comp.instance.data) as Record<string, unknown>
                                                const curItems = (current[f.api_key] && typeof current[f.api_key] === "object" && "items" in (current[f.api_key] as object) && Array.isArray((current[f.api_key] as { items: unknown[] }).items))
                                                  ? (current[f.api_key] as { items: Record<string, unknown>[] }).items
                                                  : [{}]
                                                return { ...prev, [comp.instance.id]: { ...current, [f.api_key]: { items: [...curItems, {}] } } }
                                              })
                                            }}>+ Add item</Button>}
                                          </div>
                                        )
                                      }
                                      const blocks = (Array.isArray(rawVal) && rawVal.length > 0 ? rawVal : [{}]) as Record<string, unknown>[]
                                      return (
                                        <div key={f.id} className="space-y-2 border border-ui-border-base rounded p-3 bg-ui-bg-subtle">
                                          <div className="text-sm font-medium text-ui-fg-muted">{f.label} — {nestedName}</div>
                                          {blocks.map((block, idx) => (
                                            <div key={idx} className="border border-ui-border-base rounded p-2 bg-ui-bg-base space-y-2">
                                              <div className="flex items-center justify-between">
                                                <span className="text-xs text-ui-fg-muted">{itemLabel(block, `Instance ${idx + 1}`)}</span>
                                                {isDevOnlyFeaturesEnabled && blocks.length > 1 && (
                                                  <Button size="small" variant="transparent" onClick={() => {
                                                    const nextBlocks = blocks.filter((_, i) => i !== idx)
                                                    const next = { ...data, [f.api_key]: nextBlocks }
                                                    setSectionData((prev) => ({ ...prev, [comp.instance.id]: next }))
                                                    setSectionErrors((prev) => {
                                                      const prevInst = prev[comp.instance.id] ?? {}
                                                      const nextErrs: Record<string, string> = {}
                                                      Object.keys(prevInst).forEach((k) => {
                                                        if (!k.startsWith(`${f.api_key}_`)) nextErrs[k] = prevInst[k]
                                                      })
                                                      nextBlocks.forEach((bl, i) => {
                                                        f.nested_component_fields!.forEach((rf) => {
                                                          if (rf.required && isRequiredEmpty(bl[rf.api_key], rf.field_type)) nextErrs[`${f.api_key}_${i}_${rf.api_key}`] = "Required"
                                                        })
                                                      })
                                                      return { ...prev, [comp.instance.id]: nextErrs }
                                                    })
                                                  }}>Remove</Button>
                                                )}
                                              </div>
                                              {(f.nested_component_fields ?? []).map((nf) => (
                                                <div key={nf.id}>
                                                  {sectionErrors[comp.instance.id]?.[`${f.api_key}_${idx}_${nf.api_key}`] && (
                                                    <div className="text-red-600 text-xs mb-1">{sectionErrors[comp.instance.id][`${f.api_key}_${idx}_${nf.api_key}`]}</div>
                                                  )}
                                                  <DynamicFieldRenderer
                                                    field={nf}
                                                    value={block[nf.api_key]}
                                                    activeLocale={activeLocale}
                                                    onChange={(v) => {
                                                      const nextBlocks = blocks.map((b, i) => i === idx ? { ...b, [nf.api_key]: v } : b)
                                                      setSectionData((prev) => ({ ...prev, [comp.instance.id]: { ...data, [f.api_key]: nextBlocks } }))
                                                      const errs: Record<string, string> = {}
                                                      const nfList = f.nested_component_fields ?? []
                                                      nextBlocks.forEach((bl, i) => {
                                                        nfList.forEach((rf) => {
                                                          if (rf.required && isRequiredEmpty(bl[rf.api_key], rf.field_type)) errs[`${f.api_key}_${i}_${rf.api_key}`] = "Required"
                                                        })
                                                      })
                                                      setSectionErrors((prev) => ({ ...prev, [comp.instance.id]: errs }))
                                                    }}
                                                  />
                                                </div>
                                              ))}
                                            </div>
                                          ))}
                                          {isDevOnlyFeaturesEnabled && <Button size="small" variant="secondary" onClick={() => {
                                            setSectionData((prev) => {
                                              const current = (prev[comp.instance.id] ?? comp.instance.data) as Record<string, unknown>
                                              const curBlocks = Array.isArray(current[f.api_key]) ? (current[f.api_key] as Record<string, unknown>[]) : [{}]
                                              return { ...prev, [comp.instance.id]: { ...current, [f.api_key]: [...curBlocks, {}] } }
                                            })
                                          }}>+ Add {nestedName}</Button>}
                                        </div>
                                      )
                                    }
                                    return (
                                      <div key={f.id}>
                                        {sectionErrors[comp.instance.id]?.[f.api_key] && (
                                          <div className="text-red-600 text-sm mb-1">{sectionErrors[comp.instance.id][f.api_key]}</div>
                                        )}
                                        <DynamicFieldRenderer
                                          field={f}
                                          value={data[f.api_key]}
                                          activeLocale={activeLocale}
                                          onChange={(v) => {
                                            const next = { ...data, [f.api_key]: v }
                                            setSectionData((prev) => ({ ...prev, [comp.instance.id]: next }))
                                            const errs: Record<string, string> = {}
                                            comp.fields.forEach((rf) => {
                                              if (rf.required && isRequiredEmpty(next[rf.api_key], rf.field_type)) errs[rf.api_key] = "Required"
                                            })
                                            if (Object.keys(errs).length > 0) {
                                              setSectionErrors((prev) => ({ ...prev, [comp.instance.id]: errs }))
                                            } else {
                                              setSectionErrors((prev) => {
                                                const o = { ...prev }
                                                delete o[comp.instance.id]
                                                return o
                                              })
                                            }
                                          }}
                                        />
                                      </div>
                                    )
                                  })
                                ) : null
                              })()}
                            </div>
                          )}
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              )}
            </li>
          ))}
        </ul>
      </ImageUploadProvider>
    </Container>
  )
}