"use client"; import { useState, useEffect, useRef } from "react"; import { useParams } from "next/navigation"; import Link from "next/link"; import { ArrowLeft, Loader2, Save, Globe, Search, Code, LayoutTemplate, Home, Info, Cpu, FolderKanban, GraduationCap, Users, Newspaper, Building2, Phone, Wrench, Award, MapPin, Mail, Plus, Trash2, Clock, MessageSquare, BarChart2, GripVertical, Images, Video, Upload, } from "lucide-react"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { Button } from "@/components/ui/button"; import { Switch } from "@/components/ui/switch"; import { Separator } from "@/components/ui/separator"; import { Badge } from "@/components/ui/badge"; import { Skeleton } from "@/components/ui/skeleton"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { ImageDropZone } from "@/components/admin/ImageDropZone"; import Image from "next/image"; import { toast } from "sonner"; import { useImageUpload } from "@/hooks/use-image-upload"; import { useAdminLocale } from "@/hooks/use-admin-locale"; import { uploadToCloudinary } from "@/lib/cloudinary"; import { getPageSeo, updatePageSeo, getPageContent, updatePageContent, type PageSeo, type PageContentData, } from "@/services/pages"; import test from "node:test"; interface OfficeItem { city: string; role: string; company: string; address: string; phones: string[]; emails: string[]; } interface StatItem { label: string; value: string; } const PAGE_CONFIG: Record< string, { label: string; description: string; path: string; icon: React.ElementType } > = { home: { label: "Home", description: "Main landing page", path: "/", icon: Home }, about: { label: "About", description: "Company overview and history", path: "/about", icon: Info }, services: { label: "Services", description: "Services listing page", path: "/services", icon: Wrench }, projects: { label: "Projects", description: "Projects portfolio page", path: "/projects", icon: FolderKanban }, technologies: { label: "Technologies", description: "Technologies and equipment", path: "/technologies", icon: Cpu }, training: { label: "Training", description: "Training programmes overview", path: "/training", icon: GraduationCap }, clients: { label: "Clients", description: "Client showcase page", path: "/clients", icon: Users }, news: { label: "News", description: "News and updates", path: "/news", icon: Newspaper }, contact: { label: "Contact", description: "Contact information page", path: "/contact", icon: Phone }, inspectors: { label: "Inspectors", description: "Inspectors listing & marketplace page", path: "/inspectors", icon: Users }, }; // ── Default content per page (used when API returns nothing) ────────────────── const PAGE_DEFAULTS: Record = { home: { hero_heading: "Integrated Engineering", hero_heading_highlight: "& Energy Services", hero_subtitle: "Delivering advanced engineering, inspection, and energy solutions to the world's most demanding industrial environments.", hero_video_url: "/hero-video.mp4", hero_video_public_id: "", hero_poster_url: "/hero-refinery.jpg", hero_poster_public_id: "", hero_cta_primary_label: "Explore Services", hero_cta_primary_url: "#services", hero_cta_secondary_label: "Contact Us", hero_cta_secondary_url: "#contact", home_about_heading: "Global Leaders in Energy Engineering", home_about_body: "Petro-Base Group is a premier provider of integrated engineering services. We specialize in maintaining the integrity of critical infrastructure across the oil, gas, and renewable energy sectors. Our multidisciplinary team combines decades of field experience with cutting-edge diagnostic technology.", home_about_badge_value: "25+", home_about_badge_label: "Years of Excellence", home_about_stat_1_title: "Global Operations", home_about_stat_1_desc: "Active projects across 4 continents with localized support teams.", home_about_stat_2_title: "Certified Quality", home_about_stat_2_desc: "ISO 9001, 14001, and OHSAS 18001 accredited safety standards.", home_about_image_url: "/about-engineers.jpg", home_about_image_public_id: "", services_heading: "Core Capabilities", services_subtitle: "Providing end-to-end technical solutions for the energy lifecycle.", technologies_heading: "Advanced Inspection Tech", technologies_subtitle: "We invest in the future of non-destructive testing and robotic maintenance.", projects_heading: "Featured Projects", projects_subtitle: "Delivering engineering excellence across the globe.", training_heading: "Training Center", training_subtitle: "OSHA-compliant operator certification and safety training programs.", training_image_url: "", training_image_public_id: "", clients_heading: "Trusted by Industry Leaders", clients_subtitle: "Partnering with global energy companies to deliver excellence.", }, about: { hero_eyebrow: "About Us", hero_heading: "Who We Are", hero_subtitle: "A multinational integrated Oil & Gas service company delivering excellence across continents", hero_image_url: "/about-hero.jpg", hero_image_public_id: "", about_heading: "About Petro-Base Group", about_body_1: "Petro-Base Group is a multinational integrated and Oil and Gas service company with Affiliates worldwide, including Petro-Base Group Ltd (Nigeria), Petro-Base Group, LLC (USA), Petro Base Group (PTY) Ltd (South Africa), Petro Base Group CC (Namibia), Petro Base Group, Inc. (Guyana), Petro Base, LTD (Uganda), Petro Base Group, LDA (Mozambique) and other associates companies around the world.", about_body_2: "Over the years, Petro-Base has successfully executed a diverse range of services including: {services} for various companies worldwide, including Exxon Mobil, Chevron, Shell, SNEPCO, Total, NCOC, and many more, under a sterling safety record.", stat_1_value: "Since 1998", stat_1_label: "Established", stat_2_value: "3+", stat_2_label: "Continents", about_images: [] as { url: string; alt: string; public_id: string }[], years_badge_value: "25+", years_badge_label: "Years of Excellence", history_heading: "Our History", history_subtitle: "Over two decades of growth, innovation, and global expansion in integrated energy services.", strengths_heading: "Our Strengths", strengths_subtitle: "What sets us apart in the global energy sector", affiliates_heading: "Our Affiliates", affiliates_subtitle: "Operating entities across the globe", mvv_heading: "Mission, Vision & Values", core_values_heading: "Core Values", global_presence_heading: "Global Presence", global_presence_subtitle: "Operating across 4 continents with localized support", }, services: { hero_eyebrow: "Petro-Base Group", hero_heading: "Our Services", hero_subtitle: "Comprehensive engineering, inspection, and technical solutions across the entire energy lifecycle.", hero_image_url: "/services-hero.jpg", hero_image_public_id: "", section_heading: "What We Do", section_subtitle: "Seven core service verticals spanning the full energy infrastructure lifecycle.", }, projects: { hero_eyebrow: "Case Studies", hero_heading: "Our Projects", hero_subtitle: "Proven project execution across four continents.", hero_image_url: "/project-offshore.jpg", hero_image_public_id: "", section_heading: "Our Projects", section_subtitle: "Real-world results from our global operations — offshore platforms, tank farms, gas distribution, and drilling campaigns.", stats: [ { label: "Projects Completed", value: "500+" }, { label: "Countries Served", value: "15+" }, { label: "Years of Experience", value: "25+" }, { label: "Client Satisfaction", value: "99%" }, ], }, technologies: { hero_eyebrow: "Petro-Base Group", hero_heading: "Our Technologies", hero_subtitle: "Advanced inspection and engineering technology solutions.", hero_image_url: "/tech-hero.jpg", hero_image_public_id: "", section_heading: "Advanced Inspection Technologies", section_subtitle: "Purpose-built equipment and proprietary systems for precision asset integrity assessment.", }, training: { hero_eyebrow: "Training Centre", hero_heading: "Training Programmes", hero_subtitle: "Industry-accredited training for oil & gas professionals.", hero_image_url: "/training-center.jpg", hero_image_public_id: "", section_heading: "Training Programs", section_subtitle: "Comprehensive operator certification courses designed to international safety standards.", }, clients: { hero_eyebrow: "Our Clients", hero_heading: "Trusted By Industry Leaders", hero_subtitle: "Long-standing partnerships with the world's leading energy companies.", hero_image_url: "/client.jpeg", hero_image_public_id: "", section_heading: "Our Partners", section_subtitle: "A selection of the major operators and service companies we proudly serve.", }, news: { hero_eyebrow: "Latest News", hero_heading: "News & Updates", hero_subtitle: "Company news, project updates, and industry insights.", hero_image_url: "/project-offshore.jpg", hero_image_public_id: "", section_heading: "Latest Stories", section_subtitle: "Stay up to date with Petro-Base Group's latest projects, milestones, and industry updates.", }, inspectors: { hero_eyebrow: "Inspection Resource Marketplace", hero_heading: "Our Inspectors", hero_subtitle: "Browse our roster of certified inspection professionals available for on-demand deployment.", hero_image_url: "", hero_image_public_id: "", section_heading: "Certified Inspection Professionals", section_subtitle: "Each inspector is vetted, certified, and ready to deploy to your site — onshore or offshore.", }, // contact defaults intentionally removed — contact page uses API-only data }; function emptySeo(slug: string): PageSeo { return { slug, meta_title: "", meta_description: "", og_title: "", og_description: "", og_image_url: "", og_image_public_id: "", canonical_url: "", no_index: false, schema_json: "", }; } // ── Component ───────────────────────────────────────────────────────────────── export default function PageEditor() { const params = useParams(); const slug = typeof params.slug === "string" ? params.slug : ""; const config = PAGE_CONFIG[slug]; const locale = useAdminLocale(); // Content state const [content, setContent] = useState({}); const [contentLoading, setContentLoading] = useState(true); const [contentSaving, setContentSaving] = useState(false); const [heroImgProgress, setHeroImgProgress] = useState(null); // SEO state const [seoForm, setSeoForm] = useState(emptySeo(slug)); const [seoLoading, setSeoLoading] = useState(true); const [seoSaving, setSeoSaving] = useState(false); const [ogImgProgress, setOgImgProgress] = useState(null); // Image upload hooks — one for hero/poster, one for OG image, one for about slider, one for home about image const heroUpload = useImageUpload(); const ogUpload = useImageUpload(); const sliderImgUpload = useImageUpload(); const homeAboutImgUpload = useImageUpload(); const [homeAboutImgProgress, setHomeAboutImgProgress] = useState(null); const homeTrainingImgUpload = useImageUpload(); const [homeTrainingImgProgress, setHomeTrainingImgProgress] = useState(null); // Home hero video upload const heroVideoInputRef = useRef(null); const [heroVideoFile, setHeroVideoFile] = useState(null); const [heroVideoFileName, setHeroVideoFileName] = useState(""); const [heroVideoProgress, setHeroVideoProgress] = useState(null); const [heroVideoDragging, setHeroVideoDragging] = useState(false); // About slider image state const [newSlideAlt, setNewSlideAlt] = useState(""); const [pendingSlides, setPendingSlides] = useState<{ file: File; previewUrl: string; alt: string }[]>([]); const sliderFileInputRef = useRef(null); // Schema JSON validation state for SEO editor const [schemaJsonError, setSchemaJsonError] = useState(""); // Helpers const setC = (key: string, value: unknown) => setContent((prev) => ({ ...prev, [key]: value })); // About slider image helpers type SlideItem = { url: string; alt: string; public_id: string }; const getSlides = () => Array.isArray(content.about_images) ? (content.about_images as SlideItem[]) : []; const handleStageSlideImage = () => { if (!sliderImgUpload.file || !sliderImgUpload.preview) { toast.error("Please select an image first."); return; } setPendingSlides((prev) => [ ...prev, { file: sliderImgUpload.file!, previewUrl: sliderImgUpload.preview!, alt: newSlideAlt.trim() }, ]); sliderImgUpload.reset(); setNewSlideAlt(""); }; const setSeo = (k: K, v: PageSeo[K]) => setSeoForm((prev) => ({ ...prev, [k]: v })); // Lazy-loading: fetch content or SEO only when their tab is activated const [selectedTab, setSelectedTab] = useState("content"); const [contentLoaded, setContentLoaded] = useState(false); const [seoLoaded, setSeoLoaded] = useState(false); const fetchContent = async () => { if (!config) return; setContentLoading(true); try { const defaults = PAGE_DEFAULTS[slug] ?? {}; const contentRes = await getPageContent(slug); if (slug === "home") { if (contentRes) { const api = contentRes as Record; const mapped = { hero_heading: api.hero?.heading ?? api.hero_heading ?? "", hero_heading_highlight: api.hero?.heading_highlight ?? api.hero_heading_highlight ?? "", hero_subtitle: api.hero?.subtitle ?? api.hero_subtitle ?? "", hero_video_url: api.hero?.video_url ?? api.hero_video_url ?? "", hero_video_public_id: api.hero?.video_public_id ?? api.hero_video_public_id ?? "", hero_poster_url: api.hero?.poster_url ?? api.hero_poster_url ?? "", hero_poster_public_id: api.hero?.poster_public_id ?? api.hero_poster_public_id ?? "", hero_cta_primary_label: api.hero?.cta_primary?.label ?? api.hero_cta_primary_label ?? "", hero_cta_primary_url: api.hero?.cta_primary?.url ?? api.hero_cta_primary_url ?? "", hero_cta_secondary_label: api.hero?.cta_secondary?.label ?? api.hero_cta_secondary_label ?? "", hero_cta_secondary_url: api.hero?.cta_secondary?.url ?? api.hero_cta_secondary_url ?? "", home_about_heading: api.about?.heading ?? api.home_about_heading ?? "", home_about_body: api.about?.body ?? api.home_about_body ?? "", home_about_badge_value: api.about?.badge?.value ?? api.home_about_badge_value ?? "", home_about_badge_label: api.about?.badge?.label ?? api.home_about_badge_label ?? "", home_about_stat_1_title: api.about?.stats?.[0]?.title ?? api.home_about_stat_1_title ?? "", home_about_stat_1_desc: api.about?.stats?.[0]?.desc ?? api.home_about_stat_1_desc ?? "", home_about_stat_2_title: api.about?.stats?.[1]?.title ?? api.home_about_stat_2_title ?? "", home_about_stat_2_desc: api.about?.stats?.[1]?.desc ?? api.home_about_stat_2_desc ?? "", home_about_image_url: api.about?.image_url ?? api.home_about_image_url ?? "", home_about_image_public_id: api.about?.image_public_id ?? api.home_about_image_public_id ?? "", services_heading: api.section_headings?.services?.heading ?? api.services_heading ?? "", services_subtitle: api.section_headings?.services?.subtitle ?? api.services_subtitle ?? "", technologies_heading: api.section_headings?.technologies?.heading ?? api.technologies_heading ?? "", technologies_subtitle: api.section_headings?.technologies?.subtitle ?? api.technologies_subtitle ?? "", projects_heading: api.section_headings?.projects?.heading ?? api.projects_heading ?? "", projects_subtitle: api.section_headings?.projects?.subtitle ?? api.projects_subtitle ?? "", training_heading: api.section_headings?.training?.heading ?? api.training_heading ?? "", training_subtitle: api.section_headings?.training?.subtitle ?? api.training_subtitle ?? "", training_image_url: api.section_headings?.training?.image_url ?? api.training_image_url ?? "", training_image_public_id: api.section_headings?.training?.image_public_id ?? api.training_image_public_id ?? "", clients_heading: api.section_headings?.clients?.heading ?? api.clients_heading ?? "", clients_subtitle: api.section_headings?.clients?.subtitle ?? api.clients_subtitle ?? "", } as Record; setContent({ ...(defaults as any), ...(mapped as any) }); } else { setContent({ ...(defaults as any) }); } } else if (slug === "contact") { if (contentRes) { const api = contentRes as Record; const bh = Array.isArray(api.business_hours) ? api.business_hours : []; const findHours = (label: string) => { const item = bh.find((b: any) => String(b.day ?? "").includes(label)); return item?.hours ?? ""; }; const mapped = { hero_eyebrow: api.hero_eyebrow ?? api.hero?.label ?? "", hero_heading: api.hero_heading ?? api.hero?.title ?? "", hero_subtitle: api.hero_subtitle ?? api.hero?.description ?? "", hero_image_url: api.hero_image_url ?? api.hero?.image_url ?? "", hero_image_public_id: api.hero_image_public_id ?? api.hero?.image_public_id ?? "", hero_image_alt: api.hero?.image_alt ?? api.hero_image_alt ?? "", form_title: api.form_title ?? api.form_section?.title ?? "", form_subtitle: api.form_subtitle ?? api.form_section?.subtitle ?? "", offices_heading: api.offices_heading ?? api.offices_section?.title ?? "", offices_subtitle: api.offices_subtitle ?? api.offices_section?.subtitle ?? "", biz_hours_mon_fri: api.biz_hours_mon_fri ?? findHours("Monday") ?? "", biz_hours_sat: api.biz_hours_sat ?? findHours("Saturday") ?? "", biz_hours_sun: api.biz_hours_sun ?? findHours("Sunday") ?? "", biz_hours_emergency: api.biz_hours_emergency ?? findHours("Emergency") ?? "", offices: Array.isArray(api.offices) ? api.offices : [], } as Record; setContent(mapped as PageContentData); } else { setContent({}); } } else if (slug === "about") { if (contentRes) { const api = contentRes as Record; const mapped = { hero_eyebrow: api.hero?.label ?? api.hero_eyebrow ?? "", hero_heading: api.hero?.title ?? api.hero_heading ?? "", hero_subtitle: api.hero?.description ?? api.hero_subtitle ?? "", hero_image_url: api.hero?.image_url ?? api.hero_image_url ?? "", hero_image_public_id: api.hero?.image_public_id ?? api.hero_image_public_id ?? "", hero_image_alt: api.hero?.image_alt ?? api.hero_image_alt ?? "", about_heading: api.about?.heading ?? api.about_heading ?? "", about_body_1: api.about?.body_1 ?? api.about_body_1 ?? "", about_body_2: api.about?.body_2 ?? api.about_body_2 ?? "", about_images: Array.isArray(api.about?.images ?? api.about_images) ? (api.about?.images ?? api.about_images) : [], stat_1_value: api.stats?.[0]?.value ?? api.stat_1_value ?? "", stat_1_label: api.stats?.[0]?.label ?? api.stat_1_label ?? "", stat_2_value: api.stats?.[1]?.value ?? api.stat_2_value ?? "", stat_2_label: api.stats?.[1]?.label ?? api.stat_2_label ?? "", years_badge_value: api.badge?.value ?? api.years_badge_value ?? "", years_badge_label: api.badge?.label ?? api.years_badge_label ?? "", history_heading: api.section_headings?.history?.heading ?? api.history_heading ?? "", history_subtitle: api.section_headings?.history?.subtitle ?? api.history_subtitle ?? "", strengths_heading: api.section_headings?.strengths?.heading ?? api.strengths_heading ?? "", strengths_subtitle: api.section_headings?.strengths?.subtitle ?? api.strengths_subtitle ?? "", affiliates_heading: api.section_headings?.affiliates?.heading ?? api.affiliates_heading ?? "", affiliates_subtitle: api.section_headings?.affiliates?.subtitle ?? api.affiliates_subtitle ?? "", mvv_heading: api.section_headings?.mvv?.heading ?? api.mvv_heading ?? "", core_values_heading: api.section_headings?.core_values?.heading ?? api.core_values_heading ?? "", global_presence_heading: api.section_headings?.global_presence?.heading ?? api.global_presence_heading ?? "", global_presence_subtitle: api.section_headings?.global_presence?.subtitle ?? api.global_presence_subtitle ?? "", } as Record; setContent({ ...(defaults as any), ...(mapped as any) }); } else { setContent({ ...(defaults as any) }); } } else if (slug === "news" || slug === "technologies" || slug === "services" || slug === "inspectors") { if (contentRes) { const api = contentRes as Record; const mapped = { hero_eyebrow: api.hero?.label ?? api.hero_eyebrow ?? "", hero_heading: api.hero?.title ?? api.hero_heading ?? "", hero_subtitle: api.hero?.description ?? api.hero_subtitle ?? "", hero_image_url: api.hero?.image_url ?? api.hero_image_url ?? "", hero_image_public_id: api.hero?.image_public_id ?? api.hero_image_public_id ?? "", hero_image_alt: api.hero?.image_alt ?? api.hero_image_alt ?? "", section_heading: api.section_heading ?? "", section_subtitle: api.section_subtitle ?? "", } as Record; setContent({ ...(defaults as any), ...(mapped as any), ...(api ?? {}) }); } else { setContent({ ...(defaults as any) }); } } else if (slug === "training") { if (contentRes) { const api = contentRes as Record; const mapped = { hero_eyebrow: api.hero?.label ?? api.hero_eyebrow ?? "", hero_heading: api.hero?.title ?? api.hero_heading ?? "", hero_subtitle: api.hero?.description ?? api.hero_subtitle ?? "", hero_image_url: api.hero?.image_url ?? api.hero_image_url ?? "", hero_image_public_id: api.hero?.image_public_id ?? api.hero_image_public_id ?? "", hero_image_alt: api.hero?.image_alt ?? api.hero_image_alt ?? "", training_section_heading: api.training_section_heading ?? "", training_section_subtitle: api.training_section_subtitle ?? "", } as Record; setContent({ ...(defaults as any), ...(mapped as any), ...(api ?? {}) }); } } else if (slug === "clients") { if (contentRes) { const api = contentRes as Record; const mapped = { hero_eyebrow: api.hero?.label ?? api.hero_eyebrow ?? "", hero_heading: api.hero?.title ?? api.hero_heading ?? "", hero_subtitle: api.hero?.description ?? api.hero_subtitle ?? "", hero_image_url: api.hero?.image_url ?? api.hero_image_url ?? "", hero_image_public_id: api.hero?.image_public_id ?? api.hero_image_public_id ?? "", hero_image_alt: api.hero?.image_alt ?? api.hero_image_alt ?? "", section_heading: api.section_heading ?? "", section_subtitle: api.section_subtitle ?? "", testimonial_section_heading: api.testimonial_section_heading ?? "", testimonial_section_subtitle: api.testimonial_section_subtitle ?? "", industry_section_heading: api.industry_section_heading ?? "", industry_section_subtitle: api.industry_section_subtitle ?? "", } as Record; setContent({ ...(defaults as any), ...(mapped as any), ...(api ?? {}) }); } } else if (slug === "projects") { if (contentRes) { const api = contentRes as Record; const mapped = { hero_eyebrow: api.hero?.label ?? api.hero_eyebrow ?? "", hero_heading: api.hero?.title ?? api.hero_heading ?? "", hero_subtitle: api.hero?.description ?? api.hero_subtitle ?? "", hero_image_url: api.hero?.image_url ?? api.hero_image_url ?? "", hero_image_public_id: api.hero?.image_public_id ?? api.hero_image_public_id ?? "", hero_image_alt: api.hero?.image_alt ?? api.hero_image_alt ?? "", section_heading: api.section_heading ?? "", section_subtitle: api.section_subtitle ?? "", stats: Array.isArray(api.stats) ? api.stats : (defaults as any).stats ?? [], } as Record; setContent({ ...(defaults as any), ...(mapped as any) }); } else { setContent({ ...(defaults as any) }); } } else { setContent({ ...(defaults as any), ...(contentRes ?? {}) }); } setContentLoaded(true); } catch { setContent({}); } finally { setContentLoading(false); } }; const fetchSeo = async () => { if (!config) return; setSeoLoading(true); try { const res = await getPageSeo(slug); const rawSeo = (res as any)?.data ?? res ?? emptySeo(slug); const normalizedSeo: any = { ...emptySeo(slug), meta_title: rawSeo.meta_title ?? "", meta_description: rawSeo.meta_description ?? "", og_title: rawSeo.og_title ?? "", og_description: rawSeo.og_description ?? "", og_image_url: rawSeo.og_image_url ?? "", og_image_public_id: rawSeo.og_image_public_id ?? "", canonical_url: rawSeo.canonical_url ?? "", no_index: rawSeo.no_index ?? false, schema_json: rawSeo.schema_json ?? "", slug: rawSeo.slug ?? slug, }; if (normalizedSeo.schema_json && typeof normalizedSeo.schema_json === "object") { try { normalizedSeo.schema_json = JSON.stringify(normalizedSeo.schema_json, null, 2); } catch { normalizedSeo.schema_json = String(normalizedSeo.schema_json ?? ""); } } else { normalizedSeo.schema_json = String(normalizedSeo.schema_json ?? ""); } setSeoForm(normalizedSeo as PageSeo); setSeoLoaded(true); } catch { setSeoForm(emptySeo(slug)); } finally { setSeoLoading(false); } }; // Trigger fetch when a tab becomes active useEffect(() => { if (!config) return; if (selectedTab === "content" && !contentLoaded) fetchContent(); if (selectedTab === "seo" && !seoLoaded) fetchSeo(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedTab, slug, config]); // Per-slug hero upload-signature endpoints const HERO_UPLOAD_SIGNATURE_URL: Record = { contact: "/api/pages/contact/content/hero/upload-signature", news: "/api/pages/news/content/hero/upload-signature", clients: "/api/pages/clients/content/hero/upload-signature", training: "/api/pages/training/content/hero/upload-signature", technologies: "/api/pages/technologies/content/hero/upload-signature", projects: "/api/pages/projects/content/hero/upload-signature", services: "/api/pages/services/content/hero/upload-signature", about: "/api/pages/about/content/hero/upload-signature", inspector: "/api/pages/inspector/content/hero/upload-signature", inspectors: "/api/pages/inspectors/content/hero/upload-signature", home: "/api/pages/home/content/hero/poster/upload-signature" }; const heroUploadSignatureUrl = HERO_UPLOAD_SIGNATURE_URL[slug] ?? "/api/pages/upload-signature"; // Per-slug OG image upload-signature endpoints for SEO const OG_UPLOAD_SIGNATURE_URL: Record = { contact: "/api/pages/contact/seo/og-image/upload-signature", news: "/api/pages/news/seo/og-image/upload-signature", clients: "/api/pages/clients/seo/og-image/upload-signature", training: "/api/pages/training/seo/og-image/upload-signature", technologies: "/api/pages/technologies/seo/og-image/upload-signature", projects: "/api/pages/projects/seo/og-image/upload-signature", services: "/api/pages/services/seo/og-image/upload-signature", about: "/api/pages/about/seo/og-image/upload-signature", inspector: "/api/pages/inspector/seo/og-image/upload-signature", inspectors: "/api/pages/inspectors/seo/og-image/upload-signature", home: "/api/pages/home/seo/og-image/upload-signature", }; const ogUploadSignatureUrl = OG_UPLOAD_SIGNATURE_URL[slug] ?? "/api/pages/upload-signature"; // Save content const handleSaveContent = async () => { setContentSaving(true); try { const imgUrlKey = slug === "home" ? "hero_poster_url" : "hero_image_url"; const imgPubIdKey = slug === "home" ? "hero_poster_public_id" : "hero_image_public_id"; const updated = { ...content }; if (heroUpload.file) { setHeroImgProgress(0); const res = await uploadToCloudinary( heroUpload.file, "image", setHeroImgProgress, heroUploadSignatureUrl, ); updated[imgUrlKey] = res.secure_url; updated[imgPubIdKey] = res.public_id; setHeroImgProgress(null); heroUpload.reset(); } // Upload home hero video if (slug === "home" && heroVideoFile) { setHeroVideoProgress(0); const res = await uploadToCloudinary( heroVideoFile, "video", setHeroVideoProgress, "/api/pages/home/content/hero/video/upload-signature", ); updated.hero_video_url = res.secure_url; (updated as any).hero_video_public_id = res.public_id; setContent((prev) => ({ ...prev, hero_video_url: res.secure_url, hero_video_public_id: res.public_id })); setHeroVideoProgress(null); setHeroVideoFile(null); setHeroVideoFileName(""); } // Upload home about-section image if (slug === "home" && homeAboutImgUpload.file) { setHomeAboutImgProgress(0); const res = await uploadToCloudinary( homeAboutImgUpload.file, "image", setHomeAboutImgProgress, "/api/pages/home/content/about/image/upload-signature", ); updated.home_about_image_url = res.secure_url; updated.home_about_image_public_id = res.public_id; setHomeAboutImgProgress(null); homeAboutImgUpload.reset(); } // Upload home training-section image if (slug === "home" && homeTrainingImgUpload.file) { setHomeTrainingImgProgress(0); const res = await uploadToCloudinary( homeTrainingImgUpload.file, "image", setHomeTrainingImgProgress, "/api/pages/home/content/training/image/upload-signature", ); (updated as any).training_image_url = res.secure_url; (updated as any).training_image_public_id = res.public_id; setHomeTrainingImgProgress(null); homeTrainingImgUpload.reset(); } // Upload any staged about slider images if (slug === "about" && pendingSlides.length > 0) { const uploaded = await Promise.all( pendingSlides.map(async (s) => { const res = await uploadToCloudinary( s.file, "image", undefined, "/api/pages/about/content/hero/upload-signature", ); return { url: res.secure_url, alt: s.alt, public_id: res.public_id }; }), ); const existing = Array.isArray(updated.about_images) ? (updated.about_images as SlideItem[]) : []; updated.about_images = [...existing, ...uploaded]; setPendingSlides([]); } // Transform payload per page let payload = updated; if (slug === "home") { payload = { hero: { heading: (updated as any).hero_heading ?? "", heading_highlight: (updated as any).hero_heading_highlight ?? "", subtitle: (updated as any).hero_subtitle ?? "", cta_primary: { label: (updated as any).hero_cta_primary_label ?? "", url: (updated as any).hero_cta_primary_url ?? "", }, cta_secondary: { label: (updated as any).hero_cta_secondary_label ?? "", url: (updated as any).hero_cta_secondary_url ?? "", }, video_url: (updated as any).hero_video_url ?? "", video_public_id: (updated as any).hero_video_public_id ?? "", poster_url: (updated as any).hero_poster_url ?? "", poster_public_id: (updated as any).hero_poster_public_id ?? "", }, about: { heading: (updated as any).home_about_heading ?? "", body: (updated as any).home_about_body ?? "", badge: { value: (updated as any).home_about_badge_value ?? "", label: (updated as any).home_about_badge_label ?? "", }, stats: [ { title: (updated as any).home_about_stat_1_title ?? "", desc: (updated as any).home_about_stat_1_desc ?? "" }, { title: (updated as any).home_about_stat_2_title ?? "", desc: (updated as any).home_about_stat_2_desc ?? "" }, ], image_url: (updated as any).home_about_image_url ?? "", image_public_id: (updated as any).home_about_image_public_id ?? "", }, section_headings: { services: { heading: (updated as any).services_heading ?? "", subtitle: (updated as any).services_subtitle ?? "" }, technologies: { heading: (updated as any).technologies_heading ?? "", subtitle: (updated as any).technologies_subtitle ?? "" }, projects: { heading: (updated as any).projects_heading ?? "", subtitle: (updated as any).projects_subtitle ?? "" }, training: { heading: (updated as any).training_heading ?? "", subtitle: (updated as any).training_subtitle ?? "", image_url: (updated as any).training_image_url ?? "", image_public_id: (updated as any).training_image_public_id ?? "" }, clients: { heading: (updated as any).clients_heading ?? "", subtitle: (updated as any).clients_subtitle ?? "" }, }, }; } else if (slug === "about") { payload = { hero: { label: updated.hero_eyebrow ?? "", title: updated.hero_heading ?? "", description: updated.hero_subtitle ?? "", image_url: updated.hero_image_url ?? "", image_public_id: updated.hero_image_public_id ?? "", image_alt: (updated as any).hero_image_alt ?? "", }, about: { heading: (updated as any).about_heading ?? "", body_1: (updated as any).about_body_1 ?? "", body_2: (updated as any).about_body_2 ?? "", images: Array.isArray(updated.about_images) ? updated.about_images : [], }, stats: [ { value: (updated as any).stat_1_value ?? "", label: (updated as any).stat_1_label ?? "" }, { value: (updated as any).stat_2_value ?? "", label: (updated as any).stat_2_label ?? "" }, ], badge: { value: (updated as any).years_badge_value ?? "", label: (updated as any).years_badge_label ?? "", }, section_headings: { history: { heading: (updated as any).history_heading ?? "", subtitle: (updated as any).history_subtitle ?? "" }, strengths: { heading: (updated as any).strengths_heading ?? "", subtitle: (updated as any).strengths_subtitle ?? "" }, affiliates: { heading: (updated as any).affiliates_heading ?? "", subtitle: (updated as any).affiliates_subtitle ?? "" }, mvv: { heading: (updated as any).mvv_heading ?? "" }, core_values: { heading: (updated as any).core_values_heading ?? "" }, global_presence: { heading: (updated as any).global_presence_heading ?? "", subtitle: (updated as any).global_presence_subtitle ?? "" }, }, }; } else if (slug === "contact") { payload = { hero: { label: updated.hero_eyebrow ?? "", title: updated.hero_heading ?? "", description: updated.hero_subtitle ?? "", image_url: updated.hero_image_url ?? "", image_public_id: updated.hero_image_public_id ?? "", image_alt: (updated as any).hero_image_alt ?? "", }, form_section: { title: updated.form_title ?? "", subtitle: updated.form_subtitle ?? "", }, business_hours: [ { day: "Monday – Friday", hours: updated.biz_hours_mon_fri ?? "" }, { day: "Saturday", hours: updated.biz_hours_sat ?? "" }, { day: "Sunday", hours: updated.biz_hours_sun ?? "" }, { day: "Emergency Support", hours: updated.biz_hours_emergency ?? "" }, ], offices_section: { title: updated.offices_heading ?? "", subtitle: updated.offices_subtitle ?? "", }, offices: updated.offices ?? [], }; } else if (slug === "news" || slug === "services" || slug === "technologies" || slug === "inspectors") { payload = { hero: { label: updated.hero_eyebrow ?? "", title: updated.hero_heading ?? "", description: updated.hero_subtitle ?? "", image_url: updated.hero_image_url ?? "", image_public_id: updated.hero_image_public_id ?? "", image_alt: (updated as any).hero_image_alt ?? "", }, section_heading: (updated as any).section_heading ?? "", section_subtitle: (updated as any).section_subtitle ?? "", }; } else if (slug === "clients") { payload = { hero: { label: updated.hero_eyebrow ?? "", title: updated.hero_heading ?? "", description: updated.hero_subtitle ?? "", image_url: updated.hero_image_url ?? "", image_public_id: updated.hero_image_public_id ?? "", image_alt: (updated as any).hero_image_alt ?? "", }, section_heading: (updated as any).section_heading ?? "", section_subtitle: (updated as any).section_subtitle ?? "", testimonial_section_heading: (updated as any).testimonial_section_heading ?? "", testimonial_section_subtitle: (updated as any).testimonial_section_subtitle ?? "", industry_section_heading: (updated as any).industry_section_heading ?? "", industry_section_subtitle: (updated as any).industry_section_subtitle ?? "", }; } else if (slug === "training") { payload = { // [locale]: { hero: { label: updated.hero_eyebrow ?? "", title: updated.hero_heading ?? "", description: updated.hero_subtitle ?? "", image_url: updated.hero_image_url ?? "", image_public_id: updated.hero_image_public_id ?? "", image_alt: (updated as any).hero_image_alt ?? "", }, section_heading: (updated as any).section_heading ?? "", section_subtitle: (updated as any).section_subtitle ?? "", training_section_heading: (updated as any).training_section_heading ?? "", training_section_subtitle: (updated as any).training_section_subtitle ?? "", // }, }; } else if (slug === "projects") { payload = { hero: { label: updated.hero_eyebrow ?? "", title: updated.hero_heading ?? "", description: updated.hero_subtitle ?? "", image_url: updated.hero_image_url ?? "", image_public_id: updated.hero_image_public_id ?? "", image_alt: (updated as any).hero_image_alt ?? "", }, section_heading: (updated as any).section_heading ?? "", section_subtitle: (updated as any).section_subtitle ?? "", stats: (updated as any).stats ?? [], }; } await updatePageContent(slug, payload); setContent(updated); toast.success("Page content saved."); } catch { // errors handled by the API interceptor } finally { setContentSaving(false); } }; // Save SEO const handleSaveSeo = async () => { setSeoSaving(true); try { let ogUrl = seoForm.og_image_url; let ogPubId = seoForm.og_image_public_id; if (ogUpload.file) { setOgImgProgress(0); const res = await uploadToCloudinary( ogUpload.file, "image", setOgImgProgress, ogUploadSignatureUrl, ); ogUrl = res.secure_url; ogPubId = res.public_id; setOgImgProgress(null); ogUpload.reset(); } // Prepare payload: attempt to parse schema_json string into object if valid JSON const payload: any = { ...seoForm, og_image_url: ogUrl, og_image_public_id: ogPubId }; if (typeof payload.schema_json === "string") { const txt = payload.schema_json.trim(); if (txt) { try { payload.schema_json = JSON.parse(txt); } catch { // leave as string if parse fails payload.schema_json = txt; } } else { payload.schema_json = ""; } } await updatePageSeo(slug, payload); // Keep textarea-friendly string representation in form state setSeoForm((prev) => ({ ...prev, og_image_url: ogUrl, og_image_public_id: ogPubId })); toast.success("SEO settings saved."); } catch { // errors handled by the API interceptor } finally { setSeoSaving(false); } }; // Unknown slugs if (!config) { return (

Page "{slug}" not found.

); } const PageIcon = config.icon; const isLoading = selectedTab === "seo" ? seoLoading : contentLoading; // ── Reusable hero image upload section (standard pages) ─────────────────── const heroImgUrlKey = slug === "home" ? "hero_poster_url" : "hero_image_url"; // For contact, prefer API hero object fields; guard hero as object const heroObj = typeof content.hero === "object" && content.hero !== null ? (content.hero as Record) : {}; const contactHeroImageUrl = (content as Record).hero_image_url || heroObj.image_url || ""; const contactHeroImagePublicId = (content as Record).hero_image_public_id || heroObj.image_public_id || ""; const standardHeroSection = (

Hero Section

setC("hero_eyebrow", e.target.value)} placeholder="e.g. About Us" />
setC("hero_heading", e.target.value)} placeholder="e.g. Who We Are" />