"use client"

import { useEffect, useRef, useState } from "react"
import { useRouter } from "next/navigation"
import {
  User,
  Award,
  MessageSquare,
  Stethoscope,
  Image,
  Star,
  HelpCircle,
  Save,
  Send,
  Loader2,
  Tag,
  X,
} from "lucide-react"

import { CategorySelect } from "../articles/CategorySelect"
import { DoctorBasicInfo, type DoctorBasicInfoData } from "./DoctorBasicInfo"
import { DoctorCredentials, type DoctorCredentialsData } from "./DoctorCredentials"
import { DoctorBiography, type DoctorBiographyData } from "./DoctorBiography"
import { DoctorSpecialties, type SpecialtyItem } from "./DoctorSpecialties"
import { DoctorBeforeAfter, type BeforeAfterItem } from "./DoctorBeforeAfter"
import { DoctorReviews, type ReviewItem } from "./DoctorReviews"
import { DoctorFAQ, type DoctorFAQItem } from "./DoctorFAQ"
import { DOCTOR_TAG_MAX_COUNT, DOCTOR_TAG_MAX_LENGTH } from "@/lib/doctor-tags"
import type { DoctorLocale } from "@/lib/doctor-db"
import {
  clearDoctorPendingImages,
  commitPendingDoctorImages,
  createEmptyDoctorPendingImages,
} from "@/lib/media-manager/doctor-pending"
import { revokeStagedImage } from "@/lib/media-manager/stage"
import type { StagedImage } from "@/lib/media-manager/types"
import { getPersistedMediaValidationError } from "@/lib/media-manager/validate-persisted-payload"
import { mergeDoctorFormMediaFromSavedDoctor } from "@/lib/media-manager/entity-form-media"

// ─── State shape ────────────────────────────────────────────────────────────

interface SectionHeading {
  title: string
  subtitle: string
}

interface BeforeAfterHeading {
  eyebrow: string
  title: string
  subtitle: string
}

interface LocaleContent {
  name: string
  description: string | null
  tags: string[]
  languages: string[]
  credentials: DoctorCredentialsData
  credentialsHeading: SectionHeading
  biography: DoctorBiographyData
  biographyHeading: SectionHeading
  specialties: SpecialtyItem[]
  specialtiesHeading: SectionHeading
  beforeAfter: BeforeAfterItem[]
  beforeAfterHeading: BeforeAfterHeading
  reviews: ReviewItem[]
  reviewsHeading: SectionHeading
  faq: DoctorFAQItem[]
  faqHeading: SectionHeading
}

interface DoctorFormState {
  categoryId: string
  tags: string[]
  isFeatured: boolean
  basicInfo: DoctorBasicInfoData
  translations: {
    en: LocaleContent
    ar: LocaleContent
    tr: LocaleContent
  }
  credentials: DoctorCredentialsData
  biography: DoctorBiographyData
  specialties: SpecialtyItem[]
  beforeAfter: BeforeAfterItem[]
  reviews: ReviewItem[]
  faq: DoctorFAQItem[]
}

interface PublishValidationErrors {
  categoryId: boolean
  name: boolean
  image: boolean
  description: boolean
  rating: boolean
  reviewCount: boolean
  experienceYears: boolean
  casesCount: boolean
  successRate: boolean
  nationalities: boolean
  languages: boolean
  education: boolean
  certifications: boolean
  researchPublications: boolean
  internationalExperience: boolean
  specialties: boolean
  doctorStatement: boolean
  biography: boolean
  reviews: boolean
  faq: boolean
}

const emptyPublishValidationErrors: PublishValidationErrors = {
  categoryId: false,
  name: false,
  image: false,
  description: false,
  rating: false,
  reviewCount: false,
  experienceYears: false,
  casesCount: false,
  successRate: false,
  nationalities: false,
  languages: false,
  education: false,
  certifications: false,
  researchPublications: false,
  internationalExperience: false,
  specialties: false,
  doctorStatement: false,
  biography: false,
  reviews: false,
  faq: false,
}

const emptyState: DoctorFormState = {
  categoryId: "",
  tags: [],
  isFeatured: false,
  basicInfo: {
    name: "",
    image: "",
    imagePublicId: "",
    rating: "",
    reviewCount: "",
    description: "",
    experienceYears: "",
    casesCount: "",
    successRate: "",
    nationalities: "",
    languages: [],
  },
  translations: {
    en: {
      name: "",
      description: null,
      tags: [],
      languages: [],
      credentials: { education: [], certifications: [], researchPublications: [], internationalExperience: [] },
      credentialsHeading: { title: "", subtitle: "" },
      biography: { doctorStatement: "", biography: "" },
      biographyHeading: { title: "", subtitle: "" },
      specialties: [],
      specialtiesHeading: { title: "", subtitle: "" },
      beforeAfter: [],
      beforeAfterHeading: { eyebrow: "", title: "", subtitle: "" },
      reviews: [],
      reviewsHeading: { title: "", subtitle: "" },
      faq: [],
      faqHeading: { title: "", subtitle: "" },
    },
    ar: {
      name: "",
      description: null,
      tags: [],
      languages: [],
      credentials: { education: [], certifications: [], researchPublications: [], internationalExperience: [] },
      credentialsHeading: { title: "", subtitle: "" },
      biography: { doctorStatement: "", biography: "" },
      biographyHeading: { title: "", subtitle: "" },
      specialties: [],
      specialtiesHeading: { title: "", subtitle: "" },
      beforeAfter: [],
      beforeAfterHeading: { eyebrow: "", title: "", subtitle: "" },
      reviews: [],
      reviewsHeading: { title: "", subtitle: "" },
      faq: [],
      faqHeading: { title: "", subtitle: "" },
    },
    tr: {
      name: "",
      description: null,
      tags: [],
      languages: [],
      credentials: { education: [], certifications: [], researchPublications: [], internationalExperience: [] },
      credentialsHeading: { title: "", subtitle: "" },
      biography: { doctorStatement: "", biography: "" },
      biographyHeading: { title: "", subtitle: "" },
      specialties: [],
      specialtiesHeading: { title: "", subtitle: "" },
      beforeAfter: [],
      beforeAfterHeading: { eyebrow: "", title: "", subtitle: "" },
      reviews: [],
      reviewsHeading: { title: "", subtitle: "" },
      faq: [],
      faqHeading: { title: "", subtitle: "" },
    },
  },
  credentials: {
    education: [],
    certifications: [],
    researchPublications: [],
    internationalExperience: [],
  },
  biography: {
    doctorStatement: "",
    biography: "",
  },
  specialties: [],
  beforeAfter: [],
  reviews: [],
  faq: [],
}

function isReviewComplete(review: ReviewItem): boolean {
  return (
    review.patientName.trim() !== "" &&
    review.country.trim() !== "" &&
    review.treatment.trim() !== "" &&
    review.content.trim() !== "" &&
    review.date.trim() !== "" &&
    review.rating !== ""
  )
}

function isFaqComplete(item: DoctorFAQItem): boolean {
  return item.question.trim() !== "" && item.answer.trim() !== ""
}

function parseCredentialsData(value: unknown): DoctorCredentialsData {
  const source = value && typeof value === "object" ? (value as Record<string, unknown>) : {}
  return {
    education: Array.isArray(source.education) ? source.education.filter((x): x is string => typeof x === "string") : [],
    certifications: Array.isArray(source.certifications) ? source.certifications.filter((x): x is string => typeof x === "string") : [],
    researchPublications: Array.isArray(source.researchPublications) ? source.researchPublications.filter((x): x is string => typeof x === "string") : [],
    internationalExperience: Array.isArray(source.internationalExperience) ? source.internationalExperience.filter((x): x is string => typeof x === "string") : [],
  }
}

function parseBiographyData(value: unknown): DoctorBiographyData {
  const source = value && typeof value === "object" ? (value as Record<string, unknown>) : {}
  return {
    doctorStatement: typeof source.doctorStatement === "string" ? source.doctorStatement : "",
    biography: typeof source.biography === "string" ? source.biography : "",
  }
}

function parseSpecialtiesData(value: unknown): SpecialtyItem[] {
  if (!Array.isArray(value)) return []
  return value.map((item) => {
    const source = item && typeof item === "object" ? (item as Record<string, unknown>) : {}
    return {
      text: typeof source.text === "string" ? source.text : (typeof source.title === "string" ? source.title : ""),
      iconKey: typeof source.iconKey === "string" ? source.iconKey : "",
      description: typeof source.description === "string" ? source.description : "",
    }
  })
}

function parseBeforeAfterData(value: unknown): BeforeAfterItem[] {
  if (!Array.isArray(value)) return []
  return value.map((item) => {
    const source = item && typeof item === "object" ? (item as Record<string, unknown>) : {}
    return {
      image: typeof source.image === "string" ? source.image : "",
      imagePublicId: typeof source.imagePublicId === "string" ? source.imagePublicId : "",
      procedureType: typeof source.procedureType === "string" ? source.procedureType : "",
      graftsLabel: typeof source.graftsLabel === "string" ? source.graftsLabel : "Grafts",
      grafts: typeof source.grafts === "string" ? source.grafts : "",
      monthsPostOpLabel: typeof source.monthsPostOpLabel === "string" ? source.monthsPostOpLabel : "Months Post-Op",
      ageLabel: typeof source.ageLabel === "string" ? source.ageLabel : "Age",
      monthsPostOp:
        typeof source.monthsPostOp === "number"
          ? String(source.monthsPostOp)
          : (typeof source.monthsPostOp === "string" ? source.monthsPostOp : ""),
      age:
        typeof source.age === "number"
          ? String(source.age)
          : (typeof source.age === "string" ? source.age : ""),
      satisfactionLabel: typeof source.satisfactionLabel === "string" ? source.satisfactionLabel : "Satisfaction",
      satisfaction:
        typeof source.satisfaction === "number"
          ? String(source.satisfaction)
          : (typeof source.satisfaction === "string" ? source.satisfaction : ""),
    }
  })
}

function parseReviewsData(value: unknown): ReviewItem[] {
  if (!Array.isArray(value)) return []
  return value.map((item) => {
    const source = item && typeof item === "object" ? (item as Record<string, unknown>) : {}
    return {
      patientName: typeof source.patientName === "string" ? source.patientName : "",
      country: typeof source.country === "string" ? source.country : "",
      treatment: typeof source.treatment === "string" ? source.treatment : "",
      date: typeof source.date === "string" ? source.date : "",
      content: typeof source.content === "string" ? source.content : "",
      rating: typeof source.rating === "number" ? source.rating : "",
    }
  })
}

function parseFaqData(value: unknown): DoctorFAQItem[] {
  if (!Array.isArray(value)) return []
  return value.map((item) => {
    const source = item && typeof item === "object" ? (item as Record<string, unknown>) : {}
    return {
      question: typeof source.question === "string" ? source.question : "",
      answer: typeof source.answer === "string" ? source.answer : "",
    }
  })
}

function parseSectionHeading(value: unknown): SectionHeading {
  const source = value && typeof value === "object" ? (value as Record<string, unknown>) : {}
  return {
    title: typeof source.title === "string" ? source.title : "",
    subtitle: typeof source.subtitle === "string" ? source.subtitle : "",
  }
}

function parseBeforeAfterHeading(value: unknown): BeforeAfterHeading {
  const source = value && typeof value === "object" ? (value as Record<string, unknown>) : {}
  return {
    eyebrow: typeof source.eyebrow === "string" ? source.eyebrow : "",
    title: typeof source.title === "string" ? source.title : "",
    subtitle: typeof source.subtitle === "string" ? source.subtitle : "",
  }
}

function parseStringArray(value: unknown): string[] {
  if (!Array.isArray(value)) return []
  return value
    .filter((x): x is string => typeof x === "string")
    .map((x) => x.trim())
    .filter((x) => x !== "")
}

function syncBeforeAfterSharedValues(
  english: BeforeAfterItem[],
  localized: BeforeAfterItem[]
): BeforeAfterItem[] {
  return localized.map((item, index) => ({
    ...item,
    image: english[index]?.image ?? item.image,
    imagePublicId: english[index]?.imagePublicId ?? item.imagePublicId,
    grafts: english[index]?.grafts ?? item.grafts,
    monthsPostOp: english[index]?.monthsPostOp ?? item.monthsPostOp,
    age: english[index]?.age ?? item.age,
    satisfaction: english[index]?.satisfaction ?? item.satisfaction,
  }))
}

function syncReviewSharedValues(
  english: ReviewItem[],
  localized: ReviewItem[]
): ReviewItem[] {
  return localized.map((item, index) => ({
    ...item,
    rating: english[index]?.rating ?? item.rating,
    date: english[index]?.date ?? item.date,
  }))
}

function validatePublish(form: DoctorFormState): { errors: PublishValidationErrors; missingLabels: string[] } {
  const hasEducation = form.credentials.education.some((entry) => entry.trim() !== "")
  const hasCertifications = form.credentials.certifications.some((entry) => entry.trim() !== "")
  const hasResearchPublications = form.credentials.researchPublications.some((entry) => entry.trim() !== "")
  const hasInternationalExperience = form.credentials.internationalExperience.some((entry) => entry.trim() !== "")

  const errors: PublishValidationErrors = {
    categoryId: form.categoryId.trim() === "",
    name: form.basicInfo.name.trim() === "",
    image: form.basicInfo.image.trim() === "",
    description: form.basicInfo.description.trim() === "",
    rating: form.basicInfo.rating === "",
    reviewCount: form.basicInfo.reviewCount === "",
    experienceYears: form.basicInfo.experienceYears === "",
    casesCount: form.basicInfo.casesCount.trim() === "",
    successRate: form.basicInfo.successRate.trim() === "",
    nationalities: form.basicInfo.nationalities.trim() === "",
    languages: form.basicInfo.languages.length === 0,
    education: !hasEducation,
    certifications: !hasCertifications,
    researchPublications: !hasResearchPublications,
    internationalExperience: !hasInternationalExperience,
    specialties:
      form.specialties.length === 0 ||
      form.specialties.some(
        (item) => item.text.trim() === "" || item.iconKey.trim() === "" || item.description.trim() === ""
      ),
    doctorStatement: form.biography.doctorStatement.trim() === "",
    biography: form.biography.biography.trim() === "",
    reviews: form.reviews.length === 0 || form.reviews.some((review) => !isReviewComplete(review)),
    faq: form.faq.length === 0 || form.faq.some((item) => !isFaqComplete(item)),
  }

  const missingLabels: string[] = []
  if (errors.categoryId) missingLabels.push("Category")
  if (errors.name) missingLabels.push("Doctor Name")
  if (errors.image) missingLabels.push("Doctor Photo")
  if (errors.description) missingLabels.push("Description")
  if (errors.rating) missingLabels.push("Rating")
  if (errors.reviewCount) missingLabels.push("Review Count")
  if (errors.experienceYears) missingLabels.push("Experience (Years)")
  if (errors.casesCount) missingLabels.push("Cases Count")
  if (errors.successRate) missingLabels.push("Success Rate")
  if (errors.nationalities) missingLabels.push("Nationalities")
  if (errors.languages) missingLabels.push("Languages")
  if (errors.education) missingLabels.push("Education")
  if (errors.certifications) missingLabels.push("Certifications")
  if (errors.researchPublications) missingLabels.push("Research & Publications")
  if (errors.internationalExperience) missingLabels.push("International Experience")
  if (errors.specialties) missingLabels.push("Surgical Specialties")
  if (errors.doctorStatement) missingLabels.push("Doctor Statement")
  if (errors.biography) missingLabels.push("Biography")
  if (errors.reviews) missingLabels.push("Patient Reviews")
  if (errors.faq) missingLabels.push("Frequently Asked Questions")

  return { errors, missingLabels }
}

// ─── Section heading fields helper ──────────────────────────────────────────

interface SectionHeadingFieldsProps {
  value: SectionHeading
  onChange: (value: SectionHeading) => void
  eyebrow?: string
  onEyebrowChange?: (val: string) => void
}

function SectionHeadingFields({ value, onChange, eyebrow, onEyebrowChange }: SectionHeadingFieldsProps) {
  const inputClass =
    "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"

  return (
    <div
      className="flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-4 mb-5"
    >
      <div
        className="flex items-center gap-2 pb-2 border-b border-border"
      >
        <span
          className="w-1 h-4 rounded-full shrink-0"
          style={{ background: "var(--brand-green)" }}
          aria-hidden="true"
        />
        <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground font-sans">
          Section Headings
        </p>
      </div>

      {onEyebrowChange !== undefined && (
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-semibold text-foreground font-sans">
            Eyebrow Text
          </label>
          <input
            type="text"
            value={eyebrow ?? ""}
            onChange={(e) => onEyebrowChange(e.target.value)}
            placeholder="e.g. Real Results"
            className={inputClass}
          />
        </div>
      )}

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-semibold text-foreground font-sans">
            Title
          </label>
          <input
            type="text"
            value={value.title}
            onChange={(e) => onChange({ ...value, title: e.target.value })}
            placeholder="e.g. Credentials & Qualifications"
            className={inputClass}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-semibold text-foreground font-sans">
            Subtitle
          </label>
          <input
            type="text"
            value={value.subtitle}
            onChange={(e) => onChange({ ...value, subtitle: e.target.value })}
            placeholder="e.g. Board-certified with international recognition"
            className={inputClass}
          />
        </div>
      </div>
    </div>
  )
}

// ─── Section header helper ───────────────────────────────────────────────────

interface SectionProps {
  id: string
  icon: React.ReactNode
  title: string
  description: string
  accent: "navy" | "green"
  children: React.ReactNode
}

function Section({ id, icon, title, description, accent, children }: SectionProps) {
  const bg = accent === "navy" ? "rgba(29,45,104,0.02)" : "rgba(43,182,115,0.02)"
  const iconBg = accent === "navy" ? "rgba(29,45,104,0.08)" : "rgba(43,182,115,0.10)"
  const iconColor = accent === "navy" ? "var(--brand-navy)" : "var(--brand-green)"

  return (
    <section className="bg-card rounded-2xl border border-border overflow-hidden" aria-labelledby={id}>
      <div
        className="flex items-center gap-3 px-6 py-4 border-b border-border"
        style={{ background: bg }}
      >
        <div
          className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
          style={{ background: iconBg }}
        >
          <span style={{ color: iconColor }} aria-hidden="true">
            {icon}
          </span>
        </div>
        <div>
          <h2 id={id} className="text-sm font-bold text-foreground font-sans">
            {title}
          </h2>
          <p className="text-xs text-muted-foreground font-sans">{description}</p>
        </div>
      </div>
      <div className="p-6">{children}</div>
    </section>
  )
}

// ─── Main form ───────────────────────────────────────────────────────────────

interface DoctorFormProps {
  doctorId?: string
  onSuccess?: () => void
  cancelHref?: string
}

export function DoctorForm({ doctorId, onSuccess, cancelHref = "/dashboard/doctors" }: DoctorFormProps) {
  const router = useRouter()
  type DoctorSectionKey =
    | "basic"
    | "credentials"
    | "biography"
    | "specialties"
    | "beforeAfter"
    | "reviews"
    | "faq"
  const [form, setForm] = useState<DoctorFormState>(emptyState)
  const [loadError, setLoadError] = useState<string | null>(null)
  const [loadingDoctor, setLoadingDoctor] = useState(!!doctorId)
  const [createdDoctorId, setCreatedDoctorId] = useState<string | null>(null)
  const [pendingAction, setPendingAction] = useState<"draft" | "published" | null>(null)
  const [savingSectionKey, setSavingSectionKey] = useState<DoctorSectionKey | null>(null)
  const [sectionFeedback, setSectionFeedback] = useState<
    Partial<Record<DoctorSectionKey, { type: "success" | "error"; message: string }>>
  >({})
  const sectionFeedbackTimersRef = useRef<Partial<Record<DoctorSectionKey, ReturnType<typeof setTimeout>>>>({})
  const pendingImagesRef = useRef(createEmptyDoctorPendingImages())
  /** English name from server — updated after each successful save. */
  const loadedDoctorNameRef = useRef("")
  const [submitError, setSubmitError] = useState<string | null>(null)
  const [submitSuccess, setSubmitSuccess] = useState<string | null>(null)
  const [publishValidationErrors, setPublishValidationErrors] = useState<PublishValidationErrors>(emptyPublishValidationErrors)
  const [missingPublishFields, setMissingPublishFields] = useState<string[]>([])
  const [tagInput, setTagInput] = useState("")
  const [activeLocale, setActiveLocale] = useState<DoctorLocale>("en")
  const sharedFieldsLocked = activeLocale !== "en"

  function getDoctorName() {
    return (form.translations.en.name || form.basicInfo.name || "").trim()
  }

  function handleStageProfileImage(staged: StagedImage) {
    if (pendingImagesRef.current.profile) {
      revokeStagedImage(pendingImagesRef.current.profile)
    }
    pendingImagesRef.current.profile = staged
  }

  function handleClearStagedProfileImage() {
    if (pendingImagesRef.current.profile) {
      revokeStagedImage(pendingImagesRef.current.profile)
      pendingImagesRef.current.profile = null
    }
  }

  function handleStageCaseImage(index: number, staged: StagedImage) {
    const existing = pendingImagesRef.current.beforeAfter.get(index)
    if (existing) revokeStagedImage(existing)
    pendingImagesRef.current.beforeAfter.set(index, staged)
  }

  function handleClearStagedCaseImage(index: number) {
    const existing = pendingImagesRef.current.beforeAfter.get(index)
    if (existing) revokeStagedImage(existing)
    pendingImagesRef.current.beforeAfter.delete(index)
  }

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

  useEffect(() => {
    if (!doctorId) {
      setLoadingDoctor(false)
      return
    }

    let cancelled = false
    async function loadDoctor() {
      setLoadingDoctor(true)
      setLoadError(null)
      try {
        const res = await fetch(`/api/admin/doctors/${doctorId}`, { 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 doctor")
        }
        const doctor = json?.doctor
        if (!doctor || cancelled) return

        const baseCredentials = parseCredentialsData(doctor.credentials)
        const baseBiography = parseBiographyData({
          biography: doctor.biography,
          doctorStatement: doctor.doctorStatement,
        })
        const baseSpecialties = parseSpecialtiesData(doctor.specialties)
        const baseBeforeAfter = parseBeforeAfterData(doctor.beforeAfter)
        const baseReviews = parseReviewsData(doctor.reviews)
        const baseFaq = parseFaqData(doctor.faq)
        setForm({
          categoryId: typeof doctor.categoryId === "string" ? doctor.categoryId : "",
          tags: Array.isArray(doctor.tags)
            ? doctor.tags.filter((tag: unknown): tag is string => typeof tag === "string" && tag.trim() !== "")
            : [],
          isFeatured: Boolean(doctor.isFeatured),
          basicInfo: {
            name: typeof doctor.name === "string" ? doctor.name : "",
            image: typeof doctor.image === "string" ? doctor.image : "",
            imagePublicId: typeof doctor.imagePublicId === "string" ? doctor.imagePublicId : "",
            rating: typeof doctor.rating === "number" ? doctor.rating : "",
            reviewCount: typeof doctor.reviewCount === "number" ? doctor.reviewCount : "",
            description: typeof doctor.description === "string" ? doctor.description : "",
            experienceYears: typeof doctor.experienceYears === "number" ? doctor.experienceYears : "",
            casesCount: typeof doctor.casesCount === "string" ? doctor.casesCount : "",
            successRate: typeof doctor.successRate === "string" ? doctor.successRate : "",
            nationalities: typeof doctor.nationalities === "string" ? doctor.nationalities : "",
            languages: Array.isArray(doctor.languages)
              ? doctor.languages.filter((language: unknown): language is string => typeof language === "string" && language.trim() !== "")
              : [],
          },
          translations:
            doctor.translations && typeof doctor.translations === "object"
              ? {
                en: {
                  name:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en &&
                      typeof ((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).name === "string"
                      ? (((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).name as string)
                      : (typeof doctor.name === "string" ? doctor.name : ""),
                  description:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en &&
                      typeof ((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).description === "string"
                      ? (((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).description as string)
                      : (typeof doctor.description === "string" ? doctor.description : null),
                  tags:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseStringArray(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).tags)
                      : parseStringArray(doctor.tags),
                  languages:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseStringArray(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).languages)
                      : parseStringArray(doctor.languages),
                  credentials:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseCredentialsData(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).credentials)
                      : baseCredentials,
                  credentialsHeading:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).credentialsHeading)
                      : { title: "", subtitle: "" },
                  biography:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseBiographyData({
                        biography: ((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).biography,
                        doctorStatement: ((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).doctorStatement,
                      })
                      : baseBiography,
                  biographyHeading:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).biographyHeading)
                      : { title: "", subtitle: "" },
                  specialties:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseSpecialtiesData(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).specialties)
                      : baseSpecialties,
                  specialtiesHeading:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).specialtiesHeading)
                      : { title: "", subtitle: "" },
                  beforeAfter:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseBeforeAfterData(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).beforeAfter)
                      : baseBeforeAfter,
                  beforeAfterHeading:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseBeforeAfterHeading(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).beforeAfterHeading)
                      : { eyebrow: "", title: "", subtitle: "" },
                  reviews:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseReviewsData(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).reviews)
                      : baseReviews,
                  reviewsHeading:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).reviewsHeading)
                      : { title: "", subtitle: "" },
                  faq:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseFaqData(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).faq)
                      : baseFaq,
                  faqHeading:
                    typeof (doctor.translations as Record<string, unknown>).en === "object" &&
                      (doctor.translations as Record<string, unknown>).en
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).en as Record<string, unknown>).faqHeading)
                      : { title: "", subtitle: "" },
                },
                ar: {
                  name:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar &&
                      typeof ((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).name === "string"
                      ? (((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).name as string)
                      : "",
                  description:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar &&
                      typeof ((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).description === "string"
                      ? (((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).description as string)
                      : null,
                  tags:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseStringArray(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).tags)
                      : [],
                  languages:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseStringArray(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).languages)
                      : [],
                  credentials:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseCredentialsData(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).credentials)
                      : { education: [], certifications: [], researchPublications: [], internationalExperience: [] },
                  credentialsHeading:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).credentialsHeading)
                      : { title: "", subtitle: "" },
                  biography:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseBiographyData({
                        biography: ((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).biography,
                        doctorStatement: ((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).doctorStatement,
                      })
                      : { doctorStatement: "", biography: "" },
                  biographyHeading:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).biographyHeading)
                      : { title: "", subtitle: "" },
                  specialties:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseSpecialtiesData(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).specialties)
                      : [],
                  specialtiesHeading:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).specialtiesHeading)
                      : { title: "", subtitle: "" },
                  beforeAfter:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseBeforeAfterData(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).beforeAfter)
                      : [],
                  beforeAfterHeading:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseBeforeAfterHeading(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).beforeAfterHeading)
                      : { eyebrow: "", title: "", subtitle: "" },
                  reviews:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseReviewsData(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).reviews)
                      : [],
                  reviewsHeading:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).reviewsHeading)
                      : { title: "", subtitle: "" },
                  faq:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseFaqData(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).faq)
                      : [],
                  faqHeading:
                    typeof (doctor.translations as Record<string, unknown>).ar === "object" &&
                      (doctor.translations as Record<string, unknown>).ar
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).ar as Record<string, unknown>).faqHeading)
                      : { title: "", subtitle: "" },
                },
                tr: {
                  name:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr &&
                      typeof ((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).name === "string"
                      ? (((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).name as string)
                      : "",
                  description:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr &&
                      typeof ((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).description === "string"
                      ? (((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).description as string)
                      : null,
                  tags:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseStringArray(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).tags)
                      : [],
                  languages:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseStringArray(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).languages)
                      : [],
                  credentials:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseCredentialsData(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).credentials)
                      : { education: [], certifications: [], researchPublications: [], internationalExperience: [] },
                  credentialsHeading:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).credentialsHeading)
                      : { title: "", subtitle: "" },
                  biography:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseBiographyData({
                        biography: ((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).biography,
                        doctorStatement: ((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).doctorStatement,
                      })
                      : { doctorStatement: "", biography: "" },
                  biographyHeading:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).biographyHeading)
                      : { title: "", subtitle: "" },
                  specialties:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseSpecialtiesData(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).specialties)
                      : [],
                  specialtiesHeading:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).specialtiesHeading)
                      : { title: "", subtitle: "" },
                  beforeAfter:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseBeforeAfterData(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).beforeAfter)
                      : [],
                  beforeAfterHeading:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseBeforeAfterHeading(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).beforeAfterHeading)
                      : { eyebrow: "", title: "", subtitle: "" },
                  reviews:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseReviewsData(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).reviews)
                      : [],
                  reviewsHeading:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).reviewsHeading)
                      : { title: "", subtitle: "" },
                  faq:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseFaqData(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).faq)
                      : [],
                  faqHeading:
                    typeof (doctor.translations as Record<string, unknown>).tr === "object" &&
                      (doctor.translations as Record<string, unknown>).tr
                      ? parseSectionHeading(((doctor.translations as Record<string, unknown>).tr as Record<string, unknown>).faqHeading)
                      : { title: "", subtitle: "" },
                },
              }
              : {
                en: {
                  name: typeof doctor.name === "string" ? doctor.name : "",
                  description: typeof doctor.description === "string" ? doctor.description : null,
                  tags: parseStringArray(doctor.tags),
                  languages: parseStringArray(doctor.languages),
                  credentials: baseCredentials,
                  credentialsHeading: { title: "", subtitle: "" },
                  biography: baseBiography,
                  biographyHeading: { title: "", subtitle: "" },
                  specialties: baseSpecialties,
                  specialtiesHeading: { title: "", subtitle: "" },
                  beforeAfter: baseBeforeAfter,
                  beforeAfterHeading: { eyebrow: "", title: "", subtitle: "" },
                  reviews: baseReviews,
                  reviewsHeading: { title: "", subtitle: "" },
                  faq: baseFaq,
                  faqHeading: { title: "", subtitle: "" },
                },
                ar: {
                  name: "",
                  description: null,
                  tags: [],
                  languages: [],
                  credentials: { education: [], certifications: [], researchPublications: [], internationalExperience: [] },
                  credentialsHeading: { title: "", subtitle: "" },
                  biography: { doctorStatement: "", biography: "" },
                  biographyHeading: { title: "", subtitle: "" },
                  specialties: [],
                  specialtiesHeading: { title: "", subtitle: "" },
                  beforeAfter: [],
                  beforeAfterHeading: { eyebrow: "", title: "", subtitle: "" },
                  reviews: [],
                  reviewsHeading: { title: "", subtitle: "" },
                  faq: [],
                  faqHeading: { title: "", subtitle: "" },
                },
                tr: {
                  name: "",
                  description: null,
                  tags: [],
                  languages: [],
                  credentials: { education: [], certifications: [], researchPublications: [], internationalExperience: [] },
                  credentialsHeading: { title: "", subtitle: "" },
                  biography: { doctorStatement: "", biography: "" },
                  biographyHeading: { title: "", subtitle: "" },
                  specialties: [],
                  specialtiesHeading: { title: "", subtitle: "" },
                  beforeAfter: [],
                  beforeAfterHeading: { eyebrow: "", title: "", subtitle: "" },
                  reviews: [],
                  reviewsHeading: { title: "", subtitle: "" },
                  faq: [],
                  faqHeading: { title: "", subtitle: "" },
                },
              },
          credentials: baseCredentials,
          biography: baseBiography,
          specialties: baseSpecialties,
          beforeAfter: baseBeforeAfter,
          reviews: baseReviews,
          faq: baseFaq,
        })
        loadedDoctorNameRef.current = typeof doctor.name === "string" ? doctor.name.trim() : ""
      } catch (error) {
        if (!cancelled) {
          setLoadError(error instanceof Error ? error.message : "Failed to load doctor")
          setForm(emptyState)
        }
      } finally {
        if (!cancelled) {
          setLoadingDoctor(false)
        }
      }
    }

    void loadDoctor()

    return () => {
      cancelled = true
    }
  }, [doctorId])

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

  function getSectionTitle(sectionKey: DoctorSectionKey) {
    switch (sectionKey) {
      case "basic":
        return "Doctor Profile"
      case "credentials":
        return "Credentials & Qualifications"
      case "biography":
        return "Professional Biography"
      case "specialties":
        return "Surgical Specialties"
      case "beforeAfter":
        return "Before & After Results"
      case "reviews":
        return "Patient Reviews"
      case "faq":
        return "Frequently Asked Questions"
      default:
        return sectionKey
    }
  }

  function showSectionFeedback(sectionKey: DoctorSectionKey, 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)
  }

  function updateSection<K extends keyof DoctorFormState>(key: K, value: DoctorFormState[K]) {
    setForm((prev) => ({ ...prev, [key]: value }))
    setSubmitError(null)
    setSubmitSuccess(null)
    setPublishValidationErrors(emptyPublishValidationErrors)
    setMissingPublishFields([])
  }

  function addTag() {
    const parts = tagInput
      .split(/[,;]+/)
      .map((p) => p.trim().replace(/\s+/g, " "))
      .filter((p) => p.length > 0 && p.length <= DOCTOR_TAG_MAX_LENGTH)
    if (parts.length === 0) return
    setForm((prev) => {
      const currentTags = prev.translations[activeLocale].tags
      const seen = new Set(currentTags.map((t) => t.toLowerCase()))
      const toAdd: string[] = []
      for (const p of parts) {
        if (seen.has(p.toLowerCase())) continue
        seen.add(p.toLowerCase())
        toAdd.push(p)
        if (currentTags.length + toAdd.length >= DOCTOR_TAG_MAX_COUNT) break
      }
      const nextTags = [...currentTags, ...toAdd]
      return {
        ...prev,
        tags: activeLocale === "en" ? nextTags : prev.tags,
        translations: {
          ...prev.translations,
          [activeLocale]: {
            ...prev.translations[activeLocale],
            tags: nextTags,
          },
        },
      }
    })
    setTagInput("")
    setSubmitError(null)
    setSubmitSuccess(null)
  }

  function removeTag(tag: string) {
    setForm((prev) => {
      const nextTags = prev.translations[activeLocale].tags.filter((t) => t !== tag)
      return {
        ...prev,
        tags: activeLocale === "en" ? nextTags : prev.tags,
        translations: {
          ...prev.translations,
          [activeLocale]: {
            ...prev.translations[activeLocale],
            tags: nextTags,
          },
        },
      }
    })
    setPublishValidationErrors(emptyPublishValidationErrors)
    setMissingPublishFields([])
  }

  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?: {
      callOnSuccess?: boolean
      suppressGlobalFeedback?: boolean
      resetOnCreate?: boolean
    }
  ) {
    const callOnSuccess = options?.callOnSuccess !== false
    const suppressGlobalFeedback = options?.suppressGlobalFeedback ?? false
    const resetOnCreate = options?.resetOnCreate ?? true

    const effectiveDoctorId = doctorId ?? createdDoctorId
    const isCreating = !doctorId && !createdDoctorId

    if (!suppressGlobalFeedback) {
      setSubmitError(null)
      setSubmitSuccess(null)
    }
    setPendingAction(status)

    if (status === "published") {
      const validation = validatePublish(form)
      if (validation.missingLabels.length > 0) {
        setPublishValidationErrors(validation.errors)
        setMissingPublishFields(validation.missingLabels)
        if (!suppressGlobalFeedback) setSubmitError("Please fill all required publish fields.")
        setPendingAction(null)
        return
      }
      setPublishValidationErrors(emptyPublishValidationErrors)
      setMissingPublishFields([])
    } else {
      setPublishValidationErrors(emptyPublishValidationErrors)
      setMissingPublishFields([])
    }

    try {
      const hasPendingImages =
        !!pendingImagesRef.current.profile || pendingImagesRef.current.beforeAfter.size > 0

      let basicInfoForSave = form.basicInfo
      let beforeAfterForSave = form.translations.en.beforeAfter

      if (hasPendingImages) {
        const doctorName = getDoctorName()
        if (!doctorName) {
          if (!suppressGlobalFeedback) {
            setSubmitError("Doctor name is required before saving images.")
          }
          setPendingAction(null)
          return
        }

        try {
          const committed = await commitPendingDoctorImages(
            {
              basicInfo: form.basicInfo,
              beforeAfter: form.translations.en.beforeAfter,
            },
            {
              doctorName,
              doctorId: effectiveDoctorId ?? undefined,
              pending: pendingImagesRef.current,
            }
          )
          basicInfoForSave = { ...form.basicInfo, ...committed.basicInfo }
          beforeAfterForSave = committed.beforeAfter

          setForm((prev) => ({
            ...prev,
            basicInfo: basicInfoForSave,
            beforeAfter: beforeAfterForSave,
            translations: {
              ...prev.translations,
              en: { ...prev.translations.en, beforeAfter: beforeAfterForSave },
              ar: {
                ...prev.translations.ar,
                beforeAfter: syncBeforeAfterSharedValues(
                  beforeAfterForSave,
                  prev.translations.ar.beforeAfter
                ),
              },
              tr: {
                ...prev.translations.tr,
                beforeAfter: syncBeforeAfterSharedValues(
                  beforeAfterForSave,
                  prev.translations.tr.beforeAfter
                ),
              },
            },
          }))
        } catch (uploadErr) {
          if (!suppressGlobalFeedback) {
            setSubmitError(
              uploadErr instanceof Error ? uploadErr.message : "Failed to upload images."
            )
          }
          setPendingAction(null)
          return
        }
      }

      const payload = {
        status,
        categoryId: form.categoryId,
        tags: form.translations.en.tags,
        isFeatured: form.isFeatured,
        name: form.translations.en.name,
        image: basicInfoForSave.image,
        imagePublicId: basicInfoForSave.imagePublicId,
        rating: basicInfoForSave.rating === "" ? 0 : basicInfoForSave.rating,
        reviewCount: basicInfoForSave.reviewCount === "" ? 0 : basicInfoForSave.reviewCount,
        description: form.translations.en.description ?? "",
        experienceYears: basicInfoForSave.experienceYears === "" ? 0 : basicInfoForSave.experienceYears,
        casesCount: basicInfoForSave.casesCount,
        successRate: basicInfoForSave.successRate,
        nationalities: basicInfoForSave.nationalities,
        languages: form.translations.en.languages,
        credentials: form.translations.en.credentials,
        credentialsHeading: form.translations.en.credentialsHeading,
        biography: form.translations.en.biography.biography,
        doctorStatement: form.translations.en.biography.doctorStatement,
        biographyHeading: form.translations.en.biographyHeading,
        specialties: form.translations.en.specialties,
        specialtiesHeading: form.translations.en.specialtiesHeading,
        beforeAfter: beforeAfterForSave,
        beforeAfterHeading: form.translations.en.beforeAfterHeading,
        reviews: form.translations.en.reviews,
        reviewsHeading: form.translations.en.reviewsHeading,
        faq: form.translations.en.faq,
        faqHeading: form.translations.en.faqHeading,
        translations: {
          ...form.translations,
          en: { ...form.translations.en, beforeAfter: beforeAfterForSave },
          ar: {
            ...form.translations.ar,
            beforeAfter: syncBeforeAfterSharedValues(
              beforeAfterForSave,
              form.translations.ar.beforeAfter
            ),
          },
          tr: {
            ...form.translations.tr,
            beforeAfter: syncBeforeAfterSharedValues(
              beforeAfterForSave,
              form.translations.tr.beforeAfter
            ),
          },
        },
      }

      const persistMediaError = getPersistedMediaValidationError(payload)
      if (persistMediaError) {
        if (!suppressGlobalFeedback) setSubmitError(persistMediaError)
        setPendingAction(null)
        return
      }

      const url = effectiveDoctorId ? `/api/admin/doctors/${effectiveDoctorId}` : "/api/admin/doctors"
      const method = effectiveDoctorId ? "PUT" : "POST"
      async function doRequest() {
        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) {
          throw new Error(typeof json?.error === "string" ? json.error : "Request failed")
        }
        return json
      }

      const maxAttempts = 2
      let lastError: unknown = null
      let json: any = null
      for (let attempt = 1; attempt <= maxAttempts; attempt++) {
        try {
          json = await doRequest()
          break
        } catch (e) {
          lastError = e
          // Retry once for transient failures (e.g. occasional 500s)
          if (attempt < maxAttempts) {
            await new Promise((r) => setTimeout(r, 400))
            continue
          }
        }
      }
      if (!json) {
        throw lastError instanceof Error ? lastError : new Error("Request failed")
      }

      const savedDoctor = json?.doctor
      if (savedDoctor && typeof savedDoctor === "object") {
        setForm((prev) => mergeDoctorFormMediaFromSavedDoctor(prev, savedDoctor))
      }

      const savedName =
        savedDoctor && typeof savedDoctor === "object" && typeof (savedDoctor as { name?: unknown }).name === "string"
          ? String((savedDoctor as { name: string }).name).trim()
          : getDoctorName()
      loadedDoctorNameRef.current = savedName

      if (isCreating && typeof json?.doctor?.id === "string") {
        setCreatedDoctorId(json.doctor.id)
      }

      if (!suppressGlobalFeedback) {
        setSubmitSuccess(
          status === "draft" ? "Doctor profile saved as draft." : "Doctor profile published successfully."
        )
      }
      if (isCreating && resetOnCreate) {
        setForm(emptyState)
      }
      if (callOnSuccess) onSuccess?.()
    } catch (error) {
      if (!suppressGlobalFeedback) {
        setSubmitError(error instanceof Error ? error.message : "Something went wrong. Please try again.")
      }
      // For section-save we rely on the caller's catch block.
      if (suppressGlobalFeedback) throw error
      // For form-level Save Draft/Publish, avoid unhandled Runtime Error logs.
      return
    } finally {
      setPendingAction(null)
    }
  }

  async function handleSaveSection(sectionKey: DoctorSectionKey) {
    setSavingSectionKey(sectionKey)
    try {
      await runSubmit("draft", {
        suppressGlobalFeedback: true,
        callOnSuccess: false,
        resetOnCreate: false,
      })
      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: DoctorSectionKey) {
    const isSavingThisSection = savingSectionKey === sectionKey
    const feedback = sectionFeedback[sectionKey]

    return (
      <div className="flex flex-col items-end gap-2 pt-4">
        <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 (doctorId && loadingDoctor) {
    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 doctor…</p>
      </div>
    )
  }

  if (doctorId && 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 1 — Basic Info */}
      <Section
        id="section-basic"
        icon={<User className="w-4 h-4" />}
        title="Doctor Profile"
        description="Name, photo, rating, statistics and languages"
        accent="navy"
      >
        <div className="flex flex-col gap-5">
          {/* Basic info fields (name, photo, rating, etc.) */}
          <div className="flex items-center gap-2 rounded-xl border border-border bg-muted/30 p-1">
            {([
              { locale: "en", label: "English", required: true },
              { locale: "ar", label: "Arabic", required: false },
              { locale: "tr", label: "Turkish", required: false },
            ] as const).map((tab) => (
              <button
                key={tab.locale}
                type="button"
                onClick={() => setActiveLocale(tab.locale)}
                className="px-3 py-1.5 rounded-lg text-xs font-semibold font-sans transition-colors cursor-pointer"
                style={
                  activeLocale === tab.locale
                    ? { background: "var(--brand-green)", color: "#fff" }
                    : { color: "var(--muted-foreground)" }
                }
              >
                {tab.label}
                {tab.required ? " *" : ""}
              </button>
            ))}

            {sharedFieldsLocked && (
              <p className="text-xs text-amber-600 font-sans">
                Shared fields can only be edited from the English tab.
              </p>
            )}
          </div>
          {/* Category */}
          <CategorySelect
            value={form.categoryId}
            onChange={(v) => updateSection("categoryId", v)}
            invalid={publishValidationErrors.categoryId}
            disabled={sharedFieldsLocked}
          />
          <DoctorBasicInfo
            value={{
              ...form.basicInfo,
              name: form.translations[activeLocale].name,
              description: form.translations[activeLocale].description ?? "",
              languages: form.translations[activeLocale].languages,
            }}
            getDoctorName={getDoctorName}
            onStageProfileImage={handleStageProfileImage}
            onClearStagedProfileImage={handleClearStagedProfileImage}
            onChange={(v) => {
              const localeDescription = v.description.trim() === "" ? null : v.description
              updateSection("basicInfo", {
                ...v,
                name: activeLocale === "en" ? v.name : form.basicInfo.name,
                description: activeLocale === "en" ? v.description : form.basicInfo.description,
                languages: activeLocale === "en" ? v.languages : form.basicInfo.languages,
              })
              setForm((prev) => ({
                ...prev,
                translations: {
                  ...prev.translations,
                  [activeLocale]: {
                    name: v.name,
                    description: localeDescription,
                    languages: v.languages,
                    tags: prev.translations[activeLocale].tags,
                    credentials: prev.translations[activeLocale].credentials,
                    credentialsHeading: prev.translations[activeLocale].credentialsHeading,
                    biography: prev.translations[activeLocale].biography,
                    biographyHeading: prev.translations[activeLocale].biographyHeading,
                    specialties: prev.translations[activeLocale].specialties,
                    specialtiesHeading: prev.translations[activeLocale].specialtiesHeading,
                    beforeAfter: prev.translations[activeLocale].beforeAfter,
                    beforeAfterHeading: prev.translations[activeLocale].beforeAfterHeading,
                    reviews: prev.translations[activeLocale].reviews,
                    reviewsHeading: prev.translations[activeLocale].reviewsHeading,
                    faq: prev.translations[activeLocale].faq,
                    faqHeading: prev.translations[activeLocale].faqHeading,
                  },
                },
              }))
            }}
            invalidFields={{
              name: activeLocale === "en" ? publishValidationErrors.name : false,
              image: publishValidationErrors.image,
              description: activeLocale === "en" ? publishValidationErrors.description : false,
              rating: publishValidationErrors.rating,
              reviewCount: publishValidationErrors.reviewCount,
              experienceYears: publishValidationErrors.experienceYears,
              casesCount: publishValidationErrors.casesCount,
              successRate: publishValidationErrors.successRate,
              nationalities: publishValidationErrors.nationalities,
              languages: publishValidationErrors.languages,
            }}
            sharedFieldsLocked={sharedFieldsLocked}
          />
          


          {/* Tags */}
          <div className="flex flex-col gap-2">
            <div className="flex flex-col gap-1.5">
              <label
                htmlFor="doctor-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.translations[activeLocale].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"
                    >
                      <X className="w-3 h-3" aria-hidden="true" />
                    </button>
                  </span>
                ))}
              </div>
            )}
            <div className="flex gap-2">
              <input
                id="doctor-tags"
                type="text"
                value={tagInput}
                onChange={(e) => setTagInput(e.target.value)}
                onKeyDown={handleTagKeyDown}
                onBlur={() => addTag()}
                placeholder="e.g. hair transplant, FUE, rhinoplasty..."
                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"
              />
              <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 Doctor</p>
                <p className="text-xs text-muted-foreground font-sans">
                  Pin this doctor to appear in featured sections
                </p>
              </div>
            </div>
            <button
              type="button"
              role="switch"
              aria-checked={form.isFeatured}
              onClick={() => updateSection("isFeatured", !form.isFeatured)}
              disabled={sharedFieldsLocked}
              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 disabled:opacity-60"
              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>


        </div>
        {renderSectionSaveButton("basic")}
      </Section>

      {/* Section 2 — Credentials */}
      <Section
        id="section-credentials"
        icon={<Award className="w-4 h-4" />}
        title="Credentials & Qualifications"
        description="Education, certifications, publications and international experience"
        accent="green"
      >
        <SectionHeadingFields
          value={form.translations[activeLocale].credentialsHeading}
          onChange={(v) =>
            setForm((prev) => ({
              ...prev,
              translations: {
                ...prev.translations,
                [activeLocale]: { ...prev.translations[activeLocale], credentialsHeading: v },
              },
            }))
          }
        />
        <DoctorCredentials
          value={form.translations[activeLocale].credentials}
          onChange={(v) => {
            setForm((prev) => ({
              ...prev,
              credentials: activeLocale === "en" ? v : prev.credentials,
              translations: {
                ...prev.translations,
                [activeLocale]: {
                  ...prev.translations[activeLocale],
                  credentials: v,
                },
              },
            }))
          }}
          invalidSections={{
            education: activeLocale === "en" ? publishValidationErrors.education : false,
            certifications: activeLocale === "en" ? publishValidationErrors.certifications : false,
            researchPublications: activeLocale === "en" ? publishValidationErrors.researchPublications : false,
            internationalExperience: activeLocale === "en" ? publishValidationErrors.internationalExperience : false,
          }}
        />
        {renderSectionSaveButton("credentials")}
      </Section>

      {/* Section 3 — Biography */}
      <Section
        id="section-biography"
        icon={<MessageSquare className="w-4 h-4" />}
        title="Professional Biography"
        description="The doctor's personal statement shown on their profile"
        accent="navy"
      >
        <SectionHeadingFields
          value={form.translations[activeLocale].biographyHeading}
          onChange={(v) =>
            setForm((prev) => ({
              ...prev,
              translations: {
                ...prev.translations,
                [activeLocale]: { ...prev.translations[activeLocale], biographyHeading: v },
              },
            }))
          }
        />
        <DoctorBiography
          value={form.translations[activeLocale].biography}
          onChange={(v) => {
            setForm((prev) => ({
              ...prev,
              biography: activeLocale === "en" ? v : prev.biography,
              translations: {
                ...prev.translations,
                [activeLocale]: {
                  ...prev.translations[activeLocale],
                  biography: v,
                },
              },
            }))
          }}
          invalidDoctorStatement={activeLocale === "en" ? publishValidationErrors.doctorStatement : false}
          invalidBiography={activeLocale === "en" ? publishValidationErrors.biography : false}
        />
        {renderSectionSaveButton("biography")}
      </Section>

      {/* Section 4 — Specialties */}
      <Section
        id="section-specialties"
        icon={<Stethoscope className="w-4 h-4" />}
        title="Surgical Specialties"
        description="Add each specialty with a matching medical icon"
        accent="green"
      >
        <SectionHeadingFields
          value={form.translations[activeLocale].specialtiesHeading}
          onChange={(v) =>
            setForm((prev) => ({
              ...prev,
              translations: {
                ...prev.translations,
                [activeLocale]: { ...prev.translations[activeLocale], specialtiesHeading: v },
              },
            }))
          }
        />
        <DoctorSpecialties
          value={form.translations[activeLocale].specialties}
          onChange={(v) => {
            setForm((prev) => ({
              ...prev,
              specialties: activeLocale === "en" ? v : prev.specialties,
              translations: {
                ...prev.translations,
                [activeLocale]: {
                  ...prev.translations[activeLocale],
                  specialties: v,
                },
              },
            }))
          }}
          showValidationError={activeLocale === "en" ? publishValidationErrors.specialties : false}
        />
        {renderSectionSaveButton("specialties")}
      </Section>

      {/* Section 5 — Before & After */}
      <Section
        id="section-before-after"
        icon={<Image className="w-4 h-4" />}
        title="Before & After Results"
        description="Optional: showcase patient cases with photos and procedure details"
        accent="navy"
      >
        <SectionHeadingFields
          value={form.translations[activeLocale].beforeAfterHeading}
          onChange={(v) =>
            setForm((prev) => ({
              ...prev,
              translations: {
                ...prev.translations,
                [activeLocale]: {
                  ...prev.translations[activeLocale],
                  beforeAfterHeading: { ...prev.translations[activeLocale].beforeAfterHeading, ...v },
                },
              },
            }))
          }
          eyebrow={form.translations[activeLocale].beforeAfterHeading.eyebrow}
          onEyebrowChange={(val) =>
            setForm((prev) => ({
              ...prev,
              translations: {
                ...prev.translations,
                [activeLocale]: {
                  ...prev.translations[activeLocale],
                  beforeAfterHeading: { ...prev.translations[activeLocale].beforeAfterHeading, eyebrow: val },
                },
              },
            }))
          }
        />
        <DoctorBeforeAfter
          value={
            activeLocale === "en"
              ? form.translations.en.beforeAfter
              : syncBeforeAfterSharedValues(form.translations.en.beforeAfter, form.translations[activeLocale].beforeAfter)
          }
          getDoctorName={getDoctorName}
          onStageCaseImage={handleStageCaseImage}
          onClearStagedCaseImage={handleClearStagedCaseImage}
          onChange={(v) => {
            setForm((prev) => ({
              ...prev,
              beforeAfter: activeLocale === "en" ? v : prev.beforeAfter,
              translations: {
                ...prev.translations,
                ...(activeLocale === "en"
                  ? {
                    en: { ...prev.translations.en, beforeAfter: v },
                      ar: { ...prev.translations.ar, beforeAfter: syncBeforeAfterSharedValues(v, prev.translations.ar.beforeAfter) },
                      tr: { ...prev.translations.tr, beforeAfter: syncBeforeAfterSharedValues(v, prev.translations.tr.beforeAfter) },
                  }
                  : {
                    [activeLocale]: {
                      ...prev.translations[activeLocale],
                        beforeAfter: syncBeforeAfterSharedValues(prev.translations.en.beforeAfter, v),
                    },
                  }),
              },
            }))
          }}
          imageLocked={sharedFieldsLocked}
          sharedValuesLocked={sharedFieldsLocked}
        />
        {renderSectionSaveButton("beforeAfter")}
      </Section>

      {/* Section 6 — Reviews */}
      <Section
        id="section-reviews"
        icon={<Star className="w-4 h-4" />}
        title="Patient Reviews"
        description="Add patient testimonials and ratings"
        accent="green"
      >
        <SectionHeadingFields
          value={form.translations[activeLocale].reviewsHeading}
          onChange={(v) =>
            setForm((prev) => ({
              ...prev,
              translations: {
                ...prev.translations,
                [activeLocale]: { ...prev.translations[activeLocale], reviewsHeading: v },
              },
            }))
          }
        />
        <DoctorReviews
          value={
            activeLocale === "en"
              ? form.translations.en.reviews
              : syncReviewSharedValues(form.translations.en.reviews, form.translations[activeLocale].reviews)
          }
          onChange={(v) => {
            setForm((prev) => ({
              ...prev,
              reviews: activeLocale === "en" ? v : prev.reviews,
              translations: {
                ...prev.translations,
                ...(activeLocale === "en"
                  ? {
                      en: { ...prev.translations.en, reviews: v },
                      ar: { ...prev.translations.ar, reviews: syncReviewSharedValues(v, prev.translations.ar.reviews) },
                      tr: { ...prev.translations.tr, reviews: syncReviewSharedValues(v, prev.translations.tr.reviews) },
                    }
                  : {
                      [activeLocale]: {
                        ...prev.translations[activeLocale],
                        reviews: syncReviewSharedValues(prev.translations.en.reviews, v),
                      },
                    }),
              },
            }))
          }}
          showValidationError={activeLocale === "en" ? publishValidationErrors.reviews : false}
          sharedValuesLocked={sharedFieldsLocked}
        />
        {renderSectionSaveButton("reviews")}
      </Section>

      {/* Section 7 — FAQ */}
      <Section
        id="section-faq"
        icon={<HelpCircle className="w-4 h-4" />}
        title="Frequently Asked Questions"
        description="Common questions and answers about this doctor"
        accent="navy"
      >
        <SectionHeadingFields
          value={form.translations[activeLocale].faqHeading}
          onChange={(v) =>
            setForm((prev) => ({
              ...prev,
              translations: {
                ...prev.translations,
                [activeLocale]: { ...prev.translations[activeLocale], faqHeading: v },
              },
            }))
          }
        />
        <DoctorFAQ
          items={form.translations[activeLocale].faq}
          onChange={(v) => {
            setForm((prev) => ({
              ...prev,
              faq: activeLocale === "en" ? v : prev.faq,
              translations: {
                ...prev.translations,
                [activeLocale]: {
                  ...prev.translations[activeLocale],
                  faq: v,
                },
              },
            }))
          }}
          showValidationError={activeLocale === "en" ? publishValidationErrors.faq : false}
        />
        {renderSectionSaveButton("faq")}
      </Section>

      {/* Actions */}
      <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 flex-col items-start 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"
            >
              <span>{submitError}</span>
              {missingPublishFields.length > 0 && (
                <ul className="list-disc list-inside text-xs sm:text-sm">
                  {missingPublishFields.map((field) => (
                    <li key={field}>{field}</li>
                  ))}
                </ul>
              )}
            </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={() => 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"
          >
            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"
              />
            ) : (
              <Save className="w-4 h-4" aria-hidden="true" />
            )}
            {pendingAction === "draft" ? "Saving…" : "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"
              />
            ) : (
              <Send className="w-4 h-4" aria-hidden="true" />
            )}
            {pendingAction === "published" ? "Publishing…" : "Publish Profile"}
          </button>
        </div>
      </div>
    </form>
  )
}