"use client"

import { useEffect, useRef, useState } from "react"
import { useRouter } from "next/navigation"
import { CategorySelect } from "./CategorySelect"
import { TitleInput } from "./TitleInput"
import { SubTitleInput } from "./SubTitleInput"
import { AuthorInput } from "./AuthorInput"
import { ReadingTimeInput } from "./ReadingTimeInput"
import { PublishDatePicker } from "./PublishDatePicker"
import { ImageUploader } from "./ImageUploader"
import { RichTextEditor } from "./RichTextEditor"
import { OverviewSection, type OverviewTableData } from "./OverviewSection"
import { FAQSection, type FAQItem } from "./FAQSection"
import { ConversionCard, type ConversionCardData } from "./ConversionCard"
import { TrustCard, type TrustCardData } from "./TrustCard"
import { FileText, Layout, HelpCircle, Send, Save, Loader2, Tag, X, Star, Zap } from "lucide-react"
import { ARTICLE_TAG_MAX_COUNT, ARTICLE_TAG_MAX_LENGTH } from "@/lib/article-tags"
import { validateUrlSlug } from "@/lib/slug-validation"
import { collectBaselineInlineImageKeysFromArticleApiPayload } from "@/lib/r2-media-url"
import {
  commitPendingArticleImages,
  createEmptyArticlePendingImages,
  clearArticlePendingImages,
  articlePendingHasAny,
} from "@/lib/media-manager/article-pending"
import {
  buildArticlePendingCommitContext,
  articlePersistedSlugAfterSave,
  mergeArticleFormMediaFromSavedArticle,
  resolveArticleMediaSlug,
  resolveEffectiveArticleId,
  isNewArticleSession,
} from "@/lib/media-manager/article-lifecycle"
import { revokeStagedImage } from "@/lib/media-manager/stage"
import type { CategoryLocale } from "@/types/category-api"
import { LanguageSelect } from "@/components/dashboard/shared/LanguageSelect"

interface ArticleFormState {
  categoryId: string
  slug: string
  faqHeading: string
  image: string
  imagePublicId: string
  title: string
  subTitle: string
  author: string
  readingTime: number | ""
  publishDate: string
  content: string
  overview: OverviewTableData | null
  // images removed
  faq: FAQItem[]
  tags: string[]
  isFeatured: boolean
  conversionCard: ConversionCardData | null
  trustCard: TrustCardData | null
  translations: {
    en: {
      title: string
      faqHeading?: string
      subTitle: string | null
      author: string
      content: string
      overview: OverviewTableData | null
      // images removed
      faq: FAQItem[]
      tags: string[]
      conversionCard: ConversionCardData | null
      trustCard: TrustCardData | null
    }
    ar: {
      title: string
      faqHeading?: string
      subTitle: string | null
      author: string
      content: string
      overview: OverviewTableData | null
      // images removed
      faq: FAQItem[]
      tags: string[]
      conversionCard: ConversionCardData | null
      trustCard: TrustCardData | null
    }
    tr: {
      title: string
      faqHeading?: string
      subTitle: string | null
      author: string
      content: string
      overview: OverviewTableData | null
      // images removed
      faq: FAQItem[]
      tags: string[]
      conversionCard: ConversionCardData | null
      trustCard: TrustCardData | null
    }
  }
}

const emptyState: ArticleFormState = {
  categoryId: "",
  slug: "",
  faqHeading: "",
  image: "",
  imagePublicId: "",
  title: "",
  subTitle: "",
  author: "",
  readingTime: "",
  publishDate: "",
  content: "",
  overview: null,
  faq: [],
  tags: [],
  isFeatured: false,
  conversionCard: null,
  trustCard: null,
  translations: {
    en: { title: "", faqHeading: "", subTitle: null, author: "", content: "", overview: null, faq: [], tags: [], conversionCard: null, trustCard: null },
    ar: { title: "", faqHeading: "", subTitle: null, author: "", content: "", overview: null, faq: [], tags: [], conversionCard: null, trustCard: null },
    tr: { title: "", faqHeading: "", subTitle: null, author: "", content: "", overview: null, faq: [], tags: [], conversionCard: null, trustCard: null },
  },
}

function parseOverviewFromLoadedArticle(raw: unknown): OverviewTableData | null {
  if (raw === null || raw === undefined) return null
  if (typeof raw === "string") {
    const t = raw.trim()
    if (!t) return null
    try {
      return parseOverviewFromLoadedArticle(JSON.parse(t) as unknown)
    } catch {
      return null
    }
  }
  if (typeof raw !== "object") return null

  if ("columns" in (raw as Record<string, unknown>) || "rows" in (raw as Record<string, unknown>)) {
    const source = raw as { title?: unknown; columns?: unknown; rows?: unknown }
    const columns = Array.isArray(source.columns) ? source.columns : []
    const rows = Array.isArray(source.rows) ? source.rows : []
    if (columns.length === 0) return null
    if (!columns.every((c) => typeof c === "string")) return null
    if (!rows.every((r) => Array.isArray(r) && r.length === columns.length && r.every((c) => typeof c === "string"))) return null
    return {
      title: typeof source.title === "string" ? source.title : "",
      columns: columns.map((c: unknown) => String(c)),
      rows: rows.map((r) => r.map((c: unknown) => String(c))),
    }
  }

  if (Array.isArray(raw)) {
    const pairs = raw.filter(
      (item): item is { label: string; value: string } =>
        !!item &&
        typeof item === "object" &&
        "label" in item &&
        "value" in item &&
        typeof (item as { label: unknown }).label === "string" &&
        typeof (item as { value: unknown }).value === "string"
    )
    if (pairs.length === 0) return null
    return {
      columns: ["Label", "Value"],
      rows: pairs.map((p) => [p.label, p.value]),
    }
  }

  return null
}

function isoToDateInput(iso: string): string {
  const d = new Date(iso)
  if (Number.isNaN(d.getTime())) return ""
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, "0")
  const day = String(d.getDate()).padStart(2, "0")
  return `${y}-${m}-${day}`
}

function parseReadingTimeInput(s: string): number | "" {
  const t = s.trim()
  if (!t) return ""
  const m = t.match(/^(\d+)/)
  if (m) return Number(m[1])
  const n = parseInt(t, 10)
  return Number.isNaN(n) ? "" : n
}

function mergeArticleTags(existing: string[], incoming: string[]): string[] {
  const seen = new Set(existing.map((t) => t.toLowerCase()))
  const out = [...existing]
  for (const t of incoming) {
    const key = t.toLowerCase()
    if (seen.has(key)) continue
    seen.add(key)
    out.push(t)
    if (out.length >= ARTICLE_TAG_MAX_COUNT) break
  }
  return out
}

function parseTagsFromUnknown(raw: unknown): string[] {
  if (!Array.isArray(raw)) return []
  return raw
    .filter((t): t is string => typeof t === "string")
    .map((t) => t.trim().replace(/\s+/g, " "))
    .filter((t) => t.length > 0 && t.length <= ARTICLE_TAG_MAX_LENGTH)
    .slice(0, ARTICLE_TAG_MAX_COUNT)
}

interface ArticleFormProps {
  /** When set, form loads article and saves via PUT /api/articles/[id] */
  articleId?: string
  onSuccess?: () => void
  /** Target route when the user clicks Cancel (default: articles list) */
  cancelHref?: string
}

export function ArticleForm({ articleId, onSuccess, cancelHref = "/dashboard/articles" }: ArticleFormProps) {
  type ArticleSectionKey = "basic" | "content" | "extras" | "cards"
  const router = useRouter()
  const [form, setForm] = useState<ArticleFormState>(emptyState)
  const [loadError, setLoadError] = useState<string | null>(null)
  const [loadingArticle, setLoadingArticle] = useState(!!articleId)
  const [slugAvailable, setSlugAvailable] = useState<boolean | null>(null)
  const [checkingSlug, setCheckingSlug] = useState(false)
  const [slugError, setSlugError] = useState<string | null>(null)

  const [pendingAction, setPendingAction] = useState<"draft" | "published" | null>(null)
  const [savingSectionKey, setSavingSectionKey] = useState<ArticleSectionKey | null>(null)
  const [sectionFeedback, setSectionFeedback] = useState<
    Partial<Record<ArticleSectionKey, { type: "success" | "error"; message: string }>>
  >({})
  const sectionFeedbackTimersRef = useRef<
    Partial<Record<ArticleSectionKey, ReturnType<typeof setTimeout>>>
  >({})
  const [submitError, setSubmitError] = useState<string | null>(null)
  const [submitSuccess, setSubmitSuccess] = useState<string | null>(null)
  /** Set after first POST on create page so later saves update the same article. */
  const [createdArticleId, setCreatedArticleId] = useState<string | null>(null)
  const [tagInput, setTagInput] = useState("")
  const [activeLocale, setActiveLocale] = useState<CategoryLocale>("en")
  const pendingImagesRef = useRef(createEmptyArticlePendingImages())
  /** Slug last persisted to the server — used to detect slug changes since last save. */
  const loadedSlugRef = useRef("")
  /** R2 media keys referenced by last persisted article HTML (all locales). */
  const baselineInlinePublicIdsRef = useRef<Set<string>>(new Set())

  function getArticleSlug() {
    return resolveArticleMediaSlug(form.slug)
  }

  useEffect(() => {
    return () => {
      clearArticlePendingImages(pendingImagesRef.current)
    }
  }, [])

  useEffect(() => {
    return () => {
      for (const timer of Object.values(sectionFeedbackTimersRef.current)) {
        if (timer) clearTimeout(timer)
      }
    }
  }, [])

  useEffect(() => {
    if (!articleId) {
      setLoadingArticle(false)
      return
    }

    let cancelled = false
    async function load() {
      setLoadError(null)
      setLoadingArticle(true)
      try {
        const res = await fetch(`/api/admin/articles/${articleId}`, { cache: "no-store" })
        const json = await res.json().catch(() => ({}))
        if (!res.ok || json.success === false) {
          throw new Error(typeof json.error === "string" ? json.error : "Failed to load article")
        }
        const a = json.article
        if (!a || cancelled) return

        baselineInlinePublicIdsRef.current = collectBaselineInlineImageKeysFromArticleApiPayload(a)
        loadedSlugRef.current = typeof a.slug === "string" ? a.slug.trim() : ""
        clearArticlePendingImages(pendingImagesRef.current)

        const ov = parseOverviewFromLoadedArticle(a.overview)
        const fq = Array.isArray(a.faq) ? a.faq : []
        const tagList = parseTagsFromUnknown(a.tags)

        setForm({
          categoryId: typeof a.categoryId === "string" ? a.categoryId : "",
          slug: typeof a.slug === "string" ? a.slug : "",
          faqHeading: typeof a.faqHeading === "string" ? a.faqHeading : "",
          image: typeof a.image === "string" ? a.image : "",
          imagePublicId: typeof a.imagePublicId === "string" ? a.imagePublicId : "",
          title: typeof a.title === "string" ? a.title : "",
          subTitle: typeof a.subTitle === "string" ? a.subTitle : "",
          author: typeof a.author === "string" ? a.author : "",
          readingTime: parseReadingTimeInput(String(a.readingTime ?? "")),
          publishDate: typeof a.publishDate === "string" ? isoToDateInput(a.publishDate) : "",
          content: typeof a.content === "string" ? a.content : "",
          overview: ov,
          faq: fq as FAQItem[],
          tags: tagList,
          isFeatured: typeof a.isFeatured === "boolean" ? a.isFeatured : false,
          conversionCard: a.conversionCard && typeof a.conversionCard === "object" ? (a.conversionCard as ConversionCardData) : null,
          trustCard: a.trustCard && typeof a.trustCard === "object" ? (a.trustCard as TrustCardData) : null,
          translations:
            a.translations && typeof a.translations === "object"
              ? {
                en: {
                  title:
                    typeof (a.translations as Record<string, unknown>).en === "object" &&
                      (a.translations as Record<string, unknown>).en &&
                      typeof ((a.translations as Record<string, unknown>).en as Record<string, unknown>).title === "string"
                      ? (((a.translations as Record<string, unknown>).en as Record<string, unknown>).title as string)
                      : (typeof a.title === "string" ? a.title : ""),
                  subTitle:
                    typeof (a.translations as Record<string, unknown>).en === "object" &&
                      (a.translations as Record<string, unknown>).en &&
                      typeof ((a.translations as Record<string, unknown>).en as Record<string, unknown>).subTitle === "string"
                      ? (((a.translations as Record<string, unknown>).en as Record<string, unknown>).subTitle as string)
                      : (typeof a.subTitle === "string" ? a.subTitle : null),
                  author:
                    typeof (a.translations as Record<string, unknown>).en === "object" &&
                      (a.translations as Record<string, unknown>).en &&
                      typeof ((a.translations as Record<string, unknown>).en as Record<string, unknown>).author === "string"
                      ? (((a.translations as Record<string, unknown>).en as Record<string, unknown>).author as string)
                      : (typeof a.author === "string" ? a.author : ""),
                  content:
                    typeof (a.translations as Record<string, unknown>).en === "object" &&
                      (a.translations as Record<string, unknown>).en &&
                      typeof ((a.translations as Record<string, unknown>).en as Record<string, unknown>).content === "string"
                      ? (((a.translations as Record<string, unknown>).en as Record<string, unknown>).content as string)
                      : (typeof a.content === "string" ? a.content : ""),
                  faqHeading:
                    typeof (a.translations as Record<string, unknown>).en === "object" &&
                      (a.translations as Record<string, unknown>).en &&
                      typeof ((a.translations as Record<string, unknown>).en as Record<string, unknown>).faqHeading === "string"
                      ? (((a.translations as Record<string, unknown>).en as Record<string, unknown>).faqHeading as string)
                      : (typeof a.faqHeading === "string" ? a.faqHeading : ""),
                  overview:
                    typeof (a.translations as Record<string, unknown>).en === "object" &&
                      (a.translations as Record<string, unknown>).en
                      ? parseOverviewFromLoadedArticle(((a.translations as Record<string, unknown>).en as Record<string, unknown>).overview)
                      : ov,
                  // images removed
                  faq:
                    typeof (a.translations as Record<string, unknown>).en === "object" &&
                      (a.translations as Record<string, unknown>).en &&
                      Array.isArray(((a.translations as Record<string, unknown>).en as Record<string, unknown>).faq)
                      ? ((((a.translations as Record<string, unknown>).en as Record<string, unknown>).faq as unknown[]) as FAQItem[])
                      : (fq as FAQItem[]),
                  tags:
                    typeof (a.translations as Record<string, unknown>).en === "object" &&
                      (a.translations as Record<string, unknown>).en
                      ? parseTagsFromUnknown(((a.translations as Record<string, unknown>).en as Record<string, unknown>).tags)
                      : tagList,
                  conversionCard:
                    typeof (a.translations as Record<string, unknown>).en === "object" &&
                      (a.translations as Record<string, unknown>).en &&
                      typeof ((a.translations as Record<string, unknown>).en as Record<string, unknown>).conversionCard === "object"
                      ? (((a.translations as Record<string, unknown>).en as Record<string, unknown>).conversionCard as ConversionCardData)
                      : a.conversionCard && typeof a.conversionCard === "object"
                        ? (a.conversionCard as ConversionCardData)
                        : null,
                  trustCard:
                    typeof (a.translations as Record<string, unknown>).en === "object" &&
                      (a.translations as Record<string, unknown>).en &&
                      typeof ((a.translations as Record<string, unknown>).en as Record<string, unknown>).trustCard === "object"
                      ? (((a.translations as Record<string, unknown>).en as Record<string, unknown>).trustCard as TrustCardData)
                      : a.trustCard && typeof a.trustCard === "object"
                        ? (a.trustCard as TrustCardData)
                        : null,
                },
                ar: {
                  faqHeading:
                    typeof (a.translations as Record<string, unknown>).ar === "object" &&
                      (a.translations as Record<string, unknown>).ar &&
                      typeof ((a.translations as Record<string, unknown>).ar as Record<string, unknown>).faqHeading === "string"
                      ? (((a.translations as Record<string, unknown>).ar as Record<string, unknown>).faqHeading as string)
                      : "",
                  title:
                    typeof (a.translations as Record<string, unknown>).ar === "object" &&
                      (a.translations as Record<string, unknown>).ar &&
                      typeof ((a.translations as Record<string, unknown>).ar as Record<string, unknown>).title === "string"
                      ? (((a.translations as Record<string, unknown>).ar as Record<string, unknown>).title as string)
                      : "",
                  subTitle:
                    typeof (a.translations as Record<string, unknown>).ar === "object" &&
                      (a.translations as Record<string, unknown>).ar &&
                      typeof ((a.translations as Record<string, unknown>).ar as Record<string, unknown>).subTitle === "string"
                      ? (((a.translations as Record<string, unknown>).ar as Record<string, unknown>).subTitle as string)
                      : null,
                  author:
                    typeof (a.translations as Record<string, unknown>).ar === "object" &&
                      (a.translations as Record<string, unknown>).ar &&
                      typeof ((a.translations as Record<string, unknown>).ar as Record<string, unknown>).author === "string"
                      ? (((a.translations as Record<string, unknown>).ar as Record<string, unknown>).author as string)
                      : "",
                  content:
                    typeof (a.translations as Record<string, unknown>).ar === "object" &&
                      (a.translations as Record<string, unknown>).ar &&
                      typeof ((a.translations as Record<string, unknown>).ar as Record<string, unknown>).content === "string"
                      ? (((a.translations as Record<string, unknown>).ar as Record<string, unknown>).content as string)
                      : "",
                  overview:
                    typeof (a.translations as Record<string, unknown>).ar === "object" &&
                      (a.translations as Record<string, unknown>).ar
                      ? parseOverviewFromLoadedArticle(((a.translations as Record<string, unknown>).ar as Record<string, unknown>).overview)
                      : null,
                  // images removed
                  faq:
                    typeof (a.translations as Record<string, unknown>).ar === "object" &&
                      (a.translations as Record<string, unknown>).ar &&
                      Array.isArray(((a.translations as Record<string, unknown>).ar as Record<string, unknown>).faq)
                      ? ((((a.translations as Record<string, unknown>).ar as Record<string, unknown>).faq as unknown[]) as FAQItem[])
                      : [],
                  tags:
                    typeof (a.translations as Record<string, unknown>).ar === "object" &&
                      (a.translations as Record<string, unknown>).ar
                      ? parseTagsFromUnknown(((a.translations as Record<string, unknown>).ar as Record<string, unknown>).tags)
                      : [],
                  conversionCard:
                    typeof (a.translations as Record<string, unknown>).ar === "object" &&
                      (a.translations as Record<string, unknown>).ar &&
                      typeof ((a.translations as Record<string, unknown>).ar as Record<string, unknown>).conversionCard === "object"
                      ? (((a.translations as Record<string, unknown>).ar as Record<string, unknown>).conversionCard as ConversionCardData)
                      : null,
                  trustCard:
                    typeof (a.translations as Record<string, unknown>).ar === "object" &&
                      (a.translations as Record<string, unknown>).ar &&
                      typeof ((a.translations as Record<string, unknown>).ar as Record<string, unknown>).trustCard === "object"
                      ? (((a.translations as Record<string, unknown>).ar as Record<string, unknown>).trustCard as TrustCardData)
                      : null,
                },
                tr: {
                  faqHeading:
                    typeof (a.translations as Record<string, unknown>).tr === "object" &&
                      (a.translations as Record<string, unknown>).tr &&
                      typeof ((a.translations as Record<string, unknown>).tr as Record<string, unknown>).faqHeading === "string"
                      ? (((a.translations as Record<string, unknown>).tr as Record<string, unknown>).faqHeading as string)
                      : "",
                  title:
                    typeof (a.translations as Record<string, unknown>).tr === "object" &&
                      (a.translations as Record<string, unknown>).tr &&
                      typeof ((a.translations as Record<string, unknown>).tr as Record<string, unknown>).title === "string"
                      ? (((a.translations as Record<string, unknown>).tr as Record<string, unknown>).title as string)
                      : "",
                  subTitle:
                    typeof (a.translations as Record<string, unknown>).tr === "object" &&
                      (a.translations as Record<string, unknown>).tr &&
                      typeof ((a.translations as Record<string, unknown>).tr as Record<string, unknown>).subTitle === "string"
                      ? (((a.translations as Record<string, unknown>).tr as Record<string, unknown>).subTitle as string)
                      : null,
                  author:
                    typeof (a.translations as Record<string, unknown>).tr === "object" &&
                      (a.translations as Record<string, unknown>).tr &&
                      typeof ((a.translations as Record<string, unknown>).tr as Record<string, unknown>).author === "string"
                      ? (((a.translations as Record<string, unknown>).tr as Record<string, unknown>).author as string)
                      : "",
                  content:
                    typeof (a.translations as Record<string, unknown>).tr === "object" &&
                      (a.translations as Record<string, unknown>).tr &&
                      typeof ((a.translations as Record<string, unknown>).tr as Record<string, unknown>).content === "string"
                      ? (((a.translations as Record<string, unknown>).tr as Record<string, unknown>).content as string)
                      : "",
                  overview:
                    typeof (a.translations as Record<string, unknown>).tr === "object" &&
                      (a.translations as Record<string, unknown>).tr
                      ? parseOverviewFromLoadedArticle(((a.translations as Record<string, unknown>).tr as Record<string, unknown>).overview)
                      : null,
                  // images removed
                  faq:
                    typeof (a.translations as Record<string, unknown>).tr === "object" &&
                      (a.translations as Record<string, unknown>).tr &&
                      Array.isArray(((a.translations as Record<string, unknown>).tr as Record<string, unknown>).faq)
                      ? ((((a.translations as Record<string, unknown>).tr as Record<string, unknown>).faq as unknown[]) as FAQItem[])
                      : [],
                  tags:
                    typeof (a.translations as Record<string, unknown>).tr === "object" &&
                      (a.translations as Record<string, unknown>).tr
                      ? parseTagsFromUnknown(((a.translations as Record<string, unknown>).tr as Record<string, unknown>).tags)
                      : [],
                  conversionCard:
                    typeof (a.translations as Record<string, unknown>).tr === "object" &&
                      (a.translations as Record<string, unknown>).tr &&
                      typeof ((a.translations as Record<string, unknown>).tr as Record<string, unknown>).conversionCard === "object"
                      ? (((a.translations as Record<string, unknown>).tr as Record<string, unknown>).conversionCard as ConversionCardData)
                      : null,
                  trustCard:
                    typeof (a.translations as Record<string, unknown>).tr === "object" &&
                      (a.translations as Record<string, unknown>).tr &&
                      typeof ((a.translations as Record<string, unknown>).tr as Record<string, unknown>).trustCard === "object"
                      ? (((a.translations as Record<string, unknown>).tr as Record<string, unknown>).trustCard as TrustCardData)
                      : null,
                },
              }
              : {
                en: {
                  title: typeof a.title === "string" ? a.title : "",
                  subTitle: typeof a.subTitle === "string" ? a.subTitle : null,
                  author: typeof a.author === "string" ? a.author : "",
                  content: typeof a.content === "string" ? a.content : "",
                  faqHeading: typeof a.faqHeading === "string" ? a.faqHeading : "",
                  overview: ov,
                  faq: fq as FAQItem[],
                  tags: tagList,
                  conversionCard: a.conversionCard && typeof a.conversionCard === "object" ? (a.conversionCard as ConversionCardData) : null,
                  trustCard: a.trustCard && typeof a.trustCard === "object" ? (a.trustCard as TrustCardData) : null,
                },
                ar: { title: "", subTitle: null, author: "", content: "", overview: null, faq: [], tags: [], conversionCard: null, trustCard: null },
                tr: { title: "", subTitle: null, author: "", content: "", overview: null, faq: [], tags: [], conversionCard: null, trustCard: null },
              },
        })
        setActiveLocale("en")
        setTagInput("")
      } catch (e) {
        if (!cancelled) {
          setLoadError(e instanceof Error ? e.message : "Failed to load article")
          setForm(emptyState)
        }
      } finally {
        if (!cancelled) setLoadingArticle(false)
      }
    }
    void load()
    return () => {
      cancelled = true
    }
  }, [articleId])

  async function checkSlugAvailability(slug: string) {
    const s = slug.trim()
    const localValidation = validateUrlSlug(s)
    if (!localValidation.valid) {
      setSlugAvailable(false)
      setSlugError(localValidation.error)
      return false
    }
    try {
      setCheckingSlug(true)
      setSlugError(null)
      const excludeId = resolveEffectiveArticleId(articleId, createdArticleId)
      const url =
        `/api/articles/check-slug?slug=${encodeURIComponent(s)}` +
        (excludeId ? `&excludeId=${encodeURIComponent(excludeId)}` : "")
      const res = await fetch(url)
      const json = await res.json().catch(() => ({}))
      const available = !!json?.available
      setSlugAvailable(available)
      if (!available) {
        setSlugError(typeof json?.error === "string" ? json.error : "Slug already in use")
      }
      return available
    } catch (err) {
      setSlugAvailable(false)
      setSlugError("Failed to check slug availability")
      return false
    } finally {
      setCheckingSlug(false)
    }
  }

  function update<K extends keyof ArticleFormState>(key: K, value: ArticleFormState[K]) {
    setForm((prev) => ({ ...prev, [key]: value }))
    setSubmitError(null)
    setSubmitSuccess(null)
  }

  function addTag() {
    const raw = tagInput.trim()
    if (!raw) return
    const parts = raw
      .split(/[,;]+/)
      .map((p) => p.trim().replace(/\s+/g, " "))
      .filter((p) => p.length > 0 && p.length <= ARTICLE_TAG_MAX_LENGTH)
    if (parts.length === 0) return
    setForm((prev) => {
      const nextLocaleTags = mergeArticleTags(prev.translations[activeLocale].tags, parts)
      return {
        ...prev,
        tags: activeLocale === "en" ? nextLocaleTags : prev.tags,
        translations: {
          ...prev.translations,
          [activeLocale]: { ...prev.translations[activeLocale], tags: nextLocaleTags },
        },
      }
    })
    setTagInput("")
    setSubmitError(null)
    setSubmitSuccess(null)
  }

  function removeTag(tag: string) {
    setForm((prev) => {
      const nextLocaleTags = prev.translations[activeLocale].tags.filter((t) => t !== tag)
      return {
        ...prev,
        tags: activeLocale === "en" ? nextLocaleTags : prev.tags,
        translations: {
          ...prev.translations,
          [activeLocale]: { ...prev.translations[activeLocale], tags: nextLocaleTags },
        },
      }
    })
    setSubmitError(null)
    setSubmitSuccess(null)
  }

  function handleTagKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
    if (e.key === "Enter") {
      e.preventDefault()
      addTag()
      return
    }
    if (e.key === "," || e.key === ";") {
      e.preventDefault()
      addTag()
    }
  }

  async function runSubmit(
    status: "draft" | "published",
    options?: {
      resetOnCreate?: boolean
      successMessage?: string
      callOnSuccess?: boolean
      suppressGlobalFeedback?: boolean
    }
  ) {
    const suppressGlobalFeedback = options?.suppressGlobalFeedback ?? false
    if (!suppressGlobalFeedback) {
      setSubmitError(null)
      setSubmitSuccess(null)
    }
    setPendingAction(status)
    const effectiveArticleId = resolveEffectiveArticleId(articleId, createdArticleId)
    const isCreating = isNewArticleSession(articleId, createdArticleId)
    try {
      // Ensure slug provided and available (server-side uniqueness too)
      const requestedSlug = form.slug?.trim() ?? ""
      const localValidation = validateUrlSlug(requestedSlug)
      if (!localValidation.valid) {
        setPendingAction(null)
        const msg = localValidation.error ?? "Invalid slug."
        if (!suppressGlobalFeedback) setSubmitError(msg)
        if (suppressGlobalFeedback) throw new Error(msg)
        return
      }
      let available = slugAvailable
      if (available === null) {
        available = await checkSlugAvailability(requestedSlug)
      }
      if (!available) {
        setPendingAction(null)
        const msg = slugError ?? "Slug already in use."
        if (!suppressGlobalFeedback) setSubmitError(msg)
        if (suppressGlobalFeedback) throw new Error(msg)
        return
      }

      let imageForSave = form.image
      let imagePublicIdForSave = form.imagePublicId
      let translationsForSave = form.translations

      if (articlePendingHasAny(pendingImagesRef.current)) {
        let pendingCommit
        try {
          pendingCommit = buildArticlePendingCommitContext({
            currentSlug: getArticleSlug(),
            effectiveArticleId,
            pending: pendingImagesRef.current,
          })
        } catch (err) {
          setPendingAction(null)
          const msg =
            err instanceof Error ? err.message : "Article slug is required before saving images."
          if (!suppressGlobalFeedback) setSubmitError(msg)
          if (suppressGlobalFeedback) throw new Error(msg)
          return
        }

        const committed = await commitPendingArticleImages(
          {
            image: form.image,
            imagePublicId: form.imagePublicId,
            content: form.translations.en.content,
            translations: {
              en: { content: form.translations.en.content },
              ar: { content: form.translations.ar.content },
              tr: { content: form.translations.tr.content },
            },
          },
          pendingCommit
        )

        imageForSave = committed.image
        imagePublicIdForSave = committed.imagePublicId
        translationsForSave = {
          en: { ...form.translations.en, content: committed.translations.en.content },
          ar: { ...form.translations.ar, content: committed.translations.ar.content },
          tr: { ...form.translations.tr, content: committed.translations.tr.content },
        }

        setForm((prev) => ({
          ...prev,
          image: committed.image,
          imagePublicId: committed.imagePublicId,
          content: committed.content,
          translations: {
            en: { ...prev.translations.en, content: committed.translations.en.content },
            ar: { ...prev.translations.ar, content: committed.translations.ar.content },
            tr: { ...prev.translations.tr, content: committed.translations.tr.content },
          },
        }))
      }

      const payload = {
        status,
        categoryId: form.categoryId,
        slug: form.slug,
        image: imageForSave,
        imagePublicId: imagePublicIdForSave,
        title: form.translations.en.title,
        subTitle: form.translations.en.subTitle ?? "",
        author: form.translations.en.author || form.author,
        readingTime: form.readingTime === "" ? "" : String(form.readingTime),
        publishDate: form.publishDate,
        content: translationsForSave.en.content,
        faqHeading: form.translations.en.faqHeading || form.faqHeading,
        overview: form.translations.en.overview ?? form.overview,
        faq: form.translations.en.faq.length > 0 ? form.translations.en.faq : form.faq,
        tags: form.tags,
        isFeatured: form.isFeatured,
        conversionCard: form.conversionCard,
        trustCard: form.trustCard,
        translations: translationsForSave,
      }

      const url = effectiveArticleId ? `/api/admin/articles/${effectiveArticleId}` : "/api/admin/articles"
      const method = effectiveArticleId ? "PUT" : "POST"

      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      })
      const json = await res.json().catch(() => ({}))

      if (!res.ok || json?.success === false) {
        const msg =
          typeof json?.error === "string"
            ? json.error
            : typeof json?.message === "string"
              ? json.message
              : "Request failed"
        throw new Error(msg)
      }

      const savedArticle = json?.article as {
        id?: unknown
        slug?: unknown
        image?: unknown
        imagePublicId?: unknown
        content?: unknown
        translations?: unknown
        contentImageFolder?: unknown
      } | undefined
      if (savedArticle && typeof savedArticle === "object") {
        baselineInlinePublicIdsRef.current = collectBaselineInlineImageKeysFromArticleApiPayload(savedArticle)
        setForm((prev) => mergeArticleFormMediaFromSavedArticle(prev, savedArticle))
      }
      if (isCreating && savedArticle && typeof savedArticle.id === "string") {
        setCreatedArticleId(savedArticle.id)
      }
      loadedSlugRef.current = articlePersistedSlugAfterSave(requestedSlug)

      if (!suppressGlobalFeedback) {
        if (options?.successMessage) {
          setSubmitSuccess(options.successMessage)
        } else if (effectiveArticleId) {
          setSubmitSuccess(
            status === "draft"
              ? "Draft updated successfully."
              : "Article updated successfully."
          )
        } else {
          setSubmitSuccess(
            status === "draft" ? "Draft saved successfully." : "Article published successfully."
          )
        }
      }
      if (isCreating && options?.resetOnCreate !== false) {
        clearArticlePendingImages(pendingImagesRef.current)
        setForm(emptyState)
      }
      if (options?.callOnSuccess !== false) {
        onSuccess?.()
      }
    } catch (err: unknown) {
      const msg = err instanceof Error ? err.message : "Something went wrong"
      if (!suppressGlobalFeedback) setSubmitError(msg)
      if (suppressGlobalFeedback) throw new Error(msg)
    } finally {
      setPendingAction(null)
    }
  }

  function getSectionTitle(sectionKey: ArticleSectionKey) {
    switch (sectionKey) {
      case "basic":
        return "Basic Information"
      case "content":
        return "Article Content"
      case "extras":
        return "Overview & FAQ"
      case "cards":
        return "Conversion & Trust Cards"
      default:
        return sectionKey
    }
  }

  function showSectionFeedback(sectionKey: ArticleSectionKey, type: "success" | "error", message: string) {
    const existingTimer = sectionFeedbackTimersRef.current[sectionKey]
    if (existingTimer) clearTimeout(existingTimer)
    setSectionFeedback((prev) => ({
      ...prev,
      [sectionKey]: { type, message },
    }))
    sectionFeedbackTimersRef.current[sectionKey] = setTimeout(() => {
      setSectionFeedback((prev) => {
        const next = { ...prev }
        delete next[sectionKey]
        return next
      })
      delete sectionFeedbackTimersRef.current[sectionKey]
    }, 3500)
  }

  async function handleSaveSection(sectionKey: ArticleSectionKey) {
    setSavingSectionKey(sectionKey)
    try {
      await runSubmit("draft", {
        resetOnCreate: false,
        callOnSuccess: false,
        suppressGlobalFeedback: true,
      })
      showSectionFeedback(sectionKey, "success", `${getSectionTitle(sectionKey)} saved successfully.`)
    } catch (err: unknown) {
      const msg = err instanceof Error ? err.message : "Failed to save section."
      showSectionFeedback(sectionKey, "error", `Failed to save ${getSectionTitle(sectionKey)}: ${msg}`)
    } finally {
      setSavingSectionKey(null)
    }
  }

  function renderSectionSaveButton(sectionKey: ArticleSectionKey) {
    const isSavingThisSection = savingSectionKey === sectionKey
    const feedback = sectionFeedback[sectionKey]
    return (
      <div className="px-6 pb-6 flex flex-col items-end gap-2">
        <button
          type="button"
          onClick={() => void handleSaveSection(sectionKey)}
          disabled={pendingAction !== null}
          className="flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold font-sans text-white transition-all hover:brightness-105 active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
          style={{ background: "var(--brand-navy)" }}
        >
          {isSavingThisSection ? (
            <>
              <Loader2 className="w-3.5 h-3.5 animate-spin" aria-hidden="true" />
              Saving section...
            </>
          ) : (
            <>
              <Save className="w-3.5 h-3.5" aria-hidden="true" />
              Save Section
            </>
          )}
        </button>
        {feedback ? (
          <div
            className="text-xs font-sans px-3 py-1.5 rounded-lg border max-w-[420px]"
            style={
              feedback.type === "success"
                ? {
                  background: "rgba(43,182,115,0.08)",
                  borderColor: "rgba(43,182,115,0.30)",
                  color: "var(--brand-green)",
                }
                : {
                  background: "rgba(239,68,68,0.08)",
                  borderColor: "rgba(239,68,68,0.30)",
                  color: "#dc2626",
                }
            }
            role="alert"
          >
            {feedback.message}
          </div>
        ) : null}
      </div>
    )
  }

  if (articleId && loadingArticle) {
    return (
      <div
        className="flex flex-col items-center justify-center gap-4 rounded-2xl border border-border bg-card py-24"
        role="status"
        aria-live="polite"
      >
        <Loader2 className="w-10 h-10 animate-spin text-[var(--brand-navy)]" aria-hidden="true" />
        <p className="text-sm text-muted-foreground font-sans">Loading article…</p>
      </div>
    )
  }

  if (articleId && loadError) {
    return (
      <div
        className="rounded-2xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-800 font-sans"
        role="alert"
      >
        {loadError}
      </div>
    )
  }

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        void runSubmit("published")
      }}
      className="flex flex-col gap-6"
      noValidate
    >
      <section
        className="bg-card rounded-2xl border border-border overflow-hidden"
        aria-labelledby="section-basic"
      >
        <div
          className="flex items-center gap-3 px-6 py-4 border-b border-border"
          style={{ background: "rgba(29,45,104,0.02)" }}
        >
          <div
            className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
            style={{ background: "rgba(29,45,104,0.08)" }}
          >
            <FileText className="w-4 h-4" style={{ color: "var(--brand-navy)" }} aria-hidden="true" />
          </div>
          <div>
            <h2 id="section-basic" className="text-sm font-bold text-foreground font-sans">
              Basic Information
            </h2>
            <p className="text-xs text-muted-foreground font-sans">
              Title, author, category and metadata
            </p>
          </div>
        </div>

        <div className="p-6 flex flex-col gap-5">
          <LanguageSelect
            value={activeLocale}
            onChange={setActiveLocale}
            label="Editing Language"
            id="article-editing-language"
          />

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <CategorySelect value={form.categoryId} onChange={(v) => update("categoryId", v)} />
            <PublishDatePicker value={form.publishDate} onChange={(v) => update("publishDate", v)} />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

            <div className="md:col-span-2">
              <label
                htmlFor="article-slug"
                className="text-xs font-bold text-foreground font-sans uppercase tracking-wider"
              >
                Slug
              </label>

              <input
                id="article-slug"
                type="text"
                value={form.slug}
                onChange={(e) => {
                  const nextSlug = e.target.value
                  update("slug", nextSlug)
                  setSlugAvailable(null)
                  const localValidation = validateUrlSlug(nextSlug)
                  setSlugError(localValidation.valid ? null : localValidation.error)
                }}
                onBlur={async (e) => {
                  await checkSlugAvailability(e.currentTarget.value)
                }}
                placeholder="e.g. heart-health-guide"
                inputMode="url"
                autoCapitalize="none"
                spellCheck={false}
                className="w-full bg-card border border-border rounded-xl px-4 py-2.5 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673] transition-colors"
              />

              {slugError && <p className="text-xs text-red-600 mt-1">{slugError}</p>}
              {slugAvailable && <p className="text-xs text-green-600 mt-1">Slug is available</p>}
            </div>

            <div />
          </div>


          <TitleInput
            value={form.translations[activeLocale].title}
            onChange={(v) => {
              const nextTranslations = {
                ...form.translations,
                [activeLocale]: { ...form.translations[activeLocale], title: v },
              }
              setForm((prev) => ({
                ...prev,
                title: activeLocale === "en" ? v : prev.title,
                translations: nextTranslations,
              }))
              setSubmitError(null)
              setSubmitSuccess(null)
            }}
          />

          <SubTitleInput
            value={form.translations[activeLocale].subTitle ?? ""}
            onChange={(v) => {
              const normalized = v.trim() ? v : null
              const nextTranslations = {
                ...form.translations,
                [activeLocale]: { ...form.translations[activeLocale], subTitle: normalized },
              }
              setForm((prev) => ({
                ...prev,
                subTitle: activeLocale === "en" ? (normalized ?? "") : prev.subTitle,
                translations: nextTranslations,
              }))
              setSubmitError(null)
              setSubmitSuccess(null)
            }}
          />

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <AuthorInput
              value={form.translations[activeLocale].author}
              onChange={(v) => {
                const nextTranslations = {
                  ...form.translations,
                  [activeLocale]: { ...form.translations[activeLocale], author: v },
                }
                setForm((prev) => ({
                  ...prev,
                  author: activeLocale === "en" ? v : prev.author,
                  translations: nextTranslations,
                }))
                setSubmitError(null)
                setSubmitSuccess(null)
              }}
            />
            <ReadingTimeInput value={form.readingTime} onChange={(v) => update("readingTime", v)} />
          </div>
          {/* Tads */}
          <div className="flex flex-col gap-2">
            <div className="flex flex-col gap-1.5">
              <label
                htmlFor="article-tags"
                className="text-xs font-bold text-foreground font-sans uppercase tracking-wider"
              >
                Tags{" "}
                <span className="text-muted-foreground normal-case font-normal tracking-normal">
                  (optional — press Enter or comma to add)
                </span>
              </label>

            </div>
            {form.tags.length > 0 && (
              <div className="flex flex-wrap gap-1.5">
                {form.translations[activeLocale].tags.map((tag) => (
                  <span
                    key={tag}
                    className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium font-sans"
                    style={{ background: "rgba(29,45,104,0.08)", color: "var(--brand-navy)" }}
                  >
                    <Tag className="w-3 h-3" aria-hidden="true" />
                    {tag}
                    <button
                      type="button"
                      onClick={() => removeTag(tag)}
                      aria-label={`Remove tag ${tag}`}
                      className="ml-0.5 hover:opacity-70 transition-opacity disabled:opacity-50"
                    >
                      <X className="w-3 h-3" aria-hidden="true" />
                    </button>
                  </span>
                ))}
              </div>
            )}
            <div className="flex gap-2">
              <input
                id="article-tags"
                type="text"
                value={tagInput}
                onChange={(e) => setTagInput(e.target.value)}
                onKeyDown={handleTagKeyDown}
                onBlur={() => addTag()}
                placeholder="e.g. heart disease, prevention..."
                className="flex-1 bg-card border border-border rounded-xl px-4 py-2.5 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673] transition-colors disabled:opacity-60"
              />
              <button
                type="button"
                onClick={() => addTag()}
                className="px-4 cursor-pointer py-2.5 rounded-xl text-sm font-semibold font-sans transition-colors border border-border hover:bg-accent"
              >
                Add
              </button>
            </div>
          </div>
          {/* Featured toggle */}
          <div className="flex items-center justify-between gap-4 px-4 py-3 rounded-xl border border-border bg-card">
            <div className="flex items-center gap-2.5">
              <Star className="w-4 h-4" style={{ color: "var(--brand-navy)" }} aria-hidden="true" />
              <div>
                <p className="text-sm font-semibold text-foreground font-sans">Featured Article</p>
                <p className="text-xs text-muted-foreground font-sans">Pin this article to appear in featured sections</p>
              </div>
            </div>
            <button
              type="button"
              role="switch"
              aria-checked={form.isFeatured}
              onClick={() => update("isFeatured", !form.isFeatured)}
              className="relative cursor-pointer w-11 h-6 rounded-full transition-colors duration-200 shrink-0 focus:outline-none focus:ring-2 focus:ring-[#2BB673]/40"
              style={{
                background: form.isFeatured ? "var(--brand-green)" : "var(--border)",
              }}
            >
              <span
                className="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform duration-200"
                style={{ transform: form.isFeatured ? "translateX(20px)" : "translateX(0px)" }}
              />
              <span className="sr-only">{form.isFeatured ? "Featured" : "Not featured"}</span>
            </button>
          </div>
          <ImageUploader
            value={form.image}
            imagePublicId={form.imagePublicId}
            getArticleSlug={getArticleSlug}
            onStageCoverImage={(staged) => {
              if (pendingImagesRef.current.coverImage) {
                revokeStagedImage(pendingImagesRef.current.coverImage)
              }
              pendingImagesRef.current.coverImage = staged
            }}
            onClearStagedCoverImage={() => {
              if (pendingImagesRef.current.coverImage) {
                revokeStagedImage(pendingImagesRef.current.coverImage)
                pendingImagesRef.current.coverImage = null
              }
            }}
            onChange={(url, publicId) => {
              setForm((prev) => ({ ...prev, image: url, imagePublicId: publicId }))
              setSubmitError(null)
              setSubmitSuccess(null)
            }}
          />
        </div>
        {renderSectionSaveButton("basic")}

      </section>

      <section
        className="bg-card rounded-2xl border border-border overflow-hidden"
        aria-labelledby="section-content"
      >
        <div
          className="flex items-center gap-3 px-6 py-4 border-b border-border"
          style={{ background: "rgba(43,182,115,0.02)" }}
        >
          <div
            className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
            style={{ background: "rgba(43,182,115,0.10)" }}
          >
            <Layout className="w-4 h-4" style={{ color: "var(--brand-green)" }} aria-hidden="true" />
          </div>
          <div>
            <h2 id="section-content" className="text-sm font-bold text-foreground font-sans">
              Article Content
            </h2>
            <p className="text-xs text-muted-foreground font-sans">
              Write the full article using the rich text editor
            </p>
          </div>
        </div>

        <div className="p-6 flex flex-col gap-6">
          <RichTextEditor
            value={form.translations[activeLocale].content}
            getArticleSlug={getArticleSlug}
            onStageContentImage={(staged) => {
              pendingImagesRef.current.contentImages.push(staged)
            }}
            onChange={(v) => {
              const nextTranslations = {
                ...form.translations,
                [activeLocale]: { ...form.translations[activeLocale], content: v },
              }
              setForm((prev) => ({
                ...prev,
                content: activeLocale === "en" ? v : prev.content,
                translations: nextTranslations,
              }))
              setSubmitError(null)
              setSubmitSuccess(null)
            }}
          />

          {/* Multi image uploader removed */}


        </div>
        {renderSectionSaveButton("content")}
      </section>

      <section
        className="bg-card rounded-2xl border border-border overflow-hidden"
        aria-labelledby="section-extras"
      >
        <div
          className="flex items-center gap-3 px-6 py-4 border-b border-border"
          style={{ background: "rgba(43,182,115,0.02)" }}
        >
          <div
            className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
            style={{ background: "rgba(43,182,115,0.10)" }}
          >
            <HelpCircle className="w-4 h-4" style={{ color: "var(--brand-green)" }} aria-hidden="true" />
          </div>
          <div>
            <h2 id="section-extras" className="text-sm font-bold text-foreground font-sans">
              Overview & FAQ
            </h2>
            <p className="text-xs text-muted-foreground font-sans">
              Add key stats and frequently asked questions
            </p>
          </div>
        </div>

        <div className="p-6 flex flex-col gap-6">
          <OverviewSection
            value={form.translations[activeLocale].overview}
            onChange={(v) => {
              const nextTranslations = {
                ...form.translations,
                [activeLocale]: { ...form.translations[activeLocale], overview: v },
              }
              setForm((prev) => ({
                ...prev,
                overview: activeLocale === "en" ? v : prev.overview,
                translations: nextTranslations,
              }))
              setSubmitError(null)
              setSubmitSuccess(null)
            }}
          />
          <div className="border-t border-border" />
          <FAQSection
            items={form.translations[activeLocale].faq}
            title={form.translations[activeLocale].faqHeading || ""}
            onTitleChange={(v) => {
              const nextTranslations = {
                ...form.translations,
                [activeLocale]: { ...form.translations[activeLocale], faqHeading: v },
              }
              setForm((prev) => ({
                ...prev,
                faqHeading: activeLocale === "en" ? v : prev.faqHeading,
                translations: nextTranslations,
              }))
              setSubmitError(null)
              setSubmitSuccess(null)
            }}
            onChange={(v) => {
              const nextTranslations = {
                ...form.translations,
                [activeLocale]: { ...form.translations[activeLocale], faq: v },
              }
              setForm((prev) => ({
                ...prev,
                faq: activeLocale === "en" ? v : prev.faq,
                translations: nextTranslations,
              }))
              setSubmitError(null)
              setSubmitSuccess(null)
            }}
          />
        </div>
        {renderSectionSaveButton("extras")}
      </section>

      {/* ── Conversion & Trust Cards ─────────────────────────────────── */}
      <section
        className="bg-card rounded-2xl border border-border overflow-hidden"
        aria-labelledby="section-cards"
      >
        <div
          className="flex items-center gap-3 px-6 py-4 border-b border-border"
          style={{ background: "rgba(43,182,115,0.02)" }}
        >
          <div
            className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
            style={{ background: "rgba(29,45,104,0.08)" }}
          >
            <Zap className="w-4 h-4" style={{ color: "var(--brand-navy)" }} aria-hidden="true" />
          </div>
          <div>
            <h2 id="section-cards" className="text-sm font-bold text-foreground font-sans">
              Conversion &amp; Trust Cards
            </h2>
            <p className="text-xs text-muted-foreground font-sans">
              Optional cards shown within the article to drive conversions and build trust
            </p>
          </div>
        </div>

        <div className="p-6 flex flex-col gap-6">
          <ConversionCard
            value={activeLocale === "en" ? form.conversionCard : form.translations[activeLocale].conversionCard}
            onChange={(v) => {
              const nextTranslations = {
                ...form.translations,
                [activeLocale]: { ...form.translations[activeLocale], conversionCard: v },
              }
              setForm((prev) => ({
                ...prev,
                conversionCard: activeLocale === "en" ? v : prev.conversionCard,
                translations: nextTranslations,
              }))
              setSubmitError(null)
              setSubmitSuccess(null)
            }}
          />
          <div className="border-t border-border" />
          <TrustCard
            value={activeLocale === "en" ? form.trustCard : form.translations[activeLocale].trustCard}
            onChange={(v) => {
              const nextTranslations = {
                ...form.translations,
                [activeLocale]: { ...form.translations[activeLocale], trustCard: v },
              }
              setForm((prev) => ({
                ...prev,
                trustCard: activeLocale === "en" ? v : prev.trustCard,
                translations: nextTranslations,
              }))
              setSubmitError(null)
              setSubmitSuccess(null)
            }}
          />
        </div>
        {renderSectionSaveButton("cards")}
      </section>

      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4 flex-wrap">
        <div className="flex-1 min-w-0">
          {submitError && (
            <div
              className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-sans"
              style={{ background: "rgba(239,68,68,0.08)", color: "#ef4444", border: "1px solid rgba(239,68,68,0.20)" }}
              role="alert"
            >
              {submitError}
            </div>
          )}
          {submitSuccess && (
            <div
              className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-sans"
              style={{ background: "rgba(43,182,115,0.08)", color: "var(--brand-green)", border: "1px solid rgba(43,182,115,0.20)" }}
              role="status"
            >
              {submitSuccess}
            </div>
          )}
        </div>

        <div className="flex  flex-col sm:flex-row items-stretch sm:items-center gap-3 shrink-0">
          <button
            type="button"
            onClick={() => {
              clearArticlePendingImages(pendingImagesRef.current)
              router.push(cancelHref)
            }}
            disabled={pendingAction !== null}
            className="flex cursor-pointer items-center justify-center gap-2 px-6 py-2.5 rounded-xl text-sm font-semibold font-sans border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-all disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
          >
            Cancel
          </button>

          <button
            type="button"
            onClick={() => void runSubmit("draft")}
            disabled={pendingAction !== null}
            className="flex cursor-pointer items-center justify-center gap-2 px-6 py-2.5 rounded-xl text-white text-sm font-semibold font-sans transition-all duration-150 hover:brightness-105 active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed disabled:active:scale-100 border border-transparent"
            style={{
              background: "var(--brand-navy)",
              boxShadow: "0 2px 8px rgba(29,45,104,0.25)",
            }}
          >
            {pendingAction === "draft" ? (
              <>
                <div
                  className="w-4 h-4 rounded-full border-2 border-t-transparent animate-spin"
                  style={{ borderColor: "rgba(255,255,255,0.8) transparent rgba(255,255,255,0.8) rgba(255,255,255,0.8)" }}
                  aria-hidden="true"
                />
                Saving…
              </>
            ) : (
              <>
                <Save className="w-4 h-4" aria-hidden="true" />
                Save as draft
              </>
            )}
          </button>

          <button
            type="submit"
            disabled={pendingAction !== null}
            className="flex cursor-pointer items-center justify-center gap-2 px-6 py-2.5 rounded-xl text-white text-sm font-semibold font-sans transition-all duration-150 hover:brightness-105 active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed disabled:active:scale-100"
            style={{
              background: "var(--brand-green)",
              boxShadow: "0 2px 8px rgba(43,182,115,0.3)",
            }}
          >
            {pendingAction === "published" ? (
              <>
                <div
                  className="w-4 h-4 rounded-full border-2 border-t-transparent animate-spin"
                  style={{ borderColor: "rgba(255,255,255,0.8) transparent rgba(255,255,255,0.8) rgba(255,255,255,0.8)" }}
                  aria-hidden="true"
                />
                Publishing…
              </>
            ) : (
              <>
                <Send className="w-4 h-4" aria-hidden="true" />
                Publish article
              </>
            )}
          </button>
        </div>
      </div>
    </form>
  )
}