"use client"; import { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { SquarePen, Sparkles, Plus, Trash2, Edit2, Check, Loader2, AlertCircle, Smartphone, Monitor, Globe, Search, RefreshCw, Heart, MessageCircle, Share2, ThumbsUp, Repeat, MessageSquare, ChevronUp, User, Play, Database } from "lucide-react"; import { createClient } from "@/lib/supabase/client"; import { formatCurrency, formatNumber } from "@/lib/utils"; import { usePlatform, PLATFORMS, type PlatformType } from "@/lib/context/PlatformContext"; interface AdCreative { id: string; campaign_id: string; platform: PlatformType; type: "responsive_search" | "feed_post" | "vertical_video" | "b2b_sponsored" | "tweet" | "story"; headlines: string[]; descriptions: string[]; final_url: string; display_url: string; path1?: string; path2?: string; primary_text?: string; cta_button?: string; image_url?: string; impressions: number; clicks: number; conversions: number; } const mockAds: AdCreative[] = [ // Google Ads { id: "ad_g1", campaign_id: "g1", platform: "google", type: "responsive_search", headlines: [ "أفضل متجر ملابس بالرياض", "خصومات تصل إلى 50% اليوم", "شحن سريع ومجاني للطلبات", "أحدث صيحات الموضة العصرية", "تسوّق الآن بخصم مميز" ], descriptions: [ "اكتشفي تشكيلة واسعة من الملابس النسائية والرجالية الفاخرة. شحن سريع لكافة مناطق المملكة والدفع عند الاستلام.", "تسوّق الآن واستفد من العروض والخصومات الحصرية. جودة عالية وأسعار تناسب الجميع. استبدال واسترجاع سهل." ], final_url: "https://my-store.com", display_url: "my-store.com", path1: "ملابس-الرياض", path2: "تخفيضات", impressions: 4200, clicks: 310, conversions: 18, }, // Meta Ads (Facebook & Instagram Feed) { id: "ad_m1", campaign_id: "m1", platform: "meta", type: "feed_post", primary_text: "✨ أخيرًا متوفر عطورنا الأكثر طلبًا عطر العود الملكي المبتكر. احصل عليه الآن بنصف السعر مع شحن مجاني تمامًا لكافة مدن المملكة ودفع مريح عند الاستلام! 🇸🇦👇", headlines: ["العود الملكي الفاخر - خصم 50%"], descriptions: ["الروائح الشرقية التي تميز حضورك أينما ذهبت. عطور تدوم لأكثر من 24 ساعة."], final_url: "https://oud-palace.com/oud-royal", display_url: "oud-palace.com", cta_button: "تسوّق الآن", image_url: "https://images.unsplash.com/photo-1547887537-6158d64c35b3?auto=format&fit=crop&q=80&w=600", impressions: 15400, clicks: 940, conversions: 58, }, // TikTok Ads (Vertical Video mockup) { id: "ad_t1", campaign_id: "t1", platform: "tiktok", type: "vertical_video", primary_text: "تخيل عطر يدوم معاك طول اليوم وسعره يناسب الكل! عطور المباخر الملكية الفاخرة صرنا نوصلها مجاناً ولين باب بيتك 🕋 خصم 50% ساري لليوم بس الحق العرض! #عطور #السعودية #فخامة", headlines: ["خصم المباخر الملكية 50%!"], descriptions: [], final_url: "https://mabkhara-royal.com", display_url: "mabkhara-royal.com", cta_button: "احصل على العرض", image_url: "https://images.unsplash.com/photo-1594035910387-fea47794261f?auto=format&fit=crop&q=80&w=600", impressions: 28900, clicks: 1840, conversions: 94, }, // Microsoft Ads { id: "ad_ms1", campaign_id: "ms1", platform: "microsoft", type: "responsive_search", headlines: [ "عقارات دبي الفاخرة للبيع", "فلل فخمة بإطلالة بحرية ساحرة", "خطط سداد مرنة 100% بالتقسيط", "أفضل فرص الاستثمار العقاري" ], descriptions: [ "احصل على فيلا أحلامك الآن في أرقى مشاريع دبي العقارية. تواصل معنا اليوم واحجز استشارتك المجانية تماماً.", "مجمعات سكنية فاخرة ومغلقة مع مسابح وملاعب جولف. احصل على كتيب الأسعار والتفاصيل الآن." ], final_url: "https://dubai-villas.com", display_url: "dubai-villas.com", path1: "فلل-فاخرة", path2: "استثمار", impressions: 2100, clicks: 180, conversions: 12, }, // LinkedIn Ads { id: "ad_l1", campaign_id: "l1", platform: "linkedin", type: "b2b_sponsored", primary_text: "هل تريد مضاعفة مبيعات شركتك بمقدار 3 أضعاف عبر إعلانات البحث المدعومة بالذكاء الاصطناعي؟ حمل دليلنا الحصري والمجاني المخصص للمدراء والرؤساء التنفيذيين في الخليج 📊👇", headlines: ["دليل زيادة مبيعات الشركات بالـ AI 2026"], descriptions: ["دليل فني مفصل ومكتوب بأيدي كبار خبراء الـ PPC مجاناً."], final_url: "https://pro-code.ai/guide-b2b", display_url: "pro-code.ai", cta_button: "تحميل الآن", image_url: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=600", impressions: 8900, clicks: 420, conversions: 35, }, // X Ads { id: "ad_x1", campaign_id: "x1", platform: "x", type: "tweet", primary_text: "جديدنا بالكامل لعام 2026: أطلقنا نظام 'برو كود ادز' لإدارة إعلانات المنصات بالذكاء الاصطناعي وبدون عمولات إضافية! احصل على فترة تجربة مجانية الآن وضاعف ROAS بمعدل 5x 🚀🇸🇦 👇\n#مؤتمر_الرياض #تسويق", headlines: ["برو كود ادز - نظام تسويق المستقبل بالـ AI"], descriptions: ["اشترك الآن وحصن إعلاناتك من النقرات الوهمية."], final_url: "https://procode-ads.com/free-trial", display_url: "procode-ads.com", cta_button: "ابدأ مجاناً", image_url: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=600", impressions: 18900, clicks: 940, conversions: 14, }, // Snapchat Ads { id: "ad_s1", campaign_id: "s1", platform: "snapchat", type: "story", primary_text: "توصيل فوري مجاناً اليوم!", headlines: ["تطبيق التوصيل الأسرع بالمملكة 🇸🇦"], descriptions: [], final_url: "https://fastdeliver.com/app", display_url: "fastdeliver.com", cta_button: "تثبيت الآن", image_url: "https://images.unsplash.com/photo-1526367790999-0150786486a2?auto=format&fit=crop&q=80&w=600", impressions: 41200, clicks: 2840, conversions: 62, }, ]; export default function AdsPage() { const { currentPlatform, config } = usePlatform(); const [ads, setAds] = useState([]); const [selectedAdIndex, setSelectedAdIndex] = useState(0); const [previewDevice, setPreviewDevice] = useState<"mobile" | "desktop">("mobile"); const [loading, setLoading] = useState(true); const [seeding, setSeeding] = useState(false); const [user, setUser] = useState(null); // Editor States const [editingIndex, setEditingIndex] = useState(null); const [editHeadlines, setEditHeadlines] = useState([]); const [editDescriptions, setEditDescriptions] = useState([]); const [editUrl, setEditUrl] = useState(""); const [editDisplayUrl, setEditDisplayUrl] = useState(""); const [editPath1, setEditPath1] = useState(""); const [editPath2, setEditPath2] = useState(""); const [editPrimaryText, setEditPrimaryText] = useState(""); const [editCtaButton, setEditCtaButton] = useState(""); const [editImageUrl, setEditImageUrl] = useState(""); const supabase = createClient(); // 1. Get user useEffect(() => { const handleFallback = () => { const devUser = localStorage.getItem("local_developer_user"); if (devUser) { setUser(JSON.parse(devUser)); } else { const defaultUser = { id: "00000000-0000-0000-0000-000000000000", email: "dev@techprocode.com", user_metadata: { full_name: "المطور" } }; localStorage.setItem("local_developer_user", JSON.stringify(defaultUser)); setUser(defaultUser); } }; supabase.auth.getUser() .then(({ data: { user } }) => { if (user) { setUser(user); } else { handleFallback(); } }) .catch((err) => { console.warn("Supabase connection failed on ads page, using offline developer mode:", err); handleFallback(); }); }, []); // 2. Fetch Ads useEffect(() => { fetchAds(); }, [user, currentPlatform]); // 3. Realtime Postgres listeners useEffect(() => { if (!user) return; const channel = supabase .channel("realtime-ad-creatives-changes") .on( "postgres_changes", { event: "*", schema: "public", table: "ad_creatives", filter: `user_id=eq.${user.id}` }, (payload) => { console.log("Realtime Postgres update received in Ads:", payload); fetchAds(); } ) .subscribe(); return () => { supabase.removeChannel(channel); }; }, [user, currentPlatform]); async function fetchAds() { if (!user) return; setLoading(true); try { const isPlaceholder = !process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL.includes("placeholder") || process.env.NEXT_PUBLIC_SUPABASE_URL === "your_supabase_project_url"; if (isPlaceholder) { const local = localStorage.getItem("local_ad_creatives"); if (local) { setAds(JSON.parse(local)); setSelectedAdIndex(0); setEditingIndex(null); setLoading(false); return; } setAds([]); setLoading(false); return; } const { data, error } = await supabase .from("ad_creatives") .select(` *, campaigns:campaign_id ( platform ) `) .order("created_at", { ascending: false }); if (error) throw error; if (data && data.length > 0) { const mapped: AdCreative[] = data.map((d: any) => { const plat = d.campaigns?.platform || "google"; // Deserialize social fields from d.images json object if available let socialPrimaryText = ""; let socialCtaButton = "Learn More"; let socialImageUrl = ""; if (d.images && typeof d.images === "object" && !Array.isArray(d.images)) { socialPrimaryText = d.images.primary_text || ""; socialCtaButton = d.images.cta_button || "Learn More"; socialImageUrl = d.images.image_url || ""; } return { id: d.id, campaign_id: d.campaign_id, platform: plat as PlatformType, type: d.type || "responsive_search", headlines: Array.isArray(d.headlines) ? d.headlines : [], descriptions: Array.isArray(d.descriptions) ? d.descriptions : [], final_url: d.final_url || "", display_url: d.display_url || "", path1: d.path1 || "", path2: d.path2 || "", primary_text: socialPrimaryText || d.path1 || "", // fallback compatibility cta_button: socialCtaButton || "Learn More", image_url: socialImageUrl || d.final_url || "", impressions: Number(d.impressions) || 0, clicks: Number(d.clicks) || 0, conversions: Number(d.conversions) || 0, }; }); setAds(mapped); } else { setAds([]); } setSelectedAdIndex(0); setEditingIndex(null); } catch (err) { console.error("Error loading ads, using local fallback:", err); const local = localStorage.getItem("local_ad_creatives"); if (local) { setAds(JSON.parse(local)); } else { setAds([]); } setSelectedAdIndex(0); setEditingIndex(null); } finally { setLoading(false); } } // Database Seeding Logic for Ad Creatives async function handleSeedDatabase() { if (!user) return; setSeeding(true); try { const isPlaceholder = !process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL.includes("placeholder") || process.env.NEXT_PUBLIC_SUPABASE_URL === "your_supabase_project_url"; if (isPlaceholder) { const simulated = mockAds.map((ad) => ({ ...ad, id: ad.id || Math.random().toString(), headlines: ad.headlines || [], descriptions: ad.descriptions || [], final_url: ad.final_url || "", display_url: ad.display_url || "", primary_text: ad.primary_text || "", cta_button: ad.cta_button || "تسوّق الآن", image_url: ad.image_url || "", impressions: Math.floor(1000 + Math.random() * 5000), clicks: Math.floor(100 + Math.random() * 400), conversions: Math.floor(10 + Math.random() * 50), })); localStorage.setItem("local_ad_creatives", JSON.stringify(simulated)); setAds(simulated); setSelectedAdIndex(0); setEditingIndex(null); setSeeding(false); return; } // 1. Ensure active ad account and campaigns exist let adAccountId; const { data: accounts } = await supabase.from("ad_accounts").select("id").limit(1); if (accounts && accounts.length > 0) { adAccountId = accounts[0].id; } else { const { data: newAcc, error: accErr } = await supabase .from("ad_accounts") .insert({ user_id: user.id, name: "الحساب التجاري الرئيسي" }) .select("id") .single(); if (accErr || !newAcc) throw accErr || new Error("Failed to create ad account"); adAccountId = newAcc.id; } // Merge/Ensure Campaigns for all 7 platforms const campaignMapping: Record = {}; const { data: currentCamps } = await supabase.from("campaigns").select("id, platform"); for (const plat of ["google", "meta", "tiktok", "microsoft", "linkedin", "x", "snapchat"]) { const existing = currentCamps?.find((c) => c.platform === plat); if (existing) { campaignMapping[plat] = existing.id; } else { const isSearch = plat === "google" || plat === "microsoft"; const { data: newCamp } = await supabase .from("campaigns") .insert({ user_id: user.id, ad_account_id: adAccountId, name: `حملة ${PLATFORMS[plat as PlatformType]?.name || plat} الذكية بالـ AI`, platform: plat, type: isSearch ? "search" : "conversion", status: "active", budget_amount: 100, }) .select("id") .single(); if (newCamp) campaignMapping[plat] = newCamp.id; } } // 2. Prepare seeding ad creatives const toInsert = mockAds.map((ad) => { const campId = campaignMapping[ad.platform]; const isSearch = ad.platform === "google" || ad.platform === "microsoft"; // Social fields serialized inside JSONB images column const socialData = isSearch ? {} : { primary_text: ad.primary_text, cta_button: ad.cta_button, image_url: ad.image_url, }; return { user_id: user.id, campaign_id: campId, type: ad.type, status: "active", headlines: ad.headlines, descriptions: ad.descriptions, final_url: ad.final_url, display_url: ad.display_url, path1: isSearch ? ad.path1 : "", path2: isSearch ? ad.path2 : "", images: socialData, // Serialized social data impressions: ad.impressions, clicks: ad.clicks, conversions: ad.conversions, }; }); const { error } = await supabase.from("ad_creatives").insert(toInsert); if (error) throw error; await fetchAds(); } catch (err) { console.error("Error seeding ads database, using local fallback:", err); const simulated = mockAds.map((ad) => ({ ...ad, id: ad.id || Math.random().toString(), headlines: ad.headlines || [], descriptions: ad.descriptions || [], final_url: ad.final_url || "", display_url: ad.display_url || "", primary_text: ad.primary_text || "", cta_button: ad.cta_button || "تسوّق الآن", image_url: ad.image_url || "", impressions: Math.floor(1000 + Math.random() * 5000), clicks: Math.floor(100 + Math.random() * 400), conversions: Math.floor(10 + Math.random() * 50), })); localStorage.setItem("local_ad_creatives", JSON.stringify(simulated)); setAds(simulated); setSelectedAdIndex(0); setEditingIndex(null); } finally { setSeeding(false); } } const filteredAds = ads.filter(ad => currentPlatform === "all" || ad.platform === currentPlatform); const currentAd = filteredAds[selectedAdIndex] || filteredAds[0]; function startEditing() { if (!currentAd) return; setEditHeadlines([...currentAd.headlines]); setEditDescriptions([...currentAd.descriptions]); setEditUrl(currentAd.final_url); setEditDisplayUrl(currentAd.display_url); setEditPath1(currentAd.path1 || ""); setEditPath2(currentAd.path2 || ""); setEditPrimaryText(currentAd.primary_text || ""); setEditCtaButton(currentAd.cta_button || "تسوّق الآن"); setEditImageUrl(currentAd.image_url || ""); setEditingIndex(selectedAdIndex); } async function handleSaveEdit() { if (editingIndex === null || !currentAd || !user) return; const isSearch = currentAd.platform === "google" || currentAd.platform === "microsoft"; const socialData = isSearch ? {} : { primary_text: editPrimaryText, cta_button: editCtaButton, image_url: editImageUrl, }; // Update locally instantly setAds((prev) => { const updated = prev.map((ad) => { if (ad.id === currentAd.id) { return { ...ad, headlines: editHeadlines.filter(h => h.trim() !== ""), descriptions: editDescriptions.filter(d => d.trim() !== ""), final_url: editUrl, display_url: editDisplayUrl, path1: isSearch ? editPath1 : "", path2: isSearch ? editPath2 : "", primary_text: isSearch ? "" : editPrimaryText, cta_button: isSearch ? "Learn More" : editCtaButton, image_url: isSearch ? "" : editImageUrl, }; } return ad; }); localStorage.setItem("local_ad_creatives", JSON.stringify(updated)); return updated; }); setEditingIndex(null); try { const isPlaceholder = !process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL.includes("placeholder") || process.env.NEXT_PUBLIC_SUPABASE_URL === "your_supabase_project_url"; if (!isPlaceholder) { await supabase .from("ad_creatives") .update({ headlines: editHeadlines.filter(h => h.trim() !== ""), descriptions: editDescriptions.filter(d => d.trim() !== ""), final_url: editUrl, display_url: editDisplayUrl, path1: isSearch ? editPath1 : "", path2: isSearch ? editPath2 : "", images: socialData, }) .eq("id", currentAd.id); } } catch (err) { console.error("Error saving ad creative in DB, kept local storage change:", err); } } async function deleteAdCreative(id: string) { if (!confirm("هل أنت متأكد من حذف هذا الإعلان نهائياً؟")) return; // Update locally instantly setAds((prev) => { const updated = prev.filter((ad) => ad.id !== id); localStorage.setItem("local_ad_creatives", JSON.stringify(updated)); return updated; }); setSelectedAdIndex(0); try { const isPlaceholder = !process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL.includes("placeholder") || process.env.NEXT_PUBLIC_SUPABASE_URL === "your_supabase_project_url"; if (!isPlaceholder) { await supabase.from("ad_creatives").delete().eq("id", id); } } catch (err) { console.error("Error deleting ad creative in DB, kept local storage change:", err); } } // Google Search simulation elements const displayHeadlines = currentAd?.headlines?.slice(0, 3).join(" | ") || "عنوان الإعلان المقترح الأول | اسم متجرك"; const displayDesc1 = currentAd?.descriptions?.[0] || "الوصف الإعلاني الاحترافي الأول مصاغ بعناية فائقة لكسب اهتمام العميل."; const displayDesc2 = currentAd?.descriptions?.[1] || "الوصف الإعلاني الإضافي يبرز مميزات العرض وسرعة التوصيل."; return (
{/* Header */}

إبداع ونصوص الإعلانات - {config.name}

{currentPlatform === "all" ? "تصميم ومعاينة نصوص وتصاميم الإعلانات المطابقة تماماً لشاشات كافة المنصات" : `تحرير وتدقيق ومعاينة الإعلانات الحية لـ ${config.name} باستخدام محاكاة الأجهزة الذكية` }

{ads.length === 0 && user && ( )}
{loading && filteredAds.length === 0 ? (

جاري تحميل إبداعات الإعلانات...

) : filteredAds.length === 0 ? (

قاعدة البيانات خالية من الإعلانات

لا توجد أي إبداعات إعلانية حقيقية لـ {config.name} في قاعدة البيانات. انقر على الزر بالأسفل لتهيئة وحقن إعلانات حقيقية لجميع المنصات فوراً!

{user && ( )}
) : (
{/* Editor and list selector */}
{/* List Carousel */}
{filteredAds.map((ad, idx) => { const platformConfig = PLATFORMS[ad.platform]; return ( ); })}
{/* Read/Write Panels */} {editingIndex !== null ? ( // EDIT MODE

تحرير عناصر الإعلان ({config.name})

{/* Destination Link */}
setEditUrl(e.target.value)} className="w-full bg-[#161b27] border border-gray-750 focus:border-[#10b981] text-white text-xs rounded-xl py-2 px-3 outline-none" />
setEditDisplayUrl(e.target.value)} className="w-full bg-[#161b27] border border-gray-750 focus:border-[#10b981] text-white text-xs rounded-xl py-2 px-3 outline-none" />
{/* Platform specific options */} {currentAd.platform === "google" || currentAd.platform === "microsoft" ? ( // GOOGLE ADS EDIT INPUTS
setEditPath1(e.target.value)} className="w-full bg-[#161b27] border border-gray-750 text-white text-xs rounded-xl py-2 px-3 outline-none" />
setEditPath2(e.target.value)} className="w-full bg-[#161b27] border border-gray-750 text-white text-xs rounded-xl py-2 px-3 outline-none" />
{editHeadlines.map((headline, idx) => (
{ const copy = [...editHeadlines]; copy[idx] = e.target.value; setEditHeadlines(copy); }} placeholder={`العنوان رقم ${idx + 1}`} className="flex-1 bg-[#161b27] border border-gray-750 text-white text-xs rounded-xl py-2 px-3 outline-none" />
))}
{editDescriptions.map((desc, idx) => (